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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10",
+  "version": "0.1.11-next.4",
   "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,8 +29,8 @@
   },
   "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/wallets-core": "^0.1.11-next.88",

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/components/PercentageChange.tsx

@@ -0,0 +1,33 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { getPercentageChange } from '../utils/swap';
+import { Typography } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+
+interface PropTypes {
+  inputUsdValue: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+}
+
+export function PercentageChange(props: PropTypes) {
+  const { inputUsdValue, outputUsdValue } = props;
+
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+
+  const percentageChange = getPercentageChange(
+    inputUsdValue.toNumber(),
+    outputUsdValue.toNumber()
+  );
+
+  const showPercentageChange = percentageChange?.lt(0);
+
+  return (
+    <>
+      {showPercentageChange && (
+        <Typography variant="caption" color="$error500">
+          {`(${numberToString(percentageChange, 0, 2)}%)`}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/TokenInfo.tsx

@@ -17,6 +17,7 @@ import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { useTranslation } from 'react-i18next';
 import { Spacer } from '@rango-dev/ui';
+import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
   | {
@@ -80,6 +81,13 @@ const Container = styled('div', {
       width: '30%',
     },
   },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8',
+    },
+  },
 });
 
 const StyledImage = styled('img', {
@@ -201,10 +209,18 @@ export function TokenInfo(props: PropTypes) {
               </div>
             </Options>
           ) : (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+            <div className="output-usd">
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={props.outputUsdValue}
+              />
+              <div>
+                <Typography
+                  variant="caption"
+                  color="neutrals600"
+                >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+              </div>
+            </div>
           )}
         </div>
         <div className="form">

package/src/components/TokenPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
 import { useTranslation } from 'react-i18next';
@@ -37,6 +37,9 @@ const Container = styled('div', {
     justifyContent: 'space-between',
     alignItems: 'center',
     minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
   },
   '.form': {
     display: 'flex',
@@ -95,10 +98,11 @@ interface PropTypes {
     symbol: string;
     image: string;
   };
+  percentageChange?: ReactNode;
 }
 
 export function TokenPreview(props: PropTypes) {
-  const { chain, token, loadingStatus } = props;
+  const { chain, token, loadingStatus, percentageChange } = props;
   const { t } = useTranslation();
 
   const ItemSuffix = (
@@ -120,12 +124,16 @@ export function TokenPreview(props: PropTypes) {
           <Typography variant="body2" color="neutrals800">
             {props.label}
           </Typography>
-          {props.usdValue && (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.usdValue)}`}</Typography>
-          )}
+          <div>
+            {percentageChange}
+            {props.usdValue && (
+              <Typography
+                variant="caption"
+                color="neutrals600"
+                className="usd-value"
+              >{`$${numberToString(props.usdValue)}`}</Typography>
+            )}
+          </div>
         </div>
         <div className="form">
           <Button

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(() => {