@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.3

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

@@ -0,0 +1,65 @@
+import type { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
+
+export enum WalletState {
+  NOT_INSTALLED = 'not_installed',
+  DISCONNECTED = 'disconnected',
+  CONNECTING = 'connecting',
+  CONNECTED = 'connected',
+}
+
+export type WalletInfo = {
+  state: WalletState;
+  link: InstallObjects | string;
+  title: string;
+  image: string;
+  type: string;
+};
+
+export interface Info {
+  color: string;
+  description: string;
+  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;
+  description: string;
+  descriptionColor?: string;
+}
+
+interface WalletProps {
+  title: string;
+  image: string;
+  type: WalletType;
+  onClick: (type: WalletType) => void;
+  selected?: boolean;
+  description?: string;
+  isLoading?: boolean;
+}
+
+export type WalletPropTypes = State & WalletProps;
+
+export type SelectablePropTypes = WalletPropTypes & {
+  selected: boolean;
+};

package/src/components/Wallet/index.ts

@@ -1 +1,3 @@
 export * from './Wallet';
+export type { WalletInfo } from './Wallet.types';
+export { WalletState } from './Wallet.types';

package/src/components/common/FilledCircle.tsx

@@ -3,6 +3,6 @@ import { styled } from '../../theme';
 export const FilledCircle = styled('span', {
   width: '10px',
   height: '10px',
-  backgroundColor: '$primary',
+  backgroundColor: '$primary500',
   borderRadius: '99999px',
 });

package/src/components/common/Image.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { styled } from '../../theme';
 
 const ImageContainer = styled('div', {
@@ -10,18 +11,44 @@ const ImageContainer = styled('div', {
     height: '100%',
     objectFit: 'contain',
   },
+  '.circular': {
+    borderRadius: '$lg',
+  },
 });
 
 type PropTypes = {
   size: number;
+  useAsPlaceholder?: boolean;
+  backgroundColor?: string;
+  borderRadius?: string;
+  type?: 'circular' | 'rectangular';
 } & React.ImgHTMLAttributes<HTMLImageElement>;
 
 export function Image(props: PropTypes) {
-  const { size, ...otherProps } = props;
+  const {
+    size,
+    useAsPlaceholder,
+    backgroundColor = '$secondary100',
+    type,
+    ...otherProps
+  } = props;
+
+  const borderRadius = type === 'circular' ? '$lg' : '$xs';
 
   return (
-    <ImageContainer css={{ width: size + 'px', height: size + 'px' }}>
-      <img className="image" {...otherProps} />
+    <ImageContainer
+      className="image-container"
+      css={{
+        width: size + 'px',
+        height: size + 'px',
+        ...(useAsPlaceholder && { backgroundColor, borderRadius }),
+      }}>
+      {!useAsPlaceholder && (
+        <img
+          className={`image ${type === 'circular' ? 'circular' : ''}`}
+          {...otherProps}
+        />
+      )}
     </ImageContainer>
   );
 }

package/src/components/common/styles.ts

@@ -0,0 +1,35 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { keyframes, styled } from '../../theme';
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} 300ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} 300ms ease-out`,
+      },
+    },
+  },
+});

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './Alert';
 export * from './BestRoute';
 export * from './BottomLogo';
 export * from './Button';
+export * from './IconButton';
 export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
@@ -11,19 +12,18 @@ export * from './ColorPicker';
 export * from './Divider';
 export * from './Drawer';
 export * from './Header';
-export * from './HeaderButtons';
-export * from './HeaderLayout';
-export * from './Icon';
 export * from './Modal';
+export * from './MessageBox';
 export * from './PercentageChange';
-export * from './Radio';
+export * from './RadioGroup';
 export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
+export * from './Wallet';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';
-export * from './SwapDetail';
+export * from './SwapListItem';
 export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
@@ -32,3 +32,18 @@ export * from './TokenPreview';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';
+export * from './Radio';
+export * from './PriceImpact';
+export * from './ChainToken';
+export * from './Skeleton';
+export * from './VirtualizedList';
+export * from './ListItemButton';
+export * from './List';
+export * from './ListItem';
+export * from './NotFound';
+export * from './MessageBox';
+export * from './IconButton';
+export * from './RouteCost';
+export * from './TokenAmount';
+export * from './StepDetails';
+export * from './Popover';

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -1,9 +1,11 @@
+import type { WalletInfo } from '../../components';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { i18n } from '@lingui/core';
 import React from 'react';
-import { styled } from '../../theme';
-import { WalletInfo } from '../../types/wallet';
-import { WalletType } from '@rango-dev/wallets-shared';
+
 import { Modal, Wallet } from '../../components';
-import { i18n } from '@lingui/core';
+import { styled } from '../../theme';
 
 export interface PropTypes {
   open: boolean;
@@ -23,21 +25,17 @@ const ModalContent = styled('div', {
 export function ConnectWalletsModal(props: PropTypes) {
   const { open, list, onSelect, onClose } = props;
 
-  const Content = (
-    <ModalContent>
-      {list.map((info, index) => (
-        <Wallet {...info} key={index} onClick={onSelect} />
-      ))}
-    </ModalContent>
-  );
-
   return (
     <Modal
       title={i18n.t('Connect Wallets')}
       open={open}
-      content={Content}
       onClose={onClose}
-      containerStyle={{ width: '75%', maxWidth: '30rem', height: '60%' }}
-    />
+      containerStyle={{ width: '75%', maxWidth: '30rem', height: '60%' }}>
+      <ModalContent>
+        {list.map((info) => (
+          <Wallet {...info} key={info.title} onClick={onSelect} />
+        ))}
+      </ModalContent>
+    </Modal>
   );
 }

package/src/containers/ConnectWalletsModal/mockData.ts

@@ -1,134 +1,118 @@
-import { WalletInfo, WalletState } from '../../types/wallet';
+import { WalletInfo, WalletState } from '../../components';
 import { WalletTypes } from '@rango-dev/wallets-shared';
 
 export const walletsInfo: WalletInfo[] = [
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.CONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.CONNECTING,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.NOT_INSTALLED,
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
-    installLink:
-      'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
+
+    link: 'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.CONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
-    name: 'Coinbase',
+    title: 'Coinbase',
     state: WalletState.DISCONNECTED,
-    installLink: '',
+    link: '',
     type: WalletTypes.COINBASE,
-    showOnMobile: true,
   },
 ];

package/src/containers/History/types.tsx

@@ -1,47 +1 @@
-import {
-  CosmosTransaction,
-  EvmTransaction,
-  SolanaTransaction,
-  SwapExplorerUrl,
-  SwapperStatusStep,
-  Transfer,
-} from 'rango-sdk';
-import { PendingSwapNetworkStatus, StepStatus } from '../../types/swaps';
 export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-
-export type PendingSwapStep = {
-  id: number;
-  fromBlockchain: string;
-  fromSymbol: string;
-  fromSymbolAddress: string | null;
-  fromDecimals: number;
-  fromAmountPrecision: string | null;
-  fromAmountMinValue: string | null;
-  fromAmountMaxValue: string | null;
-  fromLogo: string;
-  fromBlockchainLogo: string;
-  toBlockchainLogo: string;
-  toBlockchain: string;
-  toSymbol: string;
-  toSymbolAddress: string | null;
-  toDecimals: number;
-  toLogo: string;
-  swapperId: string;
-  swapperLogo: string;
-  swapperType: string;
-  feeInUsd: string;
-  expectedOutputAmountHumanReadable: string | null;
-  startTransactionTime: number;
-  outputAmount: string;
-  status: StepStatus;
-  networkStatus: PendingSwapNetworkStatus | null;
-  executedTransactionId: string | null;
-  explorerUrl: SwapExplorerUrl[] | null;
-  evmApprovalTransaction: EvmTransaction | null;
-  evmTransaction: EvmTransaction | null;
-  cosmosTransaction: CosmosTransaction | null;
-  transferTransaction: Transfer | null;
-  solanaTransaction: SolanaTransaction | null;
-  diagnosisUrl: string | null;
-  internalSteps: SwapperStatusStep[] | null;
-};

package/src/containers/HomePanel/HomePanel.tsx

@@ -1,19 +1,19 @@
+import type { ConnectedWallet } from '../..';
+import type { LoadingStatus, TokenWithBalance } from '../../types/meta';
+import type { BestRouteResponse, BlockchainMeta, SwapResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
 import {
   Alert,
-  BestRoute,
   BottomLogo,
   Button,
-  styled,
-  Typography,
   Header,
-  HeaderButtons,
   TokenInfo,
-  ConnectedWallet,
+  Typography,
 } from '../..';
-import React from 'react';
-import { i18n } from '@lingui/core';
-import { BestRouteResponse, BlockchainMeta, SwapResult } from 'rango-sdk';
-import { LoadingStatus, TokenWithBalance } from '../../types/meta';
+import { styled } from '../../theme';
 
 const Container = styled('div', {
   display: 'flex',
@@ -48,8 +48,8 @@ interface HomePanelProps {
   fetchBestRoute: () => void;
   onClickHistory: () => void;
   onClickSettings: () => void;
-  fromChain: BlockchainMeta | null;
-  toChain: BlockchainMeta | null;
+  fromBlockchain: BlockchainMeta | null;
+  toBlockchain: BlockchainMeta | null;
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
   setInputAmount: (amount: string) => void;
@@ -83,14 +83,13 @@ interface HomePanelProps {
   showPercentageChange: boolean;
 }
 
+/**
+ * @deprecated Will be removed in v2
+ */
 export function HomePanel({
   bestRoute,
-  bestRouteError,
-  fetchBestRoute,
-  onClickHistory,
-  onClickSettings,
-  fromChain,
-  toChain,
+  fromBlockchain,
+  toBlockchain,
   fromToken,
   toToken,
   setInputAmount,
@@ -107,46 +106,31 @@ export function HomePanel({
   onChainClick,
   onTokenClick,
   connectedWallets,
-  highFee,
   errorMessage,
   hasLimitError,
   swap,
   fromAmountRangeError,
   recommendation,
-  totalFeeInUsd,
   swithFromAndToComponent,
   percentageChange,
   tokenBalanceReal,
   tokenBalance,
-  totalTime,
-  bestRouteData,
   swapFromAmount,
   showPercentageChange,
 }: HomePanelProps) {
   return (
     <Container>
-      <Header
-        title={i18n.t('SWAP')}
-        suffix={
-          <HeaderButtons
-            onClickRefresh={
-              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
-            }
-            onClickHistory={onClickHistory}
-            onClickSettings={onClickSettings}
-          />
-        }
-      />
+      <Header title={i18n.t('SWAP')} suffix={<></>} />
       <FromContainer>
         <>
           <TokenInfo
             type="From"
-            chain={fromChain}
+            chain={fromBlockchain}
             token={fromToken}
             onAmountChange={setInputAmount}
             inputAmount={inputAmount}
-            fromChain={fromChain}
-            toChain={toChain}
+            fromBlockchain={fromBlockchain}
+            toBlockchain={toBlockchain}
             loadingStatus={loadingStatus}
             inputUsdValue={inputUsdValue}
             fromToken={fromToken}
@@ -164,13 +148,13 @@ export function HomePanel({
       </FromContainer>
       <TokenInfo
         type="To"
-        chain={toChain}
+        chain={toBlockchain}
         token={toToken}
         outputAmount={outputAmount}
         percentageChange={percentageChange}
         outputUsdValue={outputUsdValue}
-        fromChain={fromChain}
-        toChain={toChain}
+        fromBlockchain={fromBlockchain}
+        toBlockchain={toBlockchain}
         loadingStatus={loadingStatus}
         inputUsdValue={inputUsdValue}
         fromToken={fromToken}
@@ -185,28 +169,19 @@ export function HomePanel({
         tokenBalance={tokenBalance}
         showPercentageChange={showPercentageChange}
       />
-      {showBestRoute && (
-        <BestRouteContainer>
-          <BestRoute
-            error={bestRouteError}
-            loading={fetchingBestRoute}
-            data={bestRouteData}
-            totalFee={totalFeeInUsd}
-            feeWarning={highFee}
-            totalTime={totalTime}
-          />
-        </BestRouteContainer>
-      )}
+      {showBestRoute && <BestRouteContainer></BestRouteContainer>}
       {(errorMessage || hasLimitError(bestRoute)) && (
         <Alerts>
           {errorMessage && <Alert type="error">{errorMessage}</Alert>}
           {hasLimitError(bestRoute) && (
             <Alert type="error" title={`${swap?.swapperId} Limit`}>
               <>
-                <Typography variant="body2">
+                <Typography variant="body" size="small">
                   {`${fromAmountRangeError}, Yours: ${swapFromAmount} ${swap?.from.symbol}`}
                 </Typography>
-                <Typography variant="body2">{recommendation}</Typography>
+                <Typography variant="body" size="small">
+                  {recommendation}
+                </Typography>
               </>
             </Alert>
           )}
@@ -215,7 +190,6 @@ export function HomePanel({
       <Footer>
         <Button
           type="primary"
-          align="grow"
           size="large"
           disabled={swapButtonDisabled}
           onClick={swapButtonClick}>