@rango-dev/ui 0.1.10-next.102

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,95 @@
+import React from 'react';
+import { containsText } from '../../helper';
+import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+import { TokenList } from '../TokenList';
+import { TokenWithAmount } from '../TokenList/TokenList';
+import { LoadingStatus } from '../../types/meta';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { styled } from '../../theme';
+
+const Container = styled('div', {
+  flex: '1',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%',
+});
+export interface PropTypes {
+  list: TokenWithAmount[];
+  type?: 'Source' | 'Destination';
+  selected: TokenWithAmount | null;
+  onChange: (token: TokenWithAmount) => void;
+  hasHeader?: boolean;
+  multiSelect?: boolean;
+  onBack?: () => void;
+  selectedList?: TokenWithAmount[] | 'all';
+  loadingStatus: LoadingStatus;
+}
+
+const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
+  list.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );
+
+export function TokenSelector(props: PropTypes) {
+  const {
+    list,
+    type,
+    selected,
+    onChange,
+    hasHeader,
+    multiSelect,
+    selectedList,
+    onBack,
+    loadingStatus,
+  } = props;
+
+  return (
+    <SecondaryPage
+      textField={true}
+      textFieldPlaceholder="Search Blockchain By Name"
+      title={`Select ${type} Token`}
+      hasHeader={hasHeader}
+      onBack={onBack}
+    >
+      {(searchedFor) => {
+        const filteredTokens = filterTokens(list, searchedFor);
+        return (
+          <Container>
+            {loadingStatus === 'loading' && (
+              <LoaderContainer>
+                <Spinner size={24} />
+              </LoaderContainer>
+            )}
+            {loadingStatus === 'failed' && <LoadingFailedAlert />}
+            {loadingStatus === 'success' && (
+              <>
+                {filteredTokens.length ? (
+                  <TokenList
+                    searchedText={searchedFor}
+                    list={filteredTokens}
+                    selected={selected}
+                    selectedList={selectedList}
+                    multiSelect={multiSelect}
+                    onChange={onChange}
+                  />
+                ) : (
+                  <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
+                )}
+              </>
+            )}
+          </Container>
+        );
+      }}
+    </SecondaryPage>
+  );
+}

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,116 @@
+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',
+      },
+    },
+  },
+});
+
+const ChildrenWrapper = styled('div', {
+  display: 'inline-block',
+});
+
+export function Tooltip({
+  children,
+  content,
+  side = 'top',
+  color = 'gray',
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root>
+        <TooltipTrigger asChild>
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </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,72 @@
+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',
+        'body3',
+        '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="body3">
+      Body 3
+    </Typography>
+    <Typography {...props} variant="caption">
+      Caption
+    </Typography>
+  </div>
+);

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,216 @@
+import { CSSProperties } from '@stitches/react';
+import React, { PropsWithChildren } from 'react';
+import { styled } from '../../theme';
+
+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',
+        },
+      },
+      body1: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@md': {
+          fontSize: '$16',
+        },
+        '@lg': {
+          fontSize: '$18',
+        },
+      },
+      body2: {
+        fontSize: '$14',
+        fontWeight: '$400',
+        '@lg': {
+          fontSize: '$16',
+        },
+      },
+      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',
+      },
+    },
+  },
+});
+
+export interface PropTypes {
+  variant:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | '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;
+}
+
+export function Typography({
+  children,
+  className,
+  color,
+  ...props
+}: PropsWithChildren<PropTypes>) {
+  const customCss = color
+    ? {
+        color: color.startsWith('$') ? color : `$${color}`,
+      }
+    : {
+        color: '$foreground',
+      };
+
+  return (
+    <TypographyContainer
+      className={`_typography _text ${className || ''}`}
+      css={customCss}
+      {...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,62 @@
+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;
+
+type PropTypes = {
+  itemCount: number;
+  hasNextPage: boolean;
+  loadNextPage: () => void;
+  Item: VirtualizedListItem;
+  innerElementType: ReactElementType | undefined;
+  size: number;
+};
+
+export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
+  const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
+    props;
+
+  const isItemLoaded = (index: number) => !hasNextPage || index < itemCount;
+
+  return (
+    <AutoSizer>
+      {({ width, height }) => (
+        <InfiniteLoader
+          isItemLoaded={isItemLoaded}
+          itemCount={hasNextPage ? itemCount + 1 : itemCount}
+          loadMoreItems={loadNextPage}
+          threshold={1}
+        >
+          {({ onItemsRendered, ref }) => {
+            return (
+              <List
+                innerElementType={innerElementType}
+                ref={ref}
+                itemSize={() => size}
+                itemCount={itemCount}
+                height={height || 0}
+                width={width || 0}
+                onItemsRendered={onItemsRendered}
+              >
+                {({ index, style }) =>
+                  isItemLoaded(index) ? (
+                    <Item index={index} style={style as CSSProperties} />
+                  ) : null
+                }
+              </List>
+            );
+          }}
+        </InfiniteLoader>
+      )}
+    </AutoSizer>
+  );
+}

package/src/components/Wallet/State.tsx

@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+import { styled } from '../../theme';
+import { DisconnectIcon, DownloadIcon } from '../Icon';
+import { Spinner } from '../Spinner';
+import { WalletState } from '../../types/wallet';
+import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
+
+const StateIconContainer = styled('span', {
+  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 && <DisconnectIcon />}
+      </StateIconContainer>
+    )}
+  </Fragment>
+);