@rango-dev/widget-embedded 0.45.1-next.2 → 0.45.1-next.4

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -3,49 +3,25 @@ import type { NamespaceData } from '@rango-dev/wallets-core/dist/hub/store/names
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
-import {
-  Button,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  Divider,
-  Spinner,
-  Typography,
-} from '@rango-dev/ui';
+import { Button, Spinner } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
 import { getConciseAddress } from '../../utils/wallets';
-
-import { getBlockchainLogo } from './Namespaces.helpers';
-import {
-  NamespaceAccountAddress,
-  NamespaceDetachedItemInfo,
-  NamespaceItemContainer,
-  NamespaceItemContent,
-  NamespaceItemError,
-  NamespaceItemErrorDropdownToggle,
-  NamespaceItemInnerContent,
-  NamespaceLogo,
-} from './Namespaces.styles';
-import { SupportedChainsList } from './SupportedChainsList';
+import { NamespaceItem } from '../NamespaceItem';
 
 export const NamespaceDetachedItem = function NamespaceDetachedItem(
   props: NamespaceDetachedItemPropTypes
 ) {
   const { walletType, namespace, initialConnect } = props;
-  const blockchains = useAppStore().blockchains();
   const { connect, disconnect, state } = useWallets();
   const [error, setError] = useState<Error | null>(null);
-  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
 
   const walletState = state(walletType);
 
   const namespaceState = walletState.namespaces?.get(namespace.value);
   const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
 
-  const supportedChains = namespace.getSupportedChains(blockchains);
-
   /*
    * Ref to track ongoing connection attempts.
    * In React Strict Mode, effects run twice for safety checks.
@@ -53,8 +29,6 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
    */
   const processingConnectAttempt = useRef(false);
 
-  useEffect(() => setErrorIsExpanded(false), [error]);
-
   useLayoutEffect(() => {
     if (initialConnect && !processingConnectAttempt.current) {
       void handleConnectNamespace(walletType, namespace.value);
@@ -100,69 +74,19 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
   };
 
   return (
-    <NamespaceItemContainer hasError={!!error}>
-      <NamespaceItemContent>
-        <NamespaceLogo
-          src={getBlockchainLogo(blockchains, namespace.id)}
-          size={40}
-        />
-        <NamespaceItemInnerContent>
-          <NamespaceDetachedItemInfo className="widget-namespace-detached-item-info-div">
-            <Typography variant="label" size="large">
-              {namespace.label}
-            </Typography>
-            {namespaceState.connected && (
-              <Typography variant="body" size="small" color="success500">
-                {i18n.t('Connected')}
-              </Typography>
-            )}
-            {!namespaceState.connected && !!error && (
-              <Typography variant="body" size="small" color="error500">
-                {i18n.t('Connection failed')}
-              </Typography>
-            )}
-          </NamespaceDetachedItemInfo>
-          {namespaceState.connected && (
-            <NamespaceAccountAddress
-              variant="body"
-              size="small"
-              color="neutral700">
-              {getConciseAddress(
-                firstAccountArray?.[firstAccountArray?.length - 1]
-              )}
-            </NamespaceAccountAddress>
-          )}
-          {!namespaceState.connected && error && (
-            <NamespaceItemErrorDropdownToggle
-              className="widget-namespace-detached-item-error-toggle-btn"
-              onClick={() =>
-                setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
-              }>
-              <Typography
-                variant="body"
-                size="small"
-                color="neutral700"
-                style={{
-                  textDecoration: 'underline',
-                  userSelect: 'none',
-                  textDecorationSkipInk: 'none',
-                }}>
-                {i18n.t('See why')}
-              </Typography>
-              {errorIsExpanded ? (
-                <ChevronUpIcon size={12} color="gray" />
-              ) : (
-                <ChevronDownIcon size={12} color="gray" />
-              )}
-            </NamespaceItemErrorDropdownToggle>
-          )}
-          {!namespaceState.connected &&
-            !error &&
-            supportedChains.length > 1 && (
-              <SupportedChainsList chains={supportedChains} />
-            )}
-        </NamespaceItemInnerContent>
-        {namespaceState.connecting ? (
+    <NamespaceItem
+      namespace={namespace}
+      connected={namespaceState.connected}
+      error={error?.message}
+      address={
+        namespaceState.connected
+          ? getConciseAddress(
+              firstAccountArray?.[firstAccountArray?.length - 1]
+            )
+          : ''
+      }
+      suffix={
+        namespaceState.connecting ? (
           <Spinner color="info" />
         ) : (
           <Button
@@ -173,18 +97,8 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
             onClick={async () => handleButtonClick(namespaceState)}>
             {getButtonText()}
           </Button>
-        )}
-      </NamespaceItemContent>
-      {!namespaceState.connected && !!error && errorIsExpanded && (
-        <>
-          <Divider size={4} />
-          <NamespaceItemError id="widget-namespace-item-error-div">
-            <Typography variant="body" size="small" color="neutral700">
-              {(error.cause as Error)?.message || error.message}
-            </Typography>
-          </NamespaceItemError>
-        </>
-      )}
-    </NamespaceItemContainer>
+        )
+      }
+    />
   );
 };

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -1,49 +1,24 @@
 import type { NamespaceItemPropTypes } from './Namespaces.types';
 
-import { Checkbox, Radio, Typography } from '@rango-dev/ui';
+import { Checkbox, Radio } from '@rango-dev/ui';
 import React from 'react';
 
-import { useAppStore } from '../../store/AppStore';
-
-import { getBlockchainLogo } from './Namespaces.helpers';
-import {
-  NamespaceItemContainer,
-  NamespaceItemContent,
-  NamespaceItemInnerContent,
-  NamespaceLogo,
-} from './Namespaces.styles';
-import { SupportedChainsList } from './SupportedChainsList';
+import { NamespaceItem } from '../NamespaceItem';
 
 export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const { onClick, type, namespace } = props;
-  const blockchains = useAppStore().blockchains();
 
-  const supportedChains = namespace.getSupportedChains(blockchains);
-  const showSupportedChains = supportedChains.length > 1;
   return (
-    <NamespaceItemContainer
+    <NamespaceItem
+      namespace={namespace}
       onClick={onClick}
-      clickable
-      className="widget-namespace-list-item">
-      <NamespaceItemContent>
-        <NamespaceLogo
-          src={getBlockchainLogo(blockchains, namespace.id)}
-          size={40}
-        />
-        <NamespaceItemInnerContent showSupportedChains={showSupportedChains}>
-          <Typography variant="label" size="large">
-            {namespace.label}
-          </Typography>
-          {showSupportedChains && (
-            <SupportedChainsList chains={supportedChains} />
-          )}
-        </NamespaceItemInnerContent>
-        {type === 'radio' ? (
+      suffix={
+        type === 'radio' ? (
           <Radio value={namespace.value} />
         ) : (
           <Checkbox checked={props.value} />
-        )}
-      </NamespaceItemContent>
-    </NamespaceItemContainer>
+        )
+      }
+    />
   );
 }

package/src/components/WalletStatefulConnect/Namespaces.styles.ts

@@ -1,4 +1,4 @@
-import { Button, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+import { Button, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
@@ -7,98 +7,6 @@ export const NamespaceList = styled('ul', {
   margin: 0,
 });
 
-export const NamespaceItemContainer = styled('li', {
-  backgroundColor: '$neutral200',
-  padding: '$16',
-  borderRadius: '$sm',
-  variants: {
-    clickable: {
-      true: {
-        cursor: 'pointer',
-      },
-    },
-    hasError: {
-      true: {
-        background: '$error100 ',
-        [`.${darkTheme} &`]: {
-          backgroundColor: '$error700',
-        },
-      },
-    },
-    unsupported: {
-      true: {
-        cursor: 'not-allowed',
-        paddingTop: '$8',
-        paddingBottom: '$8',
-      },
-    },
-  },
-});
-
-export const NamespaceItemContent = styled('div', {
-  display: 'flex',
-  gap: '$8',
-  alignItems: 'center',
-});
-
-export const NamespaceItemInnerContent = styled('div', {
-  flex: '1',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  height: '$40',
-  variants: {
-    showSupportedChains: {
-      true: {
-        justifyContent: 'space-between',
-      },
-      false: {
-        justifyContent: 'center',
-      },
-    },
-  },
-});
-
-export const UnsupportedNamespaceItemInnerContent = styled('div', {
-  flex: '1',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$4',
-  opacity: '0.5',
-});
-
-export const NamespaceLogo = styled(Image, {
-  variants: {
-    disabled: {
-      true: {
-        opacity: '0.5',
-      },
-    },
-  },
-});
-
 export const StyledButton = styled(Button, {
   minHeight: '$40',
 });
-
-export const NamespaceAccountAddress = styled(Typography, {
-  maxWidth: '100px',
-});
-
-export const NamespaceItemError = styled('div', {
-  paddingLeft: '48px',
-});
-
-export const NamespaceItemErrorDropdownToggle = styled('div', {
-  display: 'flex',
-  gap: '2px',
-  cursor: 'pointer',
-  alignItems: 'center',
-  width: 'fit-content',
-});
-
-export const NamespaceDetachedItemInfo = styled('div', {
-  display: 'flex',
-  gap: '6px',
-  alignItems: 'center',
-});

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -13,10 +13,10 @@ import {
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
+import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
 import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
-import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -31,7 +31,3 @@ export type NamespaceDetachedItemPropTypes = {
   initialConnect?: boolean;
   namespace: LegacyNamespaceMeta;
 };
-
-export type NamespaceUnsupportedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
-};

package/src/containers/Wallets/useUpdates.ts

@@ -77,7 +77,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     );
 
     if (data.length) {
-      void newWalletConnected(data, info.namespace);
+      void newWalletConnected(data, info.namespace, state.derivationPath);
     }
   };
 

package/src/store/slices/wallets.ts

@@ -100,7 +100,11 @@ export interface WalletsSlice {
       namespaces?: Namespace[];
     }
   ) => void;
-  addConnectedWallet: (accounts: Wallet[], namespace?: Namespace) => void;
+  addConnectedWallet: (
+    accounts: Wallet[],
+    namespace?: Namespace,
+    derivationPath?: string
+  ) => void;
   setWalletsAsSelected: (
     wallets: { walletType: string; chain: string }[]
   ) => void;
@@ -109,7 +113,8 @@ export interface WalletsSlice {
    */
   newWalletConnected: (
     accounts: Wallet[],
-    namespace?: Namespace
+    namespace?: Namespace,
+    derivationPath?: string
   ) => Promise<void>;
   disconnectNamespaces: (walletType: string, namespaces: Namespace[]) => void;
   /**
@@ -231,7 +236,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         };
       });
     },
-    addConnectedWallet: (accounts, namespace) => {
+    addConnectedWallet: (accounts, namespace, derivationPath) => {
       /*
        * When we are going to add a new account, there are two thing that can be happens:
        * 1. Wallet hasn't add yet.
@@ -276,6 +281,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
               walletType: account.walletType,
               selected: shouldMarkWalletAsSelected,
               namespace: namespace,
+              derivationPath: derivationPath,
               loading: false,
               error: false,
             };
@@ -435,13 +441,13 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         connectedWallets: nextConnectedWalletsWithUpdatedSelectedStatus,
       });
     },
-    newWalletConnected: async (accounts, namespace) => {
+    newWalletConnected: async (accounts, namespace, derivationPath) => {
       eventEmitter.emit(WidgetEvents.WalletEvent, {
         type: WalletEventTypes.CONNECT,
         payload: { walletType: accounts[0].walletType, accounts },
       });
 
-      get().addConnectedWallet(accounts, namespace);
+      get().addConnectedWallet(accounts, namespace, derivationPath);
 
       void get().fetchBalances(accounts);
     },

package/src/types/wallets.ts

@@ -6,6 +6,7 @@ export interface Wallet {
   address: string;
   walletType: WalletType;
   isContractWallet?: boolean;
+  derivationPath?: string;
 }
 
 export type Balance = {

package/src/utils/swap.ts

@@ -534,13 +534,18 @@ export function getWalletsForNewSwap(selectedWallets: Wallet[]) {
   const wallets = selectedWallets.reduce(
     (
       selectedWalletsMap: {
-        [p: string]: { address: string; walletType: WalletType };
+        [p: string]: {
+          address: string;
+          walletType: WalletType;
+          derivationPath?: string;
+        };
       },
       selectedWallet
     ) => (
       (selectedWalletsMap[selectedWallet.chain] = {
         address: selectedWallet.address,
         walletType: selectedWallet.walletType,
+        derivationPath: selectedWallet.derivationPath,
       }),
       selectedWalletsMap
     ),

package/dist/components/SwapDetailsModal/SwapDetailsModal.helpers.d.ts

@@ -1,4 +0,0 @@
-import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
-import { PendingSwapNetworkStatus } from 'rango-types';
-export declare const modalNetworkValues: Record<Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>, ModalNetworkValueTypes>;
-//# sourceMappingURL=SwapDetailsModal.helpers.d.ts.map

package/dist/components/SwapDetailsModal/SwapDetailsModal.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapDetailsModal.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAEvD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,OAAO,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,eAAe,CAAC,EAC3E,sBAAsB,CAkBvB,CAAC"}

package/dist/components/WalletStatefulConnect/NamespaceUnsupportedItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NamespaceUnsupportedItem.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/NamespaceUnsupportedItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,oBAAoB,CAAC;AAI5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,iCAAiC,qBAwBzC"}

package/dist/components/WalletStatefulConnect/Namespaces.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Namespaces.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/Namespaces.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,cAAc,EAAE,EAC7B,cAAc,EAAE,MAAM,sBAIvB"}

package/dist/components/WalletStatefulConnect/SupportedChainsList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedChainsList.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/SupportedChainsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA2CnD"}

package/dist/components/WalletStatefulConnect/SupportedChainsList.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedChainsList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/SupportedChainsList.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKnC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAe7B,CAAC"}

package/dist/components/WalletStatefulConnect/SupportedChainsList.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedChainsList.types.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/SupportedChainsList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC"}

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -1,26 +0,0 @@
-import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
-
-import { i18n } from '@lingui/core';
-import { PendingSwapNetworkStatus } from 'rango-types';
-
-export const modalNetworkValues: Record<
-  Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>,
-  ModalNetworkValueTypes
-> = {
-  [PendingSwapNetworkStatus.WaitingForNetworkChange]: {
-    type: 'loading',
-    title: i18n.t('Change Network'),
-  },
-  [PendingSwapNetworkStatus.WaitingForConnectingWallet]: {
-    type: 'warning',
-    title: i18n.t('Connect Wallet'),
-  },
-  [PendingSwapNetworkStatus.NetworkChanged]: {
-    type: 'success',
-    title: i18n.t('Network Changed'),
-  },
-  [PendingSwapNetworkStatus.NetworkChangeFailed]: {
-    type: 'warning',
-    title: i18n.t('Network Change Failed'),
-  },
-};