@rango-dev/widget-embedded 0.45.1-next.0 → 0.45.1-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.45.1-next.0",
+  "version": "0.45.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.9.1-next.0",
-    "@rango-dev/provider-all": "^0.48.1-next.0",
+    "@rango-dev/provider-all": "^0.48.1-next.4",
     "@rango-dev/queue-manager-core": "^0.30.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.47.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.47.1-next.5",
     "@rango-dev/queue-manager-react": "^0.30.1-next.0",
     "@rango-dev/signer-solana": "^0.41.1-next.0",
-    "@rango-dev/ui": "^0.48.1-next.0",
-    "@rango-dev/wallets-core": "^0.45.1-next.0",
-    "@rango-dev/wallets-react": "^0.32.1-next.0",
-    "@rango-dev/wallets-shared": "^0.46.1-next.0",
+    "@rango-dev/ui": "^0.48.1-next.6",
+    "@rango-dev/wallets-core": "^0.45.1-next.3",
+    "@rango-dev/wallets-react": "^0.32.1-next.3",
+    "@rango-dev/wallets-shared": "^0.46.1-next.3",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/{WalletStatefulConnect/Namespaces.helpers.ts → NamespaceItem/NamespaceItem.helpers.ts}

@@ -3,7 +3,7 @@ import type { BlockchainMeta } from 'rango-types';
 export function getBlockchainLogo(
   blockchains: BlockchainMeta[],
   blockchainName: string
-) {
+): string | undefined {
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.logo;
 }

package/src/components/NamespaceItem/NamespaceItem.styles.ts

@@ -0,0 +1,93 @@
+import { darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+
+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 NamespaceItemInfo = styled('div', {
+  display: 'flex',
+  gap: '$6',
+  alignItems: 'center',
+});
+
+export const NamespaceItemError = styled('div', {
+  paddingLeft: '48px',
+});
+
+export const NamespaceItemErrorDropdownToggle = styled('div', {
+  display: 'flex',
+  gap: '$2',
+  cursor: 'pointer',
+  alignItems: 'center',
+  width: 'fit-content',
+});
+
+export const NamespaceAccountAddress = styled(Typography, {
+  maxWidth: '100px',
+});
+
+export const NamespaceLogo = styled(Image, {
+  variants: {
+    disabled: {
+      true: {
+        opacity: '0.5',
+      },
+    },
+  },
+});

package/src/components/NamespaceItem/NamespaceItem.tsx

@@ -0,0 +1,117 @@
+import type { PropTypes } from './NamespaceItem.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Divider,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './NamespaceItem.helpers';
+import {
+  NamespaceAccountAddress,
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceItemError,
+  NamespaceItemErrorDropdownToggle,
+  NamespaceItemInfo,
+  NamespaceItemInnerContent,
+  NamespaceLogo,
+} from './NamespaceItem.styles';
+import { SupportedChainsList } from './SupportedChainsList';
+
+export function NamespaceItem(props: PropTypes) {
+  const { namespace, error, suffix, connected, address, onClick } = props;
+
+  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
+  const blockchains = useAppStore().blockchains();
+
+  useEffect(() => setErrorIsExpanded(false), [error]);
+
+  const supportedChains = namespace.getSupportedChains(blockchains);
+  const isSupportedChainsDisplayed =
+    !error && !connected && supportedChains.length > 1;
+
+  return (
+    <NamespaceItemContainer
+      hasError={!!error}
+      clickable={!!onClick}
+      onClick={onClick}>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+        />
+        <NamespaceItemInnerContent
+          showSupportedChains={
+            isSupportedChainsDisplayed || connected || !!error
+          }>
+          <NamespaceItemInfo>
+            <Typography variant="label" size="large">
+              {namespace.label}
+            </Typography>
+            {connected && (
+              <Typography variant="body" size="small" color="success500">
+                {i18n.t('Connected')}
+              </Typography>
+            )}
+            {!!error && (
+              <Typography variant="body" size="small" color="error500">
+                {i18n.t('Connection failed')}
+              </Typography>
+            )}
+          </NamespaceItemInfo>
+          {isSupportedChainsDisplayed && (
+            <SupportedChainsList chains={supportedChains} />
+          )}
+          {connected && (
+            <NamespaceAccountAddress
+              variant="body"
+              size="small"
+              color="neutral700">
+              {address}
+            </NamespaceAccountAddress>
+          )}
+          {error && (
+            <NamespaceItemErrorDropdownToggle
+              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>
+          )}
+        </NamespaceItemInnerContent>
+        {suffix}
+      </NamespaceItemContent>
+      {!!error && errorIsExpanded && (
+        <>
+          <Divider size={4} />
+          <NamespaceItemError>
+            <Typography variant="body" size="small" color="neutral700">
+              {error}
+            </Typography>
+          </NamespaceItemError>
+        </>
+      )}
+    </NamespaceItemContainer>
+  );
+}

package/src/components/NamespaceItem/NamespaceItem.types.ts

@@ -0,0 +1,14 @@
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+
+export type PropTypes = {
+  namespace: LegacyNamespaceMeta;
+  error?: string;
+  suffix?: React.ReactNode;
+  connected?: boolean;
+  address?: string | null;
+  onClick?: () => void;
+};
+
+export type NamespaceUnsupportedItemPropTypes = {
+  namespace: LegacyNamespaceMeta;
+};

package/src/components/{WalletStatefulConnect → NamespaceItem}/NamespaceUnsupportedItem.tsx

@@ -1,4 +1,4 @@
-import type { NamespaceUnsupportedItemPropTypes } from './Namespaces.types';
+import type { NamespaceUnsupportedItemPropTypes } from './NamespaceItem.types';
 
 import { i18n } from '@lingui/core';
 import { Typography } from '@rango-dev/ui';
@@ -6,13 +6,13 @@ import React from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 
-import { getBlockchainLogo } from './Namespaces.helpers';
+import { getBlockchainLogo } from './NamespaceItem.helpers';
 import {
   NamespaceItemContainer,
   NamespaceItemContent,
   NamespaceLogo,
   UnsupportedNamespaceItemInnerContent,
-} from './Namespaces.styles';
+} from './NamespaceItem.styles';
 
 export function NamespaceUnsupportedItem(
   props: NamespaceUnsupportedItemPropTypes

package/src/components/NamespaceItem/index.ts

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

package/src/components/Quote/Quote.tsx

@@ -134,11 +134,11 @@ export function Quote(props: QuoteProps) {
 
       const hasSlippageError =
         error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
-        error.recommendedSlippages?.has(index);
+        !!error.recommendedSlippages?.[index];
 
       const hasSlippageWarning =
         warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
-        warning.recommendedSlippages?.has(index);
+        !!warning.recommendedSlippages?.[index];
 
       const stepHasError = hasBridgeLimitError || hasSlippageError;
       const stepHasWarning = hasSlippageWarning;
@@ -269,12 +269,12 @@ export function Quote(props: QuoteProps) {
                                 ...(error?.type ===
                                   QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
                                   minRequiredSlippage:
-                                    error.recommendedSlippages?.get(index),
+                                    error.recommendedSlippages?.[index],
                                 }),
                                 ...(warning?.type ===
                                   QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
                                   minRequiredSlippage:
-                                    warning.recommendedSlippages?.get(index),
+                                    warning.recommendedSlippages?.[index],
                                 }),
                               },
                             })}

package/src/components/Slippage/Slippage.styles.ts

@@ -32,26 +32,3 @@ export const SlippageChip = styled(Chip, {
   width: '61px',
   flexShrink: 0,
 });
-
-export const SlippageTextFieldContainer = styled('div', {
-  outlineWidth: 1,
-  outlineStyle: 'solid',
-  borderRadius: '$xs',
-  flex: 1,
-  variants: {
-    status: {
-      safe: {
-        outlineColor: '$secondary500',
-      },
-      error: {
-        outlineColor: '$error500',
-      },
-      warning: {
-        outlineColor: '$warning500',
-      },
-      empty: {
-        outlineWidth: 0,
-      },
-    },
-  },
-});

package/src/components/Slippage/Slippage.tsx

@@ -21,7 +21,6 @@ import {
   Head,
   SlippageChip,
   SlippageChipsContainer,
-  SlippageTextFieldContainer,
 } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
@@ -92,32 +91,31 @@ export function Slippage() {
             />
           );
         })}
-        <SlippageTextFieldContainer
+
+        <TextField
+          type="number"
+          min="0.01"
+          max="30"
+          step="0.01"
           status={
-            slippageValidation?.type || (customSlippage ? 'safe' : 'empty')
-          }>
-          <TextField
-            type="number"
-            min="0.01"
-            max="30"
-            step="0.01"
-            id="widget-slippage-chip-text-input"
-            onInput={onInput}
-            fullWidth
-            variant="contained"
-            value={customSlippage === null ? '' : customSlippage}
-            color="dark"
-            onChange={onSlippageValueChange}
-            suffix={
-              customSlippage && (
-                <Typography variant="body" size="small">
-                  %
-                </Typography>
-              )
-            }
-            placeholder={i18n.t('Custom')}
-          />
-        </SlippageTextFieldContainer>
+            slippageValidation?.type || (customSlippage ? 'success' : 'default')
+          }
+          id="widget-slippage-chip-text-input"
+          onInput={onInput}
+          fullWidth
+          variant="contained"
+          value={customSlippage === null ? '' : customSlippage}
+          color="dark"
+          onChange={onSlippageValueChange}
+          suffix={
+            customSlippage && (
+              <Typography variant="body" size="small">
+                %
+              </Typography>
+            )
+          }
+          placeholder={i18n.t('Custom')}
+        />
       </SlippageChipsContainer>
 
       {slippageValidation && (

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -55,6 +55,7 @@ export function StatefulConnectModal(props: PropTypes) {
     handleNamespace,
     getState,
     resetState,
+    handleDisconnect,
   } = useStatefulConnect();
 
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
@@ -194,6 +195,9 @@ export function StatefulConnectModal(props: PropTypes) {
       {isOnDetached(getState) && (
         <Detached
           onConfirm={handleDetachedConfirm}
+          onDisconnectWallet={() =>
+            void handleDisconnect(getState().namespace.targetWallet)
+          }
           value={getState().namespace}
           selectedNamespaces={getState().selectedNamespaces}
         />

package/src/components/SwapDetails/RequestIdRow.tsx

@@ -0,0 +1,73 @@
+import type { RequestIdProps } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import {
+  CopyIcon,
+  DoneIcon,
+  IconButton,
+  RangoExplorerIcon,
+  Tooltip,
+  Typography,
+  useCopyToClipboard,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { SCANNER_BASE_URL } from '../../constants';
+import { getContainer } from '../../utils/common';
+
+import { RESET_INTERVAL } from './SwapDetails.helpers';
+import {
+  RequestIdContainer,
+  requestIdStyles,
+  rowStyles,
+  StyledLink,
+} from './SwapDetails.styles';
+
+export function RequestIdRow(props: RequestIdProps) {
+  const { requestId } = props;
+  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+
+  return (
+    <RequestIdContainer className={rowStyles()}>
+      <Typography variant="label" size="large" color="neutral700">
+        {i18n.t('Request ID')}
+      </Typography>
+      <div className={requestIdStyles()}>
+        <Typography variant="label" size="small" color="neutral700">
+          {requestId}
+        </Typography>
+        <Tooltip
+          container={getContainer()}
+          content={
+            isCopied ? i18n.t('Copied To Clipboard') : i18n.t('Copy Request ID')
+          }
+          open={isCopied || undefined}
+          side="bottom"
+          alignOffset={-16}
+          align="end">
+          <IconButton
+            id="widget-swap-details-done-copy-icon-btn"
+            variant="ghost"
+            onClick={handleCopy.bind(null, requestId || '')}>
+            {isCopied ? (
+              <DoneIcon size={16} color="secondary" />
+            ) : (
+              <CopyIcon size={16} color="gray" />
+            )}
+          </IconButton>
+        </Tooltip>
+
+        <StyledLink
+          target="_blank"
+          href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
+          <Tooltip
+            container={getContainer()}
+            content={i18n.t('View on Rango Explorer')}
+            side="bottom">
+            <RangoExplorerIcon size={20} />
+          </Tooltip>
+        </StyledLink>
+      </div>
+    </RequestIdContainer>
+  );
+}

package/src/components/SwapDetails/SwapDateRow.tsx

@@ -0,0 +1,21 @@
+import type { SwapDateRowProps } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { rowStyles } from './SwapDetails.styles';
+
+export function SwapDateRow(props: SwapDateRowProps) {
+  const { date, isFinished } = props;
+  return (
+    <div className={rowStyles()}>
+      <Typography variant="label" size="large" color="neutral700">
+        {isFinished ? i18n.t('Finished at') : i18n.t('Created at')}
+      </Typography>
+      <Typography variant="label" size="small" color="neutral700">
+        {date}
+      </Typography>
+    </div>
+  );
+}