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() | ✅ | ✅ |