@rango-dev/widget-embedded 0.17.1-next.27 → 0.17.1-next.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.27",
+  "version": "0.17.1-next.28",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/containers/App/App.tsx

@@ -18,7 +18,7 @@ import { MainContainer } from './App.styles';
 export function Main() {
   globalFont();
 
-  const { fetch: fetchMeta, config } = useAppStore();
+  const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
   const { activeLanguage, changeLanguage } = useLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
@@ -27,7 +27,6 @@ export function Main() {
   const widgetContext = useContext(WidgetContext);
 
   useEffect(() => {
-    void fetchMeta().catch();
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);

package/src/containers/Wallets/Wallets.tsx

@@ -28,7 +28,7 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const { updateConfig, updateSettings } = useAppStore();
+  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const walletOptions: ProvidersOptions = {
@@ -39,6 +39,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const onConnectWalletHandler = useRef<OnConnectHandler>();
   useSyncStoresWithConfig();
 
+  useEffect(() => {
+    void fetchMeta().catch(console.log);
+  }, []);
+
   useEffect(() => {
     if (props.config) {
       updateConfig(props.config);

package/src/containers/WidgetInfo/WidgetInfo.helpers.ts

@@ -1,7 +1,9 @@
+import type { Meta } from '../../store/quote';
 import type { Manager } from '@rango-dev/queue-manager-core';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 import {
+  cancelSwap,
   getCurrentBlockchainOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
@@ -9,11 +11,17 @@ import {
 
 import { getPendingSwaps } from '../../utils/queue';
 
+interface WidgetHistoryActions {
+  retrySwap: (pendingSwap: PendingSwap, meta: Meta) => void;
+}
+
 export class WidgetHistory {
   private manager: Manager | undefined;
+  private actions: WidgetHistoryActions;
 
-  constructor(manager: Manager | undefined) {
+  constructor(manager: Manager | undefined, actions: WidgetHistoryActions) {
     this.manager = manager;
+    this.actions = actions;
   }
 
   public getAllSwaps() {
@@ -32,6 +40,17 @@ export class WidgetHistory {
     return this.getCurrentStepInfo(swap).network;
   }
 
+  public retry(swap: PendingSwap, meta: Meta) {
+    return this.actions.retrySwap(swap, meta);
+  }
+
+  public cancel(id: string) {
+    const queue = this.manager?.get(id);
+    if (queue) {
+      cancelSwap(queue);
+    }
+  }
+
   private getCurrentStepInfo(swap: PendingSwap) {
     const currentStep = getCurrentStep(swap);
     return {

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -3,6 +3,8 @@ import type { WidgetInfoContextInterface } from './WidgetInfo.types';
 import { useManager } from '@rango-dev/queue-manager-react';
 import React, { createContext, useContext } from 'react';
 
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
@@ -14,11 +16,17 @@ export const WidgetInfoContext = createContext<
 
 export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
-  const history = new WidgetHistory(manager);
+  const retrySwap = useQuoteStore.use.retry();
+  const history = new WidgetHistory(manager, { retrySwap });
   const details = useWalletsStore.use.connectedWallets();
   const isLoading = useWalletsStore.use.loading();
   const totalBalance = calculateWalletUsdValue(details);
   const refetch = useWalletsStore.use.getWalletsDetails();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const swappers = useAppStore().swappers();
+  const loadingStatus = useAppStore().fetchStatus;
+
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value = {
     history,
@@ -28,6 +36,12 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       totalBalance,
       refetch,
     },
+    meta: {
+      blockchains,
+      tokens,
+      swappers,
+      loadingStatus,
+    },
   };
 
   return (

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,7 +1,8 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
+import type { FetchStatus } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { Wallet } from '../../types';
-import type { Token } from 'rango-sdk';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 export interface WidgetInfoContextInterface {
   history: WidgetHistory;
@@ -11,4 +12,10 @@ export interface WidgetInfoContextInterface {
     isLoading: boolean;
     refetch: (accounts: Wallet[], tokens: Token[]) => void;
   };
+  meta: {
+    blockchains: BlockchainMeta[];
+    tokens: Token[];
+    swappers: SwapperMeta[];
+    loadingStatus: FetchStatus;
+  };
 }