feat: Working WalletConnect support

.env.example

@@ -1,2 +1,5 @@
 # Use the testnet in development
 # ALEPH_API_URL=https://api.twentysix.testnet.network
+
+# WalletConnect
+WALLET_CONNECT_PROJECT_ID=

src/components/AccountButton.vue

@@ -1,17 +1,19 @@
 <template>
   <div style="display: inline-block">
-    <q-btn
-      v-if="!account.isConnected.value"
-      class="text-semibold border-primary-highlight gt-sm"
-      color="primary"
-      no-caps
-      rounded
-      unelevated
-      @click="connect({ connector: config.connectors[0] })"
-    >
-      <ltai-icon dark-color="white" left light-color="white" name="svguse:icons.svg#wallet" size="xs" />
-      Connect Wallet
-    </q-btn>
+    <q-btn-dropdown v-if="!account.isConnected.value" color="primary" label="Connect wallet" no-caps rounded unelevated>
+      <q-btn
+        v-for="connector in config.connectors"
+        :key="connector.uid"
+        class="row tw-mx-auto"
+        no-caps
+        rounded
+        unelevated
+        @click="connect({ connector })"
+      >
+        <ltai-icon :name="getConnectorIconName(connector.id)" class="tw-mr-1" />
+        <span>{{ connector.name }}</span>
+      </q-btn>
+    </q-btn-dropdown>
     <q-btn-dropdown
       v-else
       :label="`${account.address.value?.slice(0, 4)}...${account.address.value?.slice(-2)}`"
@@ -74,4 +76,17 @@ watchEffect((onCleanup) => {
   });
   onCleanup(unwatch);
 });
+
+const getConnectorIconName = (connectorId: string): string => {
+  switch (connectorId) {
+    case 'io.rabby':
+      return 'svguse:icons.svg#rabby';
+    case 'io.metamask':
+      return 'svguse:icons.svg#metamask';
+    case 'walletConnect':
+      return 'svguse:icons.svg#walletConnect';
+    default:
+      return 'svguse:icons.svg#wallet';
+  }
+};
 </script>

src/config/wagmi.ts

@@ -1,10 +1,14 @@
 import { createConfig, http } from '@wagmi/vue';
 import { base, baseSepolia } from '@wagmi/vue/chains';
-import { injected } from '@wagmi/connectors';
+import { walletConnect } from '@wagmi/vue/connectors';
 
 export const config = createConfig({
   chains: [base, baseSepolia],
-  connectors: [injected()],
+  connectors: [
+    walletConnect({
+      projectId: process.env.WALLET_CONNECT_PROJECT_ID!,
+    }),
+  ],
   transports: {
     [base.id]: http(),
     [baseSepolia.id]: http(),