@aurora-is-near/intents-swap-widget 3.18.2 → 3.19.0

package/src/features/SuccessScreen/index.tsx

@@ -1,79 +1,185 @@
-import { Fragment } from 'react';
+import {
+  ArrowDownward,
+  Check,
+  OpenInNew,
+} from '@material-symbols-svg/react-rounded/w700';
 
-import { CheckIcon } from './CheckIcon';
-import { SummaryItem } from './SummaryItem';
-import { Hr } from '@/components/Hr';
-import { Card } from '@/components/Card';
+import { TokenRow } from './TokenRow';
+import { CopyableValue } from './CopyableValue';
+import { useSummaryItemsCount } from './useSummaryItemsCount';
+
+import { Notes } from '@/components/Notes';
+import { Button } from '@/components/Button';
 import { CloseButton } from '@/components/CloseButton';
-import type { TransferResult } from '@/types/transfer';
+import { Accordion } from '@/components/Accordion';
 
-import { fireEvent, useUnsafeSnapshot } from '@/machine';
+import { guardStates } from '@/machine/guards';
+import { useUnsafeSnapshot } from '@/machine/snap';
+import { formatUsdAmount } from '@/utils/formatters/formatUsdAmount';
+import { formatTinyNumber } from '@/utils/formatters/formatTinyNumber';
+import { formatBigToHuman } from '@/utils/formatters/formatBigToHuman';
 import { useTypedTranslation } from '@/localisation';
+import { useHandleKeyDown } from '@/hooks';
+import { logger } from '@/logger';
+
+import type { TransferResult } from '@/types/transfer';
+
+const NOTES_ITEM_HEIGHT = 44;
 
 type Msg = { type: 'on_dismiss_success' };
 
 type Props = TransferResult & {
-  message: string | string[];
-  onMsg?: (msg: Msg) => void;
-  hideHeader?: boolean;
+  title: string;
+  message?: string;
+  showTargetToken?: boolean;
+  onMsg: (msg: Msg) => void;
 };
 
 export const SuccessScreen = ({
-  intent,
-  transactionLink,
-  hash: txHash,
+  title,
   message,
+  showTargetToken = true,
+  transactionLink,
   onMsg,
-  hideHeader,
+  ...transferResult
 }: Props) => {
-  const { ctx } = useUnsafeSnapshot();
   const { t } = useTypedTranslation();
-  const lines = Array.isArray(message) ? message : [message];
+  const { ctx } = useUnsafeSnapshot();
+
+  const isValidState = guardStates(ctx, ['transfer_success']);
+  const handleClose = () => onMsg({ type: 'on_dismiss_success' });
+  const summaryItemsCount = useSummaryItemsCount(!!transferResult.intent);
+
+  useHandleKeyDown('Escape', handleClose);
 
-  const onDismiss = () => {
-    fireEvent('reset', { clearWalletAddress: false }).moveTo(
-      ctx.walletAddress ? 'initial_wallet' : 'initial_dry',
+  if (!isValidState) {
+    logger.warn(
+      '[WIDGET] Success screen can be rendered only in transfer_success state',
     );
-    onMsg?.({ type: 'on_dismiss_success' });
-  };
+
+    return null;
+  }
+
+  const sourceAmount = formatBigToHuman(
+    ctx.quote?.amountIn ?? ctx.sourceTokenAmount,
+    ctx.sourceToken.decimals,
+  );
+
+  const targetAmount = formatBigToHuman(
+    ctx.quote?.amountOut ?? ctx.targetTokenAmount,
+    ctx.targetToken.decimals,
+  );
+
+  const sourceAmountUsd = ctx.quote?.amountInUsd
+    ? parseFloat(ctx.quote.amountInUsd)
+    : ctx.sourceToken.price * parseFloat(sourceAmount);
+
+  const targetAmountUsd = ctx.quote?.amountOutUsd
+    ? parseFloat(ctx.quote.amountOutUsd)
+    : ctx.targetToken.price * parseFloat(targetAmount);
+
+  const targetTokenUnitPrice = targetAmountUsd / parseFloat(targetAmount);
+
+  const sourceTokenUnitAmount = formatTinyNumber(
+    targetTokenUnitPrice / (parseFloat(sourceAmount) / sourceAmountUsd),
+  );
 
   return (
-    <Card className="w-full">
-      {!hideHeader && (
-        <>
-          <header className="flex justify-between">
-            <CheckIcon />
-            <CloseButton onClick={onDismiss} />
-          </header>
-          <span className="text-sw-label-lg text-sw-gray-50">
-            {t('transfer.success.title', 'All done!')}
-          </span>
-        </>
+    <div className="flex flex-col gap-sw-2xl w-full">
+      <header className="flex items-center gap-sw-lg">
+        <div className="flex items-center justify-center p-sw-md bg-sw-status-success rounded-sw-md">
+          <Check size={20} className="text-sw-gray-900" />
+        </div>
+        <span className="text-sw-label-lg text-sw-status-success mr-auto">
+          {title}
+        </span>
+        <CloseButton onClick={handleClose} />
+      </header>
+
+      {!!message && (
+        <p className="text-sw-body-md text-sw-gray-200">{message}</p>
       )}
-      <p className="mt-sw-sm text-sw-body-md text-sw-gray-400">
-        {lines.map((line, idx) => (
-          <Fragment key={idx}>
-            {line}
-            {idx !== lines.length - 1 && <br />}
-          </Fragment>
-        ))}
-      </p>
-      <Hr className="mt-sw-xl mb-sw-md" />
-      <ul className="mt-sw-xl flex flex-col">
-        <SummaryItem
-          hasCopyAction
-          value={txHash}
-          externalUrl={transactionLink}
-          label={t('transfer.success.hash.label', 'Transaction hash')}
+
+      <div className="flex flex-col">
+        <TokenRow
+          token={ctx.sourceToken}
+          amount={sourceAmount}
+          amountUsd={sourceAmountUsd}
         />
-        {!!intent && (
-          <SummaryItem
-            hasCopyAction
-            label={t('transfer.success.intent.label', 'Intent')}
-            value={intent}
-          />
+        {showTargetToken && (
+          <>
+            <div className="flex items-center justify-center w-full h-[12px] z-1">
+              <div className="flex items-center justify-center p-sw-md bg-sw-gray-950 rounded-sw-md w-fit">
+                <ArrowDownward size={18} className="text-sw-gray-200" />
+              </div>
+            </div>
+            <TokenRow
+              token={ctx.targetToken}
+              amount={targetAmount}
+              amountUsd={targetAmountUsd}
+            />
+          </>
         )}
-      </ul>
-    </Card>
+      </div>
+
+      <Accordion
+        expandedByDefault={false}
+        expandedHeightPx={summaryItemsCount * NOTES_ITEM_HEIGHT}
+        title={t('transfer.success.details.label', 'Transaction details')}>
+        <Notes>
+          {ctx.sourceToken.symbol !== ctx.targetToken.symbol && (
+            <Notes.Item
+              label={t('transfer.success.details.rate', 'Rate')}
+              value={
+                <span
+                  className="text-sw-gray-50"
+                  style={{ borderBottomWidth: '2px', borderStyle: 'dotted' }}>
+                  {`1 ${ctx.targetToken.symbol} ≈ `} {sourceTokenUnitAmount}{' '}
+                  {`${ctx.sourceToken.symbol}`}
+                  <span>{` (${formatUsdAmount(targetTokenUnitPrice)})`}</span>
+                </span>
+              }
+            />
+          )}
+          {/* send address is missing if target token is on intents */}
+          {!!ctx.sendAddress && (
+            <Notes.Item
+              label={t(
+                'transfer.success.details.recipient',
+                'Recipient address',
+              )}
+              value={<CopyableValue value={ctx.sendAddress} />}
+            />
+          )}
+          {!!transferResult.intent && (
+            <Notes.Item
+              label={t('transfer.success.details.intent', 'Intent hash')}
+              value={<CopyableValue value={transferResult.intent} />}
+            />
+          )}
+          <Notes.Item
+            label={t('transfer.success.details.hash', 'Transaction hash')}
+            value={<CopyableValue value={transferResult.hash} />}
+          />
+        </Notes>
+      </Accordion>
+
+      <div className="flex flex-col gap-sw-lg">
+        <Button
+          fluid
+          as="a"
+          size="lg"
+          target="_blank"
+          variant="primary"
+          iconPosition="tail"
+          href={transactionLink}
+          icon={OpenInNew}>
+          {t('transfer.success.action.viewOnExplorer', 'View in explorer')}
+        </Button>
+        <Button fluid size="lg" variant="outlined" onClick={handleClose}>
+          {t('transfer.success.action.backToSwap', 'Back to swap')}
+        </Button>
+      </div>
+    </div>
   );
 };

package/src/features/SuccessScreen/useSummaryItemsCount.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import { guardStates } from '@/machine/guards';
+import { useUnsafeSnapshot } from '@/machine/snap';
+
+export const useSummaryItemsCount = (hasIntentHash: boolean) => {
+  const { ctx } = useUnsafeSnapshot();
+  const isValidState = guardStates(ctx, ['transfer_success']);
+
+  const summaryItemsCount = useMemo(() => {
+    let count = 1;
+
+    if (!isValidState) {
+      return 0;
+    }
+
+    if (ctx.sourceToken.symbol !== ctx.targetToken.symbol) {
+      count += 1;
+    }
+
+    if (ctx.sendAddress) {
+      count += 1;
+    }
+
+    if (hasIntentHash) {
+      count += 1;
+    }
+
+    return count;
+  }, [hasIntentHash, ctx.sendAddress, ctx.sourceToken, ctx.targetToken]);
+
+  return summaryItemsCount;
+};

package/src/features/TokensList/TokensList.tsx

@@ -60,7 +60,7 @@ export const TokensList = ({
 }: Props) => {
   const { t } = useTypedTranslation();
   const { ctx } = useUnsafeSnapshot();
-  const { walletSupportedChains, appName } = useConfig();
+  const { walletSupportedChains, appName, priorityAssets = [] } = useConfig();
   const { mergedBalance } = useMergedBalance();
 
   const filteredTokens = useTokensFiltered({
@@ -69,6 +69,7 @@ export const TokensList = ({
     chainsFilter,
     selectedChain,
     walletSupportedChains,
+    priorityAssets,
   });
 
   const areTokensGrouped = ctx.walletAddress ? groupTokens : false;

package/src/features/TokensModal.tsx

@@ -1,9 +1,10 @@
-import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 import { useRef, useState } from 'react';
+import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 
-import { TokensList } from './TokensList';
-import { ChainsDropdown } from './ChainsDropdown';
 import { useChains } from '../hooks';
+import { TokensList } from './TokensList';
+import { ChainsSelector } from './ChainsSelector';
+
 import { Hr } from '@/components/Hr';
 import { Card } from '@/components/Card';
 import { Input } from '@/components/Input';
@@ -96,33 +97,32 @@ export const TokensModal = ({
         <CloseButton onClick={handleClose} />
       </header>
 
-      <div className="gap-sw-xl flex items-center">
-        <Input
-          focusOnMount
-          icon={Search}
-          ref={searchInputRef}
-          defaultValue={search}
-          className="w-full"
-          placeholder="Search or paste address"
-          onChange={(e) => setSearch(e.target.value.trim())}
+      <Input
+        focusOnMount
+        icon={Search}
+        ref={searchInputRef}
+        defaultValue={search}
+        className="w-full"
+        placeholder="Search or paste address"
+        onChange={(e) => setSearch(e.target.value.trim())}
+      />
+
+      {showChainsSelector && (
+        <ChainsSelector
+          variant={variant}
+          chainsFilter={chainsFilter}
+          selectedChain={selectedChain}
+          onMsg={(msg) => {
+            switch (msg.type) {
+              case 'on_select_chain':
+                setSelectedChain(msg.chain);
+                break;
+              default:
+                notReachable(msg.type);
+            }
+          }}
         />
-        {showChainsSelector && (
-          <ChainsDropdown
-            variant={variant}
-            selected={selectedChain}
-            chainsFilter={chainsFilter}
-            onMsg={(msg) => {
-              switch (msg.type) {
-                case 'on_click_chain':
-                  setSelectedChain(msg.chain);
-                  break;
-                default:
-                  notReachable(msg.type, { throwError: false });
-              }
-            }}
-          />
-        )}
-      </div>
+      )}
 
       {chainIsNotSupported && !!ctx.walletAddress && (
         <>

package/src/hooks/useTokensFiltered.ts

@@ -8,6 +8,7 @@ import { createFilterByIntents } from '@/utils/tokens/filterByIntents';
 import { createFilterBySearch } from '@/utils/tokens/filterBySearchString';
 import { createFilterBySelectedChain } from '@/utils/tokens/filterBySelectedChain';
 import type { Chains, ChainsFilter } from '@/types/chain';
+import type { PriorityAssets } from '@/types/config';
 
 export type TokensFilterOptions = {
   variant: 'source' | 'target';
@@ -15,6 +16,7 @@ export type TokensFilterOptions = {
   selectedChain: Chains | 'all' | 'intents';
   chainsFilter: ChainsFilter;
   walletSupportedChains: ReadonlyArray<Chains>;
+  priorityAssets: PriorityAssets;
 };
 
 // TODO: memoize
@@ -24,6 +26,7 @@ export const useTokensFiltered = ({
   selectedChain,
   chainsFilter,
   walletSupportedChains,
+  priorityAssets,
 }: TokensFilterOptions) => {
   const chains = useChains(variant);
   const { tokens } = useTokens(variant);
@@ -35,6 +38,7 @@ export const useTokensFiltered = ({
     mergedBalance,
     walletSupportedChains,
     search,
+    priorityAssets,
   );
 
   const filteredTokens = tokens

package/src/machine/events/reset.ts

@@ -2,15 +2,13 @@ import type { Machine } from '@/machine';
 import type { Context } from '@/machine/context';
 
 export type ResetPayload = {
+  keepSelectedTokens?: boolean;
   clearWalletAddress: boolean;
 };
 
 export const reset = (ctx: Context, payload: ResetPayload, m: Machine) => {
-  ctx.sourceToken = undefined;
   ctx.sourceTokenBalance = undefined;
   ctx.sourceTokenAmount = '';
-
-  ctx.targetToken = undefined;
   ctx.targetTokenAmount = '';
 
   ctx.sendAddress = undefined;
@@ -22,6 +20,11 @@ export const reset = (ctx: Context, payload: ResetPayload, m: Machine) => {
   ctx.quoteStatus = 'idle';
   ctx.transferStatus = { status: 'idle' };
 
+  if (!payload.keepSelectedTokens) {
+    ctx.sourceToken = undefined;
+    ctx.targetToken = undefined;
+  }
+
   if (payload.clearWalletAddress) {
     ctx.walletAddress = undefined;
   }

package/src/types/config.ts

@@ -9,6 +9,10 @@ export type WalletAddresses = Partial<
 
 export type IntentsAccountType = 'evm' | 'near' | 'sol';
 
+export type PriorityAssets =
+  | ReadonlyArray<string>
+  | ReadonlyArray<readonly [Chains, string]>;
+
 export type WidgetConfig = {
   // Application metadata
   appName: string;
@@ -38,6 +42,7 @@ export type WidgetConfig = {
   allowedTokensList?: string[]; // assetIDs
   allowedSourceTokensList?: string[];
   allowedTargetTokensList?: string[];
+  priorityAssets?: PriorityAssets;
   filterTokens: (token: Token) => boolean;
 
   // Chains filtering
@@ -45,6 +50,9 @@ export type WidgetConfig = {
   allowedChainsList?: Chains[];
   allowedSourceChainsList?: Chains[];
   allowedTargetChainsList?: Chains[];
+  topChainShortcuts?: (
+    intentsAccountType?: IntentsAccountType,
+  ) => [Chains, Chains, Chains, Chains];
   chainsFilter: {
     source: ChainsFilter;
     target: ChainsFilter;

package/src/types/localisation.ts

@@ -1,6 +1,7 @@
 export type LocalisationKeys =
   // chain
   | 'chain.all.label'
+  | 'chain.more.label'
   // wallet
   | 'wallet.recipient.placeholder'
   | 'wallet.recipient.info.selectToken'
@@ -14,9 +15,16 @@ export type LocalisationKeys =
   | 'wallet.recipient.message.receiveFunds'
   | 'wallet.connected.error.notSupportedChain'
   // transfer
-  | 'transfer.success.title'
-  | 'transfer.success.hash.label'
-  | 'transfer.success.intent.label'
+  | 'transfer.success.swap.title'
+  | 'transfer.success.withdrawal.title'
+  | 'transfer.success.deposit.title'
+  | 'transfer.success.details.label'
+  | 'transfer.success.details.hash'
+  | 'transfer.success.details.rate'
+  | 'transfer.success.details.intent'
+  | 'transfer.success.details.recipient'
+  | 'transfer.success.action.viewOnExplorer'
+  | 'transfer.success.action.backToSwap'
   // quote
   | 'quote.result.maxSlippage.label'
   | 'quote.result.processingTime.label'

package/src/utils/tokens/sort.ts

@@ -2,8 +2,73 @@ import { formatUnits } from 'ethers';
 
 import { getTokenBalanceKey } from '../intents/getTokenBalanceKey';
 import type { Token, TokenBalances } from '@/types/token';
+import type { PriorityAssets } from '@/types/config';
 import type { Chains } from '@/types/chain';
 
+const compareByPriority = (
+  a: Token,
+  b: Token,
+  priorityAssets: PriorityAssets,
+): number | null => {
+  if (a.isIntent || b.isIntent || priorityAssets.length === 0) {
+    return null;
+  }
+
+  const isPriorityToken = (token: Token): boolean => {
+    // by assetId
+    if (typeof priorityAssets[0] === 'string') {
+      return (priorityAssets as ReadonlyArray<string>).includes(token.assetId);
+    }
+
+    // by blockchain and symbol
+    return (priorityAssets as ReadonlyArray<readonly [Chains, string]>).some(
+      ([blockchain, symbol]) =>
+        token.blockchain === blockchain &&
+        token.symbol.toLowerCase() === symbol.toLowerCase(),
+    );
+  };
+
+  const getPriorityIndex = (token: Token): number => {
+    // by assetId
+    if (typeof priorityAssets[0] === 'string') {
+      return (priorityAssets as ReadonlyArray<string>).indexOf(token.assetId);
+    }
+
+    // by blockchain and symbol
+    return (
+      priorityAssets as ReadonlyArray<readonly [Chains, string]>
+    ).findIndex(
+      ([blockchain, symbol]) =>
+        token.blockchain === blockchain &&
+        token.symbol.toLowerCase() === symbol.toLowerCase(),
+    );
+  };
+
+  const aIsPriority = isPriorityToken(a);
+  const bIsPriority = isPriorityToken(b);
+
+  if (aIsPriority && !bIsPriority) {
+    return -1;
+  }
+
+  if (!aIsPriority && bIsPriority) {
+    return 1;
+  }
+
+  // If both are priority tokens, maintain their relative order based on the priority list
+  if (aIsPriority && bIsPriority) {
+    const aIndex = getPriorityIndex(a);
+    const bIndex = getPriorityIndex(b);
+
+    if (aIndex !== bIndex) {
+      return aIndex - bIndex;
+    }
+  }
+
+  // Return null to indicate no priority difference, continue with other sorting criteria
+  return null;
+};
+
 const compareWithSearch = (
   a: Token,
   b: Token,
@@ -73,8 +138,9 @@ const compareWithSearch = (
   return a.chainName.toLowerCase().localeCompare(b.chainName.toLowerCase());
 };
 
-const sortTokensByUsdBalance = (
+const sortTokens = (
   walletSupportedChains: ReadonlyArray<Chains>,
+  priorityAssets: PriorityAssets,
   usdBalanceA: number | undefined,
   usdBalanceB: number | undefined,
   searchStr: string | undefined,
@@ -82,42 +148,61 @@ const sortTokensByUsdBalance = (
   b: Token,
 ): number => {
   const isIntent = a.isIntent || b.isIntent;
+  const hasBalanceA = usdBalanceA !== undefined && usdBalanceA > 0;
+  const hasBalanceB = usdBalanceB !== undefined && usdBalanceB > 0;
 
-  // 0. Sort supported chains first
-  const aSupported = walletSupportedChains.includes(a.blockchain);
-  const bSupported = walletSupportedChains.includes(b.blockchain);
-
-  if (!isIntent && aSupported && !bSupported) {
+  // 1. Tokens with balance always come first
+  if (hasBalanceA && !hasBalanceB) {
     return -1;
   }
 
-  if (!isIntent && !aSupported && bSupported) {
+  if (!hasBalanceA && hasBalanceB) {
     return 1;
   }
 
-  if (!isIntent && !aSupported && !bSupported) {
-    return compareWithSearch(a, b, searchStr);
-  }
+  // 2. If both have balance, sort by balance amount and other criteria
+  if (hasBalanceA && hasBalanceB) {
+    // Sort supported chains first
+    const aSupported = walletSupportedChains.includes(a.blockchain);
+    const bSupported = walletSupportedChains.includes(b.blockchain);
+
+    if (!isIntent && aSupported && !bSupported) {
+      return -1;
+    }
+
+    if (!isIntent && !aSupported && bSupported) {
+      return 1;
+    }
+
+    // Compare non-zero balances
+    if (usdBalanceA !== usdBalanceB) {
+      return (usdBalanceB ?? 0) - (usdBalanceA ?? 0);
+    }
 
-  // 1. Handle zero balances
-  if (!usdBalanceA && !usdBalanceB) {
+    // If balances equal, sort by search/name
     return compareWithSearch(a, b, searchStr);
   }
 
-  if (!usdBalanceA && usdBalanceB) {
-    return 1;
+  // 3. Both have no balance - prioritize by asset IDs or blockchain-symbol pairs (only for non-intent tokens)
+  const priorityComparison = compareByPriority(a, b, priorityAssets);
+
+  if (priorityComparison !== null) {
+    return priorityComparison;
   }
 
-  if (!usdBalanceB && usdBalanceA) {
+  // 4. For tokens without balance and not in priority list, sort by supported chains
+  const aSupported = walletSupportedChains.includes(a.blockchain);
+  const bSupported = walletSupportedChains.includes(b.blockchain);
+
+  if (!isIntent && aSupported && !bSupported) {
     return -1;
   }
 
-  // 3. Compare non-zero balances
-  if (usdBalanceA !== usdBalanceB) {
-    return (usdBalanceB ?? 0) - (usdBalanceA ?? 0);
+  if (!isIntent && !aSupported && bSupported) {
+    return 1;
   }
 
-  // 4. If balances equal, sort by market cap and then name
+  // 5. Finally, sort alphabetically by search/name
   return compareWithSearch(a, b, searchStr);
 };
 
@@ -125,6 +210,7 @@ export const createTokenSorter = (
   tokensBalance: TokenBalances,
   walletSupportedChains: ReadonlyArray<Chains>,
   searchStr?: string | undefined,
+  priorityAssets: PriorityAssets = [],
 ) => {
   return (a: Token, b: Token) => {
     const recordA = tokensBalance[getTokenBalanceKey(a)];
@@ -145,8 +231,9 @@ export const createTokenSorter = (
 
     const searchLower = searchStr?.trim().toLowerCase() ?? undefined;
 
-    return sortTokensByUsdBalance(
+    return sortTokens(
       walletSupportedChains,
+      priorityAssets,
       usdBalanceA,
       usdBalanceB,
       searchLower,