@rango-dev/widget-embedded 0.5.1-next.9 → 0.7.0

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();
@@ -67,19 +67,21 @@ export function Layout({ config }: LayoutProps) {
   const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
+  const setAffiliatePercent = useSettingsStore.use.setAffiliatePercent();
+  const setAffiliateWallets = useSettingsStore.use.setAffiliateWallets();
 
   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 +96,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)
       );
 
@@ -106,8 +108,15 @@ export function Layout({ config }: LayoutProps) {
   }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
 
   useEffect(() => {
-    setAffiliateRef(config?.affiliateRef || null);
-  }, [config?.affiliateRef]);
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+
   return (
     <>
       <Header>
@@ -132,12 +141,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';
 
@@ -90,7 +90,7 @@ const OutputContainer = styled('div', {
 interface PropTypes {
   label: string;
   amount: string;
-  usdValue?: BigNumber;
+  usdValue: BigNumber | null;
   loadingStatus: LoadingStatus;
   chain: {
     displayName: string;
@@ -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

@@ -10,18 +10,17 @@ import { useWalletsStore } from '../store/wallets';
 
 export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
 
   const widgetEvents = useEvents();
 
   useEffect(() => {
     widgetEvents.on(MainEvents.StepEvent, (widgetEvent) => {
       const { event, step } = widgetEvent;
-      console.log({ event: widgetEvent });
       const shouldRefetchBalance =
         (event.type === StepEventType.TX_EXECUTION &&
           event.status === StepExecutionEventStatus.TX_SENT &&
-          isApprovalTX(step)) ||
+          !isApprovalTX(step)) ||
         event.type === StepEventType.SUCCEEDED;
 
       if (shouldRefetchBalance) {
@@ -34,8 +33,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getOneOfWalletsDetails(fromAccount);
-        toAccount && getOneOfWalletsDetails(toAccount);
+        fromAccount && getWalletsDetails([fromAccount]);
+        toAccount && getWalletsDetails([toAccount]);
       }
     });
 

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;
@@ -50,6 +53,8 @@ export function useConfirmSwap(): ConfirmSwap {
   const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const affiliateRef = useSettingsStore.use.affiliateRef();
+  const affiliatePercent = useSettingsStore.use.affiliatePercent();
+  const affiliateWallets = useSettingsStore.use.affiliateWallets();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const destination = useWalletsStore.use.customDestination();
@@ -63,7 +68,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[]>([]);
@@ -115,6 +120,8 @@ export function useConfirmSwap(): ConfirmSwap {
       disabledLiquiditySources,
       userSlippage,
       affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
       initialRoute,
       destination
     );

package/src/index.ts

@@ -7,7 +7,11 @@ import {
 import { WidgetProps, Widget } from './Widget';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { WidgetWallets } from './Wallets';
-import { useWallets } from '@rango-dev/wallets-core';
+import {
+  useWallets,
+  ProviderInterface,
+  EventHandler as HandleWalletsUpdate,
+} from '@rango-dev/wallets-core';
 import {
   useEvents as useWidgetEvents,
   MainEvents,
@@ -15,6 +19,21 @@ import {
   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 {
@@ -22,12 +41,34 @@ export type {
   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, WidgetWallets };
-export { useWallets, useWidgetEvents, MainEvents };

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={

package/src/pages/WalletsPage.tsx

@@ -18,7 +18,7 @@ import { useWallets } from '@rango-dev/wallets-core';
 import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import { useMetaStore } from '../store/meta';
 import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
@@ -71,7 +71,6 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const { t } = useTranslation();
 
   const onSelectWallet = async (type: WalletType) => {
     const wallet = state(type);
@@ -115,7 +114,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
 
   return (
     <SecondaryPage
-      title={t('Select Wallet') || ''}
+      title={i18n.t('Select Wallet') || ''}
       textField={false}
       onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
       <>