@rango-dev/widget-embedded 0.45.1-next.3 → 0.45.1-next.5

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