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

package/src/utils/wallets.ts

@@ -380,35 +380,64 @@ export function formatBalance(balance: Balance | null): Balance | null {
   return formattedBalance;
 }
 
-export function sortTokensByBalance(
+function sortTokensByBalance(
+  token1Balance: Balance | null,
+  token2Balance: Balance | null
+): number {
+  if (token1Balance?.usdValue && token2Balance?.usdValue) {
+    return (
+      parseFloat(token2Balance.usdValue) - parseFloat(token1Balance.usdValue)
+    );
+  }
+
+  if (!token1Balance?.usdValue && token2Balance?.usdValue) {
+    return 1;
+  }
+
+  if (token1Balance?.usdValue && !token2Balance?.usdValue) {
+    return -1;
+  }
+
+  if (!token1Balance?.usdValue && !token2Balance?.usdValue) {
+    return (
+      parseFloat(token2Balance?.amount || '0') -
+      parseFloat(token1Balance?.amount || '0')
+    );
+  }
+
+  return 0;
+}
+
+function sortTokensByPinnedToken(
+  token1: Token,
+  token2: Token,
+  isTokenPinned: (token: Token) => boolean
+): number {
+  const isToken1Pinned = isTokenPinned(token1);
+  const isToken2Pinned = isTokenPinned(token2);
+
+  if (isToken1Pinned === isToken2Pinned) {
+    return 0;
+  }
+  if (isToken1Pinned) {
+    return -1;
+  }
+  return 1;
+}
+export function sortTokens(
   tokens: Token[],
-  getBalanceFor: (token: Token) => Balance | null
+  getBalanceFor: (token: Token) => Balance | null,
+  isTokenPinned: (token: Token) => boolean
 ) {
   tokens.sort((token1, token2) => {
     const token1Balance = getBalanceFor(token1);
     const token2Balance = getBalanceFor(token2);
-    if (token1Balance?.usdValue && token2Balance?.usdValue) {
-      return (
-        parseFloat(token2Balance.usdValue) - parseFloat(token1Balance.usdValue)
-      );
-    }
+    // Check pinned tokens
+    const isTokenPin = sortTokensByPinnedToken(token1, token2, isTokenPinned);
 
-    if (!token1Balance?.usdValue && token2Balance?.usdValue) {
-      return 1;
-    }
-
-    if (token1Balance?.usdValue && !token2Balance?.usdValue) {
-      return -1;
-    }
-
-    if (!token1Balance?.usdValue && !token2Balance?.usdValue) {
-      return (
-        parseFloat(token2Balance?.amount || '0') -
-        parseFloat(token1Balance?.amount || '0')
-      );
-    }
-
-    return 0;
+    return isTokenPin !== 0
+      ? isTokenPin
+      : sortTokensByBalance(token1Balance, token2Balance);
   });
 
   return tokens;
@@ -514,3 +543,11 @@ export function makeTokensBalance(connectedWallets: ConnectedWallet[]) {
       return balances;
     }, {});
 }
+
+export const isFetchingBalance = (
+  connectedWallets: ConnectedWallet[],
+  blockchain: string
+) =>
+  !!connectedWallets.find(
+    (wallet) => wallet.chain === blockchain && wallet.loading
+  );

package/dist/components/LoadingSwapDetails/LoadingSwapDetailStep.d.ts

@@ -1,4 +0,0 @@
-import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
-import React from 'react';
-export declare function LoadingSwapDetailStep(props: StepSkeletonPropsTypes): React.JSX.Element;
-//# sourceMappingURL=LoadingSwapDetailStep.d.ts.map

package/dist/components/LoadingSwapDetails/LoadingSwapDetailStep.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingSwapDetailStep.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,qBAiClE"}

package/dist/components/LoadingSwapDetails/LoadingSwapDetails.types.d.ts

@@ -1,4 +0,0 @@
-export interface StepSkeletonPropsTypes {
-    extraInfo?: boolean;
-}
-//# sourceMappingURL=LoadingSwapDetails.types.d.ts.map

package/dist/components/LoadingSwapDetails/LoadingSwapDetails.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingSwapDetails.types.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Quote/QuoteSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,qBAqE7C"}

package/dist/components/Quote/QuoteSkeleton.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4FpB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAaxB,CAAC"}

package/dist/components/Quote/QuoteSkeleton.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,OAAO,GAAG,WAAW,GAAG,cAAc,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -1,48 +0,0 @@
-import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  extraInfoStyles,
-  StepContainer,
-  stepIconStyles,
-  stepInfoStyles,
-  stepTitleStyles,
-  stepTokensStyles,
-} from './LoadingSwapDetails.styles';
-
-export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
-  const { extraInfo } = props;
-  return (
-    <StepContainer>
-      <div className={stepTitleStyles()}>
-        <Skeleton height={28} width={28} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className={stepTokensStyles()}>
-        <Divider direction="horizontal" size={20} />
-        <div className={stepInfoStyles()}>
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-        <div className={stepIconStyles()}>
-          <NextIcon color="gray" size={16} />
-        </div>
-        <div className={stepInfoStyles()}>
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-      </div>
-      {extraInfo && (
-        <div className={extraInfoStyles()}>
-          <Divider direction="horizontal" size={20} />
-          <Skeleton height={22} width={297} variant="rectangular" />
-        </div>
-      )}
-    </StepContainer>
-  );
-}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -1,3 +0,0 @@
-export interface StepSkeletonPropsTypes {
-  extraInfo?: boolean;
-}

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

@@ -1,110 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-
-export const Container = styled('div', {
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
-  borderBottomLeftRadius: '$xm',
-  borderBottomRightRadius: '$xm',
-  padding: '$15 ',
-  '& .cost-and-tag': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '22px',
-  },
-  variants: {
-    rounded: {
-      true: {
-        borderRadius: '$xm',
-      },
-    },
-  },
-  '& .cost': {
-    display: 'flex',
-  },
-  '& .basic-summary': {
-    padding: '$15 $0 14px $0',
-  },
-  '& .output': {
-    padding: '$6 $0 $15 $0',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  '& .output__token-info': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-    paddingBottom: '$5',
-  },
-  '& .quote-summary': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'end',
-  },
-  '& .quote-summary__separator': {
-    height: '$28',
-    marginLeft: '13px',
-    borderLeft: '1px solid $neutral700',
-  },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  '& .token-amount__label': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-  },
-  '& .chains': {
-    paddingTop: '$2',
-  },
-  '& .swap-preview': {
-    padding: '$15 $0 $15 $0',
-  },
-  '& .steps': {
-    paddingLeft: '$8',
-  },
-  '& .step__title': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__content': {
-    display: 'flex',
-    alignItems: 'start',
-  },
-  '& .step__tokens': {
-    paddingTop: '$5',
-    paddingBottom: '$10',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__icon-container': {
-    margin: '$0 $2',
-    padding: '$4',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
-  minHeight: ' 64px',
-  margin: '0px 11.5px',
-  alignSelf: 'stretch',
-  variants: {
-    hideSeparator: {
-      true: {
-        minHeight: 'unset',
-        height: '0',
-      },
-    },
-  },
-});

package/src/components/Quote/QuoteSkeleton.tsx

@@ -1,108 +0,0 @@
-import type { PropTypes } from './QuoteSkeleton.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { Container, StepSeparator } from './QuoteSkeleton.styles';
-
-function StepSkeleton(props: { separator?: boolean }) {
-  const { separator = true } = props;
-  return (
-    <>
-      <div className="step__title">
-        <Skeleton height={22} width={22} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step__content">
-        <StepSeparator hideSeparator={!separator} />
-        <div className="step__tokens">
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-          <div className="step__icon-container">
-            <NextIcon color="gray" size={16} />
-          </div>
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-  const quoteSummary = (
-    <div className="quote-summary">
-      <div className="token-amount">
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <div className="token-amount__label">
-          <Skeleton height={10} width={60} variant="rounded" />
-          <Divider size={4} />
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
-  return (
-    <Container rounded={type !== 'basic'}>
-      <div className="cost-and-tag">
-        <div className="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" />
-        </div>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </div>
-      {type === 'basic' && (
-        <div className="basic-summary">
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      )}
-      {type === 'list-item' && (
-        <div className="output">
-          <div className="output__token-info">
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </div>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </div>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <div className="swap-preview">
-            {quoteSummary}
-            <div className="quote-summary__separator" />
-            {quoteSummary}
-          </div>
-        </>
-      )}
-      <div className="chains">
-        <Skeleton height={15} width={321} variant="rounded" />
-      </div>
-
-      {expanded && (
-        <div className="steps">
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </div>
-      )}
-    </Container>
-  );
-}