feat: integrate wallet connect

.env.example

@@ -4,3 +4,4 @@ NUXT_PUBLIC_MAINTENANCE=false
 NUXT_PUBLIC_TESTING=true
 #PROXY_DOMAIN=rotki.com
 #PROXY_INSECURE=true #When set it will proxy to http instead of https
+NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

components/checkout/pay/CryptoPage.vue

@@ -1,53 +1,39 @@
 <script lang="ts" setup>
-import detectEthereumProvider from '@metamask/detect-provider';
 import { get, set } from '@vueuse/core';
 import { useMainStore } from '~/store';
 import { PaymentError } from '~/types/codes';
 import { PaymentMethod } from '~/types/payment';
 import { assert } from '~/utils/assert';
-import { useLogger } from '~/utils/use-logger';
-import type { CryptoPayment, PaymentStep, Provider } from '~/types';
+import type { CryptoPayment, PaymentStep } from '~/types';
 
 const { t } = useI18n();
 
 const loading = ref(false);
 const data = ref<CryptoPayment | null>(null);
-const metamaskSupport = ref(false);
 
 const { cryptoPayment, switchCryptoPlan, deletePendingPayment, subscriptions } = useMainStore();
 const { plan } = usePlanParams();
 const { currency } = useCurrencyParams();
 const { subscriptionId } = useSubscriptionIdParam();
 const route = useRoute();
 
-let provider: Provider | null = null;
-
 const config = useRuntimeConfig();
 const {
-  payWithMetamask,
+  web3Modal,
+  connected,
+  pay,
   state: currentState,
   error,
   clearErrors,
 } = useWeb3Payment(
   data,
-  () => {
-    assert(provider);
-    return provider;
-  },
   !!config.public.testing,
 );
 
-const logger = useLogger();
-
 onMounted(async () => {
   const selectedPlan = get(plan);
   const selectedCurrency = get(currency);
   if (selectedPlan && selectedCurrency) {
-    provider = await detectEthereumProvider();
-    logger.debug(
-      `provider: ${!!provider}, is metamask: ${provider?.isMetaMask}`,
-    );
-    set(metamaskSupport, !!provider);
     set(loading, true);
     const subId = get(subscriptionId);
     const result = await cryptoPayment(selectedPlan, selectedCurrency, subId);
@@ -182,9 +168,10 @@ async function changePaymentMethod() {
         :pending="pending || currentState === 'pending'"
         v-bind="{ success, failure, status }"
         :loading="loading"
-        :metamask-support="metamaskSupport"
         :plan="plan"
-        @pay="payWithMetamask()"
+        :connected="connected"
+        @pay="pay()"
+        @connect="web3Modal?.open()"
         @change="changePaymentMethod()"
         @clear:errors="clearErrors()"
       />

components/checkout/pay/CryptoPaymentForm.vue

@@ -15,13 +15,14 @@ const props = defineProps<{
   success: boolean;
   failure: boolean;
   loading: boolean;
-  metamaskSupport: boolean;
+  connected: boolean;
   status: PaymentStep;
 }>();
 
 const emit = defineEmits<{
   (e: 'change'): void;
   (e: 'pay'): void;
+  (e: 'connect'): void;
   (e: 'clear:errors'): void;
 }>();
 
@@ -96,7 +97,8 @@ const stopWatcher = watchEffect(() => {
 const { copy: copyToClipboard } = useClipboard({ source: qrText });
 const isBtc = computed(() => get(data).chainName === 'bitcoin');
 
-const payWithMetamask = () => emit('pay');
+const pay = () => emit('pay');
+const connect = () => emit('connect');
 const changePaymentMethod = () => emit('change');
 const clearErrors = () => emit('clear:errors');
 const css = useCssModule();
@@ -197,21 +199,43 @@ const showChangePaymentDialog = ref(false);
       </div>
       <div
         v-if="!isBtc"
-        class="grow"
+        class="grow flex gap-1"
       >
         <RuiButton
-          :disabled="!metamaskSupport || processing"
-          :loading="processing"
+          v-if="!connected"
           color="primary"
+          :loading="processing"
+          :disabled="processing"
           size="lg"
           class="w-full"
-          @click="payWithMetamask()"
+          @click="connect()"
         >
-          <template #prepend>
-            <MetamaskIcon class="h-6 w-6 mr-2" />
-          </template>
-          {{ t('home.plans.tiers.step_3.metamask.action') }}
+          {{ t('home.plans.tiers.step_3.metamask.connect_wallet') }}
         </RuiButton>
+        <template v-else>
+          <RuiButton
+            :loading="processing"
+            :disabled="processing"
+            color="primary"
+            size="lg"
+            class="w-full"
+            @click="pay()"
+          >
+            {{ t('home.plans.tiers.step_3.metamask.pay_with_wallet') }}
+          </RuiButton>
+
+          <RuiButton
+            size="lg"
+            color="secondary"
+            class="!px-3"
+            @click="connect()"
+          >
+            <RuiIcon
+              name="link"
+              size="20"
+            />
+          </RuiButton>
+        </template>
       </div>
     </div>
   </div>