Merge pull request #166 from blend-capital/add-wallet-connect

feat: add wallet connect to wallet-kit and add escape from building and signing overlay

.env.production

@@ -2,6 +2,8 @@ NEXT_PUBLIC_STELLAR_EXPERT_URL=https://stellar.expert/explorer/public
 NEXT_PUBLIC_RPC_URL=https://soroban-rpc.creit.tech/
 NEXT_PUBLIC_HORIZON_URL=https://horizon.stellar.org
 NEXT_PUBLIC_PASSPHRASE=Public Global Stellar Network ; September 2015
+NEXT_PUBLIC_WALLET_CONNECT_URL=https://mainnet.blend.capital
+NEXT_PUBLIC_WALLET_CONNECT_NAME=Blend Mainnet
 NEXT_PUBLIC_BACKSTOP=CAO3AGAMZVRMHITL36EJ2VZQWKYRPWMQAPDQD5YEOF3GIF7T44U4JAL3
 NEXT_PUBLIC_USDC_ISSUER=GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN
 NEXT_PUBLIC_BLND_ISSUER=GDJEHTBE6ZHUXSWFI642DCGLUOECLHPF3KSXHPXTSTJ7E3JF6MQ5EZYY

.env.testnet

@@ -2,6 +2,8 @@ NEXT_PUBLIC_STELLAR_EXPERT_URL=https://stellar.expert/explorer/testnet
 NEXT_PUBLIC_RPC_URL=https://soroban-testnet.stellar.org
 NEXT_PUBLIC_HORIZON_URL=https://horizon-testnet.stellar.org
 NEXT_PUBLIC_PASSPHRASE=Test SDF Network ; September 2015
+NEXT_PUBLIC_WALLET_CONNECT_URL=https://testnet.blend.capital
+NEXT_PUBLIC_WALLET_CONNECT_NAME=Blend Testnet
 NEXT_PUBLIC_BACKSTOP=CDJQJS3TLZ6LEWSBOZ2E6QEZZ4NS3JU5LDT2BT7A4UHWAXPLSNE6MM37
 NEXT_PUBLIC_USDC_ISSUER=GATALTGTWIOT6BUDBCZM3Q4OQ4BO2COLOAZ7IYSKPLC2PMSOPPGF5V56
 NEXT_PUBLIC_BLND_ISSUER=GATALTGTWIOT6BUDBCZM3Q4OQ4BO2COLOAZ7IYSKPLC2PMSOPPGF5V56

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blend-ui",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,14 +12,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blend-capital/blend-sdk": "2.0.4",
-    "@creit.tech/stellar-wallets-kit": "1.2.1",
+    "@blend-capital/blend-sdk": "2.1.1",
+    "@creit.tech/stellar-wallets-kit": "1.2.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.6",
     "@stellar/freighter-api": "^3.0.0",
-    "@stellar/stellar-sdk": "12.2.0",
+    "@stellar/stellar-sdk": "12.3.0",
     "@tanstack/react-query": "5.52.0",
     "copy-to-clipboard": "^3.3.3",
     "next": "^14.2.11",

src/components/common/OverlayModal.tsx

@@ -1,5 +1,6 @@
-import { Box } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 import { useSettings } from '../../contexts';
 import { TxStatus, TxType, useWallet } from '../../contexts/wallet';
 import { OverlayModalFail } from './OverlayModalFail';
@@ -12,9 +13,12 @@ export interface CloseableOverlayProps {
 
 export const OverlayModal: React.FC = () => {
   const router = useRouter();
+  const theme = useTheme();
   const { lastPool } = useSettings();
   const { txStatus, txType, clearLastTx } = useWallet();
 
+  const [showReturnButton, setShowReturnButton] = useState(false);
+
   const display = txStatus !== TxStatus.NONE ? 'flex' : 'none';
 
   const { poolId } = router.query;
@@ -36,6 +40,22 @@ export const OverlayModal: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    setShowReturnButton(false);
+    if (txStatus === TxStatus.BUILDING || txStatus === TxStatus.SIGNING) {
+      timer = setTimeout(() => {
+        setShowReturnButton(true);
+      }, 6000);
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [txStatus]);
+
   if (txStatus === TxStatus.NONE) {
     return <></>;
   }
@@ -58,13 +78,25 @@ export const OverlayModal: React.FC = () => {
       }}
     >
       {txStatus === TxStatus.BUILDING && (
-        <OverlayModalText message="Preparing your transaction..." />
+        <OverlayModalText
+          message="Preparing your transaction..."
+          allowReturn={showReturnButton}
+          handleCloseOverlay={handleReturn}
+        />
       )}
       {txStatus === TxStatus.SIGNING && (
-        <OverlayModalText message="Please confirm the transaction in your wallet." />
+        <OverlayModalText
+          message="Please confirm the transaction in your wallet."
+          allowReturn={showReturnButton}
+          handleCloseOverlay={handleReturn}
+        />
       )}
       {txStatus === TxStatus.SUBMITTING && (
-        <OverlayModalText message="Submitting your transaction..." />
+        <OverlayModalText
+          message="Submitting your transaction..."
+          allowReturn={false}
+          handleCloseOverlay={() => {}}
+        />
       )}
       {txStatus === TxStatus.SUCCESS && <OverlayModalSuccess handleCloseOverlay={handleReturn} />}
       {txStatus === TxStatus.FAIL && <OverlayModalFail handleCloseOverlay={handleReturn} />}