Merge pull request #295 from arcana-network/testnet

Mainnet release 1.0.4
arcana-network · May 2, 2023 · 2ba48ee · 2ba48ee
2 parents 7a29c0b + 515b862
commit 2ba48ee
Show file tree

Hide file tree

Showing 56 changed files with 2,352 additions and 544 deletions.
diff --git a/.env.example b/.env.example
@@ -5,7 +5,7 @@ VUE_APP_ENABLE_SENTRY=
 VUE_APP_GOOGLE_ANALYTICS_ID=
 VUE_APP_SENTRY_DSN=
 VUE_APP_SENTRY_TRACING_ORIGINS=
-VUE_APP_WALLET_AUTH_REDIRECT_URL=
+VUE_APP_WALLET_AUTH_URL=
 VUE_APP_WALLET_GATEWAY=
 VUE_APP_WALLET_RPC_URL=
 VUE_APP_WALLET_DOMAIN=

diff --git a/netlify.toml b/netlify.toml
@@ -8,7 +8,20 @@
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
     Content-Security-Policy = '''
-      font-src 'self' data: https://*.cloudfront.net;
+      font-src 'self' https://*.cloudfront.net data:;
+      img-src 'self' data: https:;
+      script-src 'self' 'unsafe-inline' https://*.cloudfront.net *.google-analytics.com *.googletagmanager.com;
+      style-src 'self' 'unsafe-inline' https://*.cloudfront.net;
+      frame-src *.arcana.network *.transak.com *.ramp.network;
+    '''
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    cache-control = "max-age=31536000, immutable"
+    X-XSS-Protection = "1; mode=block"
+    X-Content-Type-Options = "nosniff"
+    Content-Security-Policy = '''
+      font-src 'self' https://*.cloudfront.net data:;
       img-src 'self' data: https:;
       script-src 'self' 'unsafe-inline' https://*.cloudfront.net *.google-analytics.com *.googletagmanager.com;
       style-src 'self' 'unsafe-inline' https://*.cloudfront.net;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@arcana/auth": "^0.1.3",
-    "@arcana/auth-core": "^1.0.0-beta.5",
-    "@arcana/key-helper": "^1.0.0-beta.2",
+    "@arcana/auth-core": "^1.0.0-beta.6",
+    "@arcana/key-helper": "^1.0.0-beta.7",
     "@ethereumjs/tx": "^3.4.0",
     "@fontsource/montserrat": "^4.5.14",
     "@fontsource/sora": "^4.5.12",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -8,8 +8,8 @@
       http-equiv="Content-Security-Policy"
       content="upgrade-insecure-requests"
     />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.svg" />
+    <title>Arcana Wallet</title>
     <style>
       html {
         overflow-x: hidden !important;
@@ -21,9 +21,8 @@
   <body>
     <noscript>
       <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
-        properly without JavaScript enabled. Please enable it to
-        continue.</strong
+        >We're sorry but Arcana Wallet doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
       >
     </noscript>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import WalletFooter from '@/components/AppFooter.vue'
 import BaseModal from '@/components/BaseModal.vue'
+import type { Theme } from '@/models/Theme'
 import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRequestStore } from '@/store/request'
@@ -19,6 +20,11 @@ const { theme } = toRefs(app)
 const isLoading = ref(false)
 const route = useRoute()
 
+const url = new URL(window.location.href)
+if (url.searchParams.get('theme')) {
+  theme.value = url.searchParams.get('theme') as Theme
+}
+
 const showRequestPage = computed(() => {
   return requestStore.areRequestsPendingForApproval
 })
@@ -33,6 +39,13 @@ watch(showRequestPage, () => {
     router.push({ name: 'requests', params: { appId: app.id } })
   }
 })
+
+const showFooter = computed(() => {
+  return (
+    !['requests', 'MFARequired', 'MFARestore'].includes(route.name as string) ||
+    (route.name === 'requests' && !requestStore.pendingRequest)
+  )
+})
 </script>
 
 <template>
@@ -48,9 +61,7 @@ watch(showRequestPage, () => {
       <RouterView class="min-h-full" />
       <BaseModal v-if="modal.show" />
     </div>
-    <WalletFooter
-      v-if="route.name !== 'requests' || !requestStore.pendingRequest"
-    />
+    <WalletFooter v-if="showFooter" />
   </div>
 </template>
 
@@ -90,7 +101,7 @@ watch(showRequestPage, () => {
   --fs-400: 16px;
   --fs-350: 14px;
   --fs-300: 12px;
-  --fs-250: 10px;
+  --fs-250: 12px;
   --p-500: 20px;
   --p-450: 18px;
   --p-400: 16px;
@@ -108,7 +119,7 @@ watch(showRequestPage, () => {
     --fs-400: 12px;
     --fs-350: 10px;
     --fs-300: 8px;
-    --fs-250: 6px;
+    --fs-250: 8px;
     --p-500: 16px;
     --p-550: 14px;
     --p-400: 12px;

diff --git a/src/assets/images/ethereum-icon.png b/src/assets/images/ethereum-icon.png
diff --git a/src/assets/images/hide-eye.png b/src/assets/images/hide-eye.png
diff --git a/src/assets/images/polygon-icon.png b/src/assets/images/polygon-icon.png
diff --git a/src/assets/images/ramp.png b/src/assets/images/ramp.png
diff --git a/src/assets/images/show-eye.png b/src/assets/images/show-eye.png
diff --git a/src/assets/images/token-logos/blockchain-icon.png b/src/assets/images/token-logos/blockchain-icon.png
diff --git a/src/assets/images/transak.png b/src/assets/images/transak.png
diff --git a/src/components/AddNetwork.vue b/src/components/AddNetwork.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ethers } from 'ethers'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
@@ -29,33 +30,50 @@ function isExistingRpcUrl(url) {
   })
 }
 
-function isExistingChainId(chainId) {
-  return rpcStore.rpcConfigList.some((chain) => chain.chainId === chainId)
+function isExistingChain(chainId) {
+  return rpcStore.rpcConfigList.find(
+    (chain) => Number(chain.chainId) === Number(chainId)
+  )
 }
 
-function handleSubmit() {
+async function handleSubmit() {
   const rpcUrl = rpcConfig.value.rpcUrl
   const chainId = rpcConfig.value.chainId
+  const existingChain = isExistingChain(chainId)
   if (isExistingRpcUrl(rpcUrl)) {
-    toast.error(`RPC URL - ${rpcUrl} already exists, please use different one`)
-  } else if (isExistingChainId(Number(chainId))) {
-    toast.error(
-      `Chain ID - ${chainId} already exists, please use different one`
+    return toast.error(
+      `RPC URL - ${rpcUrl} already exists, please use different one`
     )
   } else {
-    const payload = {
-      chainName: rpcConfig.value.networkName,
-      chainId: rpcConfig.value.chainId,
-      blockExplorerUrls: [rpcConfig.value.explorerUrl],
-      rpcUrls: [rpcConfig.value.rpcUrl],
-      favicon: 'blockchain-icon',
-      nativeCurrency: {
-        symbol: rpcConfig.value.currencySymbol,
-        decimals: 18,
-      },
+    const provider = new ethers.providers.JsonRpcProvider(
+      rpcConfig.value.rpcUrl
+    )
+    const chainId = await provider.getNetwork()
+    if (Number(chainId.chainId) !== Number(rpcConfig.value.chainId)) {
+      return toast(`Incorrect combination of chainId and rpcUrl`)
+    }
+    if (existingChain) {
+      rpcStore.setRpcConfig({
+        ...existingChain,
+        rpcUrls: [rpcConfig.value.rpcUrl],
+      })
+      rpcStore.setSelectedChainId(existingChain.chainId)
+    } else {
+      const payload = {
+        chainName: rpcConfig.value.networkName,
+        chainId: rpcConfig.value.chainId,
+        blockExplorerUrls: [rpcConfig.value.explorerUrl],
+        rpcUrls: [rpcConfig.value.rpcUrl],
+        favicon: 'blockchain-icon',
+        nativeCurrency: {
+          symbol: rpcConfig.value.currencySymbol,
+          decimals: 18,
+        },
+        isCustom: true,
+      }
+      rpcStore.addNetwork(payload)
+      rpcStore.setSelectedChainId(payload.chainId)
     }
-    rpcStore.addNetwork(payload)
-    rpcStore.setSelectedChainId(payload.chainId)
     emit('close')
   }
 }

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
@@ -9,10 +9,10 @@ import { useImage } from '@/utils/useImage'
 const getImage = useImage()
 const userStore = useUserStore()
 const appStore = useAppStore()
-const router = useRouter()
+const route = useRoute()
 
 const currentRoute = computed(() => {
-  return router.currentRoute.value.name
+  return route.name
 })
 
 function isCurrentRoute(pathName) {

diff --git a/src/components/AssetsView.vue b/src/components/AssetsView.vue
@@ -18,7 +18,9 @@ let assetsPolling
 
 function fetchStoredAssetContracts(): AssetContract[] {
   const assetContracts = getStorage().local.getItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/asset-contracts`
+    `${userStore.walletAddress}/${Number(
+      rpcStore.selectedRpcConfig?.chainId
+    )}/asset-contracts`
   )
   if (assetContracts) {
     return JSON.parse(assetContracts) as AssetContract[]
@@ -106,7 +108,7 @@ rpcStore.$subscribe(getAssetsBalance)
 
 <template>
   <div class="flex flex-col px-4 divide-y-[1px] divide-gray-600">
-    <div class="flex flex-col py-5 gap-5">
+    <div v-if="assets.length" class="flex flex-col py-5 gap-5">
       <div
         v-for="asset in assets"
         :key="`asset-${asset.symbol}`"
@@ -132,6 +134,11 @@ rpcStore.$subscribe(getAssetsBalance)
         </div>
       </div>
     </div>
+    <div v-else class="flex flex-col flex-grow py-5 gap-5">
+      <span class="color-secondary m-auto font-semibold text-sm sm:text-xs"
+        >No tokens added</span
+      >
+    </div>
     <div class="flex justify-center">
       <div
         class="flex py-4 gap-2 items-center cursor-pointer"

diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
@@ -4,7 +4,7 @@
   >
     <div
       id="modal-container"
-      class="container p-3 sm:p-2 min-w-full rounded-lg overflow-auto max-h-full"
+      class="container p-3 sm:p-2 w-full max-w-[40rem] rounded-lg overflow-auto max-h-full"
     ></div>
   </div>
 </template>

diff --git a/src/components/ChangeChain.vue b/src/components/ChangeChain.vue
@@ -60,7 +60,7 @@ watch(selectedChain, async () => {
 
     <div
       v-if="open"
-      class="debossed-card p-3 sm:p-1 h-48 rounded-[10px] -mt-2 divide-y-[1px] divide-gray-600 flex flex-col"
+      class="debossed-card p-3 sm:p-1 h-48 rounded-[10px] mt-1 divide-y-[1px] divide-gray-600 flex flex-col z-10 relative"
     >
       <ListboxOptions
         class="text-base sm:text-[12px] space-y-3 sm:space-y-2 rounded-b-lg py-2 flex-1 overflow-auto"