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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.0",
+  "version": "0.1.11-next.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,7 +10,9 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "dev": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "watch-tsc": "tsc --watch --noEmit",
+    "parcel": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "dev": "npm-run-all --parallel watch-tsc parcel",
     "build:app": "parcel build --cache-dir=.parcel-cache",
     "build": "tsdx build --entry ./src/lib.tsx"
   },
@@ -27,10 +29,10 @@
   },
   "dependencies": {
     "@rango-dev/provider-all": "^0.1.11-next.84",
-    "@rango-dev/queue-manager-core": "^0.1.10-next.82",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.10-next.102",
+    "@rango-dev/queue-manager-core": "^0.1.11-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.2",
     "@rango-dev/queue-manager-react": "^0.1.10-next.76",
-    "@rango-dev/ui": "^0.1.10-next.75",
+    "@rango-dev/ui": "^0.1.11-next.3",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

package/readme.md

@@ -1 +1 @@
-# @rango-dev/widget-embedded
+# @rango-dev/widget-embedded

package/src/App.tsx

@@ -17,7 +17,7 @@ import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
-import { Configs } from './types';
+import { WidgetConfig } from './types';
 import './i18n';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
@@ -25,16 +25,13 @@ import { navigationRoutes } from './constants/navigationRoutes';
 const providers = allProviders();
 
 export type WidgetProps = {
-  configs?: Configs;
+  config?: WidgetConfig;
 };
 
-export function App({ configs }: WidgetProps) {
+export function App({ config }: WidgetProps) {
   globalStyles();
-  globalFont(configs?.fontFamily || 'Roboto');
-  const { activeTheme } = useTheme({
-    ...configs?.colors,
-    borderRadius: configs?.borderRadius,
-  });
+  globalFont(config?.theme?.fontFamily || 'Roboto');
+  const { activeTheme } = useTheme({ ...config?.theme });
 
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
@@ -95,18 +92,29 @@ export function App({ configs }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer fixedHeight={currentPage != navigationRoutes.home}>
+          <SwapContainer
+            // style={
+            //   currentPage !== navigationRoutes.home && config?.theme?.height
+            //     ? {
+            //         height: config?.theme?.height,
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : config?.theme?.width
+            //     ? {
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : undefined
+            // }
+            fixedHeight={currentPage !== navigationRoutes.home}
+          >
             <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/components/AppRouter.tsx

@@ -13,15 +13,7 @@ import { UpdateUrl } from './UpdateUrl';
 import { Home } from '../pages/Home';
 import { useMetaStore } from '../store/meta';
 
-interface PropTypes {
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-const Route: React.FC = ({
-  children,
-  ...props
-}: PropTypes & PropsWithChildren) => {
+const Route: React.FC = ({ children }: PropsWithChildren) => {
   const location = useLocation();
   const navigate = useNavigate();
   const ref = useRef(true);
@@ -34,7 +26,7 @@ const Route: React.FC = ({
   }, []);
 
   if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-    return <Home {...props} />;
+    return <Home />;
 
   return <> {children}</>;
 };
@@ -42,12 +34,11 @@ const Route: React.FC = ({
 export function AppRouter({
   children,
   ...props
-}: PropTypes &
-  PropsWithChildren & {
-    lastConnectedWallet: string;
-    disconnectedWallet: WalletType | undefined;
-    clearDisconnectedWallet: () => void;
-  }) {
+}: PropsWithChildren & {
+  lastConnectedWallet: string;
+  disconnectedWallet: WalletType | undefined;
+  clearDisconnectedWallet: () => void;
+}) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();

package/src/components/AppRoutes.tsx

@@ -10,76 +10,57 @@ import { SelectTokenPage } from '../pages/SelectTokenPage';
 import { SettingsPage } from '../pages/SettingsPage';
 import { WalletsPage } from '../pages/WalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
-import { Configs } from '../types';
+import { WidgetConfig } from '../types';
 
 const getAbsolutePath = (path: string) => path.replace('/', '');
 
 interface PropTypes {
-  configs?: Configs;
+  config?: WidgetConfig;
 }
 
 export function AppRoutes(props: PropTypes) {
-  const { configs } = props;
+  const { config } = props;
 
   return useRoutes([
     {
       path: getAbsolutePath(navigationRoutes.home),
-      element: (
-        <Home
-          title={configs?.title}
-          titleSize={configs?.titleSize}
-          titleWeight={configs?.titleWeight}
-        />
-      ),
+      element: <Home />,
     },
     {
       path: getAbsolutePath(navigationRoutes.fromChain),
       element: (
         <SelectChainPage
           type="from"
-          supportedChains={configs?.fromChains || 'all'}
+          supportedChains={config?.from?.blockchains}
         />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.toChain),
       element: (
-        <SelectChainPage
-          type="to"
-          supportedChains={configs?.toChains || 'all'}
-        />
+        <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.fromToken),
       element: (
-        <SelectTokenPage
-          type="from"
-          supportedTokens={configs?.fromTokens || 'all'}
-        />
+        <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.toToken),
       element: (
-        <SelectTokenPage
-          type="to"
-          supportedTokens={configs?.toTokens || 'all'}
-        />
+        <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.settings),
-      element: (
-        <SettingsPage supportedSwappers={configs?.liquiditySources || 'all'} />
-      ),
+      element: <SettingsPage supportedSwappers={config?.liquiditySources} />,
     },
     {
       path: getAbsolutePath(navigationRoutes.liquiditySources),
       element: (
-        <LiquiditySourcePage
-          supportedSwappers={configs?.liquiditySources || 'all'}
-        />
+        <LiquiditySourcePage supportedSwappers={config?.liquiditySources} />
       ),
     },
     { path: getAbsolutePath(navigationRoutes.swaps), element: <HistoryPage /> },
@@ -91,11 +72,11 @@ export function AppRoutes(props: PropTypes) {
       path: getAbsolutePath(navigationRoutes.wallets),
       element: (
         <WalletsPage
-          supportedWallets={configs?.wallets || 'all'}
+          supportedWallets={config?.wallets}
           multiWallets={
-            typeof configs?.multiWallets === 'undefined'
+            typeof config?.multiWallets === 'undefined'
               ? true
-              : configs.multiWallets
+              : config.multiWallets
           }
         />
       ),

package/src/components/Layout.tsx

@@ -15,12 +15,14 @@ import { fetchingBalanceSelector, useWalletsStore } from '../store/wallets';
 import {
   calculateWalletUsdValue,
   getSelectableWallets,
+  tokensAreEqual,
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
-import { Configs } from '../types';
+import { WidgetConfig } from '../types';
 import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
 
 const Header = styled('div', {
   display: 'flex',
@@ -40,10 +42,10 @@ const WalletImage = styled('img', {
 });
 
 export type LayoutProps = {
-  configs?: Configs;
+  config?: WidgetConfig;
 };
 
-export function Layout({ configs }: LayoutProps) {
+export function Layout({ config }: LayoutProps) {
   const navigate = useNavigate();
   const { balances, accounts, selectedWallets } = useWalletsStore();
   const { getWalletInfo } = useWallets();
@@ -52,12 +54,13 @@ export function Layout({ configs }: LayoutProps) {
       (w) => w.image
     )
   );
-
+  const { blockchains, tokens } = useMetaStore.use.meta();
   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 setAffiliateRef = useSettingsStore.use.setAffiliateRef();
 
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled =
@@ -67,29 +70,35 @@ export function Layout({ configs }: LayoutProps) {
 
   const { t } = useTranslation();
   useEffect(() => {
-    setToChain(configs?.toChain || null);
-    setToToken(configs?.toToken || null);
-  }, [configs?.toChain, configs?.toToken]);
+    const chain = blockchains.find(
+      (chain) => chain.name === config?.to?.blockchain
+    );
+    const token = tokens.find((t) =>
+      tokensAreEqual(t, config?.to?.token || null)
+    );
+    setToChain(chain || null);
+    setToToken(token || null);
+  }, [config?.to?.token, config?.to?.blockchain]);
+
   useEffect(() => {
-    setInputAmount(configs?.fromAmount?.toString() || '');
-  }, [configs?.fromAmount]);
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
 
   useEffect(() => {
-    setFromToken(configs?.fromToken || null);
-    setFromChain(configs?.fromChain || null);
-  }, [configs?.fromToken, configs?.fromChain]);
+    const chain = blockchains.find(
+      (chain) => chain.name === config?.from?.blockchain
+    );
+    const token = tokens.find((t) =>
+      tokensAreEqual(t, config?.from?.token || null)
+    );
+
+    setFromChain(chain || null);
+    setFromToken(token || null);
+  }, [config?.from?.token, config?.from?.blockchain]);
 
   useEffect(() => {
-    setToChain(null);
-    setFromChain(null);
-    setFromToken(null);
-    setToToken(null);
-  }, [
-    configs?.fromChains,
-    configs?.toChains,
-    configs?.fromTokens,
-    configs?.toTokens,
-  ]);
+    setAffiliateRef(config?.affiliateRef || null);
+  }, [config?.affiliateRef]);
   return (
     <>
       <Header>
@@ -122,7 +131,7 @@ export function Layout({ configs }: LayoutProps) {
           </div>
         </Button>
       </Header>
-      <AppRoutes configs={configs} />
+      <AppRoutes config={config} />
     </>
   );
 }

package/src/hooks/useConfirmSwap.ts

@@ -12,7 +12,6 @@ import {
 } from '../types';
 import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
 import {
-  calculatePendingSwap,
   createBestRouteRequestBody,
   getBalanceWarnings,
   getMinRequiredSlippage,
@@ -34,6 +33,7 @@ import {
 } from '../utils/routing';
 import { numberToString } from '../utils/numbers';
 import { BestRouteResponse } from 'rango-sdk';
+import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 type ConfirmSwap = {
   loading: boolean;
@@ -49,6 +49,8 @@ export function useConfirmSwap(): ConfirmSwap {
   const initialRoute = useBestRouteStore.use.bestRoute();
   const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const affiliateRef = useSettingsStore.use.affiliateRef();
+
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const meta = useMetaStore.use.meta();
@@ -93,7 +95,6 @@ export function useConfirmSwap(): ConfirmSwap {
           meta
         );
 
-        //@ts-ignore
         return newSwap;
       }
       return;
@@ -111,7 +112,8 @@ export function useConfirmSwap(): ConfirmSwap {
       selectedWallets,
       disabledLiquiditySources,
       userSlippage,
-      true
+      true,
+      affiliateRef
     );
 
     try {
@@ -229,7 +231,6 @@ export function useConfirmSwap(): ConfirmSwap {
           false,
           meta
         );
-        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;

package/src/hooks/useTheme.ts

@@ -2,22 +2,26 @@ import { createTheme } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Colors } from '../types';
+import { Theme } from '../types';
 import { shadeColor } from '../utils/common';
 import usePrevious from './usePrevious';
 
 export function useTheme({
-  primary = '#5FA425',
-  background = '#fff',
-  foreground = '#000',
-  error = '#FF0000',
-  warning = '#F5A623',
-  success = '#0070F3',
+  colors: themeColors,
   fontFamily = 'Robot',
   borderRadius = 8,
-}: Colors & { borderRadius?: number; fontFamily?: string }) {
+  mode = 'auto',
+}: Theme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
+  const setTheme = useSettingsStore.use.setTheme();
+
+  const primary = themeColors?.primary || '#5FA425',
+    background = themeColors?.background || '#fff',
+    foreground = themeColors?.foreground || '#000',
+    error = themeColors?.error || '#FF0000',
+    warning = themeColors?.warning || '#F5A623',
+    success = themeColors?.success || '#0070F3';
   const colors = {
     neutrals200: '#FAFAFA',
     neutrals300: '#f2f2f2',
@@ -108,7 +112,9 @@ export function useTheme({
         .removeEventListener('change', switchTheme);
     };
   }, []);
-
+  useEffect(() => {
+    if (mode !== 'auto') setTheme(mode);
+  }, [mode]);
   const prevFont = usePrevious(fontFamily);
 
   useLayoutEffect(() => {

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

@@ -96,6 +96,7 @@ export function ConfirmSwapPage() {
 
   return (
     <ConfirmSwap
+    // @ts-ignore
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
@@ -105,6 +106,7 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
+              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);

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);
@@ -142,7 +136,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();