@rango-dev/ui 0.23.0 → 0.24.0

package/src/components/TokenAmount/TokenAmount.tsx

@@ -6,16 +6,12 @@ import { ChainToken } from '../ChainToken';
 import { PriceImpact } from '../PriceImpact/PriceImpact';
 import { Typography } from '../Typography';
 
-import {
-  Container,
-  tokenAmountStyles,
-  usdValueStyles,
-} from './TokenAmount.styles';
+import { Container } from './TokenAmount.styles';
 
 export function TokenAmount(props: PropTypes) {
   return (
     <Container direction={props.direction} centerAlign={props.centerAlign}>
-      <div className={tokenAmountStyles()}>
+      <div className="token-amount">
         <ChainToken
           chainImage={props.chain.image}
           tokenImage={props.token.image}
@@ -45,23 +41,21 @@ export function TokenAmount(props: PropTypes) {
           </div>
         </div>
       </div>
-      {props.price.usdValue && props.price.usdValue !== '0' && (
-        <div className={usdValueStyles()}>
-          {props.type === 'input' && (
-            <Typography mr={4} size="small" variant="body" color="$neutral700">
-              {`~$${props.price.usdValue}`}
-            </Typography>
-          )}
-          {props.type === 'output' && (
-            <PriceImpact
-              size="small"
-              outputUsdValue={props.price.usdValue}
-              percentageChange={props.percentageChange}
-              warningLevel={props.warningLevel}
-            />
-          )}
-        </div>
-      )}
+      <div className="usd-value">
+        {props.type === 'input' && (
+          <Typography mr={4} size="small" variant="body" color="$neutral700">
+            {`~$${props.price.usdValue}`}
+          </Typography>
+        )}
+        {props.type === 'output' && (
+          <PriceImpact
+            size="small"
+            outputUsdValue={props.price.usdValue}
+            percentageChange={props.percentageChange}
+            warningLevel={props.warningLevel}
+          />
+        )}
+      </div>
     </Container>
   );
 }

package/src/components/Tooltip/Tooltip.styles.ts

@@ -7,16 +7,13 @@ export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',
 });
 
+export const TooltipArrow = styled(RadixTooltip.Arrow, {
+  fill: '$neutral100',
+});
+
 export const TooltipTypography = styled(Typography, {
   borderRadius: '$md',
   padding: '$5 $10',
-  boxShadow:
-    'inset 0 0 0.5px 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.9px 1.5px rgba(0, 0, 0, 0.045), 0 3.5px 6px rgba(0, 0, 0, 0.09)',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
   backgroundColor: '$neutral100',
 });
-
-export const TriggerContent = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});

package/src/components/Tooltip/Tooltip.tsx

@@ -5,9 +5,9 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import React from 'react';
 
 import {
+  TooltipArrow,
   TooltipContent,
   TooltipTypography,
-  TriggerContent,
 } from './Tooltip.styles';
 
 export function Tooltip(props: PropsWithChildren<PropTypes>) {
@@ -24,13 +24,14 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root open={open}>
         <RadixTooltip.Trigger asChild>
-          <TriggerContent>{children}</TriggerContent>
+          <div>{children}</div>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
           <TooltipContent side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
+            <TooltipArrow />
           </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>

package/src/components/Wallet/Wallet.styles.ts

@@ -30,7 +30,7 @@ export const WalletButton = styled('button', {
   backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
-  width: 100,
+  width: 110,
   position: 'relative',
   fontFamily: 'inherit',
   '&:hover': {

package/src/components/Wallet/Wallet.types.ts

@@ -21,6 +21,26 @@ export interface Info {
   tooltipText: string;
 }
 
+interface StateConnected {
+  state: WalletState.CONNECTED;
+}
+interface StateDisconnected {
+  state: WalletState.DISCONNECTED;
+}
+interface StateConnecting {
+  state: WalletState.CONNECTING;
+}
+interface StateNotInstalled {
+  state: WalletState.NOT_INSTALLED;
+  link: InstallObjects | string;
+}
+
+type State =
+  | StateConnected
+  | StateDisconnected
+  | StateConnecting
+  | StateNotInstalled;
+
 export interface ContentProps {
   image: string;
   title: string;
@@ -28,11 +48,9 @@ export interface ContentProps {
   descriptionColor?: string;
 }
 
-export interface WalletPropTypes {
-  state: WalletState;
+interface WalletProps {
   title: string;
   image: string;
-  link: InstallObjects | string;
   type: WalletType;
   onClick: (type: WalletType) => void;
   selected?: boolean;
@@ -41,6 +59,8 @@ export interface WalletPropTypes {
   container?: HTMLElement;
 }
 
+export type WalletPropTypes = State & WalletProps;
+
 export type SelectablePropTypes = WalletPropTypes & {
   selected: boolean;
 };

package/src/components/common/Image.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { styled } from '../../theme';
 
-export const ImageContainer = styled('div', {
+const ImageContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -37,6 +37,7 @@ export function Image(props: PropTypes) {
 
   return (
     <ImageContainer
+      className="image-container"
       css={{
         width: size + 'px',
         height: size + 'px',

package/src/components/common/index.ts

@@ -1,2 +1,2 @@
 export { FilledCircle } from './FilledCircle';
-export { Image, ImageContainer } from './Image';
+export { Image } from './Image';

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './I18nManager';
 export * from './Alert';
+export * from './BestRoute';
 export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
@@ -44,7 +45,7 @@ export * from './ListItem';
 export * from './NotFound';
 export * from './MessageBox';
 export * from './IconButton';
-export * from './QuoteCost';
+export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';

package/src/containers/BlockchainSelector/BlockchainSelector.tsx

@@ -1,16 +1,14 @@
-import type { LoadingStatus } from '../../types/meta';
-import type { CSSProperties } from '@stitches/react';
-import type { BlockchainMeta } from 'rango-sdk';
-
 import React from 'react';
-
-import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { BlockchainMeta } from 'rango-sdk';
 import { BlockchainsList } from '../../components/BlockchainsList';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { Spinner } from '../../components/Spinner';
 import { styled } from '../../theme';
-import { containsText } from '../../utils';
+import { CSSProperties } from '@stitches/react';
+import { containsText } from '../../helper';
+import { LoadingStatus } from '../../types/meta';
+import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
@@ -58,7 +56,8 @@ export function BlockchainSelector(props: PropTypes) {
       hasHeader={hasHeader}
       textFieldPlaceholder="Search blockchains by name"
       title={`Select ${type} Blockchain`}
-      onBack={onBack}>
+      onBack={onBack}
+    >
       {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (

package/src/containers/History/types.tsx

@@ -0,0 +1 @@
+export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';

package/src/containers/SwapHistory/SwapHistory.stories.tsx

@@ -1,10 +1,7 @@
-import type { PropTypes } from './SwapHistory';
-import type { Meta } from '@storybook/react';
-
 import React from 'react';
-
+import { Meta } from '@storybook/react';
+import { PropTypes, SwapHistory } from './SwapHistory';
 import { pendingSwap } from './mock';
-import { SwapHistory } from './SwapHistory';
 
 export default {
   title: 'Containers/Swap History',

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes as SwapMessagesPropTypes } from './SwapMessages';
-import type { PendingSwap } from 'rango-types';
+import type { PendingSwap } from '../History/types';
 
 import React, { useState } from 'react';
 

package/src/containers/SwapHistory/mock.ts

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PendingSwap } from 'rango-types';
-
+// @ts-nocheck
 import { RoutingResultType, TransactionType } from 'rango-sdk';
-import { MessageSeverity } from 'rango-types';
+import { PendingSwap } from '../History/types';
 
 export const pendingSwap: PendingSwap = {
   creationTime: '1673164511955',
@@ -18,7 +16,7 @@ export const pendingSwap: PendingSwap = {
   status: 'running',
   isPaused: false,
   extraMessage: null,
-  extraMessageSeverity: MessageSeverity.info,
+  extraMessageSeverity: 'info',
   extraMessageDetail: '',
   extraMessageErrorCode: null,
   networkStatusExtraMessage: null,
@@ -36,14 +34,14 @@ export const pendingSwap: PendingSwap = {
       {
         swapperId: 'Osmosis',
         swapperType: 'DEX',
-        swapperLogo: '',
+        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
         from: {
           symbol: 'JUNO',
           logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
           address:
             'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
           blockchain: 'OSMOSIS',
-          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+          blockchainLogo: '',
           decimals: 6,
           usdPrice: 1.1091996179668873,
         },
@@ -53,7 +51,7 @@ export const pendingSwap: PendingSwap = {
           address: null,
           blockchain: 'OSMOSIS',
           decimals: 6,
-          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+          blockchainLogo: '',
           usdPrice: 0.7192435454440882,
         },
         fromAmount: '1.000000',
@@ -70,9 +68,8 @@ export const pendingSwap: PendingSwap = {
               address: null,
             },
             expenseType: 'FROM_SOURCE_WALLET',
-            name: 'Network Fee',
             amount: '0',
-            price: null,
+            name: 'Network Fee',
           },
         ],
         estimatedTimeInSeconds: 45,
@@ -148,7 +145,6 @@ export const pendingSwap: PendingSwap = {
         includesDestinationTx: false,
         maxRequiredSign: 1,
         warnings: [],
-        internalSwaps: null,
       },
     ],
   },
@@ -158,25 +154,21 @@ export const pendingSwap: PendingSwap = {
       id: 1,
       fromBlockchain: 'OSMOSIS',
       fromSymbol: 'JUNO',
-      swapperType: 'test',
       fromSymbolAddress:
         'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
       fromDecimals: 6,
       fromAmountPrecision: null,
-      fromAmountRestrictionType: 'EXCLUSIVE',
-      estimatedTimeInSeconds: 5,
       fromAmountMinValue: null,
       fromAmountMaxValue: null,
-      fromUsdPrice: null,
       toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       toBlockchain: 'OSMOSIS',
       fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
       toSymbol: 'OSMO',
       toSymbolAddress: null,
+      swapperType: 'DEX',
       toDecimals: 6,
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
-      toUsdPrice: null,
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
       swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
@@ -192,13 +184,6 @@ export const pendingSwap: PendingSwap = {
           description: null,
         },
       ],
-      starknetApprovalTransaction: null,
-      starknetTransaction: null,
-      tronApprovalTransaction: null,
-      tonTransaction: null,
-      tronTransaction: null,
-      feeInUsd: null,
-      executedTransactionTime: null,
       cosmosTransaction: {
         type: TransactionType.COSMOS,
         fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
@@ -286,7 +271,6 @@ export const pendingSwap: PendingSwap = {
       transferTransaction: null,
       diagnosisUrl: null,
       internalSteps: null,
-      internalSwaps: null,
     },
   ],
 };

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -1,7 +1,5 @@
-import { Button, TextField, Typography } from '../../components';
-import { css, darkTheme, styled } from '../../theme';
-
-export const textStyles = css();
+import { Button, TextField } from '../../components';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   $$color: '$colors$neutral100',
@@ -19,22 +17,40 @@ export const Container = styled('div', {
       },
     },
   },
-  [`& .${textStyles}`]: {
-    $$color: '$colors$neutral600',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral700',
-    },
-    color: '$$color',
+  '& .label__container': {
+    paddingBottom: '$5',
+  },
+  '& .label': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  '& .balance': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .form': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  '& .amount': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'end',
+    flexGrow: 1,
   },
 });
 
 export const InputAmount = styled(TextField, {
-  width: '100%',
   padding: '0',
   fontSize: '$18',
   lineHeight: '$26',
   fontWeight: '$medium',
   textAlign: 'right',
+  width: 140,
   '&:disabled': {
     cursor: 'unset',
   },
@@ -46,70 +62,3 @@ export const MaxButton = styled(Button, {
   },
   backgroundColor: '$$color',
 });
-
-export const ValueTypography = styled('div', {
-  display: 'flex',
-  width: '100%',
-  textAlign: 'right',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  variants: {
-    hasWarning: {
-      true: {
-        '& ._typography': {
-          color: '$warning500',
-        },
-      },
-      false: {
-        '& ._typography': {
-          $$color: '$colors$neutral600',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral700',
-          },
-          color: '$$color',
-        },
-      },
-    },
-  },
-});
-
-export const formStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export const labelStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export const balanceStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const amountStyles = css({
-  width: '45%',
-  maxWidth: '170px',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'end',
-  flexGrow: 1,
-});
-
-export const labelContainerStyles = css({
-  paddingBottom: '$5',
-});
-
-export const UsdPrice = styled(Typography, {
-  width: '100%',
-  textAlign: 'right',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});

package/src/containers/SwapInput/SwapInput.tsx

@@ -5,37 +5,21 @@ import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
 
-import {
-  amountStyles,
-  balanceStyles,
-  Container,
-  formStyles,
-  InputAmount,
-  labelContainerStyles,
-  labelStyles,
-  MaxButton,
-  textStyles,
-  UsdPrice,
-  ValueTypography,
-} from './SwapInput.styles';
+import { Container, InputAmount, MaxButton } from './SwapInput.styles';
 import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputProps) {
-  const showBalance =
-    'balance' in props && !props.loading && !props.loadingBalance;
-  const showBalanceSkeleton =
-    'balance' in props && (props.loading || props.loadingBalance);
   return (
     <Container sharpBottomStyle={props.sharpBottomStyle}>
-      <div className={labelContainerStyles()}>
-        <div className={labelStyles()}>
-          <Typography variant="body" size="small" className={textStyles()}>
+      <div className="label__container">
+        <div className="label">
+          <Typography variant="body" size="small" color="$neutral600">
             {props.label}
           </Typography>
-          {showBalance && (
-            <div className={balanceStyles()}>
+          {'balance' in props && !props.loading && (
+            <div className="balance">
               <Typography
-                className={textStyles()}
+                color="$neutral600"
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -51,14 +35,14 @@ export function SwapInput(props: SwapInputProps) {
               </MaxButton>
             </div>
           )}
-          {showBalanceSkeleton && (
-            <div className={balanceStyles()}>
+          {props.loading && (
+            <div className="balance">
               <Skeleton variant="text" size="large" width={105} />
             </div>
           )}
         </div>
       </div>
-      <div className={formStyles()}>
+      <div className="form">
         <TokenSection
           chain={props.chain.displayName}
           tokenSymbol={props.token.displayName}
@@ -68,12 +52,12 @@ export function SwapInput(props: SwapInputProps) {
           onClick={props.onClickToken}
           loading={props.loading}
         />
-        <div className={amountStyles()}>
-          {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
+        <div className="amount">
+          {props.loading ? (
             <>
-              <Skeleton variant="text" size="large" />
+              <Skeleton variant="text" size="large" width={92} />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" />
+              <Skeleton variant="text" size="medium" width={92} />
             </>
           ) : (
             <>
@@ -100,13 +84,21 @@ export function SwapInput(props: SwapInputProps) {
                   warningLevel={props.warningLevel}
                 />
               ) : (
-                <ValueTypography hasWarning={!!props.price.error}>
-                  <UsdPrice variant="body" size="medium">
-                    {props.price.usdValue
-                      ? `~$${props.price.usdValue}`
-                      : props.price.error}
-                  </UsdPrice>
-                </ValueTypography>
+                <Typography
+                  variant="body"
+                  size="medium"
+                  color={!props.price.error ? '$neutral600' : '$warning500'}
+                  style={{
+                    width: 140,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}>
+                  {props.price.usdValue
+                    ? `~$${props.price.usdValue}`
+                    : props.price.error}
+                </Typography>
               )}
             </>
           )}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -25,14 +25,12 @@ export type BaseProps = {
 type FromProps = {
   mode: 'From';
   balance?: string;
-  loadingBalance: boolean;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };
 
 type ToProps = {
   mode: 'To';
-  fetchingQuote?: boolean;
   percentageChange: string | null;
   warningLevel: PriceImpactWarningLevel;
 };