Updated base buy currency from USD to ETH in buy token trade modal

hicommonwealth · Dec 23, 2024 · e40a124 · e40a124
1 parent 9249a26
commit e40a124
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 38 deletions.
diff --git a/...nwealth/client/scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeModal.tsx b/...nwealth/client/scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeModal.tsx
@@ -26,7 +26,7 @@ const CommonTradeModal = ({
     useCommonTradeTokenForm({
       tradeConfig: {
         ...tradeConfig,
-        currency: TRADING_CURRENCY,
+        ethBuyCurrency: TRADING_CURRENCY,
         buyTokenPresetAmounts: [100, 300, 1000],
         sellTokenPresetAmounts: ['Max'],
       },

diff --git a/...deTokenModel/CommonTradeModal/CommonTradeTokenForm/AmountSelections/AmountSelections.scss b/...deTokenModel/CommonTradeModal/CommonTradeTokenForm/AmountSelections/AmountSelections.scss
@@ -22,6 +22,8 @@
       padding: 10px 8px;
       background-color: $neutral-200;
       color: $neutral-500;
+      display: flex;
+      align-items: center;
     }
 
     .amount-input,

diff --git a/...eTokenModel/CommonTradeModal/CommonTradeTokenForm/AmountSelections/BuyAmountSelection.tsx b/...eTokenModel/CommonTradeModal/CommonTradeTokenForm/AmountSelections/BuyAmountSelection.tsx
@@ -1,8 +1,4 @@
-import {
-  currencyNameToSymbolMap,
-  currencySymbolPlacements,
-  getAmountWithCurrencySymbol,
-} from 'helpers/currency';
+import { getAmountWithCurrencySymbol } from 'helpers/currency';
 import React from 'react';
 import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
 import { CWText } from 'views/components/component_kit/cw_text';
@@ -15,17 +11,12 @@ import './AmountSelections.scss';
 const BuyAmountSelection = ({ trading }: BuyAmountSelectionProps) => {
   const baseCurrencyName = trading.amounts.buy.invest.baseCurrency.name;
 
-  const buyAmountCurrenySymbol = (
-    <CWText className="amount-symbol">
-      {currencyNameToSymbolMap[baseCurrencyName]}
-    </CWText>
-  );
-
   return (
     <div className="AmountSelections">
       <div className="amount-input-with-currency-symbol">
-        {currencySymbolPlacements.onLeft.includes(baseCurrencyName) &&
-          buyAmountCurrenySymbol}
+        <CWText className="amount-symbol">
+          <CWIcon iconName="ethereum" iconSize="medium" /> {baseCurrencyName}
+        </CWText>
         <CWTextInput
           containerClassName="amount-input"
           placeholder="0"
@@ -34,14 +25,10 @@ const BuyAmountSelection = ({ trading }: BuyAmountSelectionProps) => {
             trading.amounts.buy.invest.baseCurrency.onAmountChange(e)
           }
         />
-        {currencySymbolPlacements.onRight.includes(baseCurrencyName) &&
-          buyAmountCurrenySymbol}
       </div>
 
       <CWText type="caption" className="invest-to-gain-amounts">
-        <CWIcon iconName="ethereum" iconSize="small" />
-        {trading.amounts.buy.invest.baseCurrency.toEth} ETH =
-        {trading.token.icon_url && <TokenIcon url={trading.token.icon_url} />}
+        = {trading.token.icon_url && <TokenIcon url={trading.token.icon_url} />}
         {trading.amounts.buy.gain.token} {trading.token.symbol}
       </CWText>
 
@@ -54,7 +41,7 @@ const BuyAmountSelection = ({ trading }: BuyAmountSelectionProps) => {
                 type="amount"
                 label={getAmountWithCurrencySymbol(
                   presetAmount as number,
-                  baseCurrencyName,
+                  trading.amounts.buy.invest.ethBuyCurrency,
                 )}
                 onClick={() =>
                   trading.amounts.buy.invest.baseCurrency.onAmountChange(

diff --git a/...odals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/ReceiptDetails/BuyReceipt.tsx b/...odals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/ReceiptDetails/BuyReceipt.tsx
@@ -11,15 +11,16 @@ const BuyReceipt = ({ trading }: ReceiptDetailsProps) => {
   const { invest, gain } = trading.amounts.buy;
   const baseCurrencyName = invest.baseCurrency.name;
   const baseCurrencySymbol = currencyNameToSymbolMap[baseCurrencyName];
+  const ethBuyCurrency = trading.amounts.buy.invest.ethBuyCurrency;
   const isLeftSymbolCurrency =
-    currencySymbolPlacements.onLeft.includes(baseCurrencyName);
+    currencySymbolPlacements.onLeft.includes(ethBuyCurrency);
   const isRightSymbolCurrency =
-    currencySymbolPlacements.onRight.includes(baseCurrencyName);
+    currencySymbolPlacements.onRight.includes(ethBuyCurrency);
 
   return (
     <div className="ReceiptDetails">
       <div className="entry">
-        <CWText type="caption">{baseCurrencyName} to ETH rate</CWText>
+        <CWText type="caption">{ethBuyCurrency} to ETH rate</CWText>
         <CWText type="caption">
           {isLeftSymbolCurrency ? baseCurrencySymbol : ''}{' '}
           {invest.baseCurrency.unitEthExchangeRate.toFixed(18)}
@@ -34,12 +35,6 @@ const BuyReceipt = ({ trading }: ReceiptDetailsProps) => {
           {isRightSymbolCurrency ? baseCurrencySymbol : ''}
         </CWText>
       </div>
-      <div className="entry">
-        <CWText type="caption">ETH bought from invested amount</CWText>
-        <CWText type="caption">
-          {invest.baseCurrency.toEth.toFixed(18)} ETH
-        </CWText>
-      </div>
       <div className="entry">
         <CWText type="caption">
           Fee ({invest.commonPlatformFee.percentage}) ETH

diff --git a/...lient/scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/types.ts b/...lient/scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/types.ts
@@ -10,7 +10,7 @@ export type TokenPresetAmounts = number | 'Max';
 
 export type UseCommonTradeTokenFormProps = {
   tradeConfig: TradingConfig & {
-    currency: SupportedCurrencies;
+    ethBuyCurrency: SupportedCurrencies;
     buyTokenPresetAmounts?: TokenPresetAmounts[];
     sellTokenPresetAmounts?: TokenPresetAmounts[]; // we could also do 25%, 50% etc
   };

diff --git a/...scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/useBuyTrade.ts b/...scripts/views/modals/TradeTokenModel/CommonTradeModal/CommonTradeTokenForm/useBuyTrade.ts
@@ -38,9 +38,8 @@ const useBuyTrade = ({
   const ethToCurrencyRate = parseFloat(
     ethToCurrencyRateData?.data?.data?.amount || '0.00',
   );
-  const ethBuyAmount = baseCurrencyBuyAmountDecimals / ethToCurrencyRate;
   const commonPlatformFeeForBuyTradeInEth =
-    (commonFeePercentage / 100) * ethBuyAmount;
+    (commonFeePercentage / 100) * baseCurrencyBuyAmountDecimals;
 
   // imp: this query uses CommunityStakes helper to get eth price, but its
   // a generic query so no need to initiate a separate Launchpad helper
@@ -88,7 +87,9 @@ const useBuyTrade = ({
     change: React.ChangeEvent<HTMLInputElement> | TokenPresetAmounts,
   ) => {
     if (typeof change == 'number') {
-      setBaseCurrencyBuyAmountString(`${change}`);
+      // preset amounts are in tradeConfig.ethBuyCurrency
+      const ethToBuyFromUSDPresetAmount = change / ethToCurrencyRate;
+      setBaseCurrencyBuyAmountString(`${ethToBuyFromUSDPresetAmount}`);
     } else if (typeof change == 'string') {
       // not handling string type preset amounts atm
     } else {
@@ -120,7 +121,7 @@ const useBuyTrade = ({
       const payload = {
         chainRpc: chainNode.url,
         ethChainId: chainNode.ethChainId,
-        amountEth: ethBuyAmount * 1e18, // amount in wei
+        amountEth: baseCurrencyBuyAmountDecimals * 1e18, // amount in wei
         walletAddress: selectedAddress,
         tokenAddress: tradeConfig.token.token_address,
       };
@@ -171,15 +172,18 @@ const useBuyTrade = ({
     // Note: not exporting state setters directly, all "buy token" business logic should be done in this hook
     amounts: {
       invest: {
+        ethBuyCurrency: tradeConfig.ethBuyCurrency,
         baseCurrency: {
-          name: tradeConfig.currency, // USD/GBP etc
+          // eth will be the currency used to buy token, and eth will be bought with tradeConfig.ethBuyCurrency
+          name: 'ETH',
           amount: baseCurrencyBuyAmountString,
           onAmountChange: onBaseCurrencyBuyAmountChange,
           presetAmounts: tradeConfig.buyTokenPresetAmounts,
           unitEthExchangeRate: ethToCurrencyRate,
-          toEth: ethBuyAmount,
+          toEth: baseCurrencyBuyAmountDecimals,
         },
-        insufficientFunds: ethBuyAmount > parseFloat(selectedAddressEthBalance),
+        insufficientFunds:
+          baseCurrencyBuyAmountDecimals > parseFloat(selectedAddressEthBalance),
         commonPlatformFee: {
           percentage: `${commonFeePercentage}%`,
           eth: commonPlatformFeeForBuyTradeInEth,
@@ -188,7 +192,7 @@ const useBuyTrade = ({
       gain: {
         token:
           unitEthToTokenBuyExchangeRate *
-          (ethBuyAmount - commonPlatformFeeForBuyTradeInEth),
+          (baseCurrencyBuyAmountDecimals - commonPlatformFeeForBuyTradeInEth),
       },
     },
     selectedAddressEthBalance: {