Merge pull request #568 from arcana-network/testnet

Mainnet Release

.vscode/settings.json

@@ -19,9 +19,9 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
-    "source.fixAll.markdownlint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.fixAll.markdownlint": "explicit"
   },
 
   // ===

package.json

@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@arcana/auth": "^0.1.3",
-    "@arcana/auth-core": "2.0.0-alpha.9",
-    "@arcana/key-helper": "^2.0.0-beta.3",
+    "@arcana/auth-core": "2.0.0-alpha.16",
+    "@arcana/key-helper": "^2.0.0-beta.4",
     "@arcana/scw": "^0.0.19",
     "@ethereumjs/tx": "^3.4.0",
     "@fontsource/montserrat": "^4.5.14",

src/App.vue

@@ -12,7 +12,7 @@ import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
-import { ChainType } from '@/utils/chainType'
+import { useStarterTipsStore } from '@/store/starterTips'
 import { AUTH_NETWORK } from '@/utils/constants'
 import { getImage } from '@/utils/getImage'
 import { initializeOnRampMoney } from '@/utils/onrampmoney.ramp'
@@ -24,6 +24,7 @@ const app = useAppStore()
 const modal = useModalStore()
 const requestStore = useRequestStore()
 const parentConnectionStore = useParentConnectionStore()
+const starterTipsStore = useStarterTipsStore()
 const router = useRouter()
 const { theme, expandWallet, showWallet, compactMode, sdkVersion } = toRefs(app)
 const route = useRoute()
@@ -71,10 +72,14 @@ watch(showWallet, async (newValue) => {
 
 watch(expandWallet, setIframeStyle)
 
-watch(compactMode, setIframeStyle)
+watch(compactMode, (val) => {
+  if (val) starterTipsStore.setHideStarterTips()
+  setIframeStyle()
+})
 
 watch(showRequestPage, (newValue) => {
   if (newValue) {
+    starterTipsStore.setHideStarterTips()
     modal.show = false
     router.push({ name: 'requests', params: { appId: app.id } })
   }
@@ -162,7 +167,7 @@ const showHeader = computed(() => {
         />
         <BaseModal v-if="modal.show" />
       </div>
-      <WalletFooter v-if="showFooter" />
+      <WalletFooter v-if="showFooter && !starterTipsStore.show" />
     </div>
     <div
       v-if="sdkVersion === 'v3'"

src/components/AssetsView.vue

@@ -77,7 +77,10 @@ function fetchNativeAsset() {
       : nativeAssetBalance.value.toDecimalPlaces(4).toNumber(),
     decimals: rpcStore.nativeCurrency?.decimals as number,
     symbol: rpcStore.nativeCurrency?.symbol as string,
-    image: getChainLogoUrl(Number(rpcStore.selectedRPCConfig?.chainId)),
+    image: getChainLogoUrl(
+      Number(rpcStore.selectedRPCConfig?.chainId),
+      appStore.chainType === ChainType.evm_secp256k1 ? 'EVM' : 'solana'
+    ),
   }
 }
 

src/components/ChainListModal.vue

@@ -58,7 +58,14 @@ function handleFallbackLogo(event) {
         />
         <label class="flex items-center gap-2" :for="String(chain.chainId)">
           <img
-            :src="getChainLogoUrl(chain)"
+            :src="
+              getChainLogoUrl(
+                chain,
+                appStore.chainType === ChainType.evm_secp256k1
+                  ? 'EVM'
+                  : 'solana'
+              )
+            "
             class="w-xl h-xl"
             @error="handleFallbackLogo"
           />

src/components/SignMessage.vue

@@ -70,6 +70,9 @@ function getPermissionText() {
           : 'switching a chain'
       } else response = `switching a chain`
       break
+    case '_arcana_switchAccountType':
+      response = 'switching account type'
+      break
     case 'wallet_watchAsset':
       response = ['erc721', 'erc1155'].includes(
         params.value.type?.toLowerCase()
@@ -172,6 +175,28 @@ function isDeprecatedMethod() {
       :params="props.request.request.token"
       class="flex flex-col gap-1"
     />
+    <div
+      v-else-if="method === '_arcana_switchAccountType'"
+      class="flex flex-col gap-2 text-sm"
+    >
+      <div class="flex justify-between gap-4">
+        <span class="w-[120px]">Switch Account To</span>
+        <span
+          class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+          :title="
+            params.type === 'scw'
+              ? 'Smart Contract Wallet'
+              : 'Externally Owned Address'
+          "
+        >
+          {{
+            params.type === 'scw'
+              ? 'Smart Contract Wallet'
+              : 'Externally Owned Address'
+          }}
+        </span>
+      </div>
+    </div>
     <div v-else class="flex flex-col gap-1">
       <div class="text-sm">Message</div>
       <SignMessageAdvancedInfo

src/components/UserWallet.vue

@@ -18,6 +18,7 @@ import { useAppStore } from '@/store/app'
 import useCurrencyStore from '@/store/currencies'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
+import { useStarterTipsStore } from '@/store/starterTips'
 import { useUserStore } from '@/store/user'
 import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
@@ -35,6 +36,7 @@ const props = defineProps<UserWalletProps>()
 const emit = defineEmits(['show-loader', 'hide-loader', 'refresh'])
 const router = useRouter()
 const toast = useToast()
+const starterTipsStore = useStarterTipsStore()
 
 type ModalState =
   | 'send'
@@ -227,6 +229,10 @@ async function copyToClipboard(value: string) {
         <span class="text-[#8D8D8D] text-sm">Wallet</span>
         <div
           class="dark:bg-[#313131] bg-[#FFFFFF] flex flex-col justify-between p-2 rounded-md relative"
+          :class="{
+            'z-[999] startertips_highlighted':
+              starterTipsStore.showWalletAddress,
+          }"
         >
           <Listbox v-slot="{ open }" v-model="selectedAddressType">
             <ListboxButton class="flex justify-between items-center">
@@ -259,7 +265,10 @@ async function copyToClipboard(value: string) {
                 </div>
               </button>
               <img
-                v-if="rpcStore.isGaslessConfigured"
+                v-if="
+                  rpcStore.isGaslessConfigured &&
+                  !starterTipsStore.showWalletAddress
+                "
                 :src="getImage('arrow-down.svg')"
                 class="w-xl h-xl transition-transform"
                 :class="{ 'rotate-180': open }"
@@ -350,10 +359,13 @@ async function copyToClipboard(value: string) {
         <button
           class="btn-secondary flex gap-1 justify-center p-2 items-center font-bold text-sm uppercase w-full"
           :disabled="!transakNetwork && onRampMoney === false"
+          :class="{
+            'z-[999] startertips_highlighted': starterTipsStore.showBuyButton,
+          }"
           @click.stop="handleBuy(true)"
         >
           <img :src="getImage('buy-icon.svg')" class="w-md h-md" />
-          Buy
+          <span>Buy</span>
         </button>
       </div>
     </div>

src/components/WalletHeader.vue

@@ -7,6 +7,8 @@ import { getChainLogoUrl } from '@/services/chainlist.service'
 import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
+import { useStarterTipsStore } from '@/store/starterTips'
+import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 
 type ModalState = 'receive' | 'chain-list' | false
@@ -17,6 +19,7 @@ const modalStore = useModalStore()
 const isChainListExpanded = ref(false)
 const rpcStore = useRpcStore()
 const hasChainUpdated = ref(true)
+const starterTipsStore = useStarterTipsStore()
 
 function openReceiveTokens(open) {
   modalStore.setShowModal(open)
@@ -83,10 +86,24 @@ function handleFallbackLogo(event) {
         </div>
       </div>
       <div class="flex items-center gap-3">
-        <button class="flex items-center" @click.stop="openChainList()">
-          <div v-if="hasChainUpdated" class="w-xl h-xl rounded-full">
+        <button
+          class="flex items-center startertips_highlighted"
+          :class="{ 'z-[999]': starterTipsStore.showSwitchNetwork }"
+        >
+          <div
+            v-if="hasChainUpdated"
+            class="w-xl h-xl rounded-full"
+            @click.stop="openChainList()"
+          >
             <img
-              :src="getChainLogoUrl(rpcStore.selectedRPCConfig)"
+              :src="
+                getChainLogoUrl(
+                  rpcStore.selectedRPCConfig,
+                  appStore.chainType === ChainType.evm_secp256k1
+                    ? 'EVM'
+                    : 'solana'
+                )
+              "
               :alt="rpcStore.selectedRpcConfig?.chainName"
               :title="rpcStore.selectedRpcConfig?.chainName"
               class="w-xl h-xl"

src/components/WalletSwitchEthereumChain.vue

@@ -3,7 +3,9 @@ import Decimal from 'decimal.js'
 import { computed } from 'vue'
 
 import { getChainLogoUrl } from '@/services/chainlist.service'
+import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
+import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 
 const props = defineProps({
@@ -14,6 +16,7 @@ const props = defineProps({
 })
 
 const rpcStore = useRpcStore()
+const appStore = useAppStore()
 
 const chainId = computed(() => new Decimal(props.params.chainId).toString())
 
@@ -47,7 +50,12 @@ function handleFallbackLogo(event) {
         :title="chain.chainName"
       >
         <img
-          :src="getChainLogoUrl(chain)"
+          :src="
+            getChainLogoUrl(
+              chain,
+              appStore.chainType === ChainType.evm_secp256k1 ? 'EVM' : 'solana'
+            )
+          "
           class="h-4 w-4"
           @error="handleFallbackLogo"
         />

src/index.css

@@ -130,4 +130,14 @@
     background: rgb(49 49 49 / 62%);
     backdrop-filter: blur(3.5px);
   }
+
+  .startertips {
+    @apply cursor-pointer relative;
+  }
+
+  @media (max-height: 560px) {
+    .startertips_highlighted {
+      z-index: 0;
+    }
+  }
 }

src/models/Connection.ts

@@ -16,6 +16,8 @@ type EVMRequestMethod =
   | 'wallet_switchEthereumChain'
   | 'wallet_watchAsset'
   | '_arcana_getPrivateKey'
+  | '_arcana_switchAccountType'
+  | '_arcana_getAccountType'
 
 type SolanaRequestMethod =
   | 'signAndSendTransaction'
@@ -38,6 +40,8 @@ const PERMISSIONS: Record<RequestMethod, boolean> = Object.freeze({
   wallet_switchEthereumChain: true,
   wallet_watchAsset: true,
   _arcana_getPrivateKey: false,
+  _arcana_switchAccountType: true,
+  _arcana_getAccountType: false,
   signAndSendTransaction: true,
   sendTransaction: true,
   signTransaction: true,

src/pages/MFARequiredScreen.vue

@@ -8,7 +8,6 @@ import { useAppStore } from '@/store/app'
 import { useParentConnectionStore } from '@/store/parentConnection'
 import { useUserStore } from '@/store/user'
 import { AUTH_URL, DOCS_URL } from '@/utils/constants'
-import { isInAppLogin } from '@/utils/isInAppLogin'
 import { getWindowFeatures } from '@/utils/popupProps'
 import { getStorage } from '@/utils/storageWrapper'
 
@@ -25,13 +24,14 @@ let mfaWindow: Window | null
 const storage = getStorage()
 
 async function handleProceed() {
-  const userInfo = storage.local.getUserInfo()
-  if (!userInfo) {
-    return
-  }
-  const { loginType } = userInfo
-  if (isInAppLogin(loginType)) {
-    router.push({ name: 'MFASetup', params: { appId: appStore.id } })
+  if (storage.session.getInAppLogin()) {
+    router.push({
+      name: 'MFASetup',
+      params: { appId: appStore.id },
+      query: {
+        inApp: '1',
+      },
+    })
   } else {
     cleanExit = false
     const mfaSetupPath = new URL(`mfa/${appStore.id}/setup`, AUTH_URL)