@rango-dev/widget-embedded 0.1.10-next.84 → 0.1.10-next.87

package/src/pages/Home.tsx

@@ -206,7 +206,7 @@ export function Home() {
             if (swapButtonState.title === 'Connect Wallet')
               navigate(navigationRoutes.wallets);
             else {
-              navigate(navigationRoutes.confirmWallets);
+              navigate(navigationRoutes.confirmWallets, { replace: true });
             }
           }}
         >

package/src/pages/SwapDetailsPage.tsx

@@ -1,15 +1,33 @@
-import { SwapHistory } from '@rango-dev/ui';
 import React from 'react';
+import { useManager } from '@rango-dev/queue-manager-react';
+import { SwapHistory } from '@rango-dev/ui';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { pendingSwap } from '../mockData/pendingSwap';
+import { getPendingSwaps } from '../utils/queue';
+import { useUiStore } from '../store/ui';
+import useCopyToClipboard from '../hooks/useCopyToClipboard';
 
 export function SwapDetailsPage() {
+  const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
+  const { manager } = useManager();
+  const [isCopied, handleCopy] = useCopyToClipboard(2000);
+
+  const pendingSwaps = getPendingSwaps(manager);
+  const selectedSwap = pendingSwaps.find(
+    ({ swap }) => swap.requestId === selectedSwapRequestId
+  )?.swap;
+
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
-      pendingSwap={pendingSwap}
+      //todo: move PendingSwap type to rango-types
+      //@ts-ignore
+      pendingSwap={selectedSwap}
+      onCopy={handleCopy}
+      isCopied={isCopied}
+      //todo: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
+      onCancel={(requestId) => console.log(requestId)}
     />
   );
 }

package/src/store/confirmSwap.ts

@@ -29,6 +29,7 @@ import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 import { useSettingsStore } from './settings';
 import { useWalletsStore } from './wallets';
+import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
 
 interface ConfirmSwapState {
   loading: boolean;
@@ -95,7 +96,7 @@ export enum ConfirmSwapWarningTypes {
   INSUFFICIENT_BALANCE,
 }
 
-export const confirmSwap = () => {
+export const confirmSwap = async (): Promise<PendingSwap | undefined> => {
   const {
     fromToken,
     toToken,
@@ -131,11 +132,15 @@ export const confirmSwap = () => {
 
     console.log('new swap:', newSwap);
 
-    return useConfirmSwapStore.setState({
+    // queueManager?.create('swap', { swapDetails: newSwap });
+
+    useConfirmSwapStore.setState({
       errors: [],
       warnings: [],
       proceedAnyway: false,
     });
+
+    return newSwap;
   }
 
   let abortController: AbortController | null = new AbortController();
@@ -181,7 +186,7 @@ export const confirmSwap = () => {
     }
   );
 
-  httpService
+  const newSwap: PendingSwap | undefined | void = await httpService
     .getBestRoute(requestBody, { signal: abortController.signal })
     .then((confiremedRoute) => {
       useConfirmSwapStore.setState({ loading: false });
@@ -191,12 +196,14 @@ export const confirmSwap = () => {
         !new BigNumber(confiremedRoute.requestAmount).isEqualTo(
           new BigNumber(inputAmount || '-1')
         )
-      )
-        return useConfirmSwapStore.setState((prevState) => ({
+      ) {
+        useConfirmSwapStore.setState((prevState) => ({
           errors: prevState.errors.concat({
             type: ConfirmSwapErrorTypes.NO_ROUTE,
           }),
         }));
+        return undefined;
+      }
 
       const confirmSwap: Partial<ConfirmSwapState> = {
         loading: false,
@@ -286,7 +293,7 @@ export const confirmSwap = () => {
 
         const newSwap = calculatePendingSwap(
           inputAmount.toString(),
-          initialRoute,
+          confiremedRoute,
           getWalletsForNewSwap(selectedWallets),
           swapSettings,
           false,
@@ -294,12 +301,18 @@ export const confirmSwap = () => {
         );
 
         console.log('new swap:', newSwap);
-      } else if (!proceedAnyway) confirmSwap.proceedAnyway = true;
-
+        return newSwap;
+      } else if (!proceedAnyway) {
+        confirmSwap.proceedAnyway = true;
+        useConfirmSwapStore.setState(confirmSwap);
+      }
+      return undefined;
+    })
+    .then((result) => {
       abortController = null;
-      useConfirmSwapStore.setState(confirmSwap);
       unsubscribeFromBestRouteStore();
       unsubscribeFromWalletsStore();
+      return result;
     })
     .catch((error) => {
       abortController = null;
@@ -324,4 +337,6 @@ export const confirmSwap = () => {
         }),
       }));
     });
+
+  return newSwap || undefined;
 };

package/src/store/ui.ts

@@ -3,13 +3,19 @@ import createSelectors from './selectors';
 
 interface UiState {
   connectWalletsButtonDisabled: boolean;
+  selectedSwapRequestId: string | null;
   toggleConnectWalletsButton: () => void;
+  setSelectedSwap: (requestId: string | null) => void;
 }
 
 export const useUiStore = createSelectors(
   create<UiState>()((set) => ({
     connectWalletsButtonDisabled: false,
+    selectedSwapRequestId: null,
     toggleConnectWalletsButton: () =>
-      set((state) => ({ connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled })),
-  })),
+      set((state) => ({
+        connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled,
+      })),
+    setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
+  }))
 );

package/src/utils/queue.ts

@@ -0,0 +1,24 @@
+import { Manager } from '@rango-dev/queue-manager-core';
+import {
+  PendingSwapWithQueueID,
+  SwapStorage,
+} from '@rango-dev/queue-manager-rango-preset';
+
+export const getPendingSwaps = (manager: Manager | undefined) => {
+  const result: PendingSwapWithQueueID[] = [];
+
+  manager?.getAll().forEach((q, id) => {
+    const storage = q.list.getStorage() as SwapStorage;
+
+    if (storage?.swapDetails) {
+      result.push({
+        id,
+        swap: storage?.swapDetails,
+      });
+    }
+  });
+
+  return result.sort(
+    (a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime)
+  );
+};