@rango-dev/widget-embedded 0.1.18 → 0.1.20-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.18",
+  "version": "0.1.20-next.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -24,13 +24,13 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.1.20",
-    "@rango-dev/queue-manager-core": "^0.1.13",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.13",
-    "@rango-dev/queue-manager-react": "^0.1.12",
-    "@rango-dev/ui": "^0.1.14",
-    "@rango-dev/wallets-core": "^0.1.13",
-    "@rango-dev/wallets-shared": "^0.1.13",
+    "@rango-dev/provider-all": "^0.1.22-next.0",
+    "@rango-dev/queue-manager-core": "^0.1.14",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.14",
+    "@rango-dev/queue-manager-react": "^0.1.13",
+    "@rango-dev/ui": "^0.1.16-next.0",
+    "@rango-dev/wallets-core": "^0.1.16-next.0",
+    "@rango-dev/wallets-shared": "^0.1.14",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -42,13 +42,15 @@
     "parcel": "^2.8.0",
     "rango-sdk": "^0.1.27",
     "rango-types": "^0.1.32",
-    "react": "^18.2.0",
-    "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"
   },
+  "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,6 +109,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
     switchNetwork,
     connect,
     state,
+    isMobileWallet,
     notifier,
   };
 

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', {
@@ -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';
@@ -201,7 +201,7 @@ export function TokenInfo(props: PropTypes) {
                 <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>
@@ -246,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={() => {
@@ -272,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

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';
@@ -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/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;

package/src/pages/ConfirmSwapPage.tsx

@@ -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';
@@ -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)
     );
   };
 
@@ -107,7 +109,7 @@ export function ConfirmSwapPage() {
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
       onConfirm={async () => {
-        confirmSwap?.().then(async (swap) => {
+        confirmSwap?.().then(async swap => {
           if (swap) {
             try {
               await manager?.create(
@@ -128,10 +130,10 @@ export function ConfirmSwapPage() {
           }
         });
       }}
-      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
@@ -156,7 +158,7 @@ export function ConfirmSwapPage() {
                 : bestRouteloadingStatus
             }
           />
-          <Spacer size={12} direction="vertical" />
+          <Divider size={12} />
           <TokenPreview
             chain={{
               displayName: lastStep?.to.blockchain || '',
@@ -200,7 +202,7 @@ export function ConfirmSwapPage() {
         <>
           {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
           {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
-            <Spacer direction="vertical" />
+            <Divider />
           )}
           {showHighSlippageWarning && (
             <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />

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/utils/wallets.ts

@@ -7,6 +7,7 @@ import {
   WalletType,
   detectInstallLink,
   WalletInfo,
+  WalletTypes,
 } from '@rango-dev/wallets-shared';
 
 import {
@@ -42,7 +43,7 @@ export function getStateWallet(state: WalletState): WalletStatus {
   }
 }
 
-export const excludedWallets = [WalletType.UNKNOWN, WalletType.LEAP];
+export const excludedWallets = [WalletTypes.LEAP];
 
 export function getlistWallet(
   getState: (type: WalletType) => WalletState,
@@ -50,7 +51,7 @@ export function getlistWallet(
   list: WalletType[]
 ): ModalWalletInfo[] {
   return list
-    .filter((wallet) => !excludedWallets.includes(wallet))
+    .filter((wallet) => !excludedWallets.includes(wallet as WalletTypes))
     .map((type) => {
       const {
         name,
@@ -377,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) =>