@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -0,0 +1,100 @@
+import type { NamespaceDetachedItemPropTypes } from './Namespaces.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Spinner } from '@rango-dev/ui';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import { getConciseAddress } from '../../utils/wallets';
+import { NamespaceItem } from '../NamespaceItem';
+
+export function NamespaceDetachedItem(props: NamespaceDetachedItemPropTypes) {
+  const {
+    namespace,
+    initialConnect,
+    disabled,
+    state,
+    handleConnect,
+    handleDisconnect,
+  } = props;
+
+  const [error, setError] = useState<Error | null>(null);
+
+  /*
+   * Ref to track ongoing connection attempts.
+   * In React Strict Mode, effects run twice for safety checks.
+   * This prevents multiple connect requests by ensuring only one attempt is processed at a time.
+   */
+  const processingConnectAttempt = useRef(false);
+
+  useLayoutEffect(() => {
+    if (initialConnect && !processingConnectAttempt.current) {
+      void handleConnectNamespace(); // If we attempt to connect the namespace as the initial connect, we should not ask for derivation path
+    }
+  }, []);
+
+  const handleConnectNamespace = async (options?: {
+    shouldAskForDerivationPath?: boolean;
+  }) => {
+    try {
+      processingConnectAttempt.current = true;
+      await handleConnect(options);
+    } catch (error) {
+      setError(error as Error);
+    } finally {
+      processingConnectAttempt.current = false;
+    }
+  };
+
+  const handleButtonClick = async () => {
+    setError(null);
+    if (state.connected) {
+      await handleDisconnect();
+    } else {
+      void handleConnectNamespace({ shouldAskForDerivationPath: true }); // If we attempt to connect the namespace in result of button click, we should ask for derivation path
+    }
+  };
+
+  const getConnectedAddress = () => {
+    const firstAccountArray = state.accounts?.[0]?.split(':');
+    const address = firstAccountArray?.[firstAccountArray.length - 1]; // Considering that account = [namespace, chain, address], we only need to get the address
+    if (!state.connected || !address) {
+      return null;
+    }
+
+    return getConciseAddress(address);
+  };
+
+  const getButtonText = () => {
+    if (state.connected) {
+      return i18n.t('Disconnect');
+    }
+    if (!!error) {
+      return i18n.t('Try again');
+    }
+    return i18n.t('Connect');
+  };
+
+  return (
+    <NamespaceItem
+      namespace={namespace}
+      connected={state.connected}
+      error={error?.message}
+      address={getConnectedAddress()}
+      suffix={
+        state.connecting ? (
+          <Spinner color="info" />
+        ) : (
+          <Button
+            id="widget-name-space-connect-btn"
+            variant="ghost"
+            type={state.connected ? 'error' : 'primary'}
+            size="xsmall"
+            onClick={async () => handleButtonClick()}
+            disabled={disabled}>
+            {getButtonText()}
+          </Button>
+        )
+      }
+    />
+  );
+}

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -0,0 +1,24 @@
+import type { NamespaceItemPropTypes } from './Namespaces.types';
+
+import { Checkbox, Radio } from '@rango-dev/ui';
+import React from 'react';
+
+import { NamespaceItem } from '../NamespaceItem';
+
+export function NamespaceListItem(props: NamespaceItemPropTypes) {
+  const { onClick, type, namespace } = props;
+
+  return (
+    <NamespaceItem
+      namespace={namespace}
+      onClick={onClick}
+      suffix={
+        type === 'radio' ? (
+          <Radio value={namespace.value} />
+        ) : (
+          <Checkbox checked={props.value} />
+        )
+      }
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+import { Button, styled } from '@rango-dev/ui';
+
+export const NamespaceList = styled('ul', {
+  padding: 0,
+  paddingBottom: '$20',
+  margin: 0,
+});
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -0,0 +1,194 @@
+import type { PropTypes } from './Namespaces.types';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  Divider,
+  Image,
+  MessageBox,
+  RadioRoot,
+  WalletImageContainer,
+} from '@rango-dev/ui';
+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';
+
+export function Namespaces(props: PropTypes) {
+  const { targetWallet } = props.value;
+  const namespacesProperty = targetWallet.properties?.find(
+    (property) => property.name === 'namespaces'
+  );
+  const isHub = targetWallet.isHub;
+  const singleNamespace = targetWallet.isHub
+    ? namespacesProperty?.value.selection === 'single'
+    : targetWallet.needsNamespace?.selection === 'single';
+  const needsNamespace = isHub
+    ? namespacesProperty?.value
+    : targetWallet.needsNamespace;
+  const providerImage = targetWallet.image;
+
+  const blockchains = useAppStore().blockchains();
+  const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
+  const supportedNamespaces = useMemo(
+    () => needsNamespace?.data.filter((namespace) => !namespace.unsupported),
+    [targetWallet?.type]
+  );
+
+  const onSelect = (namespace: Namespace) => {
+    if (singleNamespace) {
+      setSelectedNamespaces([namespace]);
+    } else {
+      setSelectedNamespaces((selectedNamespaces) =>
+        selectedNamespaces.includes(namespace)
+          ? selectedNamespaces.filter((item) => item !== namespace)
+          : selectedNamespaces.concat(namespace)
+      );
+    }
+  };
+
+  const allSupportedNamespacesSelected =
+    supportedNamespaces?.length === selectedNamespaces.length;
+
+  const onSelectAll = () => {
+    if (singleNamespace) {
+      throw new Error(
+        'onSelectAll should not be called on single selection mode.'
+      );
+    } else if (allSupportedNamespacesSelected) {
+      setSelectedNamespaces([]);
+    } else if (supportedNamespaces) {
+      setSelectedNamespaces(
+        supportedNamespaces.map((namespace) => namespace.value)
+      );
+    }
+  };
+
+  const wrapRadioRoot = (children: React.ReactNode) => {
+    if (singleNamespace) {
+      return <RadioRoot value={selectedNamespaces?.[0]}>{children}</RadioRoot>;
+    }
+
+    return <>{children}</>;
+  };
+
+  useEffect(() => {
+    // Initially select supported and required namespaces
+    if (!singleNamespace && supportedNamespaces) {
+      if (!!props.value.defaultSelectedChains?.length) {
+        const namespacesContainingDefaultSelectedChains =
+          supportedNamespaces.filter((namespace) =>
+            namespace
+              .getSupportedChains(blockchains)
+              .some((chain) =>
+                props.value.defaultSelectedChains?.includes(chain.name)
+              )
+          );
+        setSelectedNamespaces(
+          namespacesContainingDefaultSelectedChains.map(
+            (namespace) => namespace.value
+          )
+        );
+      } else {
+        setSelectedNamespaces(
+          supportedNamespaces.map((namespace) => namespace.value)
+        );
+      }
+    }
+  }, []);
+
+  return (
+    <>
+      <MessageBox
+        type="info"
+        title={i18n.t(`Connect {wallet}`, {
+          wallet: targetWallet.title,
+        })}
+        description={i18n.t(
+          'This wallet supports multiple chains. Choose which chains you’d like to connect.'
+        )}
+        icon={
+          <WalletImageContainer>
+            <Image src={providerImage} size={45} />
+          </WalletImageContainer>
+        }
+      />
+      {singleNamespace ? (
+        <>
+          <Divider
+            size={20}
+            className="_initial_namespace_list_header_alert_top_divider"
+          />
+          <Alert
+            id="widget-wallet-stateful-connect-alert"
+            variant="alarm"
+            type="info"
+            title={i18n.t(
+              'This wallet can only connect to one chain at a time. '
+            )}
+          />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_alert_bottom_divider"
+          />
+        </>
+      ) : (
+        <>
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_button_top_divider"
+          />
+          <Button
+            style={{ marginLeft: 'auto' }}
+            id="widget-name-space-select-all-btn"
+            size="xsmall"
+            variant="ghost"
+            type="primary"
+            onClick={onSelectAll}>
+            {allSupportedNamespacesSelected
+              ? i18n.t('Deselect all')
+              : i18n.t('Select all')}
+          </Button>
+          <Divider
+            size={10}
+            className="_initial_namespace_list_header_button_bottom_divider"
+          />
+        </>
+      )}
+      <NamespaceList>
+        {wrapRadioRoot(
+          <>
+            {needsNamespace?.data.map((namespace, index, array) => (
+              <React.Fragment key={namespace.id}>
+                {namespace.unsupported ? (
+                  <NamespaceUnsupportedItem namespace={namespace} />
+                ) : (
+                  <NamespaceListItem
+                    value={selectedNamespaces.includes(namespace.value)}
+                    namespace={namespace}
+                    type={singleNamespace ? 'radio' : 'checkbox'}
+                    onClick={() => onSelect(namespace.value)}
+                  />
+                )}
+                {index !== array.length - 1 && <Divider size={10} />}
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </NamespaceList>
+      <Divider size={20} />
+      <StyledButton
+        id="widget-name-space-confirm-btn"
+        type="primary"
+        disabled={!selectedNamespaces.length}
+        onClick={() => props.onConfirm(selectedNamespaces)}>
+        {i18n.t('Connect')}
+      </StyledButton>
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { NamespaceData } from '@rango-dev/wallets-core/store';
+
+export interface PropTypes {
+  onConfirm: (namespaces: Namespace[]) => void;
+  value: NeedsNamespacesState;
+}
+
+interface NamespaceItemSharedPropTypes {
+  onClick: () => void;
+  type: 'radio' | 'checkbox';
+  namespace: LegacyNamespaceMeta;
+}
+
+interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
+  type: 'radio';
+}
+
+interface CheckboxNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
+  type: 'checkbox';
+  value: boolean;
+}
+
+export type NamespaceItemPropTypes =
+  | RadioNamespaceItemPropTypes
+  | CheckboxNamespaceItemPropTypes;
+
+export type NamespaceDetachedItemPropTypes = {
+  namespace: LegacyNamespaceMeta;
+  state: NamespaceData;
+  initialConnect?: boolean;
+  disabled?: boolean;
+  handleConnect: (options?: {
+    shouldAskForDerivationPath?: boolean;
+  }) => Promise<void>;
+  handleDisconnect: () => Promise<void>;
+};

package/src/components/WalletStatefulConnect/index.ts

@@ -0,0 +1,5 @@
+export { Namespaces } from './Namespaces';
+export { Detached } from './Detached';
+export { DerivationPath } from './DerivationPath';
+export { ConnectStatus } from './ConnectStatus';
+export { ExperimentalChain } from './ExperimentalChain';

package/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx

@@ -0,0 +1,25 @@
+import type { PropTypes } from './ActivateTabAlert.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+export function ActivateTabAlert(props: PropTypes) {
+  return (
+    <Alert
+      action={
+        <Button
+          id="widget-active-tab-btn"
+          onClick={props.onActivateTab}
+          variant="contained"
+          size="xxsmall"
+          type="warning">
+          {i18n.t('Activate this tab')}
+        </Button>
+      }
+      type="warning"
+      variant="alarm"
+      title={i18n.t('Another tab is open and handles transactions.')}
+    />
+  );
+}

package/src/components/common/ActivateTabAlert/ActivateTabAlert.types.ts

@@ -0,0 +1,3 @@
+export type PropTypes = {
+  onActivateTab: () => void;
+};

package/src/components/common/ActivateTabAlert/index.ts

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

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -0,0 +1,39 @@
+import type { PropTypes } from './ActivateTabModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../../utils/common';
+import { WatermarkedModal } from '../WatermarkedModal';
+
+export function ActivateTabModal(props: PropTypes) {
+  const { open, onClose, onConfirm } = props;
+
+  return (
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      id="widget-active-tab-modal"
+      container={getContainer()}>
+      <MessageBox
+        title={i18n.t('Activate current tab')}
+        type="warning"
+        description={i18n.t(
+          'Currently, some transactions are running and being handled by other browser tab. If you activate this tab, all transactions that are already in the transaction sign step will expire.'
+        )}>
+        <Divider size={20} />
+        <Button
+          id="widget-modal-confirm-activate-tab-btn"
+          variant="contained"
+          size="large"
+          type="primary"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm')}
+        </Button>
+      </MessageBox>
+    </WatermarkedModal>
+  );
+}

package/src/components/common/ActivateTabModal/ActivateTabModal.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};

package/src/components/common/ActivateTabModal/index.ts

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

package/src/components/common/WatermarkedModal/WatermarkedModal.tsx

@@ -0,0 +1,18 @@
+import type { ModalPropTypes } from '@rango-dev/ui';
+import type { PropsWithChildren } from 'react';
+
+import { Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { useUiStore } from '../../../store/ui';
+
+export function WatermarkedModal(props: PropsWithChildren<ModalPropTypes>) {
+  const { watermark } = useUiStore();
+
+  const hasWatermark = watermark === 'FULL';
+  return (
+    <Modal hasWatermark={hasWatermark} {...props}>
+      {props.children}
+    </Modal>
+  );
+}

package/src/components/common/WatermarkedModal/index.ts

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

package/src/constants/configs.ts

@@ -0,0 +1,2 @@
+export const BLOCKCHAIN_LIST_SIZE_COMPACT_MODE = 4;
+export const BLOCKCHAIN_LIST_SIZE = 10;

package/src/constants/customTokens.ts

@@ -0,0 +1,9 @@
+import { TransactionType } from 'rango-types';
+
+export const ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS: string[] = [
+  TransactionType.EVM,
+  TransactionType.SOLANA,
+];
+
+export const DEFAULT_TOKEN_IMAGE_SRC =
+  'https://raw.githubusercontent.com/rango-exchange/assets/refs/heads/main/common/unknown-image.png';

package/src/constants/errors.ts

@@ -0,0 +1,62 @@
+import type { QuoteError } from '../types';
+
+import { i18n } from '@lingui/core';
+
+import { QuoteErrorType } from '../types';
+
+export const errorMessages = () => {
+  return {
+    genericServerError: i18n.t('Failed Network, Please retry your swap.'),
+    liquiditySourcesError: {
+      title: i18n.t('Please reset your liquidity sources.'),
+      description: i18n.t(
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources.'
+      ),
+    },
+    noResultError: {
+      title: i18n.t('No Routes Found.'),
+      description: i18n.t(
+        "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
+      ),
+    },
+    bridgeLimitErrors: {
+      increaseAmount: i18n.t(
+        'Bridge Limit Error: Please increase your amount.'
+      ),
+      decreaseAmount: i18n.t(
+        'Bridge Limit Error: Please decrease your amount.'
+      ),
+    },
+    highValueLossError: {
+      impactTitle: i18n.t('High Price Impact'),
+      title: i18n.t('Price impact is too high!'),
+      description: i18n.t(
+        'The price impact is significantly higher than the allowed amount.'
+      ),
+      confirmMessage: i18n.t('Confirm high price impact'),
+    },
+    quoteUpdatedWithHighValueLoss: {
+      title: i18n.t(
+        'Route updated and price impact is too high, try again later!'
+      ),
+    },
+    unknownPriceError: {
+      impactTitle: i18n.t('USD Price Unknown'),
+      title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'),
+      description: i18n.t(
+        'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?'
+      ),
+      confirmMessage: i18n.t('Confirm USD Price Unknown'),
+    },
+  };
+};
+
+export function getQuoteErrorMessage(error: QuoteError) {
+  if (error.type === QuoteErrorType.NO_RESULT) {
+    return error.diagnosisMessage ?? errorMessages().noResultError.title;
+  } else if (error.type === QuoteErrorType.REQUEST_FAILED) {
+    return error.diagnosisMessage ?? errorMessages().genericServerError;
+  }
+
+  return '';
+}

package/src/constants/fonts.ts

@@ -0,0 +1,85 @@
+export const DEFAULT_FONT_FAMILY = 'Roboto';
+
+export const SUPPORTED_FONTS = [
+  {
+    name: 'Roboto',
+    value: 'Roboto',
+    url: '',
+  },
+  {
+    name: 'Times New Roman',
+    value: 'Times New Roman',
+    url: 'https://fonts.cdnfonts.com/css/times-new-roman',
+  },
+  {
+    name: 'Arial',
+    value: 'Arial',
+    url: '',
+  },
+  {
+    name: 'Open Sans',
+    value: 'Open Sans',
+    url: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap',
+  },
+  {
+    name: 'Noto Sans',
+    value: 'Noto Sans',
+    url: 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Montserrat',
+    value: 'Montserrat',
+    url: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Poppins',
+    value: 'Poppins',
+    url: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+  },
+  {
+    name: 'Roboto Condensed',
+    value: 'Roboto Condensed',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+
+  {
+    name: 'Roboto Mono',
+    value: 'Roboto Mono',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
+  },
+  {
+    name: 'Oswald',
+    value: 'Oswald',
+    url: 'https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap',
+  },
+  {
+    name: 'Raleway',
+    value: 'Raleway',
+    url: 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Sedan',
+    value: 'Sedan',
+    url: 'https://fonts.googleapis.com/css2?family=Sedan:ital@0;1&display=swap',
+  },
+  {
+    name: 'Inter',
+    value: 'Inter',
+    url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap',
+  },
+  {
+    name: 'Rubik',
+    value: 'Rubik',
+    url: 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap',
+  },
+  {
+    name: 'Lora',
+    value: 'Lora',
+    url: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
+  },
+  {
+    name: 'Barlow Condensed',
+    value: 'Barlow Condensed',
+    url: 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+  },
+];

package/src/constants/index.ts

@@ -0,0 +1,11 @@
+import { UI_ID } from '@rango-dev/ui';
+
+export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
+export const SCANNER_BASE_URL = 'https://explorer.rango.exchange';
+
+export const WIDGET_UI_ID = {
+  SWAP_BOX_ID: 'rango-swap-box',
+  EXPANDED_BOX_ID: 'rango-expanded-box',
+  ...UI_ID,
+};