@rango-dev/widget-embedded 0.1.10 → 0.1.11-next.4

package/src/lib.tsx

@@ -15,35 +15,31 @@ import { Layout } from './components/Layout';
 import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { Configs } from './types';
-import { useSettingsStore } from './store/settings';
+import { WidgetConfig } from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
+import { useUiStore } from './store/ui';
+import { navigationRoutes } from './constants/navigationRoutes';
 
 export type WidgetProps = {
-  configs: Configs;
+  config?: WidgetConfig;
 };
 
-export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
+export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
   globalStyles();
-  globalFont(configs?.fontFamily || 'Roboto');
+  globalFont(config?.theme?.fontFamily || 'Roboto');
 
-  const { activeTheme } = useTheme({
-    ...configs.colors,
-    borderRadius: configs?.borderRadius,
-    fontFamily: configs?.fontFamily,
-  });
+  const { activeTheme } = useTheme({ ...config?.theme });
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
-  const setTheme = useSettingsStore.use.setTheme();
   const { changeLanguage } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const currentPage = useUiStore.use.currentPage();
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
@@ -71,7 +67,6 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
         disconnectWallet(type);
       }
     }
-
     if (event === Events.ACCOUNTS && state.connected) {
       const key = `${type}-${state.network}-${value}`;
 
@@ -88,24 +83,19 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
   let providers = allProviders();
 
   useEffect(() => {
-    if (configs.theme !== 'auto') setTheme(configs.theme);
-  }, [configs.theme]);
-
-  useEffect(() => {
-    const wallets = configs.wallets;
+    const wallets = config?.wallets;
     clearConnectedWallet();
-    providers =
-      wallets === 'all'
-        ? allProviders()
-        : allProviders().filter((provider) => {
-            const type = provider.config.type;
-            return wallets.find((w) => w === type);
-          });
-  }, [configs?.wallets]);
+    providers = !wallets
+      ? allProviders()
+      : allProviders().filter((provider) => {
+          const type = provider.config.type;
+          return wallets.find((w) => w === type);
+        });
+  }, [config?.wallets]);
 
   useEffect(() => {
-    changeLanguage(configs?.languege);
-  }, [configs?.languege]);
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
 
   return (
     <Provider
@@ -116,22 +106,26 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
           <SwapContainer
-            style={{
-              width: configs?.width || 'auto',
-              height: configs?.height || 'auto',
-            }}
+            fixedHeight={currentPage !== navigationRoutes.home}
+            // style={
+            //   currentPage !== navigationRoutes.home && config?.theme?.height
+            //     ? {
+            //         height: config?.theme?.height,
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : {
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            // }
           >
             <AppRouter
-              title={configs.title}
-              titleSize={configs.titleSize}
-              titleWeight={configs.titleWeight}
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}
               clearDisconnectedWallet={() => {
                 setDisconnectedWallet(undefined);
               }}
             >
-              <Layout configs={configs} />
+              <Layout config={config} />
             </AppRouter>
           </SwapContainer>
         </QueueManager>

package/src/pages/ConfirmSwapPage.tsx

@@ -10,11 +10,7 @@ import {
   getSelectableWallets,
   isExperimentalChain,
 } from '../utils/wallets';
-import {
-  calcOutputUsdValue,
-  getTotalFeeInUsd,
-  requiredWallets,
-} from '../utils/swap';
+import { getTotalFeeInUsd, requiredWallets } from '../utils/swap';
 import { decimalNumber, numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
@@ -33,6 +29,7 @@ import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
 import { getBestRouteStatus } from '../utils/routing';
+import { PercentageChange } from '../components/PercentageChange';
 
 export function ConfirmSwapPage() {
   const navigate = useNavigate();
@@ -48,6 +45,8 @@ export function ConfirmSwapPage() {
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
 
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
@@ -97,6 +96,7 @@ export function ConfirmSwapPage() {
 
   return (
     <ConfirmSwap
+    // @ts-ignore
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
@@ -106,6 +106,7 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
+              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
@@ -134,7 +135,7 @@ export function ConfirmSwapPage() {
               symbol: firstStep?.from.symbol || '',
               image: firstStep?.from.logo || '',
             }}
-            usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
+            usdValue={inputUsdValue}
             amount={fromAmount}
             label={t('From')}
             loadingStatus={bestRouteloadingStatus}
@@ -149,10 +150,16 @@ export function ConfirmSwapPage() {
               symbol: lastStep?.to.symbol || '',
               image: lastStep?.to.logo || '',
             }}
-            usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
+            usdValue={outputUsdValue}
             amount={toAmount}
             label={t('To')}
             loadingStatus={bestRouteloadingStatus}
+            percentageChange={
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={outputUsdValue}
+              />
+            }
           />
         </>
       }

package/src/pages/Home.tsx

@@ -63,14 +63,8 @@ const Alerts = styled('div', {
   width: '100%',
   paddingTop: '$16',
 });
-interface PropTypes {
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-export function Home(props: PropTypes) {
-  const { title = 'SWAP' } = props;
 
+export function Home() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -78,10 +72,6 @@ export function Home(props: PropTypes) {
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
   const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
@@ -94,15 +84,7 @@ export function Home(props: PropTypes) {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-
-  const swithFromAndTo = () => {
-    setFromChain(toChain);
-    setFromToken(toToken);
-    setToChain(fromChain);
-    setToToken(fromToken);
-    setInputAmount(outputAmount?.toString() || '');
-    setCount((prev) => prev + 1);
-  };
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   const errorMessage =
     loadingMetaStatus === 'failed'
@@ -154,7 +136,7 @@ export function Home(props: PropTypes) {
   return (
     <Container>
       <Header
-        title={title}
+        title="SWAP"
         suffix={
           <HeaderButtons
             onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}
@@ -170,7 +152,13 @@ export function Home(props: PropTypes) {
           inputAmount={inputAmount}
         />
         <SwitchButtonContainer>
-          <Button variant="ghost" onClick={swithFromAndTo}>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              switchFromAndTo();
+              setCount((prev) => prev + 1);
+            }}
+          >
             <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>

package/src/pages/LiquiditySourcesPage.tsx

@@ -4,10 +4,9 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Source } from '../types';
 import { removeDuplicateFrom } from '../utils/common';
 interface PropTypes {
-  supportedSwappers: 'all' | Source[];
+  supportedSwappers?: string[];
 }
 export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
   const swappers = useMetaStore.use.meta().swappers;
@@ -47,12 +46,10 @@ export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
     <LiquiditySourcesSelector
       toggleAll={toggleAllLiquiditySources}
       list={
-        supportedSwappers !== 'all'
+        supportedSwappers
           ? uniqueSwappersGroups.filter(
               (item) =>
-                supportedSwappers.filter(
-                  (s) => s.title === item.title && s.type === item.type
-                ).length > 0
+                supportedSwappers.filter((s) => s === item.title).length > 0
             )
           : uniqueSwappersGroups
       }

package/src/pages/SelectChainPage.tsx

@@ -4,19 +4,19 @@ import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { BlockchainMeta } from 'rango-sdk';
 
 interface PropTypes {
   type: 'from' | 'to';
-  supportedChains: 'all' | BlockchainMeta[];
+  supportedChains?: string[];
 }
 
 export function SelectChainPage(props: PropTypes) {
   const { type, supportedChains } = props;
-  const blockchains =
-    supportedChains === 'all'
-      ? useMetaStore.use.meta().blockchains
-      : supportedChains;
+  const blockchains = supportedChains
+    ? useMetaStore.use
+        .meta()
+        .blockchains.filter((chain) => supportedChains.includes(chain.name))
+    : useMetaStore.use.meta().blockchains;
   const loadingStatus = useMetaStore.use.loadingStatus();
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();

package/src/pages/SelectTokenPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TokenSelector } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { tokensAreEqual } from '../utils/wallets';
@@ -9,7 +9,7 @@ import { useMetaStore } from '../store/meta';
 
 interface PropTypes {
   type: 'from' | 'to';
-  supportedTokens: 'all' | Token[];
+  supportedTokens?: Asset[];
 }
 
 export interface TokenWithBalance extends Token {
@@ -25,23 +25,21 @@ export function SelectTokenPage(props: PropTypes) {
   const { type, supportedTokens } = props;
   const sourceTokens = useBestRouteStore.use.sourceTokens();
   const destinationTokens = useBestRouteStore.use.destinationTokens();
-  const supportedSourceTokens =
-    supportedTokens === 'all'
-      ? sourceTokens
-      : sourceTokens.filter((token) =>
-          supportedTokens.some((supportedToken) =>
-            tokensAreEqual(supportedToken, token)
-          )
-        );
+  const supportedSourceTokens = supportedTokens
+    ? sourceTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : sourceTokens;
 
-  const supportedDestinationTokens =
-    supportedTokens === 'all'
-      ? destinationTokens
-      : destinationTokens.filter((token) =>
-          supportedTokens.some((supportedToken) =>
-            tokensAreEqual(supportedToken, token)
-          )
-        );
+    const supportedDestinationTokens = supportedTokens
+    ? destinationTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : destinationTokens;
 
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();

package/src/pages/SettingsPage.tsx

@@ -5,7 +5,6 @@ import { useMetaStore } from '../store/meta';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { removeDuplicateFrom } from '../utils/common';
-import { Source } from '../types';
 import {
   MAX_SLIPPAGE,
   MIN_SLIPPGAE,
@@ -13,7 +12,7 @@ import {
 } from '../constants/swapSettings';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 interface PropTypes {
-  supportedSwappers: 'all' | Source[];
+  supportedSwappers?: string[];
 }
 export function SettingsPage({ supportedSwappers }: PropTypes) {
   const slippage = useSettingsStore.use.slippage();
@@ -45,8 +44,6 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
     .find((s) => {
       if (s) {
         for (const type of s.types) {
-          if (supportedSwappers !== 'all') {
-          }
           uniqueSwappersGroups.push({
             title: s.swapperGroup,
             logo: s.logo,
@@ -56,23 +53,16 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
         }
       }
     });
-  supportedSwappers !== 'all' &&
+  supportedSwappers &&
     uniqueSwappersGroups.filter(
-      (item) =>
-        supportedSwappers.filter(
-          (s) => s.title === item.title && s.type === item.type
-        ).length > 0
+      (item) => supportedSwappers.filter((s) => s === item.title).length > 0
     );
 
-  const supportedUniqueSwappersGroups =
-    supportedSwappers !== 'all'
-      ? uniqueSwappersGroups.filter(
-          (item) =>
-            supportedSwappers.filter(
-              (s) => s.title === item.title && s.type === item.type
-            ).length > 0
-        )
-      : uniqueSwappersGroups;
+  const supportedUniqueSwappersGroups = supportedSwappers
+    ? uniqueSwappersGroups.filter(
+        (item) => supportedSwappers.filter((s) => s === item.title).length > 0
+      )
+    : uniqueSwappersGroups;
 
   return (
     <Settings

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,7 @@ import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory } from '@rango-dev/ui';
+import { SwapHistory, Spacer } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -26,7 +26,6 @@ import {
   shouldRetrySwap,
 } from '../utils/swap';
 import { TokenPreview } from '../components/TokenPreview';
-import { Spacer } from '@rango-dev/ui';
 import { numberToString } from '../utils/numbers';
 //@ts-ignore
 import { t } from 'i18next';
@@ -127,7 +126,7 @@ export function SwapDetailsPage() {
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',
-              // @ts-ignore
+              //@ts-ignore
               logo: lastStep?.toBlockchainLogo || '',
             }}
             token={{
@@ -141,7 +140,6 @@ export function SwapDetailsPage() {
         </>
       }
       //todo: move PendingSwap type to rango-types
-      //@ts-ignore
       pendingSwap={swap}
       onCopy={handleCopy}
       isCopied={isCopied}

package/src/pages/WalletsPage.tsx

@@ -20,7 +20,7 @@ import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
 
 interface PropTypes {
-  supportedWallets: 'all' | WalletType[];
+  supportedWallets?: WalletType[];
   multiWallets: boolean;
 }
 
@@ -50,7 +50,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
+    supportedWallets || Object.values(WalletType)
   );
   const walletsRef = useRef<WalletInfo[]>();
 

package/src/store/bestRoute.ts

@@ -49,6 +49,7 @@ export interface RouteState {
   bestRoute: BestRouteResponse | null;
   setBestRoute: (bestRoute: BestRouteResponse | null) => void;
   retry: (pendingSwap: PendingSwap) => void;
+  switchFromAndTo: () => void;
 }
 
 export const useBestRouteStore = createSelectors(
@@ -146,7 +147,6 @@ export const useBestRouteStore = createSelectors(
           toToken: token,
         })),
       setInputAmount: (amount) => {
-        console.log(amount, typeof amount);
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
@@ -224,6 +224,20 @@ export const useBestRouteStore = createSelectors(
           destinationTokens: sortedDestinationTokens,
         });
       },
+      switchFromAndTo: () =>
+        set((state) => ({
+          fromChain: state.toChain,
+          fromToken: state.toToken,
+          toChain: state.fromChain,
+          toToken: state.fromToken,
+          sourceTokens: state.destinationTokens,
+          destinationTokens: state.sourceTokens,
+          inputAmount: state.outputAmount?.toString() || '',
+          inputUsdValue: getUsdValue(
+            state.toToken,
+            state.outputAmount?.toString() || ''
+          ),
+        })),
     }))
   )
 );
@@ -235,7 +249,7 @@ const bestRoute = (
   let abortController: AbortController | null = null;
   const fetchBestRoute = () => {
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
-    const { slippage, customSlippage, disabledLiquiditySources } =
+    const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
     if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
@@ -249,7 +263,8 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      false
+      false,
+      affiliateRef
     );
     if (!bestRouteStore.getState().loading)
       bestRouteStore.setState({
@@ -282,7 +297,7 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0') return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({
@@ -312,8 +327,15 @@ const bestRoute = (
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'bestRoute',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }
@@ -324,11 +346,19 @@ const bestRoute = (
       slippage: state.slippage,
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
+      infiniteApprove: state.infiniteApprove,
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'settings',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }

package/src/store/settings.ts

@@ -13,12 +13,14 @@ export interface SettingsState {
   infiniteApprove: boolean;
   disabledLiquiditySources: string[];
   theme: Theme;
+  affiliateRef: string | null;
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: Theme) => void;
   toggleAllLiquiditySources: () => void;
+  setAffiliateRef: (affiliateRef: string | null) => void;
 }
 
 export const useSettingsStore = createSelectors(
@@ -28,6 +30,7 @@ export const useSettingsStore = createSelectors(
         slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
         infiniteApprove: false,
+        affiliateRef: null,
         disabledLiquiditySources: [],
         theme: 'auto',
         setSlippage: (slippage) =>
@@ -38,6 +41,10 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             customSlippage: customSlippage,
           })),
+        setAffiliateRef: (affiliateRef) =>
+          set(() => ({
+            affiliateRef,
+          })),
         toggleAllLiquiditySources: () =>
           set((state) => {
             const { swappers } = useMetaStore.getState().meta;