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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.3-next.3",
+  "version": "0.28.3-next.5",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.33.3-next.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/signer-solana": "^0.28.1-next.2",
-    "@rango-dev/ui": "^0.34.1-next.3",
+    "@rango-dev/ui": "^0.34.1-next.4",
     "@rango-dev/wallets-react": "^0.19.1-next.1",
     "@rango-dev/wallets-shared": "^0.33.1-next.1",
     "bignumber.js": "^9.1.1",

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

@@ -118,7 +118,7 @@ export const ConfirmButton = styled('div', {
 
 export const StyledTextField = styled(TextField, {
   backgroundColor: '$neutral100',
-  padding: '$0 $15 $15 $15',
+  padding: '$15',
 });
 
 export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
@@ -137,13 +137,6 @@ export const CustomDestinationButton = styled('div', {
   backgroundColor: '$$color',
   borderBottomRightRadius: '0',
   borderBottomLeftRadius: '0',
-  '&:hover': {
-    $$color: '$colors$secondary100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral100',
-    },
-    backgroundColor: '$$color',
-  },
   '&:focus-visible': {
     $$background: '$colors$secondary100',
     [`.${darkTheme} &`]: {

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,6 +1,7 @@
 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 {
@@ -9,12 +10,15 @@ import {
   Button,
   ChevronDownIcon,
   ChevronLeftIcon,
+  CloseIcon,
   Divider,
+  IconButton,
   MessageBox,
+  PasteIcon,
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -23,7 +27,10 @@ import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
-import { getBlockchainShortNameFor } from '../../utils/meta';
+import {
+  getBlockchainDisplayNameFor,
+  getBlockchainShortNameFor,
+} from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteWallets } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -54,6 +61,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
   const config = useAppStore().config;
 
+  const customDestinationInputRef = useRef<HTMLInputElement | null>(null);
+
   const blockchains = useAppStore().blockchains();
   const {
     selectedQuote,
@@ -75,6 +84,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
     !!customDestination
   );
 
+  const isFirefox = navigator?.userAgent.includes('Firefox');
+
   const quoteWallets = getQuoteWallets({
     filter: 'all',
     quote: selectedQuote,
@@ -143,6 +154,39 @@ export function ConfirmWalletsModal(props: PropTypes) {
     });
   };
 
+  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();
+    } else {
+      if (!isWalletRequiredFor(lastStepToBlockchain?.name ?? '')) {
+        setSelectableWallets((selectableWallets) =>
+          selectableWallets.map((selectableWallet) => {
+            if (selectableWallet.chain === lastStepToBlockchain?.name) {
+              return {
+                ...selectableWallet,
+                selected: false,
+              };
+            }
+            return selectableWallet;
+          })
+        );
+      }
+    }
+  };
+
   const onChange = (wallet: Wallet) => {
     if (showMoreWalletFor) {
       setShowMoreWalletFor('');
@@ -210,6 +254,24 @@ 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) =>
       selectableWallets.concat(
@@ -386,32 +448,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {isLastWallet && config?.customDestination && (
                     <CustomDestination>
                       <CustomCollapsible
-                        onOpenChange={(checked) => {
-                          if (!checked) {
-                            resetCustomDestination();
-                          } else {
-                            if (
-                              !isWalletRequiredFor(
-                                lastStepToBlockchain?.name ?? ''
-                              )
-                            ) {
-                              setSelectableWallets((selectableWallets) =>
-                                selectableWallets.map((selectableWallet) => {
-                                  if (
-                                    selectableWallet.chain ===
-                                    lastStepToBlockchain?.name
-                                  ) {
-                                    return {
-                                      ...selectableWallet,
-                                      selected: false,
-                                    };
-                                  }
-                                  return selectableWallet;
-                                })
-                              );
-                            }
-                          }
-                        }}
+                        onOpenChange={
+                          handleCustomDestinationCollapsibleOpenChange
+                        }
                         hasSelected
                         open={showCustomDestination}
                         triggerAnchor="top"
@@ -420,7 +459,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
                             <div className="button__content">
                               <WalletIcon size={18} color="info" />
                               <Divider size={4} direction="horizontal" />
-                              <Typography variant="label" size="medium">
+                              <Typography
+                                variant="label"
+                                size="medium"
+                                color={
+                                  showCustomDestination
+                                    ? '$neutral600'
+                                    : undefined
+                                }>
                                 {i18n.t('Send to a different address')}
                               </Typography>
                             </div>
@@ -428,17 +474,31 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               orientation={
                                 showCustomDestination ? 'up' : 'down'
                               }>
-                              <ChevronDownIcon size={10} color="gray" />
+                              <ChevronDownIcon size={10} color="secondary" />
                             </ExpandedIcon>
                           </CustomDestinationButton>
                         }
                         onClickTrigger={() =>
                           setShowCustomDestination((prev) => !prev)
                         }>
-                        <Divider size={4} />
                         <StyledTextField
-                          placeholder={i18n.t('Your destination address')}
+                          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;
                             if (!value.length) {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -12,9 +12,10 @@ import {
   CopyIcon,
   Divider,
   IconButton,
-  LinkIcon,
   QuoteCost,
+  RangoExplorerIcon,
   StepDetails,
+  Tooltip,
   Typography,
   useCopyToClipboard,
 } from '@rango-dev/ui';
@@ -321,7 +322,12 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StyledLink
                 target="_blank"
                 href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
-                <LinkIcon size={16} />
+                <Tooltip
+                  container={getContainer()}
+                  content={i18n.t('View on Rango Explorer')}
+                  side="bottom">
+                  <RangoExplorerIcon size={20} />
+                </Tooltip>
               </StyledLink>
             </div>
           </div>

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -2,7 +2,7 @@ import type { PropTypes } from './WidgetProvider.types';
 import type { PropsWithChildren } from 'react';
 
 import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
 import useFontLoader from '../../hooks/useFontLoader';
@@ -24,7 +24,7 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
     }
   }, [fontFamily]);
 
-  useEffect(() => {
+  useMemo(() => {
     initConfig({
       API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,