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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.16-next.2",
+  "version": "0.1.16-next.8",
   "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/provider-all": "^0.1.14-next.4",
+    "@rango-dev/queue-manager-core": "^0.1.13-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.13-next.1",
     "@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/ui": "^0.1.14-next.1",
+    "@rango-dev/wallets-core": "^0.1.14-next.0",
+    "@rango-dev/wallets-shared": "^0.1.13-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -46,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
+    "values.js": "2.1.1",
     "zustand": "^4.3.2"
   },
   "publishConfig": {

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/RoutesOverview.tsx

@@ -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': {

package/src/components/TokenInfo.tsx

@@ -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,7 +198,7 @@ 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} />
@@ -215,7 +216,7 @@ export function TokenInfo(props: PropTypes) {
               <div>
                 <Typography
                   variant="caption"
-                  color="neutrals600"
+                  color="neutral600"
                 >{`$${numberToString(props.outputUsdValue)}`}</Typography>
               </div>
             </div>
@@ -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

@@ -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>
             )}

package/src/hooks/useTheme.ts

@@ -1,9 +1,8 @@
-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({
@@ -15,98 +14,81 @@ export function useTheme({
   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,
+    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({
     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,7 +113,8 @@ export function useTheme({
   }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme;
+    if (theme === 'auto')
+      return OSTheme === 'dark' ? customeDarkTheme : customeLightTheme;
     else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
   };
 

package/src/pages/ConfirmSwapPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
@@ -49,7 +49,7 @@ export function ConfirmSwapPage() {
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
-
+  const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
     !!fetchingBestRouteError
@@ -106,21 +106,25 @@ export function ConfirmSwapPage() {
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      onConfirm={() => {
-        confirmSwap?.().then((swap) => {
+      onConfirm={async () => {
+        confirmSwap?.().then(async (swap) => {
           if (swap) {
-            manager?.create(
-              'swap',
-              { swapDetails: swap },
-              { id: swap.requestId }
-            );
-            setSelectedSwap(swap.requestId);
-            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-              replace: true,
-            });
-            setTimeout(() => {
-              setInputAmount('');
-            }, 0);
+            try {
+              await manager?.create(
+                'swap',
+                { swapDetails: swap },
+                { id: swap.requestId }
+              );
+              setSelectedSwap(swap.requestId);
+              navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
+                replace: true,
+              });
+              setTimeout(() => {
+                setInputAmount('');
+              }, 0);
+            } catch (e) {
+              setDbErrorMessage('Error: ' + (e as any)?.message);
+            }
           }
         });
       }}
@@ -186,7 +190,11 @@ export function ConfirmSwapPage() {
         />
       }
       loading={fetchingConfirmedRoute}
-      errors={ConfirmSwapErrors(errors)}
+      errors={
+        dbErrorMessage
+          ? [dbErrorMessage, ...ConfirmSwapErrors(errors)]
+          : ConfirmSwapErrors(errors)
+      }
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
         <>

package/src/pages/SettingsPage.tsx

@@ -13,8 +13,9 @@ import {
 import { useNavigateBack } from '../hooks/useNavigateBack';
 interface PropTypes {
   supportedSwappers?: string[];
+  singleTheme?: boolean;
 }
-export function SettingsPage({ supportedSwappers }: PropTypes) {
+export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
   const disabledLiquiditySources =
@@ -77,6 +78,7 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
       selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
         (s) => s.selected
       )}
+      singleTheme={singleTheme}
       customSlippage={customSlippage || NaN}
       onCustomSlippageChange={setCustomSlippage}
       minSlippage={MIN_SLIPPGAE}

package/src/types/config.ts

@@ -9,6 +9,9 @@ import { WalletType } from '@rango-dev/wallets-shared';
  * @property {string} success
  * @property {string} error
  * @property {string} warning
+ * @property {string} surface
+ * @property {string} neutral
+
  */
 export type WidgetColors = {
   background?: string;
@@ -17,6 +20,8 @@ export type WidgetColors = {
   success?: string;
   error?: string;
   warning?: string;
+  surface?: string;
+  neutral?: string;
 };
 
 /**
@@ -33,14 +38,16 @@ export type WidgetColors = {
  * specifies the radius of the corners of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
+ * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
  */
 export type WidgetTheme = {
   mode?: 'auto' | 'light' | 'dark';
   fontFamily?: string;
-  colors?: WidgetColors;
+  colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
   width?: number;
   height?: number;
+  singleTheme?: boolean;
 };
 
 /**

package/src/utils/common.ts

@@ -10,29 +10,8 @@ export function areEqual(
     array1.length === array2.length && array1.every((v, i) => v === array2[i])
   );
 }
-export function shadeColor(color: string, percent: number) {
-  var R = parseInt(color.substring(1, 3), 16);
-  var G = parseInt(color.substring(3, 5), 16);
-  var B = parseInt(color.substring(5, 7), 16);
 
-  R = (R * (100 + percent)) / 100;
-  G = (G * (100 + percent)) / 100;
-  B = (B * (100 + percent)) / 100;
 
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-
-  R = Math.round(R);
-  G = Math.round(G);
-  B = Math.round(B);
-
-  var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
-  var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
-  var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
-
-  return '#' + RR + GG + BB;
-}
 
 export function debounce(fn: Function, time: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null;

package/src/utils/wallets.ts

@@ -42,23 +42,13 @@ export function getStateWallet(state: WalletState): WalletStatus {
   }
 }
 
-export const excludedWallets = [
-  WalletType.UNKNOWN,
-  WalletType.TERRA_STATION,
-  WalletType.LEAP,
-];
+export const excludedWallets = [WalletType.UNKNOWN, WalletType.LEAP];
 
 export function getlistWallet(
   getState: (type: WalletType) => WalletState,
   getWalletInfo: (type: WalletType) => WalletInfo,
   list: WalletType[]
 ): ModalWalletInfo[] {
-  const excludedWallets = [
-    WalletType.UNKNOWN,
-    WalletType.TERRA_STATION,
-    WalletType.LEAP,
-  ];
-
   return list
     .filter((wallet) => !excludedWallets.includes(wallet))
     .map((type) => {