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

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './wallet';
-export { BestRouteWithFee } from './swaps';
+export * from './wallet';
+export type { BestRouteWithFee } from './swaps';

package/dist/types/meta.d.ts

@@ -1,23 +1,23 @@
-export declare type TokenMeta = {
-    blockchain: string;
-    symbol: string;
-    image: string;
-    address: string | null;
-    usdPrice: number | null;
-    isSecondaryCoin: boolean;
-    coinSource: string | null;
-    coinSourceUrl: string | null;
-    name: string | null;
-    decimals: number;
-    balance?: {
-        amount: string;
-        usdPrice: string;
-    };
-};
-export interface LiquiditySource {
-    title: string;
-    logo: string;
-    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-    selected: boolean;
-}
-export declare type LoadingStatus = 'loading' | 'success' | 'failed';
+export type TokenMeta = {
+    blockchain: string;
+    symbol: string;
+    image: string;
+    address: string | null;
+    usdPrice: number | null;
+    isSecondaryCoin: boolean;
+    coinSource: string | null;
+    coinSourceUrl: string | null;
+    name: string | null;
+    decimals: number;
+    balance?: {
+        amount: string;
+        usdPrice: string;
+    };
+};
+export interface LiquiditySource {
+    title: string;
+    logo: string;
+    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+    selected: boolean;
+}
+export type LoadingStatus = 'loading' | 'success' | 'failed';

package/dist/types/swaps.d.ts

@@ -1,29 +1,29 @@
-import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
-export declare type SwapStatus = 'running' | 'failed' | 'success';
-export declare type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
-export declare type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
-export declare enum PendingSwapNetworkStatus {
-    WaitingForConnectingWallet = "waitingForConnectingWallet",
-    WaitingForQueue = "waitingForQueue",
-    WaitingForNetworkChange = "waitingForNetworkChange",
-    NetworkChanged = "networkChanged"
-}
-export declare type WalletTypeAndAddress = {
-    walletType: string;
-    address: string;
-};
-export declare type SwapSavedSettings = {
-    slippage: string;
-    disabledSwappersIds: string[];
-    disabledSwappersGroups: string[];
-};
-export declare type SimulationAssetAndAmount = WalletRequiredAssets;
-export declare type SimulationValidationStatus = BlockchainValidationStatus;
-export declare type BestRouteType = BestRouteResponse;
-export declare type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
-    result: Omit<SimulationResult, 'swaps'> & {
-        swaps: (SwapResult & {
-            feeInUsd?: string;
-        })[];
-    };
-};
+import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
+export type SwapStatus = 'running' | 'failed' | 'success';
+export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
+export type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
+export declare enum PendingSwapNetworkStatus {
+    WaitingForConnectingWallet = "waitingForConnectingWallet",
+    WaitingForQueue = "waitingForQueue",
+    WaitingForNetworkChange = "waitingForNetworkChange",
+    NetworkChanged = "networkChanged"
+}
+export type WalletTypeAndAddress = {
+    walletType: string;
+    address: string;
+};
+export type SwapSavedSettings = {
+    slippage: string;
+    disabledSwappersIds: string[];
+    disabledSwappersGroups: string[];
+};
+export type SimulationAssetAndAmount = WalletRequiredAssets;
+export type SimulationValidationStatus = BlockchainValidationStatus;
+export type BestRouteType = BestRouteResponse;
+export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
+    result: Omit<SimulationResult, 'swaps'> & {
+        swaps: (SwapResult & {
+            feeInUsd?: string;
+        })[];
+    };
+};

package/dist/types/wallet.d.ts

@@ -1,23 +1,23 @@
-import { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
-export declare enum WalletState {
-    NOT_INSTALLED = "not installed",
-    DISCONNECTED = "disconnected",
-    CONNECTING = "connecting",
-    CONNECTED = "connected"
-}
-export declare type WalletInfo = {
-    state: WalletState.CONNECTED | WalletState.DISCONNECTED | WalletState.CONNECTING | WalletState.NOT_INSTALLED;
-    installLink: InstallObjects | string;
-    name: string;
-    image: string;
-    type: WalletType;
-    showOnMobile: boolean;
-};
-export interface SelectableWallet {
-    chain: string;
-    walletType: WalletType;
-    address: string;
-    image: string;
-    selected: boolean;
-    name: string;
-}
+import { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
+export declare enum WalletState {
+    NOT_INSTALLED = "not installed",
+    DISCONNECTED = "disconnected",
+    CONNECTING = "connecting",
+    CONNECTED = "connected"
+}
+export type WalletInfo = {
+    state: WalletState.CONNECTED | WalletState.DISCONNECTED | WalletState.CONNECTING | WalletState.NOT_INSTALLED;
+    installLink: InstallObjects | string;
+    name: string;
+    image: string;
+    type: WalletType;
+    showOnMobile: boolean;
+};
+export interface SelectableWallet {
+    chain: string;
+    walletType: WalletType;
+    address: string;
+    image: string;
+    selected: boolean;
+    name: string;
+}

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.13",
+  "version": "0.1.14-next.10",
   "license": "MIT",
-  "main": "dist/index.js",
+  "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "dev": "tsdx watch",
-    "build": "tsdx build  --tsconfig ./tsconfig.json",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build  --tsconfig ./tsconfig.json",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
+    "dev": "yarn bundle --watch",
+    "bundle": "esbuild src/index.ts --bundle --minify --keep-names --sourcemap --outdir=dist --platform=node --format=esm --packages=external",
+    "build": "yarn type-checking && yarn bundle",
+    "type-checking": "tsc --declaration --emitDeclarationOnly",
     "storybook": "start-storybook -p 3000",
     "build-storybook": "build-storybook"
   },
@@ -23,28 +20,6 @@
     "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "module": "dist/ui.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/ui.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/ui.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@size-limit/preset-small-lib": "^8.1.0",
@@ -73,14 +48,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",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
-    "rango-sdk": "^0.1.20",
+    "rango-sdk": "^0.1.27",
     "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/Checkbox/Checkbox.tsx

@@ -19,11 +19,13 @@ const CheckboxRoot = styled(RadixCheckbox.Root, {
   justifyContent: 'center',
   marginRight: '$2',
   backgroundColor: '$neutral-100',
+  cursor: 'pointer',
 });
 const Label = styled('label', {
   color: '$foreground',
   fontSize: '$m',
   marginLeft: '$8',
+  cursor: 'pointer',
 });
 
 export interface PropTypes {

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/Modal/Modal.tsx

@@ -24,6 +24,8 @@ const BackDrop = styled('div', {
   width: '100vw',
   height: '100vh',
   backgroundColor: 'rgba(0,0,0,.1)',
+  zIndex: 10,
+
 });
 
 const ModalContainer = styled('div', {
@@ -32,8 +34,7 @@ const ModalContainer = styled('div', {
   padding: '$16 $16',
   display: 'flex',
   flexDirection: 'column',
-  boxShadow: '$s',
-  zIndex: 10,
+  zIndex: 20,
 });
 const Row = styled('div', {
   display: 'flex',