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

package/src/components/ConfirmWalletsModal/WalletList.styles.ts

@@ -0,0 +1,34 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const LogoContainer = styled('div', {
+  position: 'relative',
+});
+
+const SpinAnimation = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const Spinner = styled('div', {
+  position: 'absolute',
+  border: '2px solid rgba(0, 0, 0, 0.1)',
+  borderTop: '2px solid $info500',
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  animation: `${SpinAnimation} 1s linear infinite`,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+});
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -0,0 +1,283 @@
+import type { PropTypes } from './WalletList.type';
+import type { Wallet } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
+
+import { i18n } from '@lingui/core';
+import { warn } from '@rango-dev/logging-core';
+import {
+  Divider,
+  makeInfo,
+  SelectableWallet,
+  Typography,
+  WalletState,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useWallets } from '../..';
+import { WIDGET_UI_ID } from '../../constants';
+import { useWalletList } from '../../hooks/useWalletList';
+import { useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
+import { getBlockchainDisplayNameFor } from '../../utils/meta';
+import {
+  getAddress,
+  getConciseAddress,
+  isExperimentalChain,
+} from '../../utils/wallets';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import { StatefulConnectModal } from '../StatefulConnectModal';
+import { ExperimentalChain } from '../WalletStatefulConnect';
+import { ExperimentalChainStatus } from '../WalletStatefulConnect/ExperimentalChainStatus';
+
+import { ShowMoreWallets } from './ConfirmWallets.styles';
+
+const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
+const TIME_TO_CLOSE_MODAL = 3_000;
+
+export function WalletList(props: PropTypes) {
+  const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
+    props;
+  const isActiveTab = useUiStore.use.isActiveTab();
+
+  const { blockchains, connectedWallets } = useAppStore();
+  const [selectedWalletToConnect, setSelectedWalletToConnect] =
+    useState<ExtendedModalWalletInfo>();
+  const [experimentalChainWallet, setExperimentalChainWallet] =
+    useState<Wallet | null>(null);
+  const [showExperimentalChainModal, setShowExperimentalChainModal] =
+    useState(false);
+  const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
+    useState<'in-progress' | 'completed' | 'rejected' | null>(null);
+  const { suggestAndConnect } = useWallets();
+  const { list } = useWalletList({
+    chain,
+  });
+
+  const [sortedList, setSortedList] = useState<ExtendedModalWalletInfo[]>(list);
+  const numberOfSupportedWallets = list.length;
+  const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
+
+  const addExperimentalChain = async (wallet: Wallet) => {
+    setShowExperimentalChainModal(false);
+    setAddingExperimentalChainStatus('in-progress');
+    try {
+      await suggestAndConnect(wallet.walletType, wallet.chain);
+      setAddingExperimentalChainStatus('completed');
+    } catch {
+      setAddingExperimentalChainStatus('rejected');
+    }
+  };
+
+  useEffect(() => {
+    setSortedList((sortedList) => {
+      const selectedWalletIndex = list.findIndex((wallet) =>
+        isSelected(wallet.type, chain)
+      );
+
+      if (shouldShowMoreWallets && selectedWalletIndex > 1) {
+        return [list[selectedWalletIndex]].concat(
+          list.filter((_, index) => index !== selectedWalletIndex)
+        );
+      }
+      return sortedList.map(
+        (sortedItem) =>
+          list.find((listItem) => listItem.type === sortedItem.type) ??
+          sortedItem
+      );
+    });
+  }, [JSON.stringify(list)]);
+
+  const modalContainer = document.getElementById(
+    WIDGET_UI_ID.SWAP_BOX_ID
+  ) as HTMLDivElement;
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    if (
+      addingExperimentalChainStatus === 'completed' ||
+      addingExperimentalChainStatus === 'rejected'
+    ) {
+      timeout = setTimeout(
+        () => setAddingExperimentalChainStatus(null),
+        TIME_TO_CLOSE_MODAL
+      );
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [addingExperimentalChainStatus]);
+
+  return (
+    <>
+      {sortedList.slice(0, limit).map((wallet) => {
+        const address = getAddress({
+          connectedWallets,
+          walletType: wallet.type,
+          chain,
+        });
+        const isConnected =
+          wallet.state === WalletState.CONNECTED ||
+          wallet.state === WalletState.PARTIALLY_CONNECTED;
+        const conciseAddress = address
+          ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
+          : '';
+        const isConnectedButDifferentThanTargetNamespace =
+          isConnected && !!wallet.needsNamespace && !conciseAddress;
+
+        const experimentalChain = isExperimentalChain(blockchains(), chain);
+
+        const experimentalChainNotAdded = !connectedWallets.find(
+          (connectedWallet) =>
+            connectedWallet.walletType === wallet.type &&
+            connectedWallet.chain === chain
+        );
+
+        const couldAddExperimentalChain =
+          experimentalChain &&
+          experimentalChainNotAdded &&
+          wallet.state === WalletState.CONNECTED;
+
+        const onSelectableWalletClick = async () => {
+          const isDisconnected = wallet.state === WalletState.DISCONNECTED;
+
+          if (isDisconnected || isConnectedButDifferentThanTargetNamespace) {
+            setSelectedWalletToConnect(wallet);
+          } else if (couldAddExperimentalChain) {
+            setExperimentalChainWallet({
+              walletType: wallet.type,
+              chain,
+              address: address ?? '',
+            });
+            setShowExperimentalChainModal(true);
+          } else {
+            selectWallet({
+              walletType: wallet.type,
+              chain,
+              address: address ?? '',
+            });
+          }
+        };
+
+        const info = makeInfo(wallet.state);
+
+        const getWalletDescription = () => {
+          if (couldAddExperimentalChain) {
+            return i18n.t({
+              id: 'Add {chain} chain',
+              values: { chain },
+            });
+          } else if (isConnectedButDifferentThanTargetNamespace) {
+            return i18n.t('Chain not connected');
+          } else if (conciseAddress) {
+            return conciseAddress;
+          }
+          return info.description;
+        };
+
+        const getWalletDescriptionColor = () => {
+          if (
+            wallet.state === WalletState.CONNECTED ||
+            wallet.state === WalletState.PARTIALLY_CONNECTED
+          ) {
+            if (isConnectedButDifferentThanTargetNamespace) {
+              return 'neutral600';
+            }
+            return 'neutral700';
+          }
+
+          return info.color;
+        };
+
+        const blockchainDisplayName: string | undefined =
+          experimentalChainWallet?.chain
+            ? getBlockchainDisplayNameFor(
+                experimentalChainWallet.chain,
+                blockchains()
+              )
+            : undefined;
+        return (
+          <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
+            {!!experimentalChainWallet && (
+              <WatermarkedModal
+                id="widget-wallets-list-watermarked-modal"
+                open={!!experimentalChainWallet && showExperimentalChainModal}
+                container={modalContainer}
+                onClose={() => {
+                  setExperimentalChainWallet(null);
+                }}>
+                <ExperimentalChain
+                  id="widget-wallets-list-experimental-chain-container"
+                  displayName={blockchainDisplayName}
+                  onConfirm={() => {
+                    void addExperimentalChain(experimentalChainWallet);
+                  }}
+                />
+              </WatermarkedModal>
+            )}
+            {addingExperimentalChainStatus && (
+              <WatermarkedModal
+                id="widget-wallets-list-experimental-chain-watermarked-modal"
+                open={!!addingExperimentalChainStatus}
+                onClose={setAddingExperimentalChainStatus.bind(null, null)}
+                container={modalContainer}>
+                <ExperimentalChainStatus
+                  status={addingExperimentalChainStatus}
+                  displayName={blockchainDisplayName}
+                  image={wallet.image}
+                />
+                <Divider direction="vertical" size={32} />
+              </WatermarkedModal>
+            )}
+            <SelectableWallet
+              key={wallet.type}
+              id="widget-wallets-list-selectable-wallet-btn"
+              description={getWalletDescription()}
+              descriptionColor={getWalletDescriptionColor()}
+              onClick={onSelectableWalletClick}
+              selected={isSelected(wallet.type, chain)}
+              disabled={!isActiveTab}
+              {...wallet}
+            />
+          </React.Fragment>
+        );
+      })}
+      <StatefulConnectModal
+        id="widget-wallets-list-stateful-connect-modal"
+        wallet={selectedWalletToConnect}
+        options={{ defaultSelectedChains: quoteChains || [chain] }}
+        onClose={() => {
+          setSelectedWalletToConnect(undefined);
+        }}
+        onConnect={() => {
+          if (props.onConnect) {
+            if (selectedWalletToConnect?.type) {
+              props.onConnect(selectedWalletToConnect.type);
+            } else {
+              warn(
+                new Error(
+                  "The selected wallet hasn't been detected after the connection process finished. It usually shouldn't happen."
+                )
+              );
+            }
+          }
+        }}
+      />
+      {shouldShowMoreWallets && (
+        <ShowMoreWallets
+          selected={false}
+          onClick={onShowMore}
+          id="widget-wallets-list-show-more-wallets-btn">
+          <Typography variant="label" size="medium">
+            {i18n.t('Show more wallets')}
+            <Typography variant="label" size="medium" color="$primary">
+              &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
+            </Typography>
+          </Typography>
+        </ShowMoreWallets>
+      )}
+    </>
+  );
+}

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -0,0 +1,11 @@
+import type { Wallet } from '../../types';
+
+export type PropTypes = {
+  chain: string;
+  quoteChains?: string[];
+  isSelected: (walletType: string, chain: string) => boolean;
+  selectWallet: (wallet: Wallet) => void;
+  limit?: number;
+  onShowMore: () => void;
+  onConnect?: (walletType: string) => void;
+};

package/src/components/CustomCollapsible/CustomCollapsible.styles.ts

@@ -0,0 +1,76 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleRoot = styled(Collapsible.Root, {
+  borderRadius: '$sm',
+  overflow: 'hidden',
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$0',
+  border: 'none',
+  outline: 'none',
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  cursor: 'pointer',
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+    },
+  },
+});
+
+export const ExpandedIcon = styled('div', {
+  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
+  display: 'flex',
+  alignItems: 'center',
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -0,0 +1,46 @@
+import type { PropTypes } from './CustomCollapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useRef } from 'react';
+
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  Trigger,
+} from './CustomCollapsible.styles';
+
+export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
+  const {
+    open,
+    hasSelected,
+    onOpenChange,
+    children,
+    onClickTrigger,
+    trigger,
+    triggerAnchor,
+  } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <CollapsibleRoot
+      ref={ref}
+      className="collapsible_root"
+      selected={hasSelected && open}
+      open={open}
+      onOpenChange={onOpenChange}>
+      {triggerAnchor === 'top' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+      <CollapsibleContent className="collapsible_content" open={open}>
+        {children}
+      </CollapsibleContent>
+      {triggerAnchor === 'bottom' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+    </CollapsibleRoot>
+  );
+}

package/src/components/CustomCollapsible/CustomCollapsible.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type PropTypes = {
+  open: boolean;
+  hasSelected?: boolean;
+  onOpenChange?: (checked: boolean) => void;
+  onClickTrigger: () => void;
+  trigger: ReactNode;
+  triggerAnchor: 'top' | 'bottom';
+};

package/src/components/CustomDestination/CustomDestination.styles.ts

@@ -0,0 +1,47 @@
+import { darkTheme, styled, TextField } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  padding: '$10 $0',
+  '& .button__content': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .alarms': { paddingTop: '$5' },
+  '& .collapsible_content': {
+    backgroundColor: '$neutral100',
+  },
+  '& .collapsible_root': {
+    backgroundColor: '$neutral100',
+  },
+  '& input': {
+    padding: '$15',
+  },
+});
+
+export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
+});
+
+export const CustomDestinationButton = styled('div', {
+  width: '100%',
+  borderRadius: '$sm',
+  display: 'flex',
+  padding: '$15',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  borderBottomRightRadius: '0',
+  borderBottomLeftRadius: '0',
+  '&:focus-visible': {
+    $$background: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$background: '$colors$info700',
+    },
+    backgroundColor: '$$background',
+    outline: 0,
+  },
+});

package/src/components/CustomDestination/CustomDestination.tsx

@@ -0,0 +1,157 @@
+import type { PropTypes } from './CustomDestination.types';
+import type { MouseEvent } from 'react';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  ChevronDownIcon,
+  CloseIcon,
+  Divider,
+  IconButton,
+  PasteIcon,
+  Typography,
+  WalletIcon,
+} from '@rango-dev/ui';
+import React, { useEffect, useRef } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import {
+  getBlockchainDisplayNameFor,
+  isValidTokenAddress,
+} from '../../utils/meta';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
+
+import {
+  Container,
+  CustomDestinationButton,
+  StyledTextField,
+} from './CustomDestination.styles';
+
+export function CustomDestination(props: PropTypes) {
+  const { blockchain, handleOpenChange, open } = props;
+
+  const { customDestination, setCustomDestination } = useQuoteStore()();
+  const { config } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+  const blockchainName = getBlockchainDisplayNameFor(
+    blockchain.name,
+    blockchains
+  );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const configDestination =
+    config?.defaultCustomDestinations?.[blockchain.name];
+
+  const isFirefox = navigator?.userAgent.includes('Firefox');
+  const isAddressChecked = open && !!customDestination && blockchain;
+  const isAddressInvalid =
+    isAddressChecked && !isValidTokenAddress(blockchain, customDestination);
+  const handleClear = () => {
+    setCustomDestination('');
+  };
+
+  const handlePaste = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (navigator.clipboard !== undefined) {
+      const pastedText = await navigator.clipboard.readText();
+      setCustomDestination(pastedText);
+      inputRef?.current?.focus();
+    }
+  };
+
+  const renderSuffix = () => {
+    if (customDestination) {
+      return (
+        <IconButton
+          id="widget-custom-destination-close-icon-btn"
+          onClick={handleClear}
+          variant="ghost">
+          <CloseIcon size={12} color="gray" />
+        </IconButton>
+      );
+    } else if (!isFirefox) {
+      return (
+        <IconButton
+          id="widget-custom-destination-paste-icon-btn"
+          onClick={handlePaste}
+          variant="ghost">
+          <PasteIcon size={16} />
+        </IconButton>
+      );
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    const shouldUseConfigDestination =
+      !!configDestination && customDestination === null;
+
+    if (shouldUseConfigDestination) {
+      setCustomDestination(configDestination);
+      handleOpenChange(true);
+    }
+  }, [configDestination]);
+
+  return (
+    <Container>
+      <CustomCollapsible
+        onOpenChange={handleOpenChange}
+        hasSelected
+        open={open}
+        triggerAnchor="top"
+        trigger={
+          <CustomDestinationButton id="widget-custom-destination-collapsible-btn">
+            <div className="button__content">
+              <WalletIcon size={18} color="info" />
+              <Divider size={4} direction="horizontal" />
+              <Typography
+                variant="label"
+                size="medium"
+                color={open ? '$neutral600' : undefined}>
+                {i18n.t('Send to a different address')}
+              </Typography>
+            </div>
+            <ExpandedIcon orientation={open ? 'up' : 'down'}>
+              <ChevronDownIcon size={10} color="secondary" />
+            </ExpandedIcon>
+          </CustomDestinationButton>
+        }
+        onClickTrigger={() => handleOpenChange(!open)}>
+        <StyledTextField
+          id="widget-custom-destination-blockchain-address-input"
+          ref={inputRef}
+          style={{
+            padding: 0,
+            paddingRight: customDestination ? '8px' : '5px',
+          }}
+          autoFocus={!customDestination}
+          placeholder={i18n.t('Enter {blockchainName} address', {
+            blockchainName,
+          })}
+          value={customDestination || ''}
+          suffix={renderSuffix()}
+          onChange={(e) => {
+            const customDestination = e.target.value;
+            setCustomDestination(customDestination);
+          }}
+        />
+      </CustomCollapsible>
+
+      {isAddressInvalid && (
+        <>
+          <Divider size={4} />
+          <Alert
+            variant="alarm"
+            type="error"
+            title={i18n.t({
+              values: { destination: customDestination },
+              id: "Address {destination} doesn't match the blockchain address pattern.",
+            })}
+          />
+        </>
+      )}
+    </Container>
+  );
+}

package/src/components/CustomDestination/CustomDestination.types.ts

@@ -0,0 +1,7 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export type PropTypes = {
+  blockchain: BlockchainMeta;
+  handleOpenChange: (open: boolean) => void;
+  open: boolean;
+};

package/src/components/CustomTokenModal/CustomTokenModal.constants.ts

@@ -0,0 +1,2 @@
+export const CUSTOM_TOKEN_LEARN_MORE_LINK =
+  'https://blog.rango.exchange/understanding-the-risks-of-using-custom-token-contract-addresses-96022308eca4';