@gluwa/connect-kit 0.1.0-next.0 → 0.1.0-next.2

package/src/views/WalletConnectView.tsx

@@ -1,8 +1,9 @@
 import { type FC, useMemo } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { type WCWallet, type WCSubView } from '../types';
 import deeplink from '../../assets/deeplink.png';
+import { QRFrame, CopyLinkButton } from '../components/QRFrame';
+import { CONNECTOR_META } from '../connector-meta';
 
 interface WalletConnectViewProps {
   subView: WCSubView;
@@ -30,42 +31,11 @@ export const WalletConnectView: FC<WalletConnectViewProps> = (props) => {
 
 const WCQRView: FC<WalletConnectViewProps> = ({ qrUri, logoUrl, walletList, onShowList }) => (
   <div className="ck-view ck-view--qr">
-    <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
-      {qrUri ? (
-        <QRCodeSVG
-          value={qrUri}
-          size={196}
-          level="H"
-          imageSettings={
-            logoUrl
-              ? {
-                  src: logoUrl,
-                  width: 40,
-                  height: 40,
-                  excavate: true,
-                }
-              : undefined
-          }
-        />
-      ) : (
-        <div className="ck-qr-spinner" aria-label="Loading QR code" />
-      )}
-    </div>
+    <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
 
     <p className="ck-view__caption">Scan this QR Code with your phone</p>
 
-    {qrUri && (
-      <button
-        type="button"
-        className="ck-copy-link"
-        onClick={() => {
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          navigator.clipboard.writeText(qrUri);
-        }}
-      >
-        Copy link
-      </button>
-    )}
+    <CopyLinkButton qrUri={qrUri} />
 
     <button type="button" className="ck-all-wallets-btn" onClick={onShowList}>
       <span className="ck-all-wallets-btn__icon" aria-hidden="true" />
@@ -77,7 +47,7 @@ const WCQRView: FC<WalletConnectViewProps> = ({ qrUri, logoUrl, walletList, onSh
   </div>
 );
 
-const CREDIT_WALLET_NAME = 'Credit Wallet';
+const CREDIT_WALLET_NAME = CONNECTOR_META.CREDIT_WALLET.label;
 
 const WalletListView: FC<WalletConnectViewProps> = ({
   walletList,
@@ -90,7 +60,7 @@ const WalletListView: FC<WalletConnectViewProps> = ({
   onSearchChange,
   onFilterToggle,
 }) => {
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   const filtered = useMemo(() => {
     const q = walletListSearch.trim().toLowerCase();
@@ -111,11 +81,10 @@ const WalletListView: FC<WalletConnectViewProps> = ({
   }, [walletList, walletListSearch, walletListFilterActive]);
 
   const handleClickWallet = (wallet: WCWallet): void => {
-    const uri = qrUri;
-    if (isMobile && uri) {
+    if (isMobile && qrUri) {
       const target = wallet.mobileNative || wallet.mobileUniversal;
       if (target) {
-        tryOpenDeepLink(uri, target);
+        tryOpenDeepLink(qrUri, target);
         return;
       }
     }
@@ -211,40 +180,11 @@ const WalletQRView: FC<{ wallet: WCWallet; qrUri: string | null }> = ({ wallet,
 
   return (
     <div className="ck-view ck-view--qr">
-      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
-        {qrUri ? (
-          <QRCodeSVG
-            value={qrUri}
-            size={196}
-            level="H"
-            {...(logoSrc && {
-              imageSettings: {
-                src: logoSrc,
-                width: 40,
-                height: 40,
-                excavate: true,
-              },
-            })}
-          />
-        ) : (
-          <div className="ck-qr-spinner" aria-label="Loading QR code" />
-        )}
-      </div>
+      <QRFrame qrUri={qrUri} logoUrl={logoSrc} />
 
       <p className="ck-view__caption">Scan this QR Code with your phone</p>
 
-      {qrUri && (
-        <button
-          type="button"
-          className="ck-copy-link"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            navigator.clipboard.writeText(qrUri);
-          }}
-        >
-          Copy link
-        </button>
-      )}
+      <CopyLinkButton qrUri={qrUri} />
 
       {downloadUrl && (
         <div className="ck-download-card">

package/tsup.config.ts

@@ -7,7 +7,18 @@ export default defineConfig({
   dts: true,
   clean: true,
   target: 'es2019',
-  external: ['react', 'react-native'],
+  external: [
+    'react',
+    'react-native',
+    'wagmi',
+    '@wagmi/core',
+    'viem',
+    '@gluwa/credit-connect-sdk',
+    '@gluwa/credit-connect-sdk/dapp',
+    '@gluwa/credit-connect-sdk/storage',
+    '@gluwa/credit-connect-sdk/e2ee',
+    '@gluwa/credit-connect-sdk/hub',
+  ],
   banner: {
     js: 'import React from "react";',
   },