@dynamic-labs/sdk-react-core 4.0.0-alpha.29 → 4.0.0-alpha.30

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

@@ -1,6 +1,6 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useWalletBookContext, getWalletPrimaryColor, WalletIcon } from '@dynamic-labs/wallet-book';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
 import 'react';
@@ -89,26 +89,25 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { QRCode } from '../../../../components/QRCode/QRCode.js';
 
 const QrCodeModalView = ({ walletId }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { secondaryWallets, qrcodeUri, desktopUri } = useInternalDynamicContext();
-    const { walletBook } = useWalletBookContext();
     const newPrimaryWallet = secondaryWallets.find(({ id }) => id === walletId);
     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 walletMetadata = (_c = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _c === void 0 ? void 0 : _c.metadata;
     const { theme } = useThemeContext();
     const qrCodeColorsByTheme = {
         dark: {
             accentColor: 'var(--dynamic-text-primary)',
         },
         light: {
-            accentColor: getWalletPrimaryColor(walletBook, walletKey) ||
-                'var(--dynamic-text-primary)',
+            accentColor: (walletMetadata === null || walletMetadata === void 0 ? void 0 : walletMetadata.brandColor) || '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, { walletKey: walletKey, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
-    return (jsxs("div", { className: 'qr-code-modal-view', children: [jsxs(Typography, { 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, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsx(Typography, { 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", { className: 'qr-code-modal-view__container', children: jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: walletKey })) : (
+    const icon = (jsx(WalletIcon, { icon: walletMetadata === null || walletMetadata === void 0 ? void 0 : walletMetadata.icon, walletKey: walletKey, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
+    return (jsxs("div", { className: 'qr-code-modal-view', children: [jsxs(Typography, { variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title', children: ["Connect with ", walletName] }), jsxs(Typography, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsx(Typography, { 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", { className: 'qr-code-modal-view__container', children: jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: 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

package/src/lib/components/TransactionOriginDestination/TransactionOriginDestination.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-export type Props = {
-    arrowIconClassName?: string;
-    className?: string;
-    destinationAddress: string;
-    originAddress: string;
-    textClassName?: string;
-    walletIconClassName?: string;
-    walletKey?: string;
-};
-export declare const TransactionOriginDestination: FC<Props>;

package/src/lib/widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    connected?: boolean;
-    iconSize?: number;
-    variant?: 'primary' | 'secondary';
-    walletKey: string;
-};
-export declare const WalletIconWithStatus: ({ iconSize, walletKey, connected, variant, }: Props) => JSX.Element;
-export {};

package/src/lib/widgets/DynamicWidget/components/WalletIconWithStatus/index.d.ts

@@ -1 +0,0 @@
-export { WalletIconWithStatus } from './WalletIconWithStatus';