@rango-dev/ui 0.1.13 → 0.1.14-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.13",
+  "version": "0.1.14-next.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -73,14 +73,15 @@
     "@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",
+    "@rango-dev/wallets-shared": "^0.1.13-next.0",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.20",
     "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8"
+    "react-window-infinite-loader": "^1.0.8",
+    "rgb-hex": "^4.0.1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Alert/Alert.tsx

@@ -8,8 +8,8 @@ const MainContainer = styled('div', {
   width: '100%',
   padding: '$16',
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
 
   '.main': {
     display: 'flex',

package/src/components/BestRoute/BestRoute.tsx

@@ -11,11 +11,12 @@ import { Image } from '../common';
 
 const Container = styled('div', {
   borderRadius: '$5',
-  border: '1px solid $neutrals300',
+  border: '1px solid $neutral100',
   display: 'flex',
   alignItems: 'center',
   minHeight: 126,
   justifyContent: 'space-between',
+  backgroundColor: '$surface',
 });
 
 const ErrorMsg = styled(Typography, {
@@ -45,7 +46,7 @@ const Line = styled('div', {
 
 const HR = styled('hr', {
   width: '100%',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   margin: '$8 0',
 });
 
@@ -89,7 +90,7 @@ export const pulse = keyframes({
 });
 
 const GasContainer = styled('div', {
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '5px',
   margin: '$4',
   display: 'flex',

package/src/components/Button/Button.tsx

@@ -46,41 +46,41 @@ const ButtonContainer = styled('button', {
     },
     variant: {
       contained: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$foreground',
         border: 0,
         '&:hover': {
-          backgroundColor: '$neutrals200',
+          backgroundColor: '$neutral200',
         },
         '&:disabled': {
-          background: '$neutrals400',
+          background: '$neutral400',
         },
         '&:disabled:hover': {
-          background: '$neutrals400',
+          background: '$neutral400',
           transform: 'unset',
         },
       },
       outlined: {
-        backgroundColor: '$background',
+        backgroundColor: '$surface',
         border: 1,
         borderStyle: 'solid',
-        borderColor: '$neutrals400',
+        borderColor: '$neutral400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600',
+          borderColor: '$neutral600',
         },
         '&:disabled': {
-          borderColor: '$neutrals300',
-          color: '$neutrals400',
+          borderColor: '$neutral400',
+          color: '$neutral400',
         },
       },
       ghost: {
         color: '$foreground',
         '&:hover': {
-          backgroundColor: '$neutrals200',
+          backgroundColor: '$neutral200',
         },
         '&:disabled': {
-          color: '$neutrals400 !important',
+          color: '$neutral400',
         },
         background: 'transparent',
         border: 0,
@@ -128,19 +128,19 @@ const ButtonContainer = styled('button', {
       type: 'primary',
       variant: 'outlined',
       css: {
-        color: '$primary !important',
+        color: '$primary',
         borderColor: '$primary',
         '&:hover': {
-          color: '$primary700 !important',
-          borderColor: '$primary700 !important',
+          color: '$primary700',
+          borderColor: '$primary700',
         },
         '&:visited': {
-          color: '$primary900 !important',
-          borderColor: '$primary900 !important',
+          color: '$primary900',
+          borderColor: '$primary900',
         },
         '&:focus': {
-          color: '$primary600 !important',
-          borderColor: '$primary600 !important',
+          color: '$primary600',
+          borderColor: '$primary600',
         },
       },
     },
@@ -167,7 +167,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$error300',
         },
@@ -183,19 +183,19 @@ const ButtonContainer = styled('button', {
       type: 'error',
       variant: 'outlined',
       css: {
-        color: '$error !important',
+        color: '$error',
         borderColor: '$error',
         '&:hover': {
-          color: '$error300 !important',
-          borderColor: '$error300 !important',
+          color: '$error300',
+          borderColor: '$error300',
         },
         '&:visited': {
-          color: '$error700 !important',
-          borderColor: '$error700 !important',
+          color: '$error700',
+          borderColor: '$error700',
         },
         '&:focus': {
-          color: '$error700 !important',
-          borderColor: '$error700 !important',
+          color: '$error700',
+          borderColor: '$error700',
         },
       },
     },
@@ -224,7 +224,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$warning300',
         },
@@ -240,19 +240,19 @@ const ButtonContainer = styled('button', {
       type: 'warning',
       variant: 'outlined',
       css: {
-        color: '$warning !important',
+        color: '$warning',
         borderColor: '$warning',
         '&:hover': {
-          color: '$warning300 !important',
-          borderColor: '$warning300 !important',
+          color: '$warning300',
+          borderColor: '$warning300',
         },
         '&:visited': {
-          color: '$warning700 !important',
-          borderColor: '$warning700 !important',
+          color: '$warning700',
+          borderColor: '$warning700',
         },
         '&:focus': {
-          color: '$warning700 !important',
-          borderColor: '$warning700 !important',
+          color: '$warning700',
+          borderColor: '$warning700',
         },
       },
     },
@@ -281,7 +281,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$success300',
         },
@@ -297,19 +297,19 @@ const ButtonContainer = styled('button', {
       type: 'success',
       variant: 'outlined',
       css: {
-        color: '$success !important',
+        color: '$success',
         borderColor: '$success',
         '&:hover': {
-          color: '$success300 !important',
-          borderColor: '$success300 !important',
+          color: '$success300',
+          borderColor: '$success300',
         },
         '&:visited': {
-          color: '$success700 !important',
-          borderColor: '$success700 !important',
+          color: '$success700',
+          borderColor: '$success700',
         },
         '&:focus': {
-          color: '$success700 !important',
-          borderColor: '$success700 !important',
+          color: '$success700',
+          borderColor: '$success700',
         },
       },
     },

package/src/components/Chip/Chip.tsx

@@ -21,7 +21,7 @@ const ChipCointainer = styled('div', {
   variants: {
     selected: {
       true: { backgroundColor: '$success', color: '$background' },
-      false: { backgroundColor: '$background' },
+      false: { backgroundColor: '$surface' },
     },
   },
 });

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

@@ -12,11 +12,16 @@ export default {
       options: ['top', 'bottom', 'left', 'right'],
       defaultValue: 'top',
     },
+    placeholder: {
+      name: 'placeholder',
+      control: { type: 'text' },
+      defaultValue: 'Choose a color',
+    },
   },
 } as ComponentMeta<typeof ColorPicker>;
 
 export const Main = (args: PropTypes) => {
-  const [color, setColor] = useState<string>('#5FA425');
+  const [color, setColor] = useState<string | undefined>('#5FA425');
   return (
     <div
       style={{
@@ -29,7 +34,9 @@ export const Main = (args: PropTypes) => {
       <ColorPicker
         {...args}
         color={color}
-        onChangeColor={(color) => setColor(color.hex)}
+        onChangeColor={(color) => {
+          console.log(color);
+          setColor(color)}}
       />
     </div>
   );

package/src/components/ColorPicker/ColorPicker.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import { ChromePicker, ColorResult } from 'react-color';
+import { ChromePicker } from 'react-color';
 import { styled } from '../../theme';
 import { Button } from '../Button';
+import { CloseIcon } from '../Icon';
+import rgbHex from 'rgb-hex';
 
 const Container = styled('div', {
   position: 'relative',
 });
 
 const Color = styled('div', {
-  border: '1px solid $neutrals300',
+  border: '1px solid $neutral100',
   borderRadius: '$5',
   width: '$32',
   height: '$32',
@@ -41,13 +43,11 @@ const Popover = styled('div', {
   },
 });
 export interface PropTypes {
-  color: string;
+  color?: string;
   place: 'top' | 'bottom' | 'left' | 'right';
-  onChangeColor: (
-    color: ColorResult,
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void;
+  onChangeColor: (color?: string) => void;
   label?: string;
+  placeholder?: string;
 }
 
 const Label = styled('label', {
@@ -57,7 +57,13 @@ const Label = styled('label', {
   color: '$foreground',
 });
 
-export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
+export function ColorPicker({
+  color,
+  onChangeColor,
+  label,
+  place,
+  placeholder,
+}: PropTypes) {
   const [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);
 
   return (
@@ -69,15 +75,33 @@ export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
         fullWidth
         align="start"
         size="large"
+        suffix={
+          color && (
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+                onChangeColor(undefined);
+              }}
+            >
+              <CloseIcon size={20} />
+            </div>
+          )
+        }
         onClick={() => setDisplayColorPicker((prev) => !prev)}
       >
-        {color}
+        {color || placeholder}
       </Button>
 
       {displayColorPicker && (
         <Popover place={place}>
           <Cover onClick={() => setDisplayColorPicker(false)} />
-          <ChromePicker color={color} onChange={onChangeColor} />
+          <ChromePicker
+            color={color}
+            onChange={(c) => {
+              const color = '#' + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a);
+              onChangeColor(color);
+            }}
+          />
         </Popover>
       )}
     </Container>

package/src/components/Icon/common.ts

@@ -33,7 +33,7 @@ export const SvgWithStrokeColor = styled('svg', {
     },
     disabled: {
       true: {
-        stroke: '$neutrals400',
+        stroke: '$neutral400',
       },
     },
   },
@@ -72,7 +72,7 @@ export const SvgWithFillColor = styled('svg', {
     },
     disabled: {
       true: {
-        stroke: '$neutrals400',
+        stroke: '$neutral400',
       },
     },
   },

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -105,7 +105,7 @@ export function LiquiditySourceList(props: PropTypes) {
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Bridges</Typography>
-          <Typography variant="body1" color="neutrals800">
+          <Typography variant="body1" color="neutral800">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
@@ -138,7 +138,7 @@ export function LiquiditySourceList(props: PropTypes) {
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Exchanges</Typography>
-          <Typography variant="body1" color="neutrals800">
+          <Typography variant="body1" color="neutral800">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${totalSelectedExchanges} / ${totalExchanges}`}

package/src/components/Radio/Radio.tsx

@@ -32,10 +32,10 @@ const StyledItem = styled(RadioGroup.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
 
   '&:hover': {
-    borderColor: '$neutrals600',
+    borderColor: '$neutral600',
   },
 });
 

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -14,7 +14,7 @@ const Circle = styled('div', {
   width: 12,
   height: 12,
   borderRadius: 6,
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   position: 'absolute',
   top: 12,
   right: 12,
@@ -24,7 +24,7 @@ const Circle = styled('div', {
         borderColor: '$success',
       },
       false: {
-        borderColor: '$neutrals400',
+        borderColor: '$neutral400',
       },
     },
   },
@@ -40,7 +40,7 @@ const SolidCircle = styled('div', {
         backgroundColor: '$success',
       },
       false: {
-        backgroundColor: '$neutrals400',
+        backgroundColor: '$neutral400',
       },
     },
   },
@@ -65,8 +65,8 @@ const Container = styled('div', {
         color: '$success',
       },
       false: {
-        borderColor: '$neutrals400',
-        color: '$neutrals400',
+        borderColor: '$neutral400',
+        color: '$neutral400',
       },
     },
   },

package/src/components/Settings/Settings.tsx

@@ -12,7 +12,7 @@ import { Button } from '../Button';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   padding: '$16',
 });
 
@@ -74,6 +74,7 @@ export interface PropTypes {
   infiniteApprove: boolean;
   toggleInfiniteApprove: (infinite: boolean) => void;
   loadingStatus: LoadingStatus;
+  singleTheme?: boolean;
 }
 
 export function Settings(props: PropTypes) {
@@ -93,6 +94,7 @@ export function Settings(props: PropTypes) {
     toggleInfiniteApprove,
     infiniteApprove,
     loadingStatus,
+    singleTheme,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -153,20 +155,22 @@ export function Settings(props: PropTypes) {
           />
         </SlippageChipsContainer>
       </BaseContainer>
-      <ThemesContainer>
-        <Title variant="body2">Theme</Title>
-        <Radio
-          value={selectedTheme}
-          options={[
-            { value: 'dark', label: 'Dark' },
-            { value: 'light', label: 'Light' },
-            { value: 'auto', label: 'Auto' },
-          ]}
-          onChange={(value) => onThemeChange(value as Theme)}
-          direction="horizontal"
-          style={{ marginTop: '$24' }}
-        />
-      </ThemesContainer>
+      {!singleTheme && (
+        <ThemesContainer>
+          <Title variant="body2">Theme</Title>
+          <Radio
+            value={selectedTheme}
+            options={[
+              { value: 'dark', label: 'Dark' },
+              { value: 'light', label: 'Light' },
+              { value: 'auto', label: 'Auto' },
+            ]}
+            onChange={(value) => onThemeChange(value as Theme)}
+            direction="horizontal"
+            style={{ marginTop: '$24' }}
+          />
+        </ThemesContainer>
+      )}
       <InfiniteContainer>
         <Typography variant="body2">Infinite Approval</Typography>
         <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
@@ -180,7 +184,7 @@ export function Settings(props: PropTypes) {
           suffix={
             <LiquiditySourceNumber>
               {loadingStatus === 'success' && (
-                <Typography variant="body2" color="neutrals800">
+                <Typography variant="body2" color="neutral800">
                   {liquiditySources.length !== selectedLiquiditySources.length
                     ? `${selectedLiquiditySources.length} / ${liquiditySources.length}`
                     : liquiditySources.length}

package/src/components/Skeleton/Skeleton.tsx

@@ -12,7 +12,7 @@ const waveSquares = keyframes({
 
 const SkeletonContainer = styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   background: `linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)`,
   backgroundSize: '800px 100px',
   animation: `${waveSquares} 2s infinite ease-out`,

package/src/components/Spinner/Spinner.tsx

@@ -10,7 +10,7 @@ const spin = keyframes({
 const SpinnerContainer = styled('div', {
   borderRadius: '50%',
   position: 'relative',
-  border: `2px solid $neutrals300`,
+  border: `2px solid $neutral100`,
   borderRight: `2px solid`,
   animation: `${spin} 1.5s linear infinite`,
   margin: `0px $8`,

package/src/components/StepDetail/StepDetail.tsx

@@ -30,7 +30,7 @@ const ChainLogo = styled('div', {
   padding: '$2',
   borderRadius: '50%',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
 
   img: {
     width: '100%',
@@ -74,7 +74,7 @@ const Detail = styled('div', {
   },
 });
 const SubTitle = styled(Typography, {
-  color: '$neutrals600',
+  color: '$neutral600',
   display: 'block',
   paddingLeft: '$8',
 });
@@ -121,7 +121,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
           <Typography
             noWrap
             variant={direction === 'vertical' ? 'body2' : 'title'}
-            color={'$neutrals600'}
+            color={'$neutral600'}
           >
             {estimatedAmount}
           </Typography>
@@ -133,7 +133,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
         >
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="$neutrals800">
+        <SubTitle noWrap variant="caption" color="$neutral800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/SwapContainer/SwapContainer.tsx

@@ -20,14 +20,14 @@ const MainContainer = styled('div', {
     listStyleType: 'none',
     '&::-webkit-scrollbar': { width: '$8', height: '$8' },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
+      backgroundColor: '$neutral400',
       borderRadius: '$10',
     },
     '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500',
+      backgroundColor: '$neutral500',
     },
     '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300',
+      backgroundColor: '$neutral100',
     },
   },
   variants: {

package/src/components/SwapDetail/SwapDetail.tsx

@@ -14,7 +14,7 @@ const Container = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$16 0',
-  borderBottom: '1px solid $neutrals300',
+  borderBottom: '1px solid $neutral100',
 
   '& > .info': {
     display: 'flex',

package/src/components/SwapDetail/Token.tsx

@@ -12,7 +12,7 @@ const TokenContainer = styled('div', {
     fontWeight: 'bold',
   },
   '& .estimated': {
-    color: '$neutrals600',
+    color: '$neutral600',
   },
 });
 
@@ -33,7 +33,7 @@ const TokenImage = styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '$background',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
   },
 });
 

package/src/components/Switch/Switch.tsx

@@ -9,8 +9,8 @@ const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals600',
-  borderColor: '$neutrals600',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',