@rango-dev/ui 0.1.10-next.69 → 0.1.10-next.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.69",
+  "version": "0.1.10-next.71",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -75,9 +75,11 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.1.11-next.69",
+    "@rango-dev/wallets-shared": "^0.1.11-next.71",
     "@stitches/react": "^1.2.8",
+    "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.11",
+    "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.8"
@@ -85,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "35fad4db1d491a9589a8215b0c4a4e2f541d07f2"
+  "gitHead": "a06369ceaa20017adb7b949401111552987a53ee"
 }

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { containsText } from '../../helpers';
 import { BlockchainMeta } from 'rango-sdk';
 import { BlockchainsList } from '../BlockchainsList';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
@@ -7,6 +6,7 @@ import { Alert } from '../Alert';
 import { Spinner } from '../Spinner';
 import { styled } from '../../theme';
 import { CSSProperties } from '@stitches/react';
+import { containsText } from '../../helper';
 
 const ListContainer = styled('div', {
   height: '450px',
@@ -27,12 +27,14 @@ export type LoadingStatus = 'loading' | 'success' | 'failed';
 export interface PropTypes {
   type?: 'Source' | 'Destination';
   list: BlockchainMeta[];
-  selected: BlockchainMeta | null;
+  selected?: BlockchainMeta | null;
   onChange: (blockchain: BlockchainMeta) => void;
   onBack?: () => void;
   loadingStatus: LoadingStatus;
   hasHeader?: boolean;
   listContainerStyle?: CSSProperties;
+  multiSelect?: boolean;
+  selectedList?: BlockchainMeta[] | 'all';
 }
 
 export function BlockchainSelector(props: PropTypes) {
@@ -45,14 +47,16 @@ export function BlockchainSelector(props: PropTypes) {
     loadingStatus,
     hasHeader,
     listContainerStyle,
+    multiSelect,
+    selectedList,
   } = props;
 
   return (
     <SecondaryPage
       textField={true}
+      hasHeader={hasHeader}
       textFieldPlaceholder="Search Blockchain By Name"
       title={`Select ${type} Network`}
-      hasHeader={hasHeader}
       onBack={onBack}
       Content={({ searchedFor }) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
@@ -75,6 +79,8 @@ export function BlockchainSelector(props: PropTypes) {
                   <BlockchainsList
                     list={filteredBlockchains}
                     selected={selected}
+                    multiSelect={multiSelect}
+                    selectedList={selectedList}
                     onChange={onChange}
                   />
                 ) : (

package/src/components/BlockchainsList/BlockchainsList.tsx

@@ -7,8 +7,10 @@ import { Typography } from '../Typography';
 
 export interface PropTypes {
   list: BlockchainMeta[];
-  selected: BlockchainMeta | null;
+  selected?: BlockchainMeta | null;
   onChange: (blockchain: BlockchainMeta) => void;
+  multiSelect?: boolean;
+  selectedList?: BlockchainMeta[] | 'all';
 }
 
 const ListContainer = styled('div', {
@@ -27,7 +29,7 @@ const Image = styled('img', {
 });
 
 export function BlockchainsList(props: PropTypes) {
-  const { list, onChange } = props;
+  const { list, onChange, multiSelect, selectedList } = props;
   const [selected, setSelected] = useState(props.selected);
 
   const changeSelectedBlockchain = (blockchain: BlockchainMeta) => {
@@ -35,18 +37,26 @@ export function BlockchainsList(props: PropTypes) {
     onChange(blockchain);
   };
 
+  const isSelect = (name: string) => {
+    if (multiSelect && selectedList) {
+      return (
+        selectedList === 'all' ||
+        selectedList.findIndex((item) => name === item.name) > -1
+      );
+    }
+    return name === selected?.name;
+  };
+
   return (
     <ListContainer>
       {list.map((blockchain, index) => {
         return (
           <Button
-            type={blockchain.name === selected?.name ? 'primary' : undefined}
+            type={isSelect(blockchain.name) ? 'primary' : undefined}
             variant="outlined"
             size="large"
             prefix={<Image src={blockchain.logo} />}
-            suffix={
-              blockchain.name === selected?.name ? <FilledCircle /> : undefined
-            }
+            suffix={isSelect(blockchain.name) ? <FilledCircle /> : undefined}
             align="start"
             onClick={changeSelectedBlockchain.bind(null, blockchain)}
             key={index}

package/src/components/Checkbox/Checkbox.tsx

@@ -31,7 +31,7 @@ export interface PropTypes {
   defaultChecked?: boolean;
   label: string;
   checked?: boolean;
-  onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+  onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
   name?: string;
 }

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { ColorPicker, PropTypes } from './ColorPicker';
+
+export default {
+  title: 'Components/ColorPicker',
+  component: ColorPicker,
+  argTypes: {
+    place: {
+      name: 'place',
+      control: { type: 'select' },
+      options: ['top', 'bottom', 'left', 'right'],
+      defaultValue: 'top',
+    },
+  },
+} as ComponentMeta<typeof ColorPicker>;
+
+export const Main = (args: PropTypes) => {
+  const [color, setColor] = useState<string>('#5FA425');
+  return (
+    <div
+      style={{
+        height: 600,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <ColorPicker
+        {...args}
+        color={color}
+        onChangeColor={(color) => setColor(color.hex)}
+      />
+    </div>
+  );
+};

package/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { ChromePicker, ColorResult } from 'react-color';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+const Container = styled('div', {
+  position: 'relative',
+});
+
+const Color = styled('div', {
+  border: '1px solid $neutrals300',
+  borderRadius: '$5',
+  width: '$32',
+  height: '$32',
+});
+const Cover = styled('div', {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px',
+});
+const Popover = styled('div', {
+  position: 'absolute',
+  zIndex: '2',
+  variants: {
+    place: {
+      top: {
+        top: '-241px',
+      },
+      bottom: {},
+      left: {
+        top: '-50%',
+        left: '-225px',
+      },
+      right: {
+        top: '-50%',
+        right: '-225px',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  color: string;
+  place: 'top' | 'bottom' | 'left' | 'right';
+  onChangeColor: (
+    color: ColorResult,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  label?: string;
+}
+
+export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
+  const [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);
+
+  return (
+    <Container>
+      <Typography mb={4} variant="body2">
+        {label}
+      </Typography>
+      <Button
+        variant="outlined"
+        prefix={<Color style={{ backgroundColor: color }} />}
+        fullWidth
+        align="start"
+        size="large"
+        onClick={() => setDisplayColorPicker((prev) => !prev)}
+      >
+        {color}
+      </Button>
+
+      {displayColorPicker && (
+        <Popover place={place}>
+          <Cover onClick={() => setDisplayColorPicker(false)} />
+          <ChromePicker color={color} onChange={onChangeColor} />
+        </Popover>
+      )}
+    </Container>
+  );
+}

package/src/components/ColorPicker/index.ts

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

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from '@stitches/react';
 import React from 'react';
-import { containsText } from '../../helpers';
+import { containsText } from '../../helper';
 import { styled } from '../../theme';
 import { LiquiditySource } from '../../types/meta';
 import { Button } from '../Button';

package/src/components/Modal/Modal.tsx

@@ -10,6 +10,7 @@ export interface PropTypes {
   open: boolean;
   onClose: () => void;
   content: React.ReactNode;
+  action?: React.ReactNode;
   containerStyle?: CSSProperties;
   contentStyle?: CSSProperties;
 }
@@ -33,8 +34,12 @@ const ModalContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   boxShadow: '$s',
+  zIndex: 10,
+});
+const Row = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
 });
-
 const ModalHeader = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
@@ -43,17 +48,22 @@ const ModalHeader = styled('div', {
   marginBottom: '$16',
 });
 
-const ContentContainer = styled('div', {
-  overflowY: 'scroll',
-});
+const ContentContainer = styled('div', {});
 
 export function Modal(props: PropTypes) {
-  const { title, content, open, onClose, containerStyle, contentStyle } = props;
+  const {
+    title,
+    content,
+    open,
+    onClose,
+    containerStyle,
+    action,
+    contentStyle,
+  } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) onClose();
   };
-
   return (
     <>
       {open &&
@@ -62,7 +72,10 @@ export function Modal(props: PropTypes) {
             <ModalContainer style={containerStyle}>
               <ModalHeader>
                 <Typography variant="h4">{title}</Typography>
-                <CloseIcon size={24} onClick={onClose} />
+                <Row>
+                  {action}
+                  <CloseIcon size={24} onClick={onClose} />
+                </Row>
               </ModalHeader>
               <ContentContainer style={contentStyle}>
                 {content}

package/src/components/Radio/Radio.tsx

@@ -23,9 +23,8 @@ const StyledRoot = styled(RadioGroup.Root, {
 const ItemContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginRight: '$24',
+  marginRight: '$8',
 });
-
 const StyledItem = styled(RadioGroup.Item, {
   backgroundColor: '$neutrals300',
   width: '20px',
@@ -38,6 +37,10 @@ const StyledItem = styled(RadioGroup.Item, {
   },
 });
 
+const Container = styled('div', {
+  display: 'flex',
+});
+
 const StyledIndicator = styled(RadioGroup.Indicator, {
   display: 'flex',
   alignItems: 'center',
@@ -56,7 +59,7 @@ const StyledIndicator = styled(RadioGroup.Indicator, {
 });
 
 const Label = styled('label', {
-  paddingLeft: '$16',
+  paddingLeft: '$8',
   cursor: 'pointer',
 });
 
@@ -66,13 +69,12 @@ export interface PropTypes {
   onChange: (value: string) => void;
   direction?: 'vertical' | 'horizontal';
   style?: CSSProperties;
-
 }
 
 export function Radio(props: PropTypes) {
   const { defaultValue, onChange, direction = 'vertical', style } = props;
   return (
-    <form>
+    <Container>
       <StyledRoot
         onValueChange={onChange}
         defaultValue={defaultValue}
@@ -90,6 +92,6 @@ export function Radio(props: PropTypes) {
           </ItemContainer>
         ))}
       </StyledRoot>
-    </form>
+    </Container>
   );
 }

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-// import { ChevronLeftIcon } from '@radix-ui/react-icons';
 import { styled } from '../../theme';
 import { AngleLeftIcon, SearchIcon } from '../Icon';
 import { TextField } from '../TextField/TextField';
@@ -16,7 +15,7 @@ export type PropTypes = (
       Content: React.ReactNode;
     }
 ) & {
-  title: string;
+  title?: string;
   onBack?: () => void;
   TopButton?: React.ReactNode;
   Footer?: React.ReactNode;

package/src/components/Spacer/Spacer.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React from 'react';
+import { Typography } from '../Typography';
 import { Spacer, PropTypes } from './Spacer';
 
 export default {
@@ -12,7 +13,19 @@ export default {
       options: [12, 16, 18, 20],
       defaultValue: 12,
     },
+    direction: {
+      name: 'direction',
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+      defaultValue: 'horizontal',
+    },
   },
 } as ComponentMeta<typeof Spacer>;
 
-export const Main = (props: PropTypes) => <Spacer {...props} />;
+export const Main = (props: PropTypes) => (
+  <div style={{ display: props.direction === 'horizontal' ? 'flex' : 'block' }}>
+    <Typography variant="body1">spacer </Typography>
+    <Spacer {...props} />
+    <Typography variant="body1">spacer</Typography>
+  </div>
+);

package/src/components/Spacer/Spacer.tsx

@@ -95,4 +95,4 @@ export interface PropTypes {
 
 export function Spacer({ size = 12, direction = 'horizontal' }: PropTypes) {
   return <SpacerContainer size={size} direction={direction} />;
-}
+}

package/src/components/SwapContainer/SwapContainer.tsx

@@ -9,6 +9,7 @@ const MainContainer = styled('div', {
   minWidth: '375px',
   width: '100%',
   backgroundColor: '$background',
+  height: 'fit-content',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',

package/src/components/TextField/TextField.tsx

@@ -77,7 +77,7 @@ const Input = styled('input', {
 });
 const Label = styled('label', {
   display: 'inline-block',
-  fontSize: '$16',
+  fontSize: '$14',
   marginBottom: '$4',
 });
 

package/src/components/TokenList/TokenList.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { CommonProps } from 'react-window';
-import { containsText } from '../../helpers';
 import { styled } from '../../theme';
 import { Token } from 'rango-sdk';
 import { Button } from '../Button/Button';
 import { Typography } from '../Typography';
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
 import { CSSProperties } from '@stitches/react';
+import { containsText } from '../../helper';
 
 export interface TokenWithAmount extends Token {
   balance?: {
@@ -18,9 +18,11 @@ export interface TokenWithAmount extends Token {
 const PAGE_SIZE = 20;
 export interface PropTypes {
   list: TokenWithAmount[];
-  selected: TokenWithAmount | null;
+  selected?: TokenWithAmount | null;
   searchedText: string;
   onChange: (token: TokenWithAmount) => void;
+  multiSelect?: boolean;
+  selectedList?: TokenWithAmount[] | 'all';
 }
 
 const TokenImage = styled('img', {
@@ -58,7 +60,8 @@ const filterTokens = (
 };
 
 export function TokenList(props: PropTypes) {
-  const { list, searchedText, onChange } = props;
+  const { list, searchedText, onChange, multiSelect, selectedList } = props;
+
   const [selected, setSelected] = useState(props.selected);
 
   const changeSelected = (token: TokenWithAmount) => {
@@ -66,6 +69,20 @@ export function TokenList(props: PropTypes) {
     onChange(token);
   };
 
+  const isSelect = (token: Token) => {
+    if (multiSelect && selectedList) {
+      return (
+        selectedList === 'all' ||
+        selectedList
+          .map((item) => item.symbol + item.address)
+          .indexOf(token.symbol + token.address) > -1
+      );
+    }
+    return (
+      selected?.symbol === token.symbol && selected?.address === token.address
+    );
+  };
+
   const Token = ({
     filteredTokens,
     index,
@@ -92,12 +109,7 @@ export function TokenList(props: PropTypes) {
           size="large"
           align="start"
           onClick={changeSelected.bind(null, currentToken)}
-          type={
-            selected?.symbol === currentToken.symbol &&
-            selected?.address === currentToken.address
-              ? 'primary'
-              : undefined
-          }
+          type={isSelect(currentToken) ? 'primary' : undefined}
           prefix={<TokenImage src={currentToken.image} />}
           suffix={
             currentToken.balance?.amount && (

package/src/components/TokenSelector/TokenSelector.tsx

@@ -6,14 +6,25 @@ import { TokenWithAmount } from '../TokenList/TokenList';
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
-  selected: TokenWithAmount | null;
+  selected?: TokenWithAmount;
   onChange: (token: TokenWithAmount) => void;
-  onBack?: () => void;
   hasHeader?: boolean;
+  multiSelect?: boolean;
+  onBack?: () => void;
+  selectedList?: TokenWithAmount[] | 'all';
 }
 
 export function TokenSelector(props: PropTypes) {
-  const { list, type, selected, onChange, onBack, hasHeader } = props;
+  const {
+    list,
+    type,
+    selected,
+    onChange,
+    hasHeader,
+    multiSelect,
+    selectedList,
+    onBack,
+  } = props;
 
   return (
     <SecondaryPage
@@ -27,6 +38,8 @@ export function TokenSelector(props: PropTypes) {
           searchedText={searchedFor}
           list={list}
           selected={selected}
+          selectedList={selectedList}
+          multiSelect={multiSelect}
           onChange={onChange}
         />
       )}

package/src/components/index.ts

@@ -22,3 +22,7 @@ export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';
 export * from './Alert';
+export * from './ColorPicker';
+export * from './Radio';
+export * from './TokenList';
+export * from './common';

package/src/helper/index.ts

@@ -20,4 +20,4 @@ export const decimalNumber = (number = '0', toFixed: number) =>
   parseFloat(number).toFixed(toFixed);
 
 export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+  text.toLowerCase().includes(searchText.toLowerCase());

package/dist/helpers.d.ts

@@ -1 +0,0 @@
-export declare const containsText: (text: string, searchText: string) => boolean;

package/src/helpers.ts

@@ -1,2 +0,0 @@
-export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;