@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.8

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.js

@@ -53,25 +53,26 @@ import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const QrCodeModalView = ({ walletId }) => {
-    var _a;
+    var _a, _b;
     const { secondaryWallets, qrcodeUri, desktopUri } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const newPrimaryWallet = secondaryWallets.find(({ id }) => id === walletId);
-    const walletName = ((_a = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name) || '';
+    const walletKey = ((_a = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key) || '';
+    const walletName = ((_b = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _b === void 0 ? void 0 : _b.name) || '';
     const { theme } = useThemeContext();
     const qrCodeColorsByTheme = {
         dark: {
             accentColor: 'var(--dynamic-text-primary)',
         },
         light: {
-            accentColor: getWalletPrimaryColor(walletBook, walletName) ||
+            accentColor: getWalletPrimaryColor(walletBook, walletKey) ||
                 'var(--dynamic-text-primary)',
         },
     };
     // can't use theme because it's string instead of 'light' | 'dark'
     const typedTheme = theme.theme.name === 'light' ? 'light' : 'dark';
-    const icon = (jsx(WalletIcon, { walletName: walletName, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
-    return (jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxs(Typography, Object.assign({ variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), jsx("div", Object.assign({ className: 'qr-code-modal-view__container' }, { children: jsx("div", Object.assign({ className: 'qr-code-modal-view__wrapper' }, { children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletName: normalizeWalletName(walletName) })) : (
+    const icon = (jsx(WalletIcon, { walletKey: walletKey, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
+    return (jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxs(Typography, Object.assign({ variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), jsx("div", Object.assign({ className: 'qr-code-modal-view__container' }, { children: jsx("div", Object.assign({ className: 'qr-code-modal-view__wrapper' }, { children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: normalizeWalletName(walletKey) })) : (
                     // this div exists to give the parent a child, so that the parent
                     // takes on its given width and height. the result is stable
                     // rendering of this component, without this there is a brief flash