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

package/src/components/Typography/Typography.tsx

@@ -1,200 +1,9 @@
-import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
-import { styled } from '../../theme';
+import type { PropTypes } from './Typography.types';
+import type { PropsWithChildren } from 'react';
 
-const TypographyContainer = styled('span', {
-  margin: 0,
-  display: 'inline-block',
-  variants: {
-    variant: {
-      h1: {
-        fontSize: '$36',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$40',
-        },
-        '@lg': {
-          fontSize: '$48',
-        },
-      },
-      h2: {
-        fontSize: '$32',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$36',
-        },
-        '@lg': {
-          fontSize: '$40',
-        },
-      },
-      h3: {
-        fontSize: '$20',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$24',
-        },
-        '@lg': {
-          fontSize: '$32',
-        },
-      },
-      h4: {
-        fontSize: '$18',
-        fontWeight: '$600',
-        '@md': {
-          fontSize: '$20',
-        },
-        '@lg': {
-          fontSize: '$24',
-        },
-      },
-      h5: {
-        fontSize: '$16',
-        fontWeight: '$600',
-      },
-      h6: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      title: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$15',
-        }
-      },
-      body1: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      body2: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        // '@lg': {
-        //   fontSize: '$14',
-        // },
-      },
-      body3: {
-        fontSize: '$12',
-        fontWeight: '$400',
-      },
-      caption: {
-        fontSize: '$10',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$12',
-        },
-      },
-    },
-    align: {
-      center: {
-        textAlign: 'center',
-      },
-      left: {
-        textAlign: 'left',
-      },
-      right: {
-        textAlign: 'right',
-      },
-    },
-    noWrap: {
-      true: {
-        whiteSpace: 'nowrap',
-      },
-    },
-    ml: {
-      2: {
-        marginLeft: '$2',
-      },
-      4: {
-        marginLeft: '$4',
-      },
-      8: {
-        marginLeft: '$8',
-      },
-      12: {
-        marginLeft: '$12',
-      },
-    },
-    mt: {
-      2: {
-        marginTop: '$2',
-      },
-      4: {
-        marginTop: '$4',
-      },
-      8: {
-        marginTop: '$8',
-      },
-      12: {
-        marginTop: '$12',
-      },
-    },
-    mr: {
-      2: {
-        marginRight: '$2',
-      },
-      4: {
-        marginRight: '$4',
-      },
-      8: {
-        marginRight: '$8',
-      },
-      12: {
-        marginRight: '$12',
-      },
-    },
-    mb: {
-      2: {
-        marginBottom: '$2',
-      },
-      4: {
-        marginBottom: '$4',
-      },
-      8: {
-        marginBottom: '$8',
-      },
-      12: {
-        marginBottom: '$12',
-      },
-    },
-  },
-});
+import React from 'react';
 
-export interface PropTypes {
-  variant:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'title'
-    | 'body1'
-    | 'body2'
-    | 'body3'
-    | 'caption';
-  align?: 'center' | 'left' | 'right';
-  noWrap?: boolean;
-  mt?: 2 | 4 | 8 | 12;
-  mb?: 2 | 4 | 8 | 12;
-  ml?: 2 | 4 | 8 | 12;
-  mr?: 2 | 4 | 8 | 12;
-  className?: string;
-  style?: CSSProperties;
-  color?: string;
-}
+import { TypographyContainer } from './Typography.styles';
 
 export function Typography({
   children,
@@ -209,16 +18,12 @@ export function Typography({
     : {
         color: '$foreground',
       };
-
   return (
     <TypographyContainer
       className={`_typography _text ${className || ''}`}
       css={customCss}
-      {...props}
-    >
+      {...props}>
       {children}
     </TypographyContainer>
   );
 }
-
-Typography.toString = () => '._typography';

package/src/components/Typography/Typography.types.tsx

@@ -0,0 +1,28 @@
+import type { TypographyContainer } from './Typography.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+type margin = 2 | 4 | 8 | 12;
+
+export interface PropTypes {
+  variant: BaseVariants;
+  size: BaseSizes;
+  align?: BaseAlign;
+  noWrap?: boolean;
+  // @depreacted It will be removed
+  mt?: margin;
+  // @depreacted It will be removed
+  mb?: margin;
+  // @depreacted It will be removed
+  ml?: margin;
+  // @depreacted It will be removed
+  mr?: margin;
+  className?: string;
+  style?: Stitches.CSSProperties;
+  color?: string;
+}

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -1,27 +1,15 @@
-import React, { PropsWithChildren } from 'react';
-import { ReactElementType, VariableSizeList as List } from 'react-window';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { CSSProperties } from '@stitches/react';
-
-export type VirtualizedListItem = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: CSSProperties | undefined;
-}) => JSX.Element | null;
+import type { PropTypes } from './VirtualizedList.types';
+import type { CSSProperties } from '@stitches/react';
+import type { PropsWithChildren } from 'react';
 
-type PropTypes = {
-  itemCount: number;
-  hasNextPage: boolean;
-  loadNextPage: () => void;
-  Item: VirtualizedListItem;
-  innerElementType: ReactElementType | undefined;
-  size: number;
-};
+import React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList as List } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
 
 export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
+  // TODO:  react/prop-types problem
+  // eslint-disable-next-line react/prop-types
   const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
     props;
 

package/src/components/VirtualizedList/VirtualizedList.types.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from '@stitches/react';
+import type { ReactElementType } from 'react-window';
+
+export type VirtualizedListItem = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: CSSProperties | undefined;
+}) => JSX.Element | null;
+
+export type PropTypes = {
+  itemCount: number;
+  hasNextPage: boolean;
+  loadNextPage: () => void;
+  Item: VirtualizedListItem;
+  innerElementType: ReactElementType | undefined;
+  size: number;
+};

package/src/components/VirtualizedList/index.ts

@@ -0,0 +1 @@
+export { VirtualizedList } from './VirtualizedList';

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 content={info.tooltipText} side="bottom">
+      <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,34 @@
+import type { Info } from './Wallet.types';
+
+import { WalletState } from './Wallet.types';
+
+export function makeInfo(state: WalletState): Info {
+  switch (state) {
+    case WalletState.CONNECTED:
+      return {
+        color: 'success500',
+        description: 'Connected',
+        tooltipText: 'Disconnect',
+      };
+    case WalletState.NOT_INSTALLED:
+      return {
+        color: 'info500',
+        description: 'Install',
+        tooltipText: 'Install',
+      };
+    case WalletState.CONNECTING:
+      return {
+        color: 'neutral800',
+        description: 'Connecting...',
+        tooltipText: 'Connecting',
+      };
+    case WalletState.DISCONNECTED:
+      return {
+        color: 'neutral800',
+        description: 'Disconnected',
+        tooltipText: 'Connect',
+      };
+    default:
+      throw new Error('you need to pass a correct state to Wallet.');
+  }
+}

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

@@ -0,0 +1,59 @@
+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',
+  backgroundColor: '$neutral100',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: 110,
+  position: 'relative',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        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';