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

package/src/components/HeaderButtons.tsx

@@ -9,6 +9,7 @@ import {
 } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { i18n } from '@lingui/core';
 
 const ButtonsContainer = styled('div', {
   display: 'flex',
@@ -24,28 +25,25 @@ export function HeaderButtons(props: PropTypes) {
 
   return (
     <ButtonsContainer>
-      <Tooltip content="Refresh">
+      <Tooltip content={i18n.t('Refresh')}>
         <Button
           variant="ghost"
           onClick={onClickRefresh}
-          disabled={!onClickRefresh}
-        >
+          disabled={!onClickRefresh}>
           <RetryIcon size={24} disabled={!onClickRefresh} />
         </Button>
       </Tooltip>
-      <Tooltip content="Transactions History">
+      <Tooltip content={i18n.t('Transactions History')}>
         <Button
           variant="ghost"
-          onClick={() => navigate(navigationRoutes.swaps)}
-        >
+          onClick={() => navigate(navigationRoutes.swaps)}>
           <HistoryIcon size={24} />
         </Button>
       </Tooltip>
-      <Tooltip content="Settings">
+      <Tooltip content={i18n.t('Settings')}>
         <Button
           variant="ghost"
-          onClick={() => navigate(navigationRoutes.settings)}
-        >
+          onClick={() => navigate(navigationRoutes.settings)}>
           <SettingsIcon size={24} />
         </Button>
       </Tooltip>

package/src/components/Layout.tsx

@@ -20,7 +20,7 @@ import {
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
 import { WidgetConfig } from '../types';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
@@ -57,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();
@@ -69,17 +69,17 @@ 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);
 
-  const { t } = useTranslation();
   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);
@@ -94,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)
       );
 
@@ -132,12 +132,11 @@ export function Layout({ config }: LayoutProps) {
                 ))}
               </WalletImages>
             ) : null
-          }
-        >
+          }>
           <div className="balance">
             <Typography variant="body2">
               {!connectedWallets?.length
-                ? t('Connect Wallet')
+                ? i18n.t('Connect Wallet')
                 : `$${totalBalance || 0}`}
             </Typography>
             {fetchingBalance && <Spinner />}

package/src/components/SwapDetailsPlaceholder.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
+import { i18n } from '@lingui/core';
 
 const PlaceholderContainer = styled('div', { height: '450px' });
 
@@ -21,7 +22,10 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
   const { requestId, loading, onBack } = props;
 
   return (
-    <SecondaryPage title="Swap Details" textField={false} onBack={onBack}>
+    <SecondaryPage
+      title={i18n.t('Swap Details')}
+      textField={false}
+      onBack={onBack}>
       <PlaceholderContainer>
         {loading ? (
           <LoaderContainer>
@@ -30,7 +34,11 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
         ) : (
           <Alert
             type="secondary"
-            title={`Swap with request ID = ${requestId} not found.`}
+            title={i18n.t(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
           />
         )}
       </PlaceholderContainer>

package/src/components/TokenInfo.tsx

@@ -17,7 +17,8 @@ import { numberToString } from '../utils/numbers';
 import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
-import { useTranslation } from 'react-i18next';
+import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
@@ -136,7 +137,6 @@ export function TokenInfo(props: PropTypes) {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
-  const { t } = useTranslation();
 
   const tokenBalance =
     !!fromChain && !!fromToken
@@ -175,8 +175,7 @@ export function TokenInfo(props: PropTypes) {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-      }}
-    >
+      }}>
       {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
       <AngleDownIcon />
     </div>
@@ -187,7 +186,11 @@ export function TokenInfo(props: PropTypes) {
       <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
           <Typography variant="body2" color="neutral800">
-            {t(type)}
+            {type === 'From' ? (
+              <Trans id="swap from" message="From" />
+            ) : (
+              <Trans id="swap to" message="To" />
+            )}
           </Typography>
           {props.type === 'From' ? (
             <Options>
@@ -196,14 +199,13 @@ export function TokenInfo(props: PropTypes) {
                 onClick={() => {
                   if (tokenBalance !== '0')
                     setInputAmount(tokenBalanceReal.split(',').join(''));
-                }}
-              >
-                <Typography variant="body3" color="neutral600">{`${t(
-                  'Balance'
-                )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
+                }}>
+                <Typography variant="body3" color="neutral600">
+                  {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
+                </Typography>
                 <Divider size={4} />
                 <Button type="primary" variant="ghost" size="compact">
-                  {t('Max')}
+                  <Trans id="maximum amount of asset" message="Max" />
                 </Button>
               </div>
             </Options>
@@ -216,8 +218,9 @@ export function TokenInfo(props: PropTypes) {
               <div>
                 <Typography
                   variant="caption"
-                  color="neutral600"
-                >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+                  color="neutral600">{`$${numberToString(
+                  props.outputUsdValue
+                )}`}</Typography>
               </div>
             </div>
           )}
@@ -240,11 +243,10 @@ export function TokenInfo(props: PropTypes) {
             }
             suffix={ItemSuffix}
             align="start"
-            size="large"
-          >
+            size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
-              : t('Chain')}
+              : i18n.t('Chain')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <Button
@@ -268,9 +270,10 @@ export function TokenInfo(props: PropTypes) {
             }
             suffix={ItemSuffix}
             size="large"
-            align="start"
-          >
-            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+            align="start">
+            {loadingStatus === 'success' && token
+              ? token.symbol
+              : i18n.t('Token')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <div className="amount">
@@ -290,12 +293,12 @@ export function TokenInfo(props: PropTypes) {
                       position: 'absolute',
                       right: '4px',
                       bottom: '2px',
-                    }}
-                  >
+                    }}>
                     <Typography
                       variant="caption"
-                      color="neutral800"
-                    >{`$${numberToString(inputUsdValue)}`}</Typography>
+                      color="neutral800">{`$${numberToString(
+                      inputUsdValue
+                    )}`}</Typography>
                   </span>
                 }
                 value={props.inputAmount || ''}

package/src/components/TokenPreview.tsx

@@ -8,7 +8,7 @@ import {
   Image,
 } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import BigNumber from 'bignumber.js';
 import { numberToString } from '../utils/numbers';
 
@@ -105,7 +105,6 @@ interface PropTypes {
 
 export function TokenPreview(props: PropTypes) {
   const { chain, token, loadingStatus, percentageChange } = props;
-  const { t } = useTranslation();
 
   const ItemSuffix = (
     <div
@@ -113,8 +112,7 @@ export function TokenPreview(props: PropTypes) {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-      }}
-    >
+      }}>
       {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
     </div>
   );
@@ -132,8 +130,9 @@ export function TokenPreview(props: PropTypes) {
               <Typography
                 variant="caption"
                 color="neutral600"
-                className="usd-value"
-              >{`$${numberToString(props.usdValue)}`}</Typography>
+                className="usd-value">{`$${numberToString(
+                props.usdValue
+              )}`}</Typography>
             )}
           </div>
         </div>
@@ -151,11 +150,10 @@ export function TokenPreview(props: PropTypes) {
             }
             suffix={ItemSuffix}
             align="start"
-            size="large"
-          >
+            size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
-              : t('Chain')}
+              : i18n.t('Chain')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <Button
@@ -171,9 +169,10 @@ export function TokenPreview(props: PropTypes) {
             }
             suffix={ItemSuffix}
             size="large"
-            align="start"
-          >
-            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+            align="start">
+            {loadingStatus === 'success' && token
+              ? token.symbol
+              : i18n.t('Token')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <div className="amount">

package/src/components/WidgetEvents.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import {
+  useEvents,
+  MainEvents,
+  StepEventType,
+  StepExecutionEventStatus,
+  isApprovalTX,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWalletsStore } from '../store/wallets';
+
+export function WidgetEvents() {
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
+
+  const widgetEvents = useEvents();
+
+  useEffect(() => {
+    widgetEvents.on(MainEvents.StepEvent, (widgetEvent) => {
+      const { event, step } = widgetEvent;
+      const shouldRefetchBalance =
+        (event.type === StepEventType.TX_EXECUTION &&
+          event.status === StepExecutionEventStatus.TX_SENT &&
+          !isApprovalTX(step)) ||
+        event.type === StepEventType.SUCCEEDED;
+
+      if (shouldRefetchBalance) {
+        const fromAccount = connectedWallets.find(
+          (account) => account.chain === step?.fromBlockchain
+        );
+        const toAccount =
+          step?.fromBlockchain !== step?.toBlockchain &&
+          connectedWallets.find(
+            (wallet) => wallet.chain === step?.toBlockchain
+          );
+
+        fromAccount && getWalletsDetails([fromAccount]);
+        toAccount && getWalletsDetails([toAccount]);
+      }
+    });
+
+    return () => widgetEvents.all.clear();
+  }, [widgetEvents, connectedWallets.length]);
+
+  return null;
+}

package/src/components/warnings/BalanceErrors.tsx

@@ -1,6 +1,6 @@
 import { Divider, styled, Typography } from '@rango-dev/ui';
 import React from 'react';
-
+import { i18n } from '@lingui/core';
 interface PropTypes {
   messages: string[];
 }
@@ -32,7 +32,7 @@ export function BalanceErrors({ messages }: PropTypes) {
   return (
     <>
       <Typography className="title" variant="title" color={'error'}>
-        Insufficent Balance:
+        {i18n.t('Insufficent Balance:')}
       </Typography>
       <Divider size={8} />
       <List showListStyle={showListStyle}>
@@ -44,4 +44,4 @@ export function BalanceErrors({ messages }: PropTypes) {
       </List>
     </>
   );
-}
+}

package/src/components/warnings/HighSlippageWarning.tsx

@@ -1,6 +1,7 @@
 import { Alert } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
+import { i18n } from '@lingui/core';
 
 interface PropTypes {
   selectedSlippage: number;
@@ -11,8 +12,14 @@ export function HighSlippageWarning(props: PropTypes) {
 
   return (
     <Alert type="warning" footer={<ChangeSlippageButton />}>
-      Caution, your slippage is high (=
-      {selectedSlippage}). Your trade may be front run.
+      {i18n.t(
+        'highSlippage',
+        { selectedSlippage },
+        {
+          message:
+            ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+        }
+      )}
     </Alert>
   );
 }

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,6 +1,7 @@
 import { Divider, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
+import { i18n } from '@lingui/core';
 
 interface PropTypes {
   minRequiredSlippage: string | null;
@@ -13,10 +14,16 @@ const StyledMessage = styled(Typography, {
 export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
   return (
     <StyledMessage variant="body2">
-      We recommend you to increase slippage to at least &nbsp;
-      {minRequiredSlippage}
-      &nbsp; for this route.
-      <Divider size={8}/>
+      {i18n.t(
+        'increaseSlippage',
+        { minRequiredSlippage },
+        {
+          message:
+            'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        }
+      )}
+
+      <Divider size={8} />
       <ChangeSlippageButton />
     </StyledMessage>
   );

package/src/hooks/useConfirmSwap.ts

@@ -10,7 +10,7 @@ import {
   ConfirmSwapWarnings,
   PendingSwapSettings,
 } from '../types';
-import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
+
 import {
   createBestRouteRequestBody,
   getBalanceWarnings,
@@ -33,7 +33,10 @@ import {
 } from '../utils/routing';
 import { numberToString } from '../utils/numbers';
 import { BestRouteResponse } from 'rango-sdk';
-import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import {
+  calculatePendingSwap,
+  PendingSwap,
+} from '@rango-dev/queue-manager-rango-preset';
 
 type ConfirmSwap = {
   loading: boolean;
@@ -63,7 +66,7 @@ export function useConfirmSwap(): ConfirmSwap {
   const userSlippage = customSlippage || slippage;
   const proceedAnywayRef = useRef(false);
   const confiremedRouteRef = useRef<BestRouteResponse | null>(null);
-  let abortControllerRef = useRef<AbortController | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<ConfirmSwapError[]>([]);

package/src/hooks/useWalletProviders.ts

@@ -0,0 +1,20 @@
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { useEffect } from 'react';
+import { useWalletsStore } from '../store/wallets';
+import { WidgetConfig } from '../types';
+import { matchAndGenerateProviders } from '../utils/providers';
+
+export function useWalletProviders(providers: WidgetConfig['wallets']) {
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  let generateProviders: ProviderInterface[] =
+    matchAndGenerateProviders(undefined);
+
+  useEffect(() => {
+    clearConnectedWallet();
+    generateProviders = matchAndGenerateProviders(providers);
+  }, [providers]);
+
+  return {
+    providers: generateProviders,
+  };
+}

package/src/index.ts

@@ -6,13 +6,69 @@ import {
 } from './types';
 import { WidgetProps, Widget } from './Widget';
 import { WalletType } from '@rango-dev/wallets-shared';
+import { WidgetWallets } from './Wallets';
+import {
+  useWallets,
+  ProviderInterface,
+  EventHandler as HandleWalletsUpdate,
+} from '@rango-dev/wallets-core';
+import {
+  useEvents as useWidgetEvents,
+  MainEvents,
+  RouteEvent,
+  StepEvent,
+  Route,
+  Step,
+  RouteStartedEvent,
+  RouteSucceededEvent,
+  RouteFailedEvent,
+  RouteEventType,
+  StepStartedEvent,
+  StepSucceededEvent,
+  StepFailedEvent,
+  StepTxExecutionUpdatedEvent,
+  StepTxExecutionBlockedEvent,
+  StepCheckStatusEvent,
+  StepApprovalTxSucceededEvent,
+  StepOutputRevealedEvent,
+  StepEventType,
+  StepExecutionEventStatus,
+  StepExecutionBlockedEventStatus,
+} from '@rango-dev/queue-manager-rango-preset';
 
 export type {
   WidgetConfig,
   WalletType,
   WidgetTheme,
   WidgetColors,
+  ProviderInterface,
   BlockchainAndTokenConfig,
   WidgetProps,
+  RouteEvent,
+  StepEvent,
+  Route,
+  Step,
+  RouteStartedEvent,
+  RouteSucceededEvent,
+  RouteFailedEvent,
+  StepStartedEvent,
+  StepSucceededEvent,
+  StepFailedEvent,
+  StepTxExecutionUpdatedEvent,
+  StepTxExecutionBlockedEvent,
+  StepCheckStatusEvent,
+  StepApprovalTxSucceededEvent,
+  StepOutputRevealedEvent,
+  HandleWalletsUpdate,
+};
+export {
+  Widget,
+  WidgetWallets,
+  useWallets,
+  useWidgetEvents,
+  MainEvents,
+  RouteEventType,
+  StepEventType,
+  StepExecutionEventStatus,
+  StepExecutionBlockedEventStatus,
 };
-export { Widget };

package/src/pages/ConfirmSwapPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
 import { useWallets } from '@rango-dev/wallets-core';
+import { i18n } from '@lingui/core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
   getKeplrCompatibleConnectedWallets,
@@ -20,7 +21,6 @@ import { useMetaStore } from '../store/meta';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
-import { t } from 'i18next';
 import { Divider, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -179,7 +179,7 @@ export function ConfirmSwapPage({
             }}
             usdValue={inputUsdValue}
             amount={fromAmount}
-            label={t('From')}
+            label={i18n.t('From')}
             loadingStatus={
               loadingMetaStatus !== 'success'
                 ? loadingMetaStatus
@@ -198,7 +198,7 @@ export function ConfirmSwapPage({
             }}
             usdValue={outputUsdValue}
             amount={toAmount}
-            label={t('To')}
+            label={i18n.t('To')}
             loadingStatus={
               loadingMetaStatus !== 'success'
                 ? loadingMetaStatus
@@ -239,8 +239,8 @@ export function ConfirmSwapPage({
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0
-          ? 'Proceed anyway!'
-          : 'Confirm swap!'
+          ? `${i18n.t('Proceed anyway!')}`
+          : `${i18n.t('Confirm swap!')}`
       }
     />
   );

package/src/pages/Home.tsx

@@ -8,6 +8,7 @@ import {
   Header,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
+import { i18n } from '@lingui/core';
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 import { TokenInfo } from '../components/TokenInfo';
 import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
@@ -136,7 +137,7 @@ export function Home() {
   return (
     <Container>
       <Header
-        title="SWAP"
+        title={i18n.t('SWAP')}
         suffix={
           <HeaderButtons
             onClickRefresh={
@@ -159,8 +160,7 @@ export function Home() {
             onClick={() => {
               switchFromAndTo();
               setCount((prev) => prev + 1);
-            }}
-          >
+            }}>
             <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>
@@ -216,8 +216,7 @@ export function Home() {
             else {
               navigate(navigationRoutes.confirmSwap, { replace: true });
             }
-          }}
-        >
+          }}>
           {swapButtonState.title}
         </Button>
         <BottomLogo />