Merge pull request #10052 from Jarsen136/issue-10041

feat: New to koda? Connect wallet sidebar improvements

assets/styles/components/_connect-wallet.scss

@@ -68,7 +68,7 @@
     .wallet-menu-item {
       width: 100%;
       .button {
-        @apply w-full text-xl px-8 py-2.5 rounded-none border-none transition-none;
+        @apply w-full text-xl px-6 py-2.5 rounded-none border-none transition-none;
         background: unset;
         box-shadow: none !important;
         > span {

components/codeChecker/CodeChecker.vue

@@ -24,7 +24,7 @@
               <NeoIcon icon="circle" pack="fas" class="text-[4px] mr-2" />
               {{ $t(item.title) }}
             </div>
-            <NeoIcon icon="arrow-up-right" class="text-neutral-7 text-[14px]" />
+            <NeoIcon icon="arrow-up-right" class="text-neutral-7 text-sm" />
           </a>
         </div>
       </div>

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -18,73 +18,127 @@
           v-for="(wallet, index) in installedWallet"
           :key="index"
           :wallet="wallet"
-          @setAccount="setAccount" />
+          @set-account="setAccount" />
+      </div>
+
+      <div v-if="showUninstalledWallet" class="!px-8 !pt-6">
+        <div class="font-bold capitalize mb-3 text-xl">
+          {{ $i18n.t('walletConnect.newToKoda') }}
+        </div>
+        <div class="text-sm !mb-6">
+          {{ $i18n.t('walletConnect.startConnect') }}
+        </div>
+        <div class="border py-4 !px-6 !mb-6 bg-k-grey-light border-k-grey">
+          <div class="mb-3">{{ $i18n.t('walletConnect.quickSteps') }}</div>
+          <ol class="text-sm font-bold pl-4">
+            <li class="mb-3">
+              {{ $i18n.t('walletConnect.chooseWallet')
+              }}<span class="font-normal">{{
+                $i18n.t('walletConnect.chooseBelow')
+              }}</span>
+            </li>
+            <li>
+              {{ $i18n.t('walletConnect.downloadAndConnect')
+              }}<span class="font-normal">{{
+                $i18n.t('walletConnect.setUpConnect')
+              }}</span>
+            </li>
+          </ol>
+        </div>
+        <div class="font-bold mb-3 capitalize">
+          {{ $i18n.t('walletConnect.selectWallet') }}
+        </div>
       </div>
 
       <a
+        v-else
         class="flex items-center pt-4 pb-3 text-xs text-k-grey mx-6 my-0 hover:text-k-hover-grey border-t border-k-shade2"
         @click="toggleShowUninstalledWallet">
         {{ $i18n.t('walletConnect.moreOption') }}
         <NeoIcon
-          v-if="showUninstalledWallet"
+          v-if="isUninstalledWalletExpand"
           class="ml-1"
           icon="chevron-down" />
 
         <NeoIcon v-else class="ml-1" icon="chevron-right" />
       </a>
-      <div v-if="showUninstalledWallet" class="buttons">
+      <div
+        v-if="showUninstalledWallet || isUninstalledWalletExpand"
+        class="buttons">
         <WalletMenuItem
           v-for="wallet in uninstalledWallet"
           :key="wallet.name"
           :wallet="wallet" />
       </div>
+
+      <div v-if="showUninstalledWallet" class="px-6">
+        <hr class="!my-0" />
+        <NeoButton
+          class="!w-full !my-6"
+          variant="outlined-rounded"
+          @click="checkWallet">
+          {{ $t('walletConnect.walletHeading') }}
+          <NeoIcon icon="arrow-right" />
+        </NeoButton>
+      </div>
     </section>
 
-    <div
-      v-if="!showAccount"
-      class="bg-k-grey-light p-4 flex items-center mx-6 my-4">
-      <NeoIcon class="ml-1" icon="circle-info" pack="fass" variant="k-grey" />
+    <div v-if="!showAccount" 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">
         {{ $i18n.t('walletConnect.authText') }}
       </div>
     </div>
 
-    <footer v-if="!showAccount" class="px-6 py-4">
-      <div>{{ $i18n.t('walletConnect.walletQuestion') }}</div>
-      <div class="text-xs">
-        {{ $i18n.t('walletConnect.walletAnswer') }}
-      </div>
+    <div v-if="!showAccount" class="px-6 !pb-6 pt-2">
       <a
-        class="text-xs text-k-blue hover:text-k-blue-hover flex items-center"
-        href="https://docs.kodadot.xyz/tutorial-overview.html"
+        class="text-sm text-k-blue hover:text-k-blue-hover flex items-center flex justify-center"
+        href="https://hello.kodadot.xyz/tutorial/wallet"
         target="_blank"
         rel="nofollow noopener noreferrer">
-        <NeoIcon class="mr-2" icon="circle-info" />
         {{ $i18n.t('walletConnect.walletLink') }}
       </a>
-    </footer>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { SupportedWallets } from '@/utils/config/wallets'
 import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
-import { NeoIcon, NeoModalHead } from '@kodadot1/brick'
+import { NeoButton, NeoIcon, NeoModalHead } from '@kodadot1/brick'
 import { Auth, useIdentityStore } from '@/stores/identity'
 import WalletMenuItem from '@/components/common/ConnectWallet/WalletMenuItem.vue'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
 import { ModalCloseType } from '@/components/navbar/types'
 const { $i18n } = useNuxtApp()
 const selectedWalletProvider = ref<BaseDotsamaWallet>()
 const forceWalletSelect = ref(false)
+const wallets = ref<BaseDotsamaWallet[]>([])
 const identityStore = useIdentityStore()
 const { urlPrefix } = usePrefix()
 const emit = defineEmits(['close', 'connect'])
-
+const { toast } = useToast()
 const account = computed(() => identityStore.auth.address)
 const showAccount = computed(() => account.value)
+const installedWallet = computed(() => {
+  return wallets.value.filter((wallet) => wallet.installed)
+})
+const uninstalledWallet = computed(() => {
+  return wallets.value.filter((wallet) => !wallet.installed)
+})
+const showUninstalledWallet = computed(() => !installedWallet.value.length)
+
+const refreshWallets = () => {
+  wallets.value = SupportedWallets()
+}
+
+const checkWallet = () => {
+  refreshWallets()
+  if (showUninstalledWallet.value) {
+    toast('Please download a wallet first')
+  }
+}
 
-const wallets = SupportedWallets()
 const setAccount = (account: Auth) => {
   forceWalletSelect.value = false
   identityStore.setAuth(account)
@@ -95,16 +149,9 @@ const setAccount = (account: Auth) => {
   }
 }
 
-const installedWallet = computed(() => {
-  return wallets.filter((wallet) => wallet.installed)
-})
-const uninstalledWallet = computed(() => {
-  return wallets.filter((wallet) => !wallet.installed)
-})
-const showUninstalledWallet = ref(!installedWallet.value.length)
-
+const isUninstalledWalletExpand = ref(!showUninstalledWallet.value)
 const toggleShowUninstalledWallet = () => {
-  showUninstalledWallet.value = !showUninstalledWallet.value
+  isUninstalledWalletExpand.value = !isUninstalledWalletExpand.value
 }
 
 watch(account, (account) => {
@@ -114,4 +161,6 @@ watch(account, (account) => {
 watch([urlPrefix], () => {
   emit('close', ModalCloseType.NAVIGATION)
 })
+
+onMounted(refreshWallets)
 </script>

components/common/ConnectWallet/WalletMenuItem.vue

@@ -22,7 +22,12 @@
             </NeoTag>
           </span>
 
-          <NeoIcon v-if="!wallet.installed" icon="download" />
+          <div
+            v-if="!wallet.installed"
+            class="text-xs capitalize text-neutral-7">
+            {{ $t('moreActions.download') }}
+            <NeoIcon icon="download" />
+          </div>
 
           <NeoIcon v-else-if="showAccountList" icon="chevron-down" />
 

locales/en.json

@@ -1163,16 +1163,22 @@
     "confirm": "Confirm",
     "warning": "Warning",
     "moreOption": "More Options",
-    "walletQuestion": "Don't have a wallet yet?",
-    "walletAnswer": "Wallets are used to send, receive, store, and display digital assets",
-    "walletLink": "Learn about wallets",
+    "walletLink": "Learn more about wallets",
     "walletHeading": "Connect Wallet",
     "walletDetails": "Your Wallet",
     "authText": "KodaDot will never ask you to provide your mnemonic phrase or private key.",
     "authTip": "Waiting For Authorization",
     "understand": "I understand",
     "learnText": "Learn how to Connect",
-    "downloadExtension": "Download extension"
+    "downloadExtension": "Download extension",
+    "newToKoda": "New to Koda?",
+    "startConnect": "Start trading NFTs by connecting a digital wallet.",
+    "quickSteps": "Quick Steps to Begin:",
+    "chooseWallet":"Choose a Wallet: ",
+    "chooseBelow": "Choose from trusted providers below.",
+    "downloadAndConnect": "Download and Connect: ",
+    "setUpConnect": "Set up your wallet, then return to connect.",
+    "selectWallet": "select your wallet"
   },
   "landing": {
     "newNftHeading": "New to NFTs?",

utils/config/wallets.ts

@@ -127,26 +127,16 @@ export const WalletConfigMap: IWalletConfigMap = {
   ),
 }
 
-export const SubstrateWallets = [
-  SupportWalletExtension.PolkadotJs,
-  SupportWalletExtension.Clover,
-  SupportWalletExtension.Math,
-  SupportWalletExtension.Nova,
-  SupportWalletExtension.SubWallet,
-  SupportWalletExtension.Talisman,
-  SupportWalletExtension.Enkrypt,
-]
-
 const MobileWalletExtensionList = [
-  SupportWalletExtension.Math,
   SupportWalletExtension.Nova,
   SupportWalletExtension.SubWallet,
+  SupportWalletExtension.Math,
 ]
 const PCWalletExtensionList = [
-  SupportWalletExtension.Enkrypt,
   SupportWalletExtension.Talisman,
-  SupportWalletExtension.PolkadotJs,
   SupportWalletExtension.SubWallet,
+  SupportWalletExtension.PolkadotJs,
+  SupportWalletExtension.Enkrypt,
   SupportWalletExtension.Clover,
 ]
 
@@ -187,11 +177,6 @@ export function getWalletBySource(
   })
 }
 
-export function isWalletInstalled(source: string | unknown): boolean {
-  const wallet = getWalletBySource(source)
-  return wallet?.installed as boolean
-}
-
 export type SubscriptionFn = (
   accounts: WalletAccount[] | undefined,
 ) => void | Promise<void>