@rango-dev/widget-embedded 0.17.1-next.32 → 0.17.1-next.34

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -0,0 +1,76 @@
+import type { PropTypes } from './QuoteSummarySkeleton.types';
+
+import { ChainToken, Divider, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  BasicSummary,
+  Cost,
+  CostAndTag,
+  Output,
+  OutputTokenInfo,
+  QuoteSummary,
+  QuoteSummarySeparator,
+  SwapPreview,
+  TokenAmount,
+  TokenAmountLabel,
+} from './QuoteSummarySkeleton.styles';
+
+export function QuoteSummarySkeleton(props: PropTypes) {
+  const { type, tag = false } = props;
+  const quotePreview = (
+    <QuoteSummary>
+      <TokenAmount>
+        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <Divider size={8} direction="horizontal" />
+        <TokenAmountLabel>
+          <Skeleton height={10} width={60} variant="rounded" />
+          <Divider size={4} />
+          <Skeleton height={15} variant="rounded" />
+        </TokenAmountLabel>
+      </TokenAmount>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </QuoteSummary>
+  );
+
+  return (
+    <div>
+      <CostAndTag>
+        <Cost>
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+        </Cost>
+        {tag && <Skeleton height={22} width={100} variant="rounded" />}
+      </CostAndTag>
+      {type === 'basic' && (
+        <BasicSummary>
+          <Skeleton height={15} width={148} variant="rounded" />
+        </BasicSummary>
+      )}
+      {type === 'list-item' && (
+        <Output>
+          <OutputTokenInfo>
+            <ChainToken loading size="medium" chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={4} />
+            <Skeleton height={15} width={150} variant="rounded" />
+          </OutputTokenInfo>
+          <Divider size={4} />
+          <Skeleton height={10} width={184} variant="rounded" />
+        </Output>
+      )}
+      {type === 'swap-preview' && (
+        <>
+          <Divider size={4} />
+          <SwapPreview>
+            {quotePreview}
+            <QuoteSummarySeparator />
+            {quotePreview}
+          </SwapPreview>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.types.ts

@@ -0,0 +1,6 @@
+import type { QuoteProps } from '../Quote/Quote.types';
+
+export type PropTypes = {
+  type: QuoteProps['type'];
+  tag?: boolean;
+};

package/src/components/QuoteSkeleton/StepSkeleton.styles.ts

@@ -0,0 +1,33 @@
+import { styled } from '@rango-dev/ui';
+
+export const StepContent = styled('div', {
+  display: 'flex',
+  alignItems: 'start',
+});
+
+export const StepTokens = styled('div', {
+  flexGrow: 1,
+  paddingTop: '$5',
+  paddingBottom: '$10',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const StepTokenInfo = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flexGrow: 1,
+});
+
+export const StepIconContainer = styled('div', {
+  margin: '$0 $2',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const StepTitle = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});

package/src/components/QuoteSkeleton/StepSkeleton.tsx

@@ -0,0 +1,44 @@
+import type { PropTypes } from './StepSkeleton.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepSeparator } from './QuoteSkeleton.styles';
+import {
+  StepContent,
+  StepIconContainer,
+  StepTitle,
+  StepTokenInfo,
+  StepTokens,
+} from './StepSkeleton.styles';
+
+export function StepSkeleton(props: PropTypes) {
+  const { separator = true } = props;
+  return (
+    <>
+      <StepTitle>
+        <Skeleton height={22} width={22} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </StepTitle>
+      <StepContent>
+        <StepSeparator hideSeparator={!separator} />
+        <StepTokens>
+          <StepTokenInfo>
+            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+          <StepIconContainer>
+            <NextIcon color="gray" size={16} />
+          </StepIconContainer>
+          <StepTokenInfo>
+            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+        </StepTokens>
+      </StepContent>
+    </>
+  );
+}

package/src/components/QuoteSkeleton/StepSkeleton.types.ts

@@ -0,0 +1 @@
+export type PropTypes = { separator?: boolean };

package/src/components/QuoteSkeleton/index.ts

@@ -0,0 +1,3 @@
+export { QuoteSkeleton } from './QuoteSkeleton';
+export { StepSkeleton } from './StepSkeleton';
+export { QuoteSummarySkeleton } from './QuoteSummarySkeleton';

package/src/components/Slippage/Slippage.styles.ts

@@ -1,14 +1,19 @@
-import { styled } from '@rango-dev/ui';
+import { Chip, styled, TextField } from '@rango-dev/ui';
 
 export const BaseContainer = styled('div', {
   paddingTop: '$5',
-  paddingBottom: '30px',
+  padding: '$10 $5',
 });
 
 export const SlippageChipsContainer = styled('div', {
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'start',
+  flexWrap: 'wrap',
+  gap: '$10',
+  [`& ${TextField}`]: {
+    flex: '1 1 0',
+    maxWidth: '127px',
+    minWidth: '85px',
+  },
 });
 
 export const Head = styled('div', {
@@ -19,6 +24,11 @@ export const Head = styled('div', {
 });
 
 export const SlippageTooltipContainer = styled('div', {
-  maxWidth: '300px',
+  maxWidth: '280px',
   padding: '$10',
 });
+
+export const SlippageChip = styled(Chip, {
+  width: '61px',
+  flexShrink: 0,
+});

package/src/components/Slippage/Slippage.tsx

@@ -1,6 +1,5 @@
 import { i18n } from '@lingui/core';
 import {
-  Chip,
   Divider,
   InfoIcon,
   TextField,
@@ -17,7 +16,12 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 
-import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
+import {
+  BaseContainer,
+  Head,
+  SlippageChip,
+  SlippageChipsContainer,
+} from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
 export function Slippage() {
@@ -34,6 +38,7 @@ export function Slippage() {
         <Tooltip
           container={getContainer()}
           side="top"
+          sideOffset={4}
           content={<SlippageTooltipContent />}>
           <InfoIcon color="gray" />
         </Tooltip>
@@ -43,8 +48,7 @@ export function Slippage() {
           const key = `slippage-${index}`;
           return (
             <>
-              <Chip
-                style={{ width: '64px', flexShrink: 0 }}
+              <SlippageChip
                 key={key}
                 onClick={() => {
                   if (customSlippage) {
@@ -55,7 +59,6 @@ export function Slippage() {
                 selected={!customSlippage && slippageItem === slippage}
                 label={`${slippageItem.toString()}%`}
               />
-              <Divider direction="horizontal" size={8} />
             </>
           );
         })}

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -24,7 +24,6 @@ import {
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
-
   return (
     <Layout
       noPadding

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -70,7 +70,6 @@ export const outputStyles = css({
 });
 
 export const titleStepsStyles = css({
-  textAlign: 'left',
   width: '100%',
   padding: '0 $20 $10',
 });

package/src/components/TokenList/TokenList.styles.ts

@@ -18,7 +18,8 @@ export const tokenNameStyles = css({
 export const descriptionStyles = css({
   position: 'relative',
   height: 12,
-  width: 150,
+  width: '30%',
+  maxWidth: '150px',
 });
 export const tokenTitleStyles = css({
   position: 'absolute',
@@ -30,6 +31,9 @@ export const tokenAddressStyles = css({
   transform: 'translateY(12px)',
   visibility: 'hidden',
   '& a': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     fontSize: '$12',
     lineHeight: '$16',
     $$color: '$colors$neutral600',
@@ -106,6 +110,10 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
   [`& .${usdValueStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
@@ -115,7 +123,7 @@ export const BalanceContainer = styled('div', {
   },
 });
 
-export const End = styled('ul', {
+export const End = styled('div', {
   display: 'flex',
   alignItems: 'end',
   flexDirection: 'column',
@@ -140,3 +148,10 @@ export const Pin = styled('div', {
   bottom: -6,
   right: -6,
 });
+
+export const TokenBalance = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/components/TokenList/TokenList.tsx

@@ -36,6 +36,7 @@ import {
   TagTitle,
   Title,
   tokenAddressStyles,
+  TokenBalance,
   tokenNameStyles,
   tokenTitleStyles,
   tokenWithoutNameStyles,
@@ -80,6 +81,7 @@ const renderDesc = (props: RenderDescProps) => {
             {length > 10
               ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
               : address}{' '}
+            <Divider size={4} direction="horizontal" />
             <ExternalLinkIcon color="gray" size={12} />
           </a>
         </div>
@@ -175,6 +177,8 @@ export function TokenList(props: PropTypes) {
               <ListItemButton
                 style={{
                   height: style?.height,
+                  width: '100%',
+                  overflow: 'hidden',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
@@ -184,7 +188,7 @@ export function TokenList(props: PropTypes) {
                 start={
                   <ImageSection>
                     <Image src={token.image} size={30} />
-                    {isTokenPinned(token) && (
+                    {isTokenPinned(token, props.type) && (
                       <Pin>
                         <PinIcon size={12} color="gray" />
                       </Pin>
@@ -237,9 +241,9 @@ export function TokenList(props: PropTypes) {
                   ) : (
                     tokenBalance && (
                       <BalanceContainer>
-                        <Typography variant="title" size="small">
+                        <TokenBalance variant="title" size="small">
                           {tokenBalance.amount}
-                        </Typography>
+                        </TokenBalance>
                         <div />
                         {tokenBalance.usdValue && (
                           <Typography

package/src/components/TokenList/TokenList.types.ts

@@ -5,6 +5,7 @@ export interface PropTypes {
   searchedFor?: string;
   onChange: (token: Token) => void;
   selectedBlockchain?: string;
+  type: 'source' | 'destination';
 }
 
 export interface LoadingTokenListProps {

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -3,7 +3,8 @@ import type { PropTypes } from './QuoteInfo.types';
 import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
-import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { Quote } from '../../components/Quote';
+import { QuoteSkeleton } from '../../components/QuoteSkeleton';
 import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';

package/src/pages/Home.tsx

@@ -25,7 +25,7 @@ import { useWalletsStore } from '../store/wallets';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
-import { formatBalance } from '../utils/wallets';
+import { formatBalance, isFetchingBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
@@ -75,6 +75,9 @@ export function Home() {
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
+  const fetchingBalance =
+    !!fromBlockchain &&
+    isFetchingBalance(connectedWallets, fromBlockchain.name);
 
   const needsToWarnEthOnPath = false;
 
@@ -195,6 +198,7 @@ export function Home() {
               }}
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
+              loadingBalance={fetchingBalance}
               onSelectMaxBalance={() => {
                 if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));

package/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { sortTokensByBalance } from '../utils/wallets';
+import { sortTokens } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -34,22 +34,25 @@ export function SelectSwapItemsPage(props: PropTypes) {
   } = useQuoteStore();
   const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
+  const { isTokenPinned } = useAppStore();
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
   // Tokens & Blockchains list
   const blockchains = useAppStore().blockchains({
-    type: type,
+    type,
   });
   const tokens = useAppStore().tokens({
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
   });
-  const tokensList = sortTokensByBalance(tokens, getBalanceFor);
 
-  // Actions
+  const checkIsTokenPinned = (token: Token) => isTokenPinned(token, type);
+
+  const tokensList = sortTokens(tokens, getBalanceFor, checkIsTokenPinned);
+
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -96,6 +99,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
         list={tokensList}
         selectedBlockchain={selectedBlockchainName}
         searchedFor={searchedFor}
+        type={type}
         onChange={(token) => {
           updateToken(token);
 

package/src/pages/SettingsPage.tsx

@@ -144,17 +144,18 @@ export function SettingsPage() {
     title: (
       <>
         <Typography variant="title" size="xmedium">
-          {i18n.t('Infinite Approval')}
+          {i18n.t('Infinite approval')}
         </Typography>
         <Divider direction="horizontal" size={4} />
         <Tooltip
           side="top"
+          sideOffset={4}
           container={getContainer()}
           content={
             <TooltipContainer>
               <Typography variant="label" size="medium" color="neutral700">
                 {i18n.t(
-                  "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
                 )}
               </Typography>
             </TooltipContainer>
@@ -180,7 +181,7 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        title: i18n.t('Setting'),
+        title: i18n.t('Settings'),
       }}>
       <SettingsContainer>
         <Slippage />

package/src/pages/WalletsPage.tsx

@@ -11,11 +11,12 @@ import { useAppStore } from '../store/AppStore';
 import { getContainer } from '../utils/common';
 
 const ListContainer = styled('div', {
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
-  paddingTop: '$15',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
   height: '100%',
 });
 

package/src/store/slices/config.ts

@@ -5,6 +5,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   multiWallets: true,
   enableNewLiquiditySources: true,
+  customDestination: true,
 };
 
 export type ConfigSlice = {

package/src/store/slices/data.ts

@@ -14,7 +14,7 @@ type BlockchainOptions = {
 };
 
 type TokenOptions = {
-  type?: 'source' | 'destination';
+  type: 'source' | 'destination';
   // filter by an specific blockchain
   blockchain?: string;
   searchFor?: string;
@@ -29,7 +29,7 @@ export interface DataSlice {
   blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
   tokens: (options?: TokenOptions) => Token[];
   swappers: () => SwapperMeta[];
-  isTokenPinned: (token: Token) => boolean;
+  isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
 
   fetch: () => Promise<void>;
 }
@@ -131,10 +131,10 @@ export const createDataSlice: StateCreator<
       })
       .sort((a, b) => {
         // Check pinned tokens
-        if (get().isTokenPinned(a)) {
+        if (get().isTokenPinned(a, options.type)) {
           return -1;
         }
-        if (get().isTokenPinned(b)) {
+        if (get().isTokenPinned(b, options.type)) {
           return 1;
         }
 
@@ -159,8 +159,12 @@ export const createDataSlice: StateCreator<
 
     return list;
   },
-  isTokenPinned: (token) => {
-    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+  isTokenPinned: (token, type) => {
+    const pinnedTokens =
+      type === 'source'
+        ? get().config.from?.pinnedTokens
+        : get().config.to?.pinnedTokens;
+    const pinned = !!pinnedTokens?.some((pinnedToken) =>
       tokensAreEqual(pinnedToken, token)
     );
     return pinned;

package/src/types/config.ts

@@ -77,12 +77,15 @@ export type WidgetAffiliate = {
  * blockchains. e.g. ['BSC','ETHEREUM']
  * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
  * you could use that to limit tokens to some limited ones.
+ * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
+ * you could use to pin tokens of your choice to the top of the token list.
  */
 export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
   tokens?: Asset[];
+  pinnedTokens?: Asset[];
 };
 
 /**
@@ -153,8 +156,6 @@ export type Features = Partial<
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
- * you could use to pin tokens of your choice to the top of the token list.
  * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
@@ -182,7 +183,6 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  pinnedTokens?: Asset[];
   enableNewLiquiditySources?: boolean;
   features?: Features;
 };