From d6f395e026e6a7256bb53677def58f205d680ece Mon Sep 17 00:00:00 2001 From: flopez7 Date: Fri, 22 May 2026 12:48:13 +0200 Subject: [PATCH] integrate metamask connector and update wallet modal functionality --- .../src/components/Wallet/WalletModal.tsx | 26 +- .../apps/job-launcher/client/package.json | 1 + .../src/components/WalletModal/index.tsx | 26 +- .../src/components/Wallet/WalletModal.tsx | 26 +- yarn.lock | 239 +++++++++++++++++- 5 files changed, 287 insertions(+), 31 deletions(-) diff --git a/packages/apps/fortune/exchange-oracle/client/src/components/Wallet/WalletModal.tsx b/packages/apps/fortune/exchange-oracle/client/src/components/Wallet/WalletModal.tsx index f3d32161a0..50d538cd9a 100644 --- a/packages/apps/fortune/exchange-oracle/client/src/components/Wallet/WalletModal.tsx +++ b/packages/apps/fortune/exchange-oracle/client/src/components/Wallet/WalletModal.tsx @@ -7,7 +7,7 @@ import { Typography, useTheme, } from '@mui/material'; -import { useConnect } from 'wagmi'; +import { useConnect, useConnectors } from 'wagmi'; import coinbaseSvg from '../../assets/coinbase.svg'; import metaMaskSvg from '../../assets/metamask.svg'; import walletConnectSvg from '../../assets/walletconnect.svg'; @@ -25,10 +25,23 @@ export default function WalletModal({ open: boolean; onClose: () => void; }) { - const { connect, connectors, error } = useConnect(); + const connectors = useConnectors(); + const { mutateAsync: connect, error, isPending, variables } = useConnect(); const theme = useTheme(); + const handleConnect = async (connector: (typeof connectors)[number]) => { + try { + if (connector.id === 'walletConnect') { + onClose(); + } + + await connect({ connector }); + } catch { + // wagmi exposes the connection error through `error`. + } + }; + return ( { - connect({ connector }); - - if (connector.id === 'walletConnect') { - onClose(); - } - }} + disabled={isPending && variables?.connector.id === connector.id} + onClick={() => handleConnect(connector)} > void; }) { - const { connect, connectors, error } = useConnect(); + const connectors = useConnectors(); + const { mutateAsync: connect, error, isPending, variables } = useConnect(); const theme = useTheme(); + const handleConnect = async (connector: (typeof connectors)[number]) => { + try { + if (connector.id === 'walletConnect') { + onClose(); + } + + await connect({ connector }); + } catch { + // wagmi exposes the connection error through `error`. + } + }; + return ( { - connect({ connector }); - - if (connector.id === 'walletConnect') { - onClose(); - } - }} + disabled={isPending && variables?.connector.id === connector.id} + onClick={() => handleConnect(connector)} > void; }) { - const { connect, connectors, error } = useConnect(); + const connectors = useConnectors(); + const { mutateAsync: connect, error, isPending, variables } = useConnect(); + + const handleConnect = async (connector: (typeof connectors)[number]) => { + try { + if (connector.id === 'walletConnect') { + onClose(); + } + + await connect({ connector }); + } catch { + // wagmi exposes the connection error through `error`. + } + }; return ( { - connect({ connector }); - - if (connector.id === 'walletConnect') { - onClose(); - } - }} + disabled={isPending && variables?.connector.id === connector.id} + onClick={() => handleConnect(connector)} > =13.7.0" + long: "npm:^5.3.2" + checksum: 10c0/364c6914facac19ace915e353f71c5d5996bfa8177a3a68c09bd2513a3ecf780538aca06cb3439237f50489db2fae321c4a4db60fd7f9ec65315b7ad66bea029 + languageName: node + linkType: hard + "protons-runtime@npm:^5.5.0, protons-runtime@npm:^5.6.0": version: 5.6.0 resolution: "protons-runtime@npm:5.6.0" @@ -27039,6 +27254,22 @@ __metadata: languageName: node linkType: hard +"qr-code-styling@npm:^1.9.2": + version: 1.9.2 + resolution: "qr-code-styling@npm:1.9.2" + dependencies: + qrcode-generator: "npm:^1.4.4" + checksum: 10c0/6296e115776ec7788dacc62f2ec0e54d861cfa2a82676bcf9adc693e8bce33552bd6bd92c9ff0478d2bff8610243f7010d7bd7bf85cf96fb41d8b60a36fa56e0 + languageName: node + linkType: hard + +"qrcode-generator@npm:^1.4.4": + version: 1.5.2 + resolution: "qrcode-generator@npm:1.5.2" + checksum: 10c0/4e0a43ba1c0212cf8ec39654cc7a5bebda96ee00453dc5732e98af4cf681c6786d2c189d4657d8d4fa6486f07573c1edb85fbb7af5e78972f843b7db8457a9b7 + languageName: node + linkType: hard + "qrcode@npm:1.5.3": version: 1.5.3 resolution: "qrcode@npm:1.5.3" @@ -32605,7 +32836,7 @@ __metadata: languageName: node linkType: hard -"ws@npm:8.20.1": +"ws@npm:8.20.1, ws@npm:^8.18.3": version: 8.20.1 resolution: "ws@npm:8.20.1" peerDependencies: