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

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',
 });
 
@@ -60,7 +60,7 @@ type Theme = 'dark' | 'light' | 'auto';
 export interface PropTypes {
   slippages: number[];
   selectedSlippage: number;
-  customSlippage: number;
+  customSlippage: number | null;
   maxSlippage: number;
   minSlippage: number;
   liquiditySources: LiquiditySource[];
@@ -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(
@@ -132,7 +134,7 @@ export function Settings(props: PropTypes) {
           ))}
           <TextField
             type="number"
-            value={customSlippage}
+            value={customSlippage || ''}
             onChange={(event) => {
               const parsedValue = parseFloat(event.target.value);
               if (
@@ -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',

package/src/components/TextField/TextField.tsx

@@ -3,10 +3,10 @@ import React, { PropsWithChildren, RefObject } from 'react';
 import { styled } from '../../theme';
 
 const InputContainer = styled('div', {
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   padding: '1px',
   boxSizing: 'border-box',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   borderRadius: '$5',
   height: '$48',
   display: 'flex',
@@ -43,7 +43,7 @@ const InputContainer = styled('div', {
     },
     disabled: {
       true: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         cursor: 'not-allowed',
         filter: 'grayscale(100%)',
       },

package/src/components/TokenList/TokenItem.tsx

@@ -66,7 +66,7 @@ export function TokenItem(props: PropTypes) {
       >
         <TokenNameContainer>
           <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="caption" color="neutrals600">
+          <Typography variant="caption" color="neutral600">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/Tooltip/Tooltip.tsx

@@ -46,7 +46,7 @@ const TooltipContent = styled(RadixTooltip.Content, {
         color: '$white',
       },
       gray: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$black',
       },
       black: {
@@ -76,7 +76,7 @@ const TooltipArrow = styled(RadixTooltip.Arrow, {
         fill: '$success',
       },
       gray: {
-        fill: '$neutrals300',
+        fill: '$neutral100',
       },
       black: {
         fill: '$black',

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -14,7 +14,7 @@ const MainContainer = styled('div', {
 const Section = styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
-  borderBottom: '1px solid $neutrals400',
+  borderBottom: '1px solid $neutral400',
 });
 
 const Footer = styled('div', {
@@ -39,14 +39,14 @@ const Container = styled('div', {
     alignItems: 'center',
   },
   '.num': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$neutral100',
     display: 'inline-flex',
     width: '24px',
     height: '24px',
-    color: '$neutrals800',
+    color: '$neutral800',
     borderRadius: '50%',
     fontSize: '$14',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/containers/History/SwapsGroup.tsx

@@ -34,7 +34,7 @@ export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
             <Group>
               <Typography
                 variant="body2"
-                color="neutrals600"
+                color="neutral600"
                 className="group-title"
               >
                 {group.title}

package/src/containers/History/index.ts

@@ -1,2 +1,3 @@
 export { History } from './History';
-export { SwapsGroup, GroupBy } from './SwapsGroup';
+export { SwapsGroup } from './SwapsGroup';
+export type { GroupBy } from './SwapsGroup';

package/src/containers/History/types.tsx

@@ -7,7 +7,7 @@ import {
   Transfer,
 } from 'rango-sdk';
 import { PendingSwapNetworkStatus, StepStatus } from '../../types/swaps';
-export { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export type PendingSwapStep = {
   id: number;

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -53,7 +53,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutrals800'
+  color: '$neutral800'
 });
 
 export const Fee = styled('div', {
@@ -96,7 +96,7 @@ const SwapInfoContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   paddingBottom: '$16',
-  borderBottom: '1px solid $neutrals300',
+  borderBottom: '1px solid $neutral100',
 });
 
 const InternalDetailsContainer = styled('div', {
@@ -137,12 +137,12 @@ const Row = styled('div', {
   padding: '$8 0',
 
   '.name': {
-    color: '$neutrals600',
+    color: '$neutral600',
   },
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800',
+    color: '$neutral800',
     justifyContent: 'flex-end',
   },
   '.status': {
@@ -169,7 +169,7 @@ const RequestId = styled('div', {
 
 const ExtraDetails = styled('div', {
   padding: '0',
-  color: '$neutrals600',
+  color: '$neutral600',
   fontSize: '$10',
 });
 

package/src/helper/index.ts

@@ -29,3 +29,78 @@ export function limitDecimalPlaces(
     return roundedNumber.toString();
   }
 }
+
+const hexToRgb = (hex: string) =>
+  ((value) =>
+    value.length === 3
+      ? value.split('').map((c) => parseInt(c.repeat(2), 16))
+      : (value.match(/.{1,2}/g) || []).map((v) => parseInt(v, 16)))(
+    hex.replace('#', '')
+  );
+
+const isHexTooDark = (hexColor: string) =>
+  (([r, g, b]) => 0.2126 * r + 0.7152 * g + 0.0722 * b < 40)(
+    hexToRgb(hexColor)
+  );
+
+const isHexTooLight = (hexColor: string) =>
+  (([r, g, b]) => (r * 299 + g * 587 + b * 114) / 1000 > 155)(
+    hexToRgb(hexColor)
+  );
+
+const colorShade = (col: string, amt: number) => {
+  col = col.replace(/^#/, '');
+  if (col.length === 3)
+    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  let [r, g, b]: any = col.match(/.{2}/g);
+  [r, g, b] = [
+    parseInt(r, 16) + amt,
+    parseInt(g, 16) + amt,
+    parseInt(b, 16) + amt,
+  ];
+
+  r = Math.max(Math.min(255, r), 0).toString(16);
+  g = Math.max(Math.min(255, g), 0).toString(16);
+  b = Math.max(Math.min(255, b), 0).toString(16);
+
+  const rr = (r.length < 2 ? '0' : '') + r;
+  const gg = (g.length < 2 ? '0' : '') + g;
+  const bb = (b.length < 2 ? '0' : '') + b;
+
+  return `#${rr}${gg}${bb}`;
+};
+
+export const generateRangeColors = (
+  name: string,
+  mode: 'light' | 'dark',
+  color?: string,
+) => {
+  let colors = { [name]: color };
+  if (color) {
+    let c = color;
+    if (isHexTooDark(color) || mode === 'dark') {
+      for (let i = 1; i < 10; i++) {
+        colors = {
+          ...colors,
+          [name + i * 100]:
+            name === 'neutral'
+              ? colorShade(c, i * 15)
+              : colorShade(color, i * 5),
+        };
+      }
+    }
+    if (isHexTooLight(color) || mode === 'light') {
+      for (let i = 1; i < 10; i++) {
+        c = colorShade(c, -(i * 5));
+        colors = {
+          ...colors,
+          [name + i * 100]:
+            name === 'neutral'
+              ? colorShade(c, -(i * 5))
+              : colorShade(color, -(i * 5)),
+        };
+      }
+    }
+  }
+  return colors;
+};

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './containers';
 export * from './theme';
 export * from './types';
 export * from './hooks';
+export { generateRangeColors } from './helper';

package/src/theme.ts

@@ -2,11 +2,10 @@
 
 import { PropertyValue, CreateStitches } from '@stitches/react';
 import { DefaultThemeMap } from '@stitches/react/types/config';
-
-// Solution: (https://github.com/stitchesjs/stitches/issues/833#issuecomment-950707025)
-const { createStitches } = require('@stitches/react');
+import { createStitches } from '@stitches/react';
 
 /* ----------------------- Values ----------------------- */
+
 const theme = {
   colors: {
     primary: '#5FA425',
@@ -19,14 +18,16 @@ const theme = {
     primary700: '#396216',
     primary800: '#26420F',
     primary900: '#132107',
-    neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
+    surface: '#fff',
+    neutral100: '#f3f3f3',
+    neutral200: '#FAFAFA',
+    neutral300: '#EAEAEA',
+    neutral400: '#999999',
+    neutral500: '#888888',
+    neutral600: '#666666',
+    neutral700: '#444444',
+    neutral800: '#333333',
+    neutral900: '#111111',
     background: '#fff',
     foreground: '#000',
     success: '#0070F3',
@@ -124,36 +125,33 @@ const utils = {
 
 const typedCreateStiches = createStitches as CreateStitches;
 
-// Note: it seems there is a bug on tsdx and when it compiles the code, it goes through an error
-// We can directly check it with `tsc` to see if the error is correct or not.
-// We `ignore` it for now, to get safety check on VSCode.
-// @ts-ignore
-export const { styled, css, createTheme, keyframes, globalCss } =
-  typedCreateStiches<
-    '',
-    typeof media,
-    typeof theme,
-    DefaultThemeMap,
-    // TODO: Make `utils` typesafe as well.
-    {}
-  >({
-    media,
-    theme,
-    utils,
-  });
+export const { styled, css, createTheme, keyframes, globalCss } = typedCreateStiches<
+  '',
+  typeof media,
+  typeof theme,
+  DefaultThemeMap,
+  // TODO: Make `utils` typesafe as well.
+  {}
+>({
+  media,
+  theme,
+  utils,
+});
 
 export const lightTheme = createTheme({});
 
 export const darkTheme = createTheme({
   colors: {
-    neutrals200: '#111111',
-    neutrals300: '#333333',
-    neutrals400: '#444444',
-    neutrals500: '#666666',
-    neutrals600: '#888888',
-    neutrals700: '#999999',
-    neutrals800: '#EAEAEA',
-    neutrals900: '#FAFAFA',
+    surface: '#000',
+    neutral900: '#f3f3f3',
+    neutral800: '#FAFAFA',
+    neutral700: '#EAEAEA',
+    neutral600: '#999999',
+    neutral500: '#888888',
+    neutral400: '#666666',
+    neutral300: '#444444',
+    neutral200: '#333333',
+    neutral100: '#111111',
     foreground: '#fff',
     background: '#000',
   },

package/src/types/index.ts

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