@rango-dev/widget-embedded 0.30.1-next.6 → 0.30.1-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.30.1-next.6",
+  "version": "0.30.1-next.7",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

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

@@ -1,4 +1,4 @@
-import { css, darkTheme, IconButton, styled, TextField } from '@rango-dev/ui';
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
 
 export const Title = styled('div', {
   display: 'flex',
@@ -93,56 +93,8 @@ export const walletsListStyles = css({
   height: '100%',
 });
 
-export const CustomDestination = styled('div', {
-  padding: '$10 $0',
-  '& .button__content': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .alarms': { paddingTop: '$5' },
-  '& .collapsible_content': {
-    backgroundColor: '$neutral100',
-  },
-  '& .collapsible_root': {
-    backgroundColor: '$neutral100',
-  },
-});
-
-export const alarmsStyles = css({
-  paddingTop: '$5',
-});
-
 export const ConfirmButton = styled('div', {
   display: 'flex',
 });
 
-export const StyledTextField = styled(TextField, {
-  backgroundColor: '$neutral100',
-  padding: '$15',
-});
-
 export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
-
-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/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,30 +1,18 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
-import type { MouseEvent } from 'react';
 
 import { i18n } from '@lingui/core';
 import {
   Alert,
   BalanceErrors,
   Button,
-  ChevronDownIcon,
   ChevronLeftIcon,
-  CloseIcon,
   Divider,
-  IconButton,
   MessageBox,
-  PasteIcon,
   Typography,
-  WalletIcon,
 } from '@rango-dev/ui';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -33,26 +21,17 @@ import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
-import {
-  getBlockchainDisplayNameFor,
-  getBlockchainShortNameFor,
-} from '../../utils/meta';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteWallets } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
-import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
-import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
+import { CustomDestination } from '../CustomDestination/CustomDestination';
 
-import { isValidAddress } from './ConfirmWallets.helpers';
 import {
-  alarmsStyles,
   ConfirmButton,
-  CustomDestination,
-  CustomDestinationButton,
   ListContainer,
   NavigateBack,
   ShowMoreHeader,
-  StyledTextField,
   Title,
   Wallets,
   WalletsContainer,
@@ -66,10 +45,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
   const navigate = useNavigate();
-  const config = useAppStore().config;
-
-  const customDestinationInputRef = useRef<HTMLInputElement | null>(null);
-
   const blockchains = useAppStore().blockchains();
   const {
     selectedQuote,
@@ -80,6 +55,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     setCustomDestination,
   } = useQuoteStore();
   const { connectedWallets, selectWallets } = useWalletsStore();
+  const { config } = useAppStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
@@ -87,12 +63,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [quoteWarning, setQuoteWarning] = useState<
     ConfirmSwapWarnings['quoteUpdate'] | null
   >(null);
-  const [showCustomDestination, setShowCustomDestination] = useState(
+
+  const [isCustomDestinationOpen, setCustomDestinationOpen] = useState(
     !!customDestination
   );
 
-  const isFirefox = navigator?.userAgent.includes('Firefox');
-
   const quoteWallets = useMemo(
     () =>
       getQuoteWallets({
@@ -156,62 +131,50 @@ export function ConfirmWalletsModal(props: PropTypes) {
           (!isWalletRequiredFor(chain) && !customDestination))
     );
 
-  const isAddressMatched =
-    !!customDestination &&
-    showCustomDestination &&
-    lastStepToBlockchain &&
-    !isValidAddress(lastStepToBlockchain, customDestination);
-
-  const resetCustomDestination = () => {
-    setShowCustomDestination(false);
-    setCustomDestination(null);
-    setSelectableWallets((selectableWallets) => {
-      let anyWalletSelected = false;
-      return selectableWallets.map((selectableWallet) => {
-        if (
-          !anyWalletSelected &&
-          selectableWallet.chain === lastStepToBlockchain?.name
-        ) {
-          anyWalletSelected = true;
-          return {
-            ...selectableWallet,
-            selected: true,
-          };
+  const updateSelectableWallets = (
+    wallets: ConnectedWallet[],
+    chainName: string,
+    shouldSelect: boolean
+  ) => {
+    let isAnyWalletSelected = false;
+    return wallets.map((wallet) => {
+      if (wallet.chain === chainName) {
+        let selected = wallet.selected;
+        if (!isAnyWalletSelected && shouldSelect) {
+          isAnyWalletSelected = true;
+          selected = true;
+        } else if (!shouldSelect) {
+          selected = false;
         }
-        return selectableWallet;
-      });
+        return {
+          ...wallet,
+          selected,
+        };
+      }
+      return wallet;
     });
   };
 
-  const handleClearCustomDestination = () => setCustomDestination('');
-
-  const handlePasteCustomDestination = async (
-    event: MouseEvent<HTMLButtonElement>
-  ) => {
-    event.preventDefault();
-    if (navigator.clipboard !== undefined) {
-      const pastedText = await navigator.clipboard.readText();
-      setCustomDestination(pastedText);
-      customDestinationInputRef?.current?.focus();
-    }
-  };
-
-  const handleCustomDestinationCollapsibleOpenChange = (checked: boolean) => {
-    if (!checked) {
-      resetCustomDestination();
+  const handleCustomDestinationCollapsibleOpenChange = (open: boolean) => {
+    setCustomDestinationOpen(open);
+    if (!open) {
+      setCustomDestination('');
+      setSelectableWallets((selectableWallets) => {
+        return updateSelectableWallets(
+          selectableWallets,
+          lastStepToBlockchain?.name || '',
+          true
+        );
+      });
     } else {
       if (!isWalletRequiredFor(lastStepToBlockchain?.name ?? '')) {
-        setSelectableWallets((selectableWallets) =>
-          selectableWallets.map((selectableWallet) => {
-            if (selectableWallet.chain === lastStepToBlockchain?.name) {
-              return {
-                ...selectableWallet,
-                selected: false,
-              };
-            }
-            return selectableWallet;
-          })
-        );
+        setSelectableWallets((selectableWallets) => {
+          return updateSelectableWallets(
+            selectableWallets,
+            lastStepToBlockchain?.name || '',
+            false
+          );
+        });
       }
     }
   };
@@ -237,10 +200,10 @@ export function ConfirmWalletsModal(props: PropTypes) {
     onCancel();
     if (
       wallet.chain === lastStepToBlockchain?.name &&
-      showCustomDestination &&
+      isCustomDestinationOpen &&
       !isWalletRequiredFor(lastStepToBlockchain.name)
     ) {
-      setShowCustomDestination(false);
+      setCustomDestinationOpen(false);
       setCustomDestination(null);
     }
     setSelectableWallets((selectableWallets) =>
@@ -287,24 +250,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
     }
   };
 
-  const renderCustomDestinationSuffix = () => {
-    if (customDestination) {
-      return (
-        <IconButton onClick={handleClearCustomDestination} variant="ghost">
-          <CloseIcon size={12} color="gray" />
-        </IconButton>
-      );
-    } else if (!isFirefox) {
-      return (
-        <IconButton onClick={handlePasteCustomDestination} variant="ghost">
-          <PasteIcon size={16} />
-        </IconButton>
-      );
-    }
-
-    return null;
-  };
-
   useEffect(() => {
     setSelectableWallets((selectableWallets) => {
       let nextState: typeof selectableWallets = [];
@@ -388,7 +333,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
               loading={loading}
               disabled={isConfirmSwapDisabled(
                 loading,
-                showCustomDestination,
+                isCustomDestinationOpen,
                 customDestination,
                 selectedQuote,
                 selectableWallets,
@@ -487,7 +432,10 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
               const key = `wallet-${index}`;
               const isLastWallet = index === quoteWallets.length - 1;
-
+              const showCustomDestination =
+                isLastWallet &&
+                lastStepToBlockchain &&
+                config?.customDestination !== false;
               return (
                 <div key={key}>
                   <Title>
@@ -523,81 +471,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && config?.customDestination !== false && (
-                    <CustomDestination>
-                      <CustomCollapsible
-                        onOpenChange={
-                          handleCustomDestinationCollapsibleOpenChange
-                        }
-                        hasSelected
-                        open={showCustomDestination}
-                        triggerAnchor="top"
-                        trigger={
-                          <CustomDestinationButton>
-                            <div className="button__content">
-                              <WalletIcon size={18} color="info" />
-                              <Divider size={4} direction="horizontal" />
-                              <Typography
-                                variant="label"
-                                size="medium"
-                                color={
-                                  showCustomDestination
-                                    ? '$neutral600'
-                                    : undefined
-                                }>
-                                {i18n.t('Send to a different address')}
-                              </Typography>
-                            </div>
-                            <ExpandedIcon
-                              orientation={
-                                showCustomDestination ? 'up' : 'down'
-                              }>
-                              <ChevronDownIcon size={10} color="secondary" />
-                            </ExpandedIcon>
-                          </CustomDestinationButton>
-                        }
-                        onClickTrigger={() =>
-                          setShowCustomDestination((prev) => !prev)
-                        }>
-                        <StyledTextField
-                          ref={customDestinationInputRef}
-                          style={{
-                            padding: 0,
-                            paddingRight: customDestination ? '8px' : '5px',
-                          }}
-                          autoFocus
-                          placeholder={i18n.t(
-                            'Enter {blockchainName} address',
-                            {
-                              blockchainName: getBlockchainDisplayNameFor(
-                                requiredWallet,
-                                blockchains
-                              ),
-                            }
-                          )}
-                          value={customDestination || ''}
-                          suffix={renderCustomDestinationSuffix()}
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            setCustomDestination(value);
-                          }}
-                          {...(!customDestination && { autoFocus: true })}
-                        />
-                      </CustomCollapsible>
-
-                      {isAddressMatched && (
-                        <div className={alarmsStyles()}>
-                          <Alert
-                            variant="alarm"
-                            type="error"
-                            title={i18n.t({
-                              values: { destination: customDestination },
-                              id: "Address {destination} doesn't match the blockchain address pattern.",
-                            })}
-                          />
-                        </div>
-                      )}
-                    </CustomDestination>
+                  {showCustomDestination && (
+                    <CustomDestination
+                      blockchain={lastStepToBlockchain}
+                      open={isCustomDestinationOpen}
+                      handleOpenChange={
+                        handleCustomDestinationCollapsibleOpenChange
+                      }
+                    />
                   )}
                 </div>
               );

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

@@ -0,0 +1,45 @@
+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',
+  },
+});
+
+export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
+  padding: '$15',
+});
+
+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,148 @@
+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 } from '../../utils/meta';
+import { isValidAddress } from '../ConfirmWalletsModal/ConfirmWallets.helpers';
+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 && !isValidAddress(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 onClick={handleClear} variant="ghost">
+          <CloseIcon size={12} color="gray" />
+        </IconButton>
+      );
+    } else if (!isFirefox) {
+      return (
+        <IconButton 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>
+            <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
+          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/types/config.ts

@@ -179,6 +179,8 @@ export type TrezorManifest = {
  * @property {boolean} customDestination - A boolean value indicating whether the user can input a custom
  * address for the transaction. If set to true, the widget will allow the user to input a custom
  * address for the destination.
+ * @property {{[blockchain: string]: string }} defaultCustomDestinations - The `defaultCustomDestinations` property is a map of supported `blockchain` names to an arbitrary blockchain address.
+ * You could use it to set a default custom destination for some blockchains.  e.g. {'BSC': '0x2be.....c1','ETH': '0x2be.....c1'}
  * @property {string} language - The language property is an optional string that specifies the
  * default language in which the widget should be displayed. If not provided, the widget will default to the
  * language of the user's browser.
@@ -219,6 +221,7 @@ export type WidgetConfig = {
   wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
+  defaultCustomDestinations?: { [blockchain: string]: string };
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
@@ -227,7 +230,6 @@ export type WidgetConfig = {
   variant?: WidgetVariant;
   enableCentralizedSwappers?: boolean;
   signers?: SignersConfig;
-
   // These are likely to change or remove at anytime. Please use with a caution.
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;

package/src/utils/swap.ts

@@ -722,7 +722,7 @@ export function shouldRetrySwap(pendingSwap: PendingSwap) {
 
 export function isConfirmSwapDisabled(
   fetching: boolean,
-  showCustomDestination: boolean,
+  isCustomDestinationOpen: boolean,
   customDestination: string | null,
   quote: SelectedQuote | null,
   selectedWallets: { walletType: string; chain: string }[],
@@ -752,9 +752,9 @@ export function isConfirmSwapDisabled(
       : false;
 
   return (
-    (!showCustomDestination && !everyWalletSelected) ||
-    (showCustomDestination && !customDestination) ||
-    (showCustomDestination &&
+    (!isCustomDestinationOpen && !everyWalletSelected) ||
+    (isCustomDestinationOpen && !customDestination) ||
+    (isCustomDestinationOpen &&
       !!customDestination &&
       (!customDestinationIsValid || !everyRequiredWalletSelected))
   );