diff --git a/.changeset/empty-kangaroos-move.md b/.changeset/empty-kangaroos-move.md new file mode 100644 index 00000000..02ce0f5e --- /dev/null +++ b/.changeset/empty-kangaroos-move.md @@ -0,0 +1,5 @@ +--- +'@node-real/walletkit': patch +--- + +add copy link button to QR code view diff --git a/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx index 8ac9249e..a4015442 100644 --- a/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx +++ b/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx @@ -1,13 +1,17 @@ +import { useEffect } from 'react'; import { Link } from '@/core/base/components/Link'; import { ModalBody } from '@/core/base/components/Modal/ModalBody'; import { ModalFooter } from '@/core/base/components/Modal/ModalFooter'; import { ModalHeader } from '@/core/base/components/Modal/ModalHeader'; import { ForwardIcon } from '@/core/base/icons/ForwardIcon'; +import { CopyIcon } from '@/core/base/icons/CopyIcon'; +import { SuccessIcon } from '@/core/base/icons/SuccessIcon'; import { cx } from '@/core/base/utils/css'; import { CustomQRCode } from '@/core/components/CustomQRCode'; +import { useClipboard } from '@/core/base/hooks/useClipboard'; import { useWalletLogos } from '@/core/hooks/useWalletLogos'; import { useWalletKit } from '@/core/providers/WalletKitProvider/context'; -import { clsContainer, clsOfficialButton } from './styles.css'; +import { clsContainer, clsOfficialButton, clsCopyButton, clsFooter } from './styles.css'; import { useAutoCloseConnectModal } from '@/core/hooks/useAutoCloseConnectModal'; import { BaseWallet } from '@/core/configs/types'; @@ -25,9 +29,18 @@ export function TemplateQRCodeView(props: TemplateQRCodeViewProps) { const { options } = useWalletKit(); const logos = useWalletLogos(wallet?.logos); + const { onCopy, hasCopied, setValue } = useClipboard(qrCodeUri ?? ''); + + useEffect(() => { + if (qrCodeUri) { + setValue(qrCodeUri); + } + }, [qrCodeUri, setValue]); useAutoCloseConnectModal(isConnected, address); + const showFooter = !!qrCodeUri || (isWalletConnect && !options?.hideOfficialWalletConnectCTA); + return ( <> Scan with your phone @@ -36,15 +49,32 @@ export function TemplateQRCodeView(props: TemplateQRCodeViewProps) { - {isWalletConnect && !options?.hideOfficialWalletConnectCTA && ( - - - Open the official WalletConnect modal - - + {showFooter && ( + + {!!qrCodeUri && ( + + )} + {isWalletConnect && !options?.hideOfficialWalletConnectCTA && ( + + Open the official WalletConnect modal + + + )} )} diff --git a/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/styles.css.ts b/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/styles.css.ts index 2dfcdd9d..3015f795 100644 --- a/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/styles.css.ts +++ b/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/styles.css.ts @@ -1,4 +1,12 @@ import { style } from '@vanilla-extract/css'; +import { cssVar } from '@/core/base/utils/css'; +import { hover } from '@/core/base/vanilla/index.css'; + +export const clsFooter = style({ + flexDirection: 'column', + alignItems: 'center', + gap: 12, +}); export const clsContainer = style({ alignItems: 'center', @@ -14,3 +22,25 @@ export const clsOfficialButton = style({ gap: 4, cursor: 'pointer', }); + +export const clsCopyButton = style({ + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + gap: 6, + height: 36, + padding: '0 12px', + fontSize: 14, + fontWeight: 400, + lineHeight: '20px', + cursor: 'pointer', + border: '1px solid', + borderRadius: cssVar('common', 'radii'), + borderColor: cssVar('border'), + background: 'transparent', + color: cssVar('text'), + '@media': hover({ + background: cssVar('border'), + color: cssVar('text'), + }), +}); diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx index 6cf5a059..c75f4334 100644 --- a/website/src/pages/index.mdx +++ b/website/src/pages/index.mdx @@ -16,7 +16,7 @@ npm i @node-real/walletkit@^2 wagmi@^2 viem@^2 @tanstack/react-query@^5 | wallet | mainnet | testnet | | ---------------- | ------- | ------- | -| binanceWallet() | ✅ | ❌ | +| binanceWallet() | ✅ | ✅ | | bitgetWallet() | ✅ | ❌ | | coinbaseWallet() | ✅ | ✅ | | metaMask() | ✅ | ✅ |