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

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';
@@ -18,7 +18,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
 // @ts-ignore // TODO: fix error in tsc build
 import { t } from 'i18next';
-import { Spacer, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
+import { Divider, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
@@ -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
@@ -66,14 +66,14 @@ export function ConfirmSwapPage() {
   const selectedSlippage = customSlippage || slippage;
 
   const showHighSlippageWarning = !errors.find(
-    (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+    error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
   );
 
   const { getWalletInfo, connect } = useWallets();
   const confirmDisabled =
     fetchingBestRoute ||
-    !requiredWallets(bestRoute).every((chain) =>
-      selectedWallets.map((wallet) => wallet.chain).includes(chain)
+    !requiredWallets(bestRoute).every(chain =>
+      selectedWallets.map(wallet => wallet.chain).includes(chain)
     );
 
   const firstStep = bestRoute?.result?.swaps[0];
@@ -94,8 +94,10 @@ export function ConfirmSwapPage() {
 
   const handleConnectChain = (wallet: string) => {
     const network = wallet as Network;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
+    getKeplrCompatibleConnectedWallets(
+      selectableWallets
+    ).forEach((compatibleWallet: WalletType) =>
+      connect?.(compatibleWallet, network)
     );
   };
 
@@ -106,28 +108,32 @@ 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);
+            }
           }
         });
       }}
-      onChange={(wallet) => setSelectedWallet(wallet)}
+      onChange={wallet => setSelectedWallet(wallet)}
       confirmDisabled={loadingMetaStatus !== 'success' || confirmDisabled}
-      handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) =>
+      handleConnectChain={wallet => handleConnectChain(wallet)}
+      isExperimentalChain={wallet =>
         getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
           ? isExperimentalChain(blockchains, wallet)
           : false
@@ -152,7 +158,7 @@ export function ConfirmSwapPage() {
                 : bestRouteloadingStatus
             }
           />
-          <Spacer size={12} direction="vertical" />
+          <Divider size={12} />
           <TokenPreview
             chain={{
               displayName: lastStep?.to.blockchain || '',
@@ -186,13 +192,17 @@ export function ConfirmSwapPage() {
         />
       }
       loading={fetchingConfirmedRoute}
-      errors={ConfirmSwapErrors(errors)}
+      errors={
+        dbErrorMessage
+          ? [dbErrorMessage, ...ConfirmSwapErrors(errors)]
+          : ConfirmSwapErrors(errors)
+      }
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
         <>
           {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
           {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
-            <Spacer direction="vertical" />
+            <Divider />
           )}
           {showHighSlippageWarning && (
             <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />

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,7 +78,8 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
       selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
         (s) => s.selected
       )}
-      customSlippage={customSlippage || NaN}
+      singleTheme={singleTheme}
+      customSlippage={customSlippage}
       onCustomSlippageChange={setCustomSlippage}
       minSlippage={MIN_SLIPPGAE}
       maxSlippage={MAX_SLIPPAGE}

package/src/pages/SwapDetailsPage.tsx

@@ -109,7 +109,7 @@ export function SwapDetailsPage() {
             label={t('From')}
             loadingStatus={'success'}
           />
-          <Spacer size={12} direction="vertical" />
+          <Divider size={12} />
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',

package/src/pages/WalletsPage.tsx

@@ -8,7 +8,11 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { getlistWallet, sortWalletsBasedOnState } from '../utils/wallets';
-import { WalletType, detectMobileScreens } from '@rango-dev/wallets-shared';
+import {
+  WalletType,
+  WalletTypes,
+  detectMobileScreens,
+} from '@rango-dev/wallets-shared';
 import { useWallets } from '@rango-dev/wallets-core';
 
 import { useUiStore } from '../store/ui';
@@ -50,7 +54,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets || Object.values(WalletType)
+    supportedWallets || Object.values(WalletTypes)
   );
   const walletsRef = useRef<WalletInfo[]>();
 

package/src/store/wallets.ts

@@ -55,17 +55,19 @@ export const useWalletsStore = createSelectors(
       connectWallet: (accounts) => {
         const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
         set((state) => ({
-          connectedWallets: state.connectedWallets.concat(
-            accounts.map((account) => ({
-              balances: [],
-              address: account.address,
-              chain: account.chain,
-              loading: true,
-              walletType: account.walletType,
-              error: false,
-              explorerUrl: null,
-            }))
-          ),
+          connectedWallets: state.connectedWallets
+            .filter((wallet) => wallet.walletType !== accounts[0].walletType)
+            .concat(
+              accounts.map((account) => ({
+                balances: [],
+                address: account.address,
+                chain: account.chain,
+                loading: true,
+                walletType: account.walletType,
+                error: false,
+                explorerUrl: null,
+              }))
+            ),
         }));
         accounts.forEach(async (account) => getOneOfWalletsDetails(account));
       },

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

@@ -7,6 +7,7 @@ import {
   WalletType,
   detectInstallLink,
   WalletInfo,
+  WalletTypes,
 } from '@rango-dev/wallets-shared';
 
 import {
@@ -42,25 +43,15 @@ export function getStateWallet(state: WalletState): WalletStatus {
   }
 }
 
-export const excludedWallets = [
-  WalletType.UNKNOWN,
-  WalletType.TERRA_STATION,
-  WalletType.LEAP,
-];
+export const excludedWallets = [WalletTypes.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))
+    .filter((wallet) => !excludedWallets.includes(wallet as WalletTypes))
     .map((type) => {
       const {
         name,
@@ -236,8 +227,7 @@ export function isAccountAndWalletMatched(
 ) {
   return (
     account.address === connectedWallet.address &&
-    account.chain === connectedWallet.chain &&
-    account.walletType === connectedWallet.walletType
+    account.chain === connectedWallet.chain
   );
 }
 
@@ -388,7 +378,9 @@ export const getKeplrCompatibleConnectedWallets = (
   selectableWallets: SelectableWallet[]
 ): WalletType[] => {
   const connectedWalletTypes = new Set(
-    selectableWallets.map((a: any) => a.walletType.toString())
+    selectableWallets.map((wallet) => {
+      return wallet.walletType;
+    })
   );
 
   return KEPLR_COMPATIBLE_WALLETS.filter((compatibleWallet) =>