refactor: create liquid address on button click (#74)

src/views/wallet/Receive.tsx

@@ -2,7 +2,7 @@ import { ArrowLeft, ArrowUpDown, ChevronsUpDown } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { useQRCode } from 'next-qrcode';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { Button } from '@/components/ui/button-v2';
@@ -113,6 +113,8 @@ export const Receive = () => {
     { data: liquidData, loading: liquidLoading, error: liquidError },
   ] = useCreateOnchainAddressMutation({
     variables: { input: { wallet_account_id: liquidAccountId } },
+    onCompleted: data =>
+      setReceiveString(data.wallets.create_onchain_address.address),
     onError: err => {
       const messages = handleApolloError(err);
 
@@ -124,21 +126,15 @@ export const Receive = () => {
     },
   });
 
-  useEffect(() => {
-    if (!liquidAccountId || liquidData) return;
-
-    createLiquidAddress();
-  }, [liquidAccountId, liquidData, createLiquidAddress]);
-
-  const liquidAddress = useMemo(() => {
+  const liquidAddressFormatted = useMemo(() => {
     if (!liquidData?.wallets.create_onchain_address.address) {
-      return { address: '', formatted: '' };
+      return '';
     }
 
     const address = liquidData.wallets.create_onchain_address.address;
     const formatted = (address.match(/.{1,6}/g) || []).join(' - ');
 
-    return { address, formatted };
+    return formatted;
   }, [liquidData]);
 
   const [createLightningInvoice, { loading: invoiceLoading }] =
@@ -181,9 +177,9 @@ export const Receive = () => {
           : t('Wallet.amount-ln');
       case 'Liquid Bitcoin':
       case 'Tether USD':
-        return liquidAddress.formatted;
+        return liquidAddressFormatted;
     }
-  }, [receive, bancoCode, receiveString, liquidAddress, t]);
+  }, [receive, bancoCode, receiveString, liquidAddressFormatted, t]);
 
   const {
     data: priceData,
@@ -263,7 +259,7 @@ export const Receive = () => {
                         break;
                       case 'Liquid Bitcoin':
                       case 'Tether USD':
-                        setReceiveString(liquidAddress.address);
+                        createLiquidAddress();
                         break;
                     }
                   }}