♻️Refactor swap details component and add platform display

soroswap · Jun 21, 2024 · d960c82 · d960c82
1 parent 7483460
commit d960c82
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/src/components/Swap/AdvancedSwapDetails.tsx b/src/components/Swap/AdvancedSwapDetails.tsx
@@ -84,29 +84,24 @@ export function AdvancedSwapDetails({
       if (!trade?.path || isLoading) return;
       if (trade.platform == PlatformType.SOROBAN) {
         setPathTokensIsLoading(true);
-        console.log(trade.path)
         const promises = trade.path.map(async (contract) => {
           const asset = await findToken(contract, tokensAsMap, sorobanContext);
           const code = asset?.code == 'native' ? 'XLM' : asset?.code;
           return code;
         });
         const results = await Promise.allSettled(promises);
-        console.log(results)
 
         const fulfilledValues = results
           .filter((result) => result.status === 'fulfilled' && result.value)
           .map((result) => (result.status === 'fulfilled' && result.value ? result.value : ''));
-
         setPathArray(fulfilledValues);
         setPathTokensIsLoading(false);
       } else if (trade.platform == PlatformType.STELLAR_CLASSIC) {
         setPathTokensIsLoading(true);
-        console.log(trade.path)
         const codes = trade.path.map((address) => {
           if (address == "native") return "XLM"
           return address.split(":")[0]
         })
-        console.log(codes)
         setPathArray(codes);
         setPathTokensIsLoading(false);
       }
@@ -184,6 +179,14 @@ export function AdvancedSwapDetails({
           </TextWithLoadingPlaceholder>
         </RowBetween>
       }
+      {trade?.platform && (
+        <RowBetween>
+          <MouseoverTooltip title={'The platform where the swap will be made.'}>
+            <BodySmall color="textSecondary">Platform</BodySmall>
+          </MouseoverTooltip>
+          <BodySmall data-testid="swap__details__platform">{trade.platform}</BodySmall>
+        </RowBetween>
+      )}
     </Column>
   );
 }
diff --git a/src/components/Swap/SwapModalFooter.tsx b/src/components/Swap/SwapModalFooter.tsx
@@ -15,7 +15,7 @@ import useGetReservesByPair from 'hooks/useGetReservesByPair';
 import { getSwapAmounts } from 'hooks/useSwapCallback';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { AlertTriangle, ChevronRight } from 'react-feather';
-import { InterfaceTrade, TradeType } from 'state/routing/types';
+import { InterfaceTrade, PlatformType, TradeType } from 'state/routing/types';
 import { PathBox, TextWithLoadingPlaceholder, formattedPriceImpact } from './AdvancedSwapDetails';
 import { Label } from './SwapModalHeaderAmount';
 import { getExpectedAmountOfOne } from './TradePrice';
@@ -107,23 +107,29 @@ export default function SwapModalFooter({
   useEffect(() => {
     (async () => {
       if (!trade?.path || isLoading) return;
+      if (trade.platform == PlatformType.SOROBAN) {
+        setPathTokensIsLoading(true);
+        const promises = trade.path.map(async (contract) => {
+          const asset = await findToken(contract, tokensAsMap, sorobanContext);
+          const code = asset?.code == 'native' ? 'XLM' : asset?.code;
+          return code;
+        });
+        const results = await Promise.allSettled(promises);
 
-      setPathTokensIsLoading(true);
-
-      const promises = trade.path.map(async (contract) => {
-        const asset = await findToken(contract, tokensAsMap, sorobanContext);
-        const code = asset?.code == 'native' ? 'XLM' : asset?.code;
-        return code;
-      });
-
-      const results = await Promise.allSettled(promises);
-
-      const fulfilledValues = results
-        .filter((result) => result.status === 'fulfilled' && result.value)
-        .map((result) => (result.status === 'fulfilled' && result.value ? result.value : ''));
-
-      setPathArray(fulfilledValues);
-      setPathTokensIsLoading(false);
+        const fulfilledValues = results
+          .filter((result) => result.status === 'fulfilled' && result.value)
+          .map((result) => (result.status === 'fulfilled' && result.value ? result.value : ''));
+        setPathArray(fulfilledValues);
+        setPathTokensIsLoading(false);
+      } else if (trade.platform == PlatformType.STELLAR_CLASSIC) {
+        setPathTokensIsLoading(true);
+        const codes = trade.path.map((address) => {
+          if (address == "native") return "XLM"
+          return address.split(":")[0]
+        })
+        setPathArray(codes);
+        setPathTokensIsLoading(false);
+      }
     })();
   }, [trade?.path, isLoading, sorobanContext]);
 
@@ -220,6 +226,14 @@ export default function SwapModalFooter({
             </PathBox>
           </TextWithLoadingPlaceholder>
         </RowBetween>
+        {trade?.platform && (
+          <RowBetween>
+            <MouseoverTooltip title={'The platform where the swap will be made.'}>
+              <Label>Platform</Label>
+            </MouseoverTooltip>
+            <BodySmall data-testid="swap__details__platform">{trade.platform}</BodySmall>
+          </RowBetween>
+        )}
       </DetailsContainer>
       {showAcceptChanges ? (
         <SwapShowAcceptChanges data-testid="show-accept-changes">

diff --git a/src/state/routing/types.ts b/src/state/routing/types.ts
@@ -234,8 +234,8 @@ export enum TradeType {
 }
 
 export enum PlatformType {
-  SOROBAN = 'SOROBAN',
-  STELLAR_CLASSIC = 'STELLAR_CLASSIC'
+  SOROBAN = 'Soroban',
+  STELLAR_CLASSIC = 'SDEX'
 }
 
 export type InterfaceTrade = {