@rango-dev/widget-embedded 0.1.16-next.2 → 0.1.16-next.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.16-next.2",
+  "version": "0.1.16-next.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "build": "tsdx build"
+    "build": "tsdx build --tsconfig ./tsconfig.json"
   },
   "husky": {
     "hooks": {
@@ -24,13 +24,13 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.1.12",
-    "@rango-dev/queue-manager-core": "^0.1.12",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.12",
-    "@rango-dev/queue-manager-react": "^0.1.11",
-    "@rango-dev/ui": "^0.1.13",
-    "@rango-dev/wallets-core": "^0.1.12",
-    "@rango-dev/wallets-shared": "^0.1.11",
+    "@rango-dev/provider-all": "^0.1.14-next.15",
+    "@rango-dev/queue-manager-core": "^0.1.13-next.16",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.13-next.17",
+    "@rango-dev/queue-manager-react": "^0.1.12-next.13",
+    "@rango-dev/ui": "^0.1.14-next.12",
+    "@rango-dev/wallets-core": "^0.1.14-next.16",
+    "@rango-dev/wallets-shared": "^0.1.13-next.18",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -40,14 +40,17 @@
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "parcel": "^2.8.0",
-    "rango-sdk": "^0.1.23",
-    "rango-types": "^0.1.28",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "rango-sdk": "^0.1.27",
+    "rango-types": "^0.1.32",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
+    "values.js": "2.1.1",
     "zustand": "^4.3.2"
   },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/QueueManager.tsx

@@ -52,6 +52,9 @@ function QueueManager(props: PropsWithChildren<{}>) {
     return connect(wallet, network);
   };
 
+  const isMobileWallet = (walletType: WalletType): boolean =>
+    !!getWalletInfo(walletType).mobileWallet;
+
   // TODO: this code copy & pasted from rango, should be refactored.
   const allBlockchains = blockchains
     .filter((blockchain) => blockchain.enabled)
@@ -106,12 +109,12 @@ function QueueManager(props: PropsWithChildren<{}>) {
     switchNetwork,
     connect,
     state,
+    isMobileWallet,
     notifier,
   };
 
   return (
     <ManagerProvider
-      //@ts-ignore
       queuesDefs={[swapQueueDef]}
       context={context}
       onPersistedDataLoaded={(manager) => {

package/src/components/AppRoutes.tsx

@@ -55,7 +55,7 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.settings,
-      element: <SettingsPage supportedSwappers={config?.liquiditySources} />,
+      element: <SettingsPage singleTheme= {config?.theme?.singleTheme} supportedSwappers={config?.liquiditySources} />,
     },
     {
       path: navigationRoutes.liquiditySources,

package/src/components/BottomLogo.tsx

@@ -29,7 +29,7 @@ export function BottomLogo() {
 
   return (
     <Container>
-      <Typography variant="caption" color="$neutrals600">
+      <Typography variant="caption" color="$neutral600">
         {t('Powered By')}
       </Typography>
       <StyledAnchor href="https://rango.exchange" target="_blank">

package/src/components/Layout.tsx

@@ -4,6 +4,7 @@ import {
   Typography,
   styled,
   Spinner,
+  Image,
 } from '@rango-dev/ui';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -23,7 +24,6 @@ import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Image } from '@rango-dev/ui';
 
 const Header = styled('div', {
   display: 'flex',
@@ -34,6 +34,11 @@ const Header = styled('div', {
   },
 });
 
+const WalletImages = styled('div', {
+  display: 'flex',
+  paddingLeft: '12px',
+});
+
 const WalletImageContainer = styled('div', {
   marginLeft: -15,
   marginRight: '$6',
@@ -52,7 +57,7 @@ export function Layout({ config }: LayoutProps) {
   const { getWalletInfo } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(
     getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(
-      (w) => w.image
+      w => w.image
     )
   );
   const { blockchains, tokens } = useMetaStore.use.meta();
@@ -64,8 +69,7 @@ export function Layout({ config }: LayoutProps) {
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
 
   const totalBalance = calculateWalletUsdValue(connectedWallets);
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
+  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
 
@@ -73,9 +77,9 @@ export function Layout({ config }: LayoutProps) {
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        (chain) => chain.name === config?.to?.blockchain
+        chain => chain.name === config?.to?.blockchain
       );
-      const token = tokens.find((t) =>
+      const token = tokens.find(t =>
         tokensAreEqual(t, config?.to?.token || null)
       );
       setToChain(chain || null);
@@ -90,9 +94,9 @@ export function Layout({ config }: LayoutProps) {
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        (chain) => chain.name === config?.from?.blockchain
+        chain => chain.name === config?.from?.blockchain
       );
-      const token = tokens.find((t) =>
+      const token = tokens.find(t =>
         tokensAreEqual(t, config?.from?.token || null)
       );
 
@@ -118,16 +122,18 @@ export function Layout({ config }: LayoutProps) {
             if (!connectWalletsButtonDisabled)
               navigate(navigationRoutes.wallets);
           }}
+          prefix={
+            connectedWalletsImages?.length ? (
+              <WalletImages>
+                {connectedWalletsImages.map((walletImage, index) => (
+                  <WalletImageContainer key={index}>
+                    <Image src={walletImage} size={24} />
+                  </WalletImageContainer>
+                ))}
+              </WalletImages>
+            ) : null
+          }
         >
-          {connectedWalletsImages?.length ? (
-            connectedWalletsImages.map((walletImage, index) => (
-              <WalletImageContainer key={index}>
-                <Image src={walletImage} size={24} />
-              </WalletImageContainer>
-            ))
-          ) : (
-            <></>
-          )}
           <div className="balance">
             <Typography variant="body2">
               {!connectedWallets?.length

package/src/components/RoutesOverview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, ChevronRightIcon, GasIcon, Spacer } from '@rango-dev/ui';
+import { styled, ChevronRightIcon, GasIcon, Divider } from '@rango-dev/ui';
 import { BestRouteResponse } from 'rango-sdk';
 
 export const Container = styled('div', {
@@ -8,8 +8,8 @@ export const Container = styled('div', {
   justifyContent: 'space-between',
   padding: '$8',
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
   fontSize: '$12',
 
   '.routes': {
@@ -47,7 +47,7 @@ function RoutesOverview(props: PropTypes) {
       {props.totalFee ? (
         <div className="fee">
           <GasIcon size={12} />
-          <Spacer size={4} />${props.totalFee}
+          <Divider size={4} direction="horizontal" />${props.totalFee}
         </div>
       ) : null}
     </Container>

package/src/components/TokenInfo.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   Typography,
   Image,
-  Spacer,
+  Divider,
 } from '@rango-dev/ui';
 import { useMetaStore } from '../store/meta';
 import { BlockchainMeta, Token } from 'rango-sdk';
@@ -48,10 +48,11 @@ const Container = styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
       },
       outlined: {
-        border: '1px solid $neutrals300',
+        border: '1px solid $neutral100',
+        backgroundColor: '$surface',
       },
     },
   },
@@ -105,7 +106,7 @@ const Options = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px',
 });
 
@@ -113,7 +114,7 @@ const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -185,7 +186,7 @@ export function TokenInfo(props: PropTypes) {
     <Box>
       <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutrals800">
+          <Typography variant="body2" color="neutral800">
             {t(type)}
           </Typography>
           {props.type === 'From' ? (
@@ -197,10 +198,10 @@ export function TokenInfo(props: PropTypes) {
                     setInputAmount(tokenBalanceReal.split(',').join(''));
                 }}
               >
-                <Typography variant="body3" color="neutrals600">{`${t(
+                <Typography variant="body3" color="neutral600">{`${t(
                   'Balance'
                 )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
-                <Spacer size={4} />
+                <Divider size={4} />
                 <Button type="primary" variant="ghost" size="compact">
                   {t('Max')}
                 </Button>
@@ -215,7 +216,7 @@ export function TokenInfo(props: PropTypes) {
               <div>
                 <Typography
                   variant="caption"
-                  color="neutrals600"
+                  color="neutral600"
                 >{`$${numberToString(props.outputUsdValue)}`}</Typography>
               </div>
             </div>
@@ -245,7 +246,7 @@ export function TokenInfo(props: PropTypes) {
               ? chain.displayName
               : t('Chain')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Button
             className="selectors"
             onClick={() => {
@@ -271,7 +272,7 @@ export function TokenInfo(props: PropTypes) {
           >
             {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <div className="amount">
             {props.type === 'From' ? (
               <TextField
@@ -293,7 +294,7 @@ export function TokenInfo(props: PropTypes) {
                   >
                     <Typography
                       variant="caption"
-                      color="neutrals800"
+                      color="neutral800"
                     >{`$${numberToString(inputUsdValue)}`}</Typography>
                   </span>
                 }

package/src/components/TokenPreview.tsx

@@ -4,7 +4,7 @@ import {
   InfoCircleIcon,
   styled,
   Typography,
-  Spacer,
+  Divider,
   Image,
 } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
@@ -27,10 +27,10 @@ const Container = styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
       },
       outlined: {
-        border: '1px solid $neutrals300',
+        border: '1px solid $neutral100',
       },
     },
   },
@@ -70,7 +70,7 @@ const Container = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px',
 });
 
@@ -78,7 +78,7 @@ const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -123,7 +123,7 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutrals800">
+          <Typography variant="body2" color="neutral800">
             {props.label}
           </Typography>
           <div>
@@ -131,7 +131,7 @@ export function TokenPreview(props: PropTypes) {
             {props.usdValue && (
               <Typography
                 variant="caption"
-                color="neutrals600"
+                color="neutral600"
                 className="usd-value"
               >{`$${numberToString(props.usdValue)}`}</Typography>
             )}
@@ -157,7 +157,7 @@ export function TokenPreview(props: PropTypes) {
               ? chain.displayName
               : t('Chain')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Button
             className="selectors"
             variant="outlined"
@@ -175,7 +175,7 @@ export function TokenPreview(props: PropTypes) {
           >
             {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <div className="amount">
             <OutputContainer>
               <Typography variant="h4">{props.amount}</Typography>

package/src/components/warnings/BalanceErrors.tsx

@@ -1,4 +1,4 @@
-import { Spacer, styled, Typography } from '@rango-dev/ui';
+import { Divider, styled, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 interface PropTypes {
@@ -34,7 +34,7 @@ export function BalanceErrors({ messages }: PropTypes) {
       <Typography className="title" variant="title" color={'error'}>
         Insufficent Balance:
       </Typography>
-      <Spacer size={8} direction="vertical" />
+      <Divider size={8} />
       <List showListStyle={showListStyle}>
         {messages.map((warning, index) => (
           <ListItem showListStyle={showListStyle} key={index}>

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,4 +1,4 @@
-import { Spacer, Typography, styled } from '@rango-dev/ui';
+import { Divider, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
 
@@ -16,7 +16,7 @@ export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
       We recommend you to increase slippage to at least  
       {minRequiredSlippage}
         for this route.
-      <Spacer size={8} direction="vertical" />
+      <Divider size={8}/>
       <ChangeSlippageButton />
     </StyledMessage>
   );

package/src/hooks/useTheme.ts

@@ -1,112 +1,94 @@
-import { createTheme } from '@rango-dev/ui';
+import { createTheme, generateRangeColors } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { WidgetTheme } from '../types';
-import { shadeColor } from '../utils/common';
 import usePrevious from './usePrevious';
 
 export function useTheme({
   colors: themeColors,
-  fontFamily = 'Robot',
+  fontFamily = 'Roboto',
   borderRadius = 8,
   mode = 'auto',
 }: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
+  const light = themeColors?.light;
+  const dark = themeColors?.dark;
+  const neutral = light?.neutral || '#fafafa';
+  const background = light?.background || '#fff';
+  const foreground = light?.foreground || '#000';
 
-  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',
-    neutrals400: '#dedede',
-    neutrals500: '#cccccc',
-    neutrals600: '#acacac',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
-    primary,
-    primary100: shadeColor(primary, 15),
-    primary200: shadeColor(primary, -10),
-    primary300: shadeColor(primary, -15),
-    primary400: shadeColor(primary, -20),
-    primary500: shadeColor(primary, -25),
-    primary600: shadeColor(primary, -30),
-    primary700: shadeColor(primary, -35),
-    primary800: shadeColor(primary, -40),
-    primary900: shadeColor(primary, -45),
+  const darkColors = {
+    ...generateRangeColors('primary', 'dark', dark?.primary),
+    ...generateRangeColors('error', 'dark', dark?.error),
+    ...generateRangeColors('warning', 'dark', dark?.warning),
+    ...generateRangeColors('success', 'dark', dark?.success),
+    ...generateRangeColors('neutral', 'dark', dark?.neutral),
+    surface: dark?.surface,
+    background: dark?.background,
+    foreground: dark?.foreground,
+  };
+
+  const lightColors = {
+    surface: light?.surface || '#fff',
+    ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
+    ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
+    ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
+    ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
+    ...generateRangeColors('neutral', 'light', neutral),
     background,
     foreground,
-    error,
-    error100: shadeColor(error, 50),
-    error300: shadeColor(error, -10),
-    error500: shadeColor(error, -20),
-    error700: shadeColor(error, -30),
-    warning,
-    warning100: shadeColor(warning, 50),
-    warning300: shadeColor(warning, -10),
-    warning500: shadeColor(warning, -20),
-    warning700: shadeColor(warning, -30),
-    success,
-    success100: shadeColor(success, 50),
-    success300: shadeColor(success, -10),
-    success500: shadeColor(success, -20),
-    success700: shadeColor(success, -30),
   };
 
-  const customeLightTheme = createTheme({
-    colors,
+  const customLightTheme = createTheme({
+    colors: lightColors,
     radii: {
       5: `${borderRadius}px`,
     },
     shadows: {
-      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
+      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
+        light?.neutral || '#f0f2f5'
+      }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
     },
   });
 
-  const customeDarkTheme = createTheme({
+  const customDarkTheme = createTheme({
     colors: {
-      ...colors,
-      neutrals200: '#111111',
-      neutrals300: '#333333',
-      neutrals400: '#444444',
-      neutrals500: '#acacac',
-      neutrals600: '#cccccc',
-      neutrals700: '#dedede',
-      neutrals800: '#f2f2f2',
-      neutrals900: '#FAFAFA',
+      ...lightColors,
+      ...generateRangeColors('neutral', 'dark', '#111111'),
       foreground: background,
       background: foreground,
+      surface: '#000',
+      ...JSON.parse(JSON.stringify(darkColors)),
     },
     radii: {
       5: `${borderRadius}px`,
     },
     shadows: {
-      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',
+      s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${
+        dark?.neutral || '#222'
+      }, 0px 1px 18px 3px ${dark?.neutral || '#222'}`,
     },
   });
-  const [OSTheme, setOSTheme] = useState(customeLightTheme);
+  const [OSTheme, setOSTheme] = useState('light');
+
   useEffect(() => {
     (async () => {
       await fetchMeta();
     })();
 
     const switchTheme = (event: MediaQueryListEvent) => {
-      if (event.matches) setOSTheme(customeDarkTheme);
-      else setOSTheme(customeLightTheme);
+      if (event.matches) setOSTheme('dark');
+      else setOSTheme('light');
     };
 
     if (
       window.matchMedia &&
       window.matchMedia('(prefers-color-scheme: dark)').matches
     ) {
-      setOSTheme(customeDarkTheme);
+      setOSTheme('dark');
     }
 
     window
@@ -131,8 +113,9 @@ export function useTheme({
   }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme;
-    else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
+    if (theme === 'auto')
+      return OSTheme === 'dark' ? customDarkTheme : customLightTheme;
+    else return theme === 'dark' ? customDarkTheme : customLightTheme;
   };
 
   return { activeTheme: getActiveTheme() };

package/src/index.tsx

@@ -28,13 +28,7 @@ import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
 
-export {
-  WidgetConfig,
-  WalletType,
-  WidgetTheme,
-  WidgetColors,
-  BlockchainAndTokenConfig,
-};
+export { WidgetConfig, WidgetTheme, WidgetColors, BlockchainAndTokenConfig };
 
 export type WidgetProps = {
   config?: WidgetConfig;