@rango-dev/ui 0.1.10-next.69

package/src/components/TokenSelector/TokenSelector.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { TokenSelector, PropTypes } from './TokenSelector';
+import { tokensMeta } from '../TokenList/mockData';
+
+export default {
+  title: 'Token Selector',
+  component: TokenSelector,
+  argTypes: {
+    type: {
+      defaultValue: 'Source',
+    },
+  },
+} as ComponentMeta<typeof TokenSelector>;
+
+export const Main = (args: PropTypes) => (
+  <TokenSelector {...args} list={tokensMeta} selected={tokensMeta[0]} />
+);

package/src/components/TokenSelector/TokenSelector.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+import { TokenList } from '../TokenList';
+import { TokenWithAmount } from '../TokenList/TokenList';
+
+export interface PropTypes {
+  list: TokenWithAmount[];
+  type?: 'Source' | 'Destination';
+  selected: TokenWithAmount | null;
+  onChange: (token: TokenWithAmount) => void;
+  onBack?: () => void;
+  hasHeader?: boolean;
+}
+
+export function TokenSelector(props: PropTypes) {
+  const { list, type, selected, onChange, onBack, hasHeader } = props;
+
+  return (
+    <SecondaryPage
+      textField={true}
+      textFieldPlaceholder="Search Blockchain By Name"
+      title={`Select ${type} Token`}
+      hasHeader={hasHeader}
+      onBack={onBack}
+      Content={({ searchedFor }) => (
+        <TokenList
+          searchedText={searchedFor}
+          list={list}
+          selected={selected}
+          onChange={onChange}
+        />
+      )}
+    />
+  );
+}

package/src/components/TokenSelector/index.ts

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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Tooltip, PropTypes } from './Tooltip';
+import { AddWalletIcon } from '../Icon';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    content: {
+      name: 'content',
+      control: { type: 'text' },
+      defaultValue: 'I am a tooltip',
+    },
+    side: {
+      name: 'side',
+      control: { type: 'select' },
+      options: ['top', 'right', 'bottom', 'left'],
+      defaultValue: 'top',
+    },
+    color: {
+      name: 'color',
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'error',
+        'warning',
+        'success',
+        'black',
+        'white',
+        'gray',
+      ],
+      defaultValue: 'gray',
+    },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+export const Main = (props: PropTypes) => (
+  <div
+    style={{
+      height: 300,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Tooltip {...props}>
+      <AddWalletIcon size={24} />
+    </Tooltip>
+  </div>
+);

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,110 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { styled } from '../../theme';
+import React, { PropsWithChildren } from 'react';
+
+export interface PropTypes {
+  content: string;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  color?:
+    | 'primary'
+    | 'error'
+    | 'warning'
+    | 'success'
+    | 'gray'
+    | 'white'
+    | 'black';
+}
+const TooltipTrigger = styled(RadixTooltip.Trigger, {
+  border: 0,
+  padding: 0,
+
+  backgroundColor: 'transparent',
+});
+const TooltipContent = styled(RadixTooltip.Content, {
+  borderRadius: '$5',
+  padding: '$4 $8',
+  fontSize: '$14',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: '$primary',
+        color: '$white',
+      },
+      error: {
+        backgroundColor: '$error',
+        color: '$white',
+      },
+      warning: {
+        backgroundColor: '$warning',
+        color: '$white',
+      },
+      success: {
+        backgroundColor: '$success',
+        color: '$white',
+      },
+      gray: {
+        backgroundColor: '$neutrals300',
+        color: '$black',
+      },
+      black: {
+        backgroundColor: '$black',
+        color: '$white',
+      },
+      white: {
+        backgroundColor: '$white',
+        color: '$black',
+      },
+    },
+  },
+});
+const TooltipArrow = styled(RadixTooltip.Arrow, {
+  variants: {
+    color: {
+      primary: {
+        fill: '$primary',
+      },
+      error: {
+        fill: '$error',
+      },
+      warning: {
+        fill: '$warning',
+      },
+      success: {
+        fill: '$success',
+      },
+      gray: {
+        fill: '$neutrals300',
+      },
+      black: {
+        fill: '$black',
+      },
+      white: {
+        fill: '$white',
+      },
+    },
+  },
+});
+
+export function Tooltip({
+  children,
+  content,
+  side = 'top',
+  color = 'gray',
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root>
+        <TooltipTrigger>{children}</TooltipTrigger>
+        <RadixTooltip.Portal>
+          <TooltipContent color={color} side={side} sideOffset={5}>
+            {content}
+            <TooltipArrow color={color} />
+          </TooltipContent>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+}

package/src/components/Tooltip/index.ts

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

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Typography, PropTypes } from './Typography';
+
+export default {
+  title: 'Components/Typography',
+  component: Typography,
+  argTypes: {
+    variant: {
+      name: 'variant',
+      control: { type: 'select' },
+      options: [
+        'body1',
+        'body2',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'caption',
+      ],
+      defaultValue: 'h1',
+    },
+    align: {
+      name: 'align',
+      control: { type: 'select' },
+      options: ['center', 'left', 'right'],
+    },
+    noWrap: {
+      name: 'noWrap',
+      control: { type: 'boolean' },
+    },
+  },
+} as ComponentMeta<typeof Typography>;
+
+export const Main = (props: PropTypes) => (
+  <div>
+    <Typography {...props} variant="h1">
+      Heading 1
+    </Typography>
+    <Typography {...props} variant="h2">
+      Heading 2
+    </Typography>
+    <Typography {...props} variant="h3">
+      Heading 3
+    </Typography>
+    <Typography {...props} variant="h4">
+      Heading 4
+    </Typography>
+    <Typography {...props} variant="h5">
+      Heading 5
+    </Typography>
+    <Typography {...props} variant="h6">
+      Heading 6
+    </Typography>
+    <Typography {...props} variant="body1">
+      Body 1
+    </Typography>
+    <Typography {...props} variant="body2">
+      Body 2
+    </Typography>
+    <Typography {...props} variant="caption">
+      Caption
+    </Typography>
+  </div>
+);

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,199 @@
+import React, { PropsWithChildren } from 'react';
+import { styled } from '../../theme';
+
+const TypographyContainer = styled('span', {
+  margin: 0,
+  color: '$foreground',
+  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',
+        '@md': {
+          fontSize: '$18',
+        },
+        '@lg': {
+          fontSize: '$20',
+        },
+      },
+      h6: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$16',
+        },
+        '@lg': {
+          fontSize: '$18',
+        },
+      },
+      body1: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@md': {
+          fontSize: '$16',
+        },
+        '@lg': {
+          fontSize: '$18',
+        },
+      },
+      body2: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@lg': {
+          fontSize: '$16',
+        },
+      },
+      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',
+      },
+    },
+  },
+});
+
+export interface PropTypes {
+  variant:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'body1'
+    | 'body2'
+    | '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;
+}
+
+export function Typography({
+  children,
+  ...props
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <TypographyContainer className="_typography" {...props}>
+      {children}
+    </TypographyContainer>
+  );
+}
+
+Typography.toString = () => '._typography';

package/src/components/Typography/index.ts

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

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -0,0 +1,78 @@
+import React, { PropsWithChildren, useRef } 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;
+
+type PropTypes = {
+  itemCount: number;
+  hasNextPage: boolean;
+  isNextPageLoading: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  loadNextPage: () => void;
+  Item: VirtualizedListItem;
+  innerElementType: ReactElementType | undefined;
+  size: number;
+};
+
+export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
+  const {
+    itemCount,
+    hasNextPage,
+    isNextPageLoading,
+    loadNextPage,
+    Item,
+    innerElementType,
+    size,
+  } = props;
+  const listRef = useRef<any>(null);
+
+  const isItemLoaded = (index: number) => !hasNextPage || index < itemCount;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={isItemLoaded}
+      itemCount={hasNextPage ? itemCount + 1 : itemCount}
+      loadMoreItems={
+        isNextPageLoading
+          ? () => {
+              // do nothing
+            }
+          : loadNextPage
+      }
+      threshold={1}
+    >
+      {({ onItemsRendered }) => {
+        return (
+          <AutoSizer>
+            {({ width, height }) => (
+              <List
+                innerElementType={innerElementType}
+                ref={listRef}
+                itemSize={() => size}
+                itemCount={itemCount}
+                height={height}
+                width={width}
+                onItemsRendered={onItemsRendered}
+              >
+                {({ index, style }) =>
+                  isItemLoaded(index) ? (
+                    <Item index={index} style={style as CSSProperties} />
+                  ) : null
+                }
+              </List>
+            )}
+          </AutoSizer>
+        );
+      }}
+    </InfiniteLoader>
+  );
+}

package/src/components/Wallet/State.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import { styled } from '../../theme';
+import { FilledCircle } from '../common';
+import { DownloadIcon } from '../Icon';
+import { Spinner } from '../Spinner';
+import { WalletState } from '../../types/wallet';
+import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
+
+const StateIconContainer = styled('span', {
+  width: '$28',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const State = ({
+  walletState,
+  installLink,
+}: {
+  walletState: WalletState;
+  installLink: InstallObjects | string;
+}) => (
+  <Fragment>
+    {walletState !== WalletState.DISCONNECTED && (
+      <StateIconContainer>
+        {walletState === WalletState.NOT_INSTALLED && (
+          <a href={detectInstallLink(installLink)} target="_blank">
+            <DownloadIcon size={24} color="success" />
+          </a>
+        )}
+        {walletState === WalletState.CONNECTING && <Spinner />}
+        {walletState === WalletState.CONNECTED && <FilledCircle />}
+      </StateIconContainer>
+    )}
+  </Fragment>
+);

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { PropTypes, Wallet } from './Wallet';
+import { WalletState } from '../../types/wallet';
+
+export default {
+  title: 'Wallet chip',
+  component: Wallet,
+  argTypes: {
+    title: {
+      name: 'title',
+      type: 'string',
+      defaultValue: 'Coinbase',
+    },
+    image: {
+      name: 'image',
+      type: 'string',
+      defaultValue: 'https://app.rango.exchange/wallets/coinbase.svg',
+    },
+    disabled: {
+      name: 'disabled',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    state: {
+      name: 'wallet state',
+      control: {
+        type: 'select',
+      },
+      options: Object.values(WalletState),
+    },
+  },
+} as ComponentMeta<typeof Wallet>;
+
+export const Main = (args: PropTypes) => <Wallet {...args}></Wallet>;

package/src/components/Wallet/Wallet.tsx

@@ -0,0 +1,42 @@
+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';
+
+const WalletImage = styled('img', {
+  width: '$24',
+  height: '$24',
+  marginRight: '$12',
+});
+
+export type PropTypes = WalletInfo & {
+  onClick: (walletType: WalletType) => void;
+};
+
+export function Wallet(props: PropTypes) {
+  const { name, type, image, state, onClick, installLink } = props;
+  return (
+    <Button
+      type={state === WalletState.CONNECTED ? 'primary' : undefined}
+      disabled={!state}
+      onClick={() => {
+        if (state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(installLink), '_blank');
+        } else onClick(type);
+      }}
+      align="start"
+      variant="outlined"
+      size="large"
+      prefix={<WalletImage src={image} />}
+      suffix={<State walletState={state} installLink={installLink} />}
+    >
+      <Typography variant="h5" noWrap={false}>
+        {name}
+      </Typography>
+    </Button>
+  );
+}

package/src/components/Wallet/index.ts

@@ -0,0 +1 @@
+export * from './Wallet';

package/src/components/common/FilledCircle.tsx

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

package/src/components/common/index.ts

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