Staging

frontend/components/parts/form/Wallet.vue

@@ -12,25 +12,38 @@ const { connect, connectors, pendingConnector } = useConnect();
     <div class="my-8 text-center">
       <h3 class="mb-6">Choose a wallet</h3>
       <p>
-        To proceed to claiming your MENT token, choose your preferred wallet and connect it by clicking below.
+        To proceed to claiming your MENT token, choose your preferred wallet and connect it by
+        clicking below.
       </p>
     </div>
 
     <n-space size="large" vertical>
-      <Btn
-        v-for="(connector, key) in connectors"
-        :key="key"
-        type="secondary"
-        size="large"
-        :loading="connector.id === pendingConnector?.id"
-        :disabled="!connector.ready"
-        @click="connect({ connector })"
-      >
-        <span class="inline-flex gap-2 items-center">
-          <NuxtIcon :name="connector.id" class="text-xl" filled />
-          <span class="text-black">{{ connector.name }}</span>
-        </span>
-      </Btn>
+      <template v-for="connector in connectors">
+        <Btn
+          v-if="!connector.ready && connector.id === 'metaMask'"
+          type="secondary"
+          size="large"
+          href="https://metamask.app.link/dapp/nft.ment.si"
+        >
+          <span class="inline-flex gap-2 items-center">
+            <NuxtIcon :name="connector.id" class="text-xl" filled />
+            <span class="text-black">{{ connector.name }}</span>
+          </span>
+        </Btn>
+        <Btn
+          v-else
+          type="secondary"
+          size="large"
+          :loading="connector.id === pendingConnector?.id"
+          :disabled="!connector.ready"
+          @click="connect({ connector })"
+        >
+          <span class="inline-flex gap-2 items-center">
+            <NuxtIcon :name="connector.id" class="text-xl" filled />
+            <span class="text-black">{{ connector.name }}</span>
+          </span>
+        </Btn>
+      </template>
     </n-space>
   </div>
 </template>