Merge pull request #290 from node-real/feat/binance-web3-wallet-extension-support

feat(qrcode): add copy link button to QR code view

Author: aiden-cao

.changeset/empty-kangaroos-move.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+add copy link button to QR code view

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 (
     <>
       <ModalHeader>Scan with your phone</ModalHeader>
@@ -36,15 +49,32 @@ export function TemplateQRCodeView(props: TemplateQRCodeViewProps) {
         <CustomQRCode value={qrCodeUri} logo={logos.default} />
       </ModalBody>
 
-      {isWalletConnect && !options?.hideOfficialWalletConnectCTA && (
-        <ModalFooter>
-          <Link
-            className={cx('wk-official-wc-button', clsOfficialButton)}
-            onClick={onClickOpenWcModal}
-          >
-            Open the official WalletConnect modal
-            <ForwardIcon />
-          </Link>
+      {showFooter && (
+        <ModalFooter className={clsFooter}>
+          {!!qrCodeUri && (
+            <button className={cx('wk-copy-link-button', clsCopyButton)} onClick={onCopy}>
+              {hasCopied ? (
+                <>
+                  <SuccessIcon width={16} height={16} />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <CopyIcon width={16} height={16} />
+                  Copy Link
+                </>
+              )}
+            </button>
+          )}
+          {isWalletConnect && !options?.hideOfficialWalletConnectCTA && (
+            <Link
+              className={cx('wk-official-wc-button', clsOfficialButton)}
+              onClick={onClickOpenWcModal}
+            >
+              Open the official WalletConnect modal
+              <ForwardIcon />
+            </Link>
+          )}
         </ModalFooter>
       )}
     </>

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'),
+  }),
+});

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