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

package/src/components/Wallet/ClickableWallet.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Wallet } from './Wallet';
+import { WalletState } from './Wallet.types';
+
+const meta: Meta<typeof Wallet> = {
+  component: Wallet,
+};
+
+export default meta;
+type Story = StoryObj<typeof Wallet>;
+
+export const Main: Story = {
+  args: {
+    title: 'Trust Wallet',
+    image: 'https://api.rango.exchange/blockchains/zksync.png',
+    onClick: (type) => {
+      console.log('Clicked on', type);
+    },
+    type: 'wallet-connect-2',
+    state: WalletState.CONNECTED,
+  },
+};

package/src/components/Wallet/ClickableWallet.tsx

@@ -0,0 +1,71 @@
+import type { WalletPropTypes } from './Wallet.types';
+
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { Skeleton } from '../Skeleton';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+import { makeInfo } from './Wallet.helpers';
+import {
+  LoadingButton,
+  Text,
+  Title,
+  WalletButton,
+  WalletImageContainer,
+} from './Wallet.styles';
+import { WalletState } from './Wallet.types';
+
+function Wallet(props: WalletPropTypes) {
+  const { title, type, image, onClick, isLoading } = props;
+  const info = makeInfo(props.state);
+
+  if (isLoading) {
+    return (
+      <LoadingButton>
+        <Skeleton variant="circular" width={35} height={35} />
+        <Divider size={12} />
+        <Skeleton variant="text" width={85} size="medium" />
+        <Divider size={4} />
+        <Skeleton variant="text" width={64} size="medium" />
+      </LoadingButton>
+    );
+  }
+
+  return (
+    <Tooltip container={props.container} content={info.tooltipText} side="top">
+      <WalletButton
+        disabled={props.state == WalletState.CONNECTING}
+        onClick={() => {
+          if (props.state === WalletState.NOT_INSTALLED) {
+            window.open(detectInstallLink(props.link), '_blank');
+          } else {
+            onClick(type);
+          }
+        }}>
+        <WalletImageContainer>
+          <Image src={image} size={35} />
+        </WalletImageContainer>
+
+        <Text>
+          <Title variant="label" size="medium" noWrap={false}>
+            {title}
+          </Title>
+
+          <Typography
+            variant="body"
+            size="xsmall"
+            noWrap={false}
+            color={info.color}>
+            {info.description}
+          </Typography>
+        </Text>
+      </WalletButton>
+    </Tooltip>
+  );
+}
+
+export default Wallet;

package/src/components/Wallet/Content.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { ContentProps } from './Wallet.types';
+import { Typography } from '../Typography';
+import { Image } from '../common';
+import { Text, WalletImageContainer } from './Wallet.styles';
+
+function Content(props: ContentProps) {
+  const { image, title, description, descriptionColor = 'neutral600' } = props;
+  return (
+    <>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
+
+      <Text>
+        <Typography variant="label" size="medium" noWrap={false}>
+          {title}
+        </Typography>
+
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={descriptionColor}>
+          {description}
+        </Typography>
+      </Text>
+    </>
+  );
+}
+
+export default Content;

package/src/components/Wallet/SelectableWallet.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SelectableWallet } from './SelectableWallet';
+
+const meta: Meta<typeof SelectableWallet> = {
+  component: SelectableWallet,
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectableWallet>;
+
+export const Main: Story = {
+  args: {
+    title: 'Trust Wallet',
+    description: '0x......',
+    image: 'https://api.rango.exchange/blockchains/zksync.png',
+    onClick: (type) => {
+      console.log('Clicked on', type);
+    },
+    selected: true,
+    type: 'wallet-connect-2',
+  },
+};

package/src/components/Wallet/SelectableWallet.tsx

@@ -0,0 +1,49 @@
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { Image } from '../common';
+import { Typography } from '../Typography';
+
+import { makeInfo } from './Wallet.helpers';
+import {
+  Text,
+  Title,
+  WalletButton,
+  WalletImageContainer,
+} from './Wallet.styles';
+import { type SelectablePropTypes, WalletState } from './Wallet.types';
+
+export function SelectableWallet(props: SelectablePropTypes) {
+  const { title, type, image, onClick, selected, description, state } = props;
+  const info = makeInfo(props.state);
+  return (
+    <WalletButton
+      selected={selected}
+      disabled={props.state == WalletState.CONNECTING}
+      onClick={() => {
+        if (props.state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(props.link), '_blank');
+        } else {
+          onClick(type);
+        }
+      }}>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
+
+      <Text>
+        <Title variant="label" size="medium" noWrap={false}>
+          {title}
+        </Title>
+
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={state === WalletState.CONNECTED ? 'neutral900' : info.color}>
+          {description || info.description}
+        </Typography>
+      </Text>
+    </WalletButton>
+  );
+}

package/src/components/Wallet/Wallet.helpers.ts

@@ -0,0 +1,36 @@
+import type { Info } from './Wallet.types';
+
+import { i18n } from '@lingui/core';
+
+import { WalletState } from './Wallet.types';
+
+export function makeInfo(state: WalletState): Info {
+  switch (state) {
+    case WalletState.CONNECTED:
+      return {
+        color: 'success500',
+        description: i18n.t('Connected'),
+        tooltipText: i18n.t('Disconnect'),
+      };
+    case WalletState.NOT_INSTALLED:
+      return {
+        color: 'info500',
+        description: i18n.t('Install'),
+        tooltipText: i18n.t('Install'),
+      };
+    case WalletState.CONNECTING:
+      return {
+        color: 'neutral800',
+        description: i18n.t('Connecting...'),
+        tooltipText: i18n.t('Connecting'),
+      };
+    case WalletState.DISCONNECTED:
+      return {
+        color: 'neutral800',
+        description: i18n.t('Disconnected'),
+        tooltipText: i18n.t('Connect'),
+      };
+    default:
+      throw new Error(i18n.t('you need to pass a correct state to Wallet.'));
+  }
+}

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

@@ -0,0 +1,76 @@
+import { darkTheme, styled } from '../../theme';
+import { Typography } from '../Typography';
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});
+
+export const Title = styled(Typography, {
+  textTransform: 'capitalize',
+});
+
+export const Text = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '$10',
+});
+
+export const WalletButton = styled('button', {
+  borderRadius: '$xm',
+  padding: '$10',
+  border: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: 110,
+  position: 'relative',
+  fontFamily: 'inherit',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        $$outline: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$outline: '$colors$secondary400',
+        },
+        outlineColor: '$$outline',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const LoadingButton = styled('div', {
+  borderRadius: '$xm',
+  padding: '$10 0',
+  border: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '$neutral100',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 110,
+});

package/src/components/Wallet/Wallet.tsx

@@ -1,76 +1,2 @@
-import { detectInstallLink, WalletType } from '@rango-dev/wallets-shared';
-import React from 'react';
-
-import { styled } from '../../theme';
-import { WalletInfo, WalletState } from '../../types/wallet';
-import { Button } from '../Button/Button';
-import { Typography } from '../Typography';
-import { State } from './State';
-import { Image } from '../common';
-
-const WalletImageContainer = styled('div', {
-  paddingRight: '$12',
-  '& img': {
-    borderRadius: '50%',
-  },
-});
-
-const Text = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const ExtendedButton = styled(Button, {
-  variants: {
-    type: {
-      primary: {
-        outline: '1px solid $primary',
-        borderColor: '$primary',
-
-        '&:hover': {
-          borderColor: '$primary',
-        },
-      },
-    },
-  },
-});
-
-export type PropTypes = WalletInfo & {
-  onClick: (walletType: WalletType) => void;
-};
-
-export function Wallet(props: PropTypes) {
-  const { name, type, image, state, onClick, installLink } = props;
-
-  return (
-    <ExtendedButton
-      type={state === WalletState.CONNECTED ? 'primary' : undefined}
-      disabled={state == WalletState.CONNECTING}
-      onClick={() => {
-        if (state === WalletState.NOT_INSTALLED) {
-          window.open(detectInstallLink(installLink), '_blank');
-        } else onClick(type);
-      }}
-      align="start"
-      variant="outlined"
-      size="large"
-      prefix={
-        <WalletImageContainer>
-          <Image src={image} size={24} />
-        </WalletImageContainer>
-      }
-      suffix={<State walletState={state} installLink={installLink} />}
-    >
-      <Text>
-        <Typography variant="h5" noWrap={false}>
-          {name}
-        </Typography>
-        {state === WalletState.CONNECTED ? (
-          <Typography variant="caption" noWrap={false} color="primary">
-            Connected
-          </Typography>
-        ) : null}
-      </Text>
-    </ExtendedButton>
-  );
-}
+export { default as Wallet } from './ClickableWallet';
+export { SelectableWallet } from './SelectableWallet';

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

@@ -0,0 +1,66 @@
+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;
+  container?: HTMLElement;
+}
+
+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

@@ -1,8 +1,11 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
+export * from './IconButton';
+export * from './Collapsible';
 export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
@@ -11,19 +14,19 @@ 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 './SelectableCategoryList';
 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 +35,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>
   );
 }