@rango-dev/widget-embedded 0.1.11-next.0 → 0.1.11-next.11

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

@@ -47,6 +47,7 @@ export function ConfirmSwapPage() {
   const customSlippage = useSettingsStore.use.customSlippage();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
 
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
@@ -111,6 +112,7 @@ export function ConfirmSwapPage() {
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
+            setInputAmount('');
           }
         });
       }}

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);
@@ -116,7 +110,6 @@ export function Home(props: PropTypes) {
     outputUsdValue
   );
 
-  const inputIsZero = inputAmount === '0';
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     accounts,
@@ -126,7 +119,7 @@ export function Home(props: PropTypes) {
     highValueLoss,
     priceImpactCanNotBeComputed,
     needsToWarnEthOnPath,
-    inputIsZero
+    inputAmount
   );
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
@@ -142,7 +135,7 @@ export function Home(props: PropTypes) {
   return (
     <Container>
       <Header
-        title={title}
+        title="SWAP"
         suffix={
           <HeaderButtons
             onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}

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/services/httpService.ts

@@ -1,5 +1,14 @@
 import { RangoClient } from 'rango-sdk';
+import { getConfig } from '../utils/configs';
 
-export const httpService = new RangoClient(
-  process.env.REACT_APP_API_KEY as string
-);
+// this API key is limited and
+// it is only for test purpose
+export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+
+let rango: RangoClient | undefined = undefined;
+
+export const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'));
+  return rango;
+};

package/src/store/bestRoute.ts

@@ -249,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();
@@ -263,7 +263,7 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      false
+      affiliateRef
     );
     if (!bestRouteStore.getState().loading)
       bestRouteStore.setState({
@@ -272,7 +272,7 @@ const bestRoute = (
         outputAmount: null,
         outputUsdValue: new BigNumber(0),
       });
-    httpService
+    httpService()
       .getBestRoute(requestBody, {
         signal: abortController.signal,
       })
@@ -296,7 +296,8 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0))
+      return bestRouteStore.setState({ loading: false });
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({

package/src/store/meta.ts

@@ -18,12 +18,14 @@ export const useMetaStore = createSelectors(
     loadingStatus: 'loading',
     fetchMeta: async () => {
       try {
-        const response = await httpService.getAllMetadata();
+        const response = await httpService().getAllMetadata();
         const chainThatHasTokenInMetaResponse = removeDuplicateFrom(
-          response.tokens.map((t) => t.blockchain),
+          response.tokens.map((t) => t.blockchain)
         );
         const enabledChains = response.blockchains.filter(
-          (chain) => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name),
+          (chain) =>
+            chain.enabled &&
+            chainThatHasTokenInMetaResponse.includes(chain.name)
         );
         response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
         set({ meta: response, loadingStatus: 'success' });
@@ -31,5 +33,5 @@ export const useMetaStore = createSelectors(
         set({ loadingStatus: 'failed' });
       }
     },
-  })),
+  }))
 );

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;

package/src/store/wallets.ts

@@ -81,7 +81,7 @@ export const useWalletsStore = createSelectors(
         }));
         accounts.forEach(async (account) => {
           try {
-            const response = await httpService.getWalletsDetails([
+            const response = await httpService().getWalletsDetails([
               { address: account.address, blockchain: account.chain },
             ]);
             const retrivedBalance = response.wallets[0];
@@ -142,7 +142,7 @@ export const useWalletsStore = createSelectors(
             }
           });
           return {
-            selectedWallets: selectedWallets,
+            selectedWallets: state.selectedWallets.concat(selectedWallets),
           };
         }),
       setSelectedWallet: (wallet) =>

package/src/types/config.ts

@@ -1,9 +1,5 @@
-import { BlockchainMeta, Token } from 'rango-sdk';
+import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
-export interface Source {
-  title: string;
-  type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-}
 
 export type Colors = {
   background?: string;
@@ -17,28 +13,31 @@ export type Colors = {
   warning?: string;
 };
 
-export type Configs = {
-  fromChain: BlockchainMeta | null;
-  fromToken: Token | null;
-  toChain: BlockchainMeta | null;
-  toToken: Token | null;
-  fromAmount: number;
-  fromChains: 'all' | BlockchainMeta[];
-  fromTokens: 'all' | Token[];
-  toChains: 'all' | BlockchainMeta[];
-  toTokens: 'all' | Token[];
-  liquiditySources: 'all' | Source[];
-  wallets: 'all' | WalletType[];
-  multiWallets: boolean;
-  customeAddress: boolean;
-  theme: 'dark' | 'light' | 'auto';
-  title: string;
-  width: number;
-  height: number;
-  languege: string;
-  borderRadius: number;
-  fontFamily: string;
-  titleSize: number;
-  titleWeight: number;
-  colors: Colors;
+export type Theme = {
+  mode?: 'dark' | 'light' | 'auto';
+  fontFamily?: string;
+  colors?: Colors;
+  borderRadius?: number;
+  width?: number;
+  height?: number;
+};
+export type Support = {
+  blockchain?: string;
+  token?: Asset;
+  blockchains?: string[];
+  tokens?: Asset[];
+};
+
+export type WidgetConfig = {
+  apiKey: string;
+  affiliateRef?: string;
+  amount?: number;
+  from?: Support;
+  to?: Support;
+  liquiditySources?: string[];
+  wallets?: WalletType[];
+  multiWallets?: boolean;
+  customAddress?: boolean;
+  language?: string;
+  theme?: Theme;
 };

package/src/utils/configs.ts

@@ -0,0 +1,24 @@
+export interface Configs {
+  API_KEY: string;
+}
+
+const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+
+let configs: Configs = {
+  API_KEY: RANGO_PUBLIC_API_KEY,
+};
+
+export function getConfig(name: keyof Configs) {
+  return configs[name];
+}
+
+export function setConfig(name: keyof Configs, value: any) {
+  configs[name] = value;
+
+  return value;
+}
+
+export function initConfig(nextConfigs: Configs) {
+  configs = structuredClone(nextConfigs);
+  return configs;
+}