feat: Make EVM wallet connector

.env.example

@@ -14,3 +14,4 @@ SUBSQUID_ENDPOINT=""
 RAMP_API_KEY=""
 TRANSAK_API_KEY=""
 TRANSAK_ENV="" #STAGING|PRODUCTION
+WALLET_CONNECT_PROJECT_ID=""

components/common/ChainDropdown.vue

@@ -46,7 +46,7 @@ const props = withDefaults(
 
 const route = useRoute()
 const { setUrlPrefix, urlPrefix } = usePrefix()
-const { availableChains: allChains } = useChain()
+const allChains = useAvailableChainsOptions()
 const { redirectAfterChainChange } = useChainRedirect()
 const { isMobile } = useViewport()
 

components/common/ConnectWallet/ConnectWalletModal/ConnectWalletModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="wallet-modal-container flex flex-col"
+    data-testid="wallet-connect-sidebar-modal">
+    <NeoModalHead
+      :title="
+        showAccount ? $t('profile.page') : $t('walletConnect.walletHeading')
+      "
+      @close="emit('close', ModalCloseType.BACK)" />
+
+    <section v-if="showAccount">
+      <WalletAsset />
+    </section>
+
+    <template v-else>
+      <div
+        v-if="disconnecting"
+        class="flex items-start justify-center pt-10 h-full">
+        <span class="text-k-grey inline-flex gap-1">
+          {{ $t('disconnecting') }}
+          <div class="dots w-2" />
+        </span>
+      </div>
+
+      <template v-else>
+        <WalletTabs v-model="selectedTab" />
+
+        <ConnectWalletModalSubstrate
+          v-if="selectedTab === 'SUB'"
+          @select="setAccount" />
+
+        <ConnectWalletModalEvm v-else class="!px-7" @select="setAccount" />
+      </template>
+
+      <ConnectWalletModalMnemonicNotice />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoModalHead } from '@kodadot1/brick'
+import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
+import { ModalCloseType } from '@/components/navbar/types'
+import ConnectWalletModalEvm from './Evm.vue'
+import ConnectWalletModalSubstrate from './Substrate.vue'
+import ConnectWalletModalMnemonicNotice from './MnemonicNotice.vue'
+import WalletTabs from './WalletTabs.vue'
+import { type ChainVM, DEFAULT_VM_PREFIX } from '@kodadot1/static'
+
+const emit = defineEmits(['close', 'connect'])
+
+const { urlPrefix, setUrlPrefix } = usePrefix()
+const { redirectAfterChainChange } = useChainRedirect()
+const { selected: account, disconnecting } = storeToRefs(useWalletStore())
+const identityStore = useIdentityStore()
+
+const selectedTab = ref<ChainVM>('SUB')
+
+const showAccount = computed(() => Boolean(account.value))
+
+const setAccount = (account: Auth) => {
+  identityStore.setAuth(account)
+
+  if (
+    !getAvailableChainsByVM(selectedTab.value)
+      .map(({ value }) => value)
+      .includes(urlPrefix.value)
+  ) {
+    const newChain = DEFAULT_VM_PREFIX[selectedTab.value]
+    setUrlPrefix(newChain)
+    redirectAfterChainChange(newChain)
+  }
+
+  emit('connect', account)
+}
+
+watch([urlPrefix], () => {
+  emit('close', ModalCloseType.NAVIGATION)
+})
+</script>

components/common/ConnectWallet/ConnectWalletModal/Evm.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="!mt-6 h-full">
+    <NeoButton
+      variant="k-accent"
+      no-shadow
+      :loading="isConnecting"
+      :disabled="isConnecting"
+      loading-with-label
+      size="large"
+      class="w-full"
+      @click="openModal">
+      <div class="inline-flex gap-3">
+        <span>
+          {{ isConnecting ? 'Connecting' : 'Connect with Web3Modal' }}
+        </span>
+        <NeoIcon icon="arrow-right" />
+      </div>
+    </NeoButton>
+  </div>
+</template>
+<script lang="ts" setup>
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
+const emits = defineEmits(['select'])
+
+const { openModal, address, isConnected, isConnecting } = useWeb3Modal()
+const walletStore = useWalletStore()
+
+watch([address, isConnected], ([address, isConnected]) => {
+  if (address && isConnected) {
+    walletStore.setWallet({
+      address: address as string,
+      vm: 'EVM',
+    })
+    emits('select', { address })
+  }
+})
+</script>

components/common/ConnectWallet/ConnectWalletModal/MnemonicNotice.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="bg-k-grey-light p-4 flex items-center mx-6">
+    <NeoIcon class="ml-1" icon="circle-info" variant="k-grey" />
+    <div class="text-xs text-neutral-7 ml-3">
+      {{ $t('walletConnect.authText') }}
+    </div>
+  </div>
+
+  <div class="px-6 !pb-6 pt-2">
+    <a
+      class="text-sm text-k-blue hover:text-k-blue-hover flex items-center justify-center"
+      href="https://hello.kodadot.xyz/tutorial/wallet"
+      target="_blank"
+      rel="nofollow noopener noreferrer">
+      {{ $t('walletConnect.walletLink') }}
+    </a>
+  </div>
+</template>