@rango-dev/ui 0.15.1-next.8 → 0.16.0

package/dist/widget/ui/src/theme.d.ts

@@ -78,6 +78,8 @@ export declare const theme: {
         md: string;
         xl: string;
         lg: string;
+        primary: string;
+        secondary: string;
     };
     fontSizes: {
         10: string;
@@ -94,7 +96,10 @@ export declare const theme: {
         40: string;
         48: string;
     };
-    fonts: {};
+    fonts: {
+        primary: string;
+        widget: string;
+    };
     fontWeights: {
         regular: number;
         medium: number;
@@ -224,6 +229,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md: string;
         xl: string;
         lg: string;
+        primary: string;
+        secondary: string;
     };
     fontSizes: {
         10: string;
@@ -240,7 +247,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40: string;
         48: string;
     };
-    fonts: {};
+    fonts: {
+        primary: string;
+        widget: string;
+    };
     fontWeights: {
         regular: number;
         medium: number;
@@ -382,6 +392,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md: string;
         xl: string;
         lg: string;
+        primary: string;
+        secondary: string;
     };
     fontSizes: {
         10: string;
@@ -398,7 +410,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40: string;
         48: string;
     };
-    fonts: {};
+    fonts: {
+        primary: string;
+        widget: string;
+    };
     fontWeights: {
         regular: number;
         medium: number;
@@ -527,6 +542,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md: string;
         xl: string;
         lg: string;
+        primary: string;
+        secondary: string;
     };
     fontSizes: {
         10: string;
@@ -543,7 +560,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40: string;
         48: string;
     };
-    fonts: {};
+    fonts: {
+        primary: string;
+        widget: string;
+    };
     fontWeights: {
         regular: number;
         medium: number;
@@ -681,6 +701,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md?: string | number | boolean | undefined;
         xl?: string | number | boolean | undefined;
         lg?: string | number | boolean | undefined;
+        primary?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         10?: string | number | boolean | undefined;
@@ -697,7 +719,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40?: string | number | boolean | undefined;
         48?: string | number | boolean | undefined;
     } | undefined;
-    fonts?: {} | undefined;
+    fonts?: {
+        primary?: string | number | boolean | undefined;
+        widget?: string | number | boolean | undefined;
+    } | undefined;
     fontWeights?: {
         regular?: string | number | boolean | undefined;
         medium?: string | number | boolean | undefined;
@@ -825,6 +850,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md?: string | number | boolean | undefined;
         xl?: string | number | boolean | undefined;
         lg?: string | number | boolean | undefined;
+        primary?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         10?: string | number | boolean | undefined;
@@ -841,7 +868,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40?: string | number | boolean | undefined;
         48?: string | number | boolean | undefined;
     } | undefined;
-    fonts?: {} | undefined;
+    fonts?: {
+        primary?: string | number | boolean | undefined;
+        widget?: string | number | boolean | undefined;
+    } | undefined;
     fontWeights?: {
         regular?: string | number | boolean | undefined;
         medium?: string | number | boolean | undefined;
@@ -977,6 +1007,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             md: string;
             xl: string;
             lg: string;
+            primary: string;
+            secondary: string;
         };
         fontSizes: {
             10: string;
@@ -993,7 +1025,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             40: string;
             48: string;
         };
-        fonts: {};
+        fonts: {
+            primary: string;
+            widget: string;
+        };
         fontWeights: {
             regular: number;
             medium: number;
@@ -1130,6 +1165,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             md: string;
             xl: string;
             lg: string;
+            primary: string;
+            secondary: string;
         };
         fontSizes: {
             10: string;
@@ -1146,7 +1183,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             40: string;
             48: string;
         };
-        fonts: {};
+        fonts: {
+            primary: string;
+            widget: string;
+        };
         fontWeights: {
             regular: number;
             medium: number;
@@ -1274,6 +1314,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         md: string;
         xl: string;
         lg: string;
+        primary: string;
+        secondary: string;
     };
     fontSizes: {
         10: string;
@@ -1290,7 +1332,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         40: string;
         48: string;
     };
-    fonts: {};
+    fonts: {
+        primary: string;
+        widget: string;
+    };
     fontWeights: {
         regular: number;
         medium: number;
@@ -1420,6 +1465,8 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             md: string;
             xl: string;
             lg: string;
+            primary: string;
+            secondary: string;
         };
         fontSizes: {
             10: string;
@@ -1436,7 +1483,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             40: string;
             48: string;
         };
-        fonts: {};
+        fonts: {
+            primary: string;
+            widget: string;
+        };
         fontWeights: {
             regular: number;
             medium: number;

package/dist/widget/ui/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJjB,CAAC;AAgBF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;MA0BpB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JjB,CAAC;AAgBF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;MA0BpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.15.1-next.8",
+  "version": "0.16.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -63,7 +63,7 @@
     "@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.15.1-next.3",
+    "@rango-dev/wallets-shared": "^0.16.0",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.35",

package/src/components/BestRoute/BestRoute.styles.ts

@@ -23,7 +23,11 @@ export const RouteContainer = styled(Collapsible.Root, {
         backgroundColor: '$$color',
       },
       false: {
-        backgroundColor: '$neutral200',
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
       },
     },
   },
@@ -47,9 +51,36 @@ export const SummaryContainer = styled('div', {
       true: {
         $$color: '$colors$info100',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral400',
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
         },
         backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
         '&:hover': {
           $$color: '$colors$secondary200',
           [`.${darkTheme} &`]: {
@@ -58,15 +89,21 @@ export const SummaryContainer = styled('div', {
           backgroundColor: '$$color',
         },
       },
-      false: {
-        backgroundColor: '$neutral200',
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
         '&:hover': {
-          backgroundColor: '$neutral200',
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
         },
       },
     },
-    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
-  },
+  ],
   '& .summary': {
     width: '100%',
     padding: '$15 $15 $10 $15',
@@ -114,7 +151,11 @@ export const Chains = styled(Collapsible.Trigger, {
         backgroundColor: '$$color',
       },
       false: {
-        backgroundColor: '$neutral400',
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
       },
     },
   },
@@ -154,7 +195,12 @@ export const HorizontalSeparator = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   margin: '0 $15',
-  borderTop: '1px solid $neutral300',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
 });
 
 export const FrameIcon = styled('div', {

package/src/components/BestRoute/BestRoute.tsx

@@ -51,7 +51,10 @@ export function BestRoute(props: BestRouteProps) {
 
   return (
     <>
-      <SummaryContainer recommended={recommended} basic={type === 'basic'}>
+      <SummaryContainer
+        recommended={recommended}
+        listItem={type === 'list-item'}
+        basic={type === 'basic'}>
         <div className="summary">
           <RouteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
           {type === 'basic' && (
@@ -116,7 +119,9 @@ export function BestRoute(props: BestRouteProps) {
                 return (
                   <React.Fragment key={key}>
                     <Tooltip
-                      sideOffset={2}
+                      container={props.tooltipContainer}
+                      side="bottom"
+                      sideOffset={4}
                       content={step.from.chain.displayName}>
                       <Image src={step.from.chain.image} size={16} />
                     </Tooltip>
@@ -126,7 +131,9 @@ export function BestRoute(props: BestRouteProps) {
                           <ChevronRightIcon size={12} color="black" />
                         </IconContainer>
                         <Tooltip
-                          sideOffset={2}
+                          container={props.tooltipContainer}
+                          side="bottom"
+                          sideOffset={4}
                           content={step.to.chain.displayName}>
                           <Image src={step.to.chain.image} size={16} />
                         </Tooltip>

package/src/components/BestRoute/BestRoute.types.ts

@@ -28,4 +28,5 @@ export type BestRouteProps = Pick<
   totalFee: string;
   totalTime: string;
   expanded?: boolean;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/BestRoute/BestRouteSkeleton.styles.ts

@@ -1,7 +1,11 @@
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   borderBottomLeftRadius: '$xm',
   borderBottomRightRadius: '$xm',
   padding: '$15 ',

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,43 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  fontFamily: 'inherit',
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

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