feat(Swap): add review step

src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.tsx

@@ -32,6 +32,6 @@ export function SwapAssetsPair() {
           value={swapAmountTo}
         />
       }
-    ></SwapAssetsPairLayout>
+    />
   );
 }

src/app/pages/swap/components/swap-details/swap-details.tsx

@@ -1,14 +1,34 @@
+import { useSwapContext } from '@app/pages/swap/swap.context';
+
 import { SwapDetailLayout } from './swap-detail.layout';
 import { SwapDetailsLayout } from './swap-details.layout';
 
-// TODO: Replace with live data
 export function SwapDetails() {
+  const { swapSubmissionData } = useSwapContext();
+  if (swapSubmissionData == null) {
+    return null;
+  }
   return (
     <SwapDetailsLayout>
-      <SwapDetailLayout title="Placeholder" tooltipLabel="Tooltip info" value="0" />
-      <SwapDetailLayout title="Placeholder" value="0" />
-      <SwapDetailLayout title="Placeholder" value="0" />
-      <SwapDetailLayout title="Placeholder" value="0" />
+      <SwapDetailLayout
+        title="Route"
+        value={swapSubmissionData.router.map(x => x.name).join(' > ')}
+      />
+      <SwapDetailLayout
+        title="Liquidity Provider Fee"
+        tooltipLabel="To receive a share of these fees, become a Liquidity Provider through 'Pool'"
+        value={`${swapSubmissionData.liquidityFee} ${swapSubmissionData.swapAssetFrom.name}`}
+      />
+      <SwapDetailLayout
+        title="Slippage Tolerance"
+        value={`${swapSubmissionData.slippage * 100}%`}
+      />
+      <SwapDetailLayout
+        title="Minimum Received"
+        value={`${Number(swapSubmissionData.swapAmountTo) * (1 - swapSubmissionData.slippage)} ${
+          swapSubmissionData.swapAssetTo.name
+        }`}
+      />
     </SwapDetailsLayout>
   );
 }

src/app/pages/swap/swap-container.tsx

@@ -13,7 +13,7 @@ import { whenPageMode } from '@app/common/utils';
 import { SwapContainerLayout } from './components/swap-container.layout';
 import { SwapForm } from './components/swap-form';
 import { SwapAsset, SwapFormValues } from './hooks/use-swap';
-import { SwapContext, SwapProvider } from './swap.context';
+import { SwapContext, SwapProvider, SwapSubmissionData } from './swap.context';
 
 export function SwapContainer() {
   const alexSDK = useState(() => new AlexSDK())[0];
@@ -55,26 +55,71 @@ export function SwapContainer() {
     [getAssetFromAlexCurrency, supportedCurrencies]
   );
 
-  function onSubmitSwapForReview(values: SwapFormValues) {
-    navigate(RouteUrls.SwapReview, {
-      state: { ...values },
+  const [swapSubmissionData, setSwapSubmissionData] = useState<SwapSubmissionData>();
+  const [slippage, _setSlippage] = useState(0.04);
+
+  async function onSubmitSwapForReview(values: SwapFormValues) {
+    if (values.swapAssetFrom == null || values.swapAssetTo == null) {
+      return;
+    }
+    const [router, lpFee] = await Promise.all([
+      alexSDK.getRouter(values.swapAssetFrom.currency, values.swapAssetTo.currency),
+      alexSDK.getFeeRate(values.swapAssetFrom.currency, values.swapAssetTo.currency),
+    ]);
+    setSwapSubmissionData({
+      swapAmountFrom: values.swapAmountFrom,
+      swapAmountTo: values.swapAmountTo,
+      swapAssetFrom: values.swapAssetFrom,
+      swapAssetTo: values.swapAssetTo,
+      router: router.map(x => getAssetFromAlexCurrency(supportedCurrencies.find(y => y.id === x)!)),
+      liquidityFee: new BigNumber(Number(lpFee)).dividedBy(1e8).toNumber(),
+      slippage,
     });
+    navigate(RouteUrls.SwapReview);
   }
 
-  // TODO: Generate/broadcast transaction > pass real tx data
   function onSubmitSwap() {
+    if (swapSubmissionData == null) {
+      return;
+    }
+    const fromAmount = BigInt(
+      new BigNumber(swapSubmissionData.swapAmountFrom).multipliedBy(1e8).dp(0).toString()
+    );
+    const minToAmount = BigInt(
+      new BigNumber(swapSubmissionData.swapAmountTo)
+        .multipliedBy(1e8)
+        .multipliedBy(1 - slippage)
+        .dp(0)
+        .toString()
+    );
+    const txToBroadcast = alexSDK.runSwap(
+      '', // TODO: current user's stxAddress
+      swapSubmissionData.swapAssetFrom.currency,
+      swapSubmissionData.swapAssetTo.currency,
+      fromAmount,
+      minToAmount,
+      swapSubmissionData.router.map(x => x.currency)
+    );
+    // TODO: broadcast the tx
+    console.log(txToBroadcast);
     navigate(RouteUrls.SwapSummary);
   }
 
+  async function fetchToAmount(
+    from: SwapAsset,
+    to: SwapAsset,
+    fromAmount: string
+  ): Promise<string> {
+    const result = await alexSDK.getAmountTo(
+      from.currency,
+      BigInt(new BigNumber(fromAmount).multipliedBy(1e8).dp(0).toString()),
+      to.currency
+    );
+    return new BigNumber(Number(result)).dividedBy(1e8).toString();
+  }
   const swapContextValue: SwapContext = {
-    async fetchToAmount(from: SwapAsset, to: SwapAsset, fromAmount: string): Promise<string> {
-      const result = await alexSDK.getAmountTo(
-        from.currency,
-        BigInt(new BigNumber(fromAmount).multipliedBy(1e8).dp(0).toString()),
-        to.currency
-      );
-      return new BigNumber(Number(result)).dividedBy(1e8).toString();
-    },
+    swapSubmissionData,
+    fetchToAmount,
     onSubmitSwapForReview,
     onSubmitSwap,
     swappableAssets: swappableAssets,

src/app/pages/swap/swap.context.ts

@@ -2,7 +2,18 @@ import { createContext, useContext } from 'react';
 
 import { SwapAsset, SwapFormValues } from './hooks/use-swap';
 
+export interface SwapSubmissionData {
+  swapAmountFrom: string;
+  swapAmountTo: string;
+  swapAssetFrom: SwapAsset;
+  swapAssetTo: SwapAsset;
+  liquidityFee: number;
+  router: SwapAsset[];
+  slippage: number;
+}
+
 export interface SwapContext {
+  swapSubmissionData?: SwapSubmissionData;
   fetchToAmount(from: SwapAsset, to: SwapAsset, fromAmount: string): Promise<string>;
   onSubmitSwapForReview(values: SwapFormValues): Promise<void> | void;
   onSubmitSwap(): Promise<void> | void;