feat: add the order to the success and failure actions (#2155)

* feat: add the order to the success and failure actions * fix: eslint issue * fix: rollback latest change * fix: make balance and tokens match by symbol
decentraland · Feb 27, 2024 · b880f0b · b880f0b
1 parent 95a02af
commit b880f0b
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 56 deletions.
diff --git a/...onents/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts b/...onents/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts
@@ -39,7 +39,8 @@ const mapDispatch = (
       onExecuteOrderCrossChain: (route: Route) =>
         buyItemCrossChainRequest(
           (ownProps.metadata.nft as unknown) as Item,
-          route
+          route,
+          ownProps.metadata.order
         ),
       onExecuteOrderWithCard: executeOrderWithCardRequest
     },

diff --git a/.../src/components/Modals/BuyWithCryptoModal/ChainAndTokenSelector/ChainAndTokenSelector.tsx b/.../src/components/Modals/BuyWithCryptoModal/ChainAndTokenSelector/ChainAndTokenSelector.tsx
@@ -56,11 +56,11 @@ const ChainAndTokenSelector = (props: Props) => {
         const balances = await marketplaceAPI.fetchWalletTokenBalances(
           currentChain,
           wallet.address
-        )
+          )
         setIsFetchingBalances(false)
         setBalances(
           balances.reduce((acc, balance) => {
-            acc[balance.contract_address] = balance
+            acc[balance.contract_ticker_symbol] = balance
             return acc
           }, {} as Record<string, Balance>)
         )
@@ -79,8 +79,8 @@ const ChainAndTokenSelector = (props: Props) => {
     )
     // this sortes the tokens by USD balance
     filtered?.sort((a, b) => {
-      const aQuote = balances[a.address.toLowerCase()]?.quote ?? '0'
-      const bQuote = balances[b.address.toLowerCase()]?.quote ?? '0'
+      const aQuote = balances[a.symbol]?.quote ?? '0'
+      const bQuote = balances[b.symbol]?.quote ?? '0'
       if (aQuote === bQuote) return 0
       return aQuote < bQuote ? 1 : -1
     })
@@ -117,45 +117,45 @@ const ChainAndTokenSelector = (props: Props) => {
               <span>{chain.networkName}</span>
             </div>
           ))}
-          {filteredTokens?.map(token => (
-            <div
-              key={`${token.symbol}-${token.address}`}
-              className={styles.rowItem}
-              onClick={() => onSelect(token)}
-            >
-              <div className={styles.tokenDataContainer}>
-                <img src={token.logoURI} alt={token.symbol} />
-                <div className={styles.tokenNameAndSymbolContainer}>
-                  <span>{token.symbol}</span>
-                  <span className={styles.tokenName}>{token.name}</span>
+          {filteredTokens?.map(token => {
+            return (
+              <div
+                key={`${token.symbol}-${token.address}`}
+                className={styles.rowItem}
+                onClick={() => onSelect(token)}
+              >
+                <div className={styles.tokenDataContainer}>
+                  <img src={token.logoURI} alt={token.symbol} />
+                  <div className={styles.tokenNameAndSymbolContainer}>
+                    <span>{token.symbol}</span>
+                    <span className={styles.tokenName}>{token.name}</span>
+                  </div>
                 </div>
+                <span className={styles.balance}>
+                  {!!balances[token.symbol] ? (
+                    <>
+                      {Number(
+                        ethers.utils.formatUnits(
+                          balances[token.symbol]
+                            .balance as string,
+                          balances[token.symbol]
+                            .contract_decimals
+                        )
+                      ).toFixed(5)}{' '}
+                      {balances[token.symbol].quote ? (
+                        <span className={styles.tokenName}>
+                          $
+                          {balances[token.symbol].quote.toLocaleString()}
+                        </span>
+                      ) : null}
+                    </>
+                  ) : (
+                    0
+                  )}
+                </span>
               </div>
-              <span className={styles.balance}>
-                {!!balances[token.address.toLocaleLowerCase()] ? (
-                  <>
-                    {Number(
-                      ethers.utils.formatUnits(
-                        balances[token.address.toLocaleLowerCase()]
-                          .balance as string,
-                        balances[token.address.toLocaleLowerCase()]
-                          .contract_decimals
-                      )
-                    ).toLocaleString()}{' '}
-                    {balances[token.address.toLocaleLowerCase()].quote ? (
-                      <span className={styles.tokenName}>
-                        $
-                        {balances[
-                          token.address.toLocaleLowerCase()
-                        ].quote.toLocaleString()}
-                      </span>
-                    ) : null}
-                  </>
-                ) : (
-                  0
-                )}
-              </span>
-            </div>
-          ))}
+            )
+          })}
         </div>
       )}
 

diff --git a/...ents/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.container.ts b/...ents/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.container.ts
@@ -1,4 +1,3 @@
-import { Item } from '@dcl/schemas'
 import { Dispatch, bindActionCreators } from 'redux'
 import { Route } from 'decentraland-transactions/crossChain'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading'
@@ -43,7 +42,7 @@ const mapDispatch = (
     {
       onBuyItem: buyItemRequest,
       onBuyItemCrossChain: (route: Route) =>
-        buyItemCrossChainRequest(ownProps.metadata.item as Item, route),
+        buyItemCrossChainRequest(ownProps.metadata.item, route),
       onBuyWithCard: buyItemWithCardRequest
     },
     dispatch

diff --git a/...mponents/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.types.ts b/...mponents/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.types.ts
@@ -1,3 +1,4 @@
+import { Item } from '@dcl/schemas'
 import { WithAuthorizedActionProps } from 'decentraland-dapps/dist/containers/withAuthorizedAction'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
 import type { Route } from 'decentraland-transactions/crossChain'
@@ -8,7 +9,8 @@ import {
   buyItemWithCardRequest
 } from '../../../../modules/item/actions'
 
-export type Props = WithAuthorizedActionProps & ModalProps &  {
+export type Props = WithAuthorizedActionProps & Omit<ModalProps, 'metadata'> &  {
+  metadata: { item: Item }
   isBuyingItemNatively: boolean
   isBuyingItemCrossChain: boolean
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>

diff --git a/webapp/src/modules/analytics/track.ts b/webapp/src/modules/analytics/track.ts
@@ -297,6 +297,7 @@ track<BuyItemCrossChainSuccessAction>(
     const {
       route: { route },
       item,
+      order,
       txHash
     } = payload
     return {
@@ -312,7 +313,7 @@ track<BuyItemCrossChainSuccessAction>(
       rarity: item.rarity,
       network: item.network,
       chainId: item.chainId,
-      price: Number(ethers.utils.formatEther(item.price)),
+      price: Number(ethers.utils.formatEther(order?.price ?? item.price)),
       data: item.data,
       txHash
     }
@@ -363,7 +364,8 @@ track<BuyItemCrossChainFailureAction>(
   ({ payload }) => {
     const {
       route: { route },
-      item
+      item,
+      price
     } = payload
     return {
       fromAmount: ethers.utils.formatUnits(
@@ -396,7 +398,7 @@ track<BuyItemCrossChainFailureAction>(
       rarity: item.rarity,
       network: item.network,
       chainId: item.chainId,
-      price: Number(ethers.utils.formatEther(item.price)),
+      price: Number(ethers.utils.formatEther(price)),
       data: item.data
     }
   }

diff --git a/webapp/src/modules/item/actions.ts b/webapp/src/modules/item/actions.ts
@@ -1,4 +1,4 @@
-import { ChainId, Item, ItemFilters } from '@dcl/schemas'
+import { ChainId, Item, ItemFilters, Order } from '@dcl/schemas'
 import { NFTPurchase } from 'decentraland-dapps/dist/modules/gateway/types'
 import {
   buildTransactionWithFromPayload,
@@ -118,33 +118,36 @@ export const BUY_ITEM_CROSS_CHAIN_REQUEST = '[Request] Buy item cross-chain'
 export const BUY_ITEM_CROSS_CHAIN_SUCCESS = '[Success] Buy item cross-chain'
 export const BUY_ITEM_CROSS_CHAIN_FAILURE = '[Failure] Buy item cross-chain'
 
-export const buyItemCrossChainRequest = (item: Item, route: Route) =>
-  action(BUY_ITEM_CROSS_CHAIN_REQUEST, { item, route })
+export const buyItemCrossChainRequest = (item: Item, route: Route, order?: Order) =>
+  action(BUY_ITEM_CROSS_CHAIN_REQUEST, { item, route, order })
 
 export const buyItemCrossChainSuccess = (
   route: Route,
   chainId: ChainId,
   txHash: string,
-  item: Item
+  item: Item,
+  order?: Order
 ) =>
   action(BUY_ITEM_CROSS_CHAIN_SUCCESS, {
     route,
     item,
     txHash,
+    order,
     ...buildTransactionWithReceiptPayload(chainId, txHash, {
       itemId: item.itemId,
       contractAddress: item.contractAddress,
       network: item.network,
       name: getAssetName(item),
-      price: formatWeiMANA(item.price)
+      price: formatWeiMANA(order?.price ?? item.price)
     })
   })
 
 export const buyItemCrossChainFailure = (
   route: Route,
   item: Item,
+  price: string,
   error: string
-) => action(BUY_ITEM_CROSS_CHAIN_FAILURE, { route, item, error })
+) => action(BUY_ITEM_CROSS_CHAIN_FAILURE, { route, item, price, error })
 
 export type BuyItemCrossChainRequestAction = ReturnType<
   typeof buyItemCrossChainRequest

diff --git a/webapp/src/modules/item/sagas.ts b/webapp/src/modules/item/sagas.ts
@@ -289,7 +289,7 @@ export function* itemSaga(getIdentity: () => AuthIdentity | undefined) {
   }
 
   function* handleBuyItemCrossChain(action: BuyItemCrossChainRequestAction) {
-    const { item, route } = action.payload
+    const { item, route, order } = action.payload
     try {
       const wallet: ReturnType<typeof getWallet> = yield select(getWallet)
 
@@ -314,7 +314,8 @@ export function* itemSaga(getIdentity: () => AuthIdentity | undefined) {
             route,
             item.chainId,
             txRespose.transactionHash,
-            item
+            item,
+            order
           )
         )
       }
@@ -323,6 +324,7 @@ export function* itemSaga(getIdentity: () => AuthIdentity | undefined) {
         buyItemCrossChainFailure(
           route,
           item,
+          order?.price || item.price,
           isErrorWithMessage(error) ? error.message : t('global.unknown_error')
         )
       )