Release

apps/root/src/pages/aggregator/swap-container/components/step1/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Alert, Button, ContainerBox, Typography, colors } from 'ui-library';
+import { Grid, Alert, Button, ContainerBox, Typography, colors, TokenPickerAmountUsdInput } from 'ui-library';
 import isUndefined from 'lodash/isUndefined';
 import { AmountsOfToken, SetStateCallback, SwapOption, Token } from '@types';
 import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
@@ -13,17 +13,17 @@ import QuoteData from '../quote-data';
 import TransferTo from '../transfer-to';
 import QuoteSimulation from '../quote-simulation';
 import AdvancedSettings from '../advanced-settings';
-import TokenPickerWithAmount from '@common/components/token-amount-input';
 import ToggleButton from '../toggle-button';
 import QuoteSelection from '../quote-selection';
 import SwapNetworkSelector from '../swap-network-selector';
 import SwapButton from '../swap-button';
-import { usePortfolioPrices } from '@state/balances/hooks';
-import { compact } from 'lodash';
-import { parseNumberUsdPriceToBigInt, parseUsdPrice } from '@common/utils/currency';
+import { emptyTokenWithAddress, parseNumberUsdPriceToBigInt, parseUsdPrice } from '@common/utils/currency';
 import { ContactListActiveModal } from '@common/components/contact-modal';
 import FormWalletSelector from '@common/components/form-wallet-selector';
-
+import TokenIcon from '@common/components/token-icon';
+import useRawUsdPrice from '@hooks/useUsdRawPrice';
+import { usePortfolioPrices } from '@state/balances/hooks';
+import { compact } from 'lodash';
 interface SwapFirstStepProps {
   from: Token | null;
   fromValue: string;
@@ -87,7 +87,9 @@ const SwapFirstStep = ({
   const dispatch = useAppDispatch();
   const { trackEvent } = useAnalytics();
   const [transactionWillFail, setTransactionWillFail] = React.useState(false);
-  const prices = usePortfolioPrices(compact([from, to]));
+  const prices = usePortfolioPrices(compact([from]));
+  const [toPrice] = useRawUsdPrice(to);
+  const fromPrice = from ? parseNumberUsdPriceToBigInt(prices[from?.address]?.price) : undefined;
 
   let fromValueToUse =
     isBuyOrder && selectedRoute
@@ -107,24 +109,16 @@ const SwapFirstStep = ({
     (fromValueToUse &&
       fromValueToUse !== '' &&
       from &&
-      prices[from?.address] &&
-      parseUsdPrice(
-        from,
-        parseUnits(fromValueToUse, from.decimals),
-        parseNumberUsdPriceToBigInt(prices[from.address].price)
-      )) ||
+      fromPrice &&
+      parseUsdPrice(from, parseUnits(fromValueToUse, from.decimals), fromPrice)) ||
     undefined;
   const toUsdValueToUse =
     selectedRoute?.buyAmount.amountInUSD ||
     (toValueToUse &&
       toValueToUse !== '' &&
       to &&
-      prices[to?.address] &&
-      parseUsdPrice(
-        to,
-        parseUnits(toValueToUse, to.decimals),
-        parseNumberUsdPriceToBigInt(prices[to.address].price)
-      )) ||
+      toPrice &&
+      parseUsdPrice(to, parseUnits(toValueToUse, to.decimals), toPrice)) ||
     undefined;
 
   const selectedNetwork = useSelectedNetwork();
@@ -177,6 +171,15 @@ const SwapFirstStep = ({
       ).toFixed(2)) ||
     undefined;
 
+  const fromTokenWithIcon = React.useMemo(
+    () => (from ? { ...from, icon: <TokenIcon token={from} size={5} /> } : undefined),
+    [from]
+  );
+  const toTokenWithIcon = React.useMemo(
+    () => (to ? { ...to, icon: <TokenIcon token={to} size={5} /> } : undefined),
+    [to]
+  );
+
   return (
     <Grid container rowSpacing={6} flexDirection="column">
       <AdvancedSettings onShowSettings={onShowSettings} />
@@ -207,33 +210,35 @@ const SwapFirstStep = ({
       </Grid>
       <Grid item xs={12}>
         <Grid item xs={12} position="relative">
-          <TokenPickerWithAmount
+          <TokenPickerAmountUsdInput
             id="from-value"
             label={<FormattedMessage description="youPay" defaultMessage="You pay" />}
             cantFund={cantFund}
-            tokenAmount={fromAmount}
-            isLoadingRoute={isLoadingRoute}
+            value={fromValueToUse}
+            disabled={isLoadingRoute}
             isLoadingBalance={isLoadingFromBalance}
-            startSelectingCoin={(token) => startSelectingCoin(token, 'from')}
-            selectedToken={from || undefined}
-            onSetTokenAmount={onSetFromAmount}
+            startSelectingCoin={(token) => startSelectingCoin(token || emptyTokenWithAddress('from'), 'from')}
+            token={fromTokenWithIcon}
+            onChange={onSetFromAmount}
             balance={balanceFrom}
             maxBalanceBtn
+            tokenPrice={fromPrice}
           />
           <ToggleButton isLoadingRoute={isLoadingRoute} />
         </Grid>
         <Grid item xs={12} sx={{ paddingTop: '8px !important' }}>
-          <TokenPickerWithAmount
+          <TokenPickerAmountUsdInput
             id="to-value"
             label={<FormattedMessage description="youReceive" defaultMessage="You receive" />}
-            tokenAmount={toAmount}
-            isLoadingRoute={isLoadingRoute}
+            value={toValueToUse}
+            disabled={isLoadingRoute}
             isLoadingBalance={isLoadingToBalance}
-            startSelectingCoin={(token) => startSelectingCoin(token, 'to')}
+            startSelectingCoin={(token) => startSelectingCoin(token || emptyTokenWithAddress('to'), 'to')}
             balance={balanceTo}
-            selectedToken={to || undefined}
-            onSetTokenAmount={onSetToAmount}
+            token={toTokenWithIcon}
+            onChange={onSetToAmount}
             priceImpact={priceImpact}
+            tokenPrice={toPrice}
           />
         </Grid>
       </Grid>

package.json

@@ -20,7 +20,7 @@
     "downloadAndBuildTranslations": "yarn downloadTranslations:auth && yarn compile"
   },
   "dependencies": {
-    "@balmy/sdk": "0.7.14"
+    "@balmy/sdk": "0.8.0"
   },
   "devDependencies": {
     "@formatjs/cli": "^6.0.4",

packages/ui-library/src/components/index.tsx

@@ -79,6 +79,7 @@ export * from './background-paper';
 export * from './select';
 export * from './container-box';
 export * from './token-amount-usd-input';
+export * from './token-picker-amount-usd-input';
 export * from './token-picker-button';
 export * from './token-picker';
 export * from './options-buttons';

packages/ui-library/src/components/token-amount-usd-input/TokenAmountUsdInput.stories.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { PROTOCOL_TOKEN_ADDRESS, TokenAmounUsdInput } from '.';
+import { TokenAmounUsdInput } from '.';
+import { PROTOCOL_TOKEN_ADDRESS } from './useTokenAmountUsd';
 import type { TokenAmounUsdInputProps } from '.';
 import { TokenType } from 'common-types';