@rango-dev/ui 0.1.14-next.0 → 0.1.14-next.11

package/src/containers/History/History.tsx

@@ -5,8 +5,8 @@ import { containsText } from '../../helper';
 import { styled } from '../../theme';
 import { PendingSwap } from './types';
 import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
-import { LoaderContainer } from '../../components/TokenSelector/TokenSelector';
 import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
+import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const Container = styled('div', {
   overflowY: 'auto',

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/mock.ts

@@ -172,7 +172,7 @@ export const pendingSwap: PendingSwap[] = [
         toLogo: 'https://api.rango.exchange/i/mJQPS2',
         startTransactionTime: 1673164519916,
         swapperId: 'Osmosis',
-        swapperLogo: '',
+        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
         expectedOutputAmountHumanReadable: '1.540670',
         outputAmount: '1.540658',
         status: 'running',
@@ -307,7 +307,7 @@ export const pendingSwap: PendingSwap[] = [
       swaps: [
         {
           swapperId: 'Osmosis',
-          swapperLogo: '',
+          swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
           swapperType: 'DEX',
           from: {
             symbol: 'JUNO',
@@ -581,7 +581,7 @@ export const pendingSwap: PendingSwap[] = [
         {
           swapperId: 'Osmosis',
           swapperType: 'DEX',
-          swapperLogo: '',
+          swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
 
           from: {
             symbol: 'JUNO',

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/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import {
   LiquiditySourcesSelector,
   PropTypes,
 } from './LiquiditySourcesSelector';
-import { liquiditySources } from '../LiquiditySourceList/mockData';
+import { liquiditySources } from '../../components/LiquiditySourceList/mockData';
 
 export default {
-  title: 'Liquidity Sources Selector',
+  title: 'Containers/Liquidity Sources Selector',
   component: LiquiditySourcesSelector,
-} as ComponentMeta<typeof LiquiditySourcesSelector>;
+  args: {
+    loadingStatus: 'success',
+  },
+} as Meta<typeof LiquiditySourcesSelector>;
 
 export const Main = (args: PropTypes) => (
   <LiquiditySourcesSelector {...args} list={liquiditySources} />

package/src/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -2,9 +2,8 @@ import { CSSProperties } from '@stitches/react';
 import React from 'react';
 import { containsText } from '../../helper';
 import { LiquiditySource, LoadingStatus } from '../../types/meta';
-import { Button } from '../Button';
-import { LiquiditySourceList } from '../LiquiditySourceList';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+import { Button, SecondaryPage } from '../../components';
+import { LiquiditySourceList } from '../../components/LiquiditySourceList';
 
 const filterLiquiditySources = (
   liquiditySources: LiquiditySource[],

package/{dist/components/LiquiditySourcesSelector/index.d.ts → src/containers/LiquiditySourcesSelector/index.ts}

@@ -1 +1 @@
-export { LiquiditySourcesSelector } from './LiquiditySourcesSelector';
+export { LiquiditySourcesSelector } from './LiquiditySourcesSelector';

package/src/containers/Settings/Settings.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Settings, PropTypes } from './Settings';
+import { liquiditySources } from '../../components/LiquiditySourceList/mockData';
+import { SwapContainer } from '../../components';
+
+export default {
+  title: 'Containers/Settings',
+  component: Settings,
+  args: {
+    slippages: [0.5, 1, 3, 5, 8, 13, 20],
+    selectedSlippage: 3,
+    minSlippage: 1,
+    maxSlippage: 10,
+  },
+} as Meta<typeof Settings>;
+
+
+export const Main = (args: PropTypes) => (
+  <SwapContainer>
+    <Settings
+      {...args}
+      liquiditySources={liquiditySources}
+      selectedLiquiditySources={liquiditySources.slice(0, 5)}
+    />
+  </SwapContainer>
+);

package/src/{components → containers}/Settings/Settings.tsx

@@ -1,18 +1,21 @@
 import { styled } from '../../theme';
 import React, { useState } from 'react';
-import { AngleRightIcon } from '../Icon';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { Typography } from '../Typography';
-import { Chip } from '../Chip';
+
 import { LiquiditySource, LoadingStatus } from '../../types/meta';
-import { TextField } from '../TextField';
-import { Radio } from '../Radio';
-import { Switch } from '../Switch';
-import { Button } from '../Button';
+import {
+  AngleRightIcon,
+  Button,
+  Chip,
+  Radio,
+  SecondaryPage,
+  Switch,
+  TextField,
+  Typography,
+} from '../../components';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   padding: '$16',
 });
 
@@ -60,7 +63,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 +77,7 @@ export interface PropTypes {
   infiniteApprove: boolean;
   toggleInfiniteApprove: (infinite: boolean) => void;
   loadingStatus: LoadingStatus;
+  singleTheme?: boolean;
 }
 
 export function Settings(props: PropTypes) {
@@ -93,6 +97,7 @@ export function Settings(props: PropTypes) {
     toggleInfiniteApprove,
     infiniteApprove,
     loadingStatus,
+    singleTheme,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -132,7 +137,7 @@ export function Settings(props: PropTypes) {
           ))}
           <TextField
             type="number"
-            value={customSlippage}
+            value={customSlippage || ''}
             onChange={(event) => {
               const parsedValue = parseFloat(event.target.value);
               if (
@@ -153,20 +158,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 +187,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/{dist/components/Settings/index.d.ts → src/containers/Settings/index.ts}

@@ -1 +1 @@
-export { Settings } from './Settings';
+export { Settings } from './Settings';

package/src/containers/SwapHistory/SwapHistory.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { PropTypes, SwapHistory } from './SwapHistory';
 import { pendingSwap } from './mock';
 
 export default {
-  title: 'Swap History',
+  title: 'Containers/Swap History',
   component: SwapHistory,
-} as ComponentMeta<typeof SwapHistory>;
+} as Meta<typeof SwapHistory>;
 
 export const Main = (args: PropTypes) => (
   <SwapHistory {...args} pendingSwap={pendingSwap} />

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -6,12 +6,11 @@ import {
   Typography,
   CheckCircleIcon,
   InfoCircleIcon,
-  Spacer,
+  Divider,
   Button,
   Alert,
   Drawer,
   Spinner,
-  Divider,
   Image,
 } from '../../components';
 import { styled } from '../../theme';
@@ -53,7 +52,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutrals800'
+  color: '$neutral800',
 });
 
 export const Fee = styled('div', {
@@ -96,7 +95,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 +136,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 +168,7 @@ const RequestId = styled('div', {
 
 const ExtraDetails = styled('div', {
   padding: '0',
-  color: '$neutrals600',
+  color: '$neutral600',
   fontSize: '$10',
 });
 
@@ -243,7 +242,7 @@ export function SwapHistory(props: PropTypes) {
                 onClick={onCopy.bind(null, pendingSwap?.requestId)}
               >
                 <RequestId>{pendingSwap?.requestId}</RequestId>
-                <Spacer size={4} />
+                <Divider size={4} direction="horizontal" />
                 <Button type="primary" variant="ghost" size="compact">
                   {isCopied ? 'Copied!' : 'Copy'}
                 </Button>
@@ -408,7 +407,7 @@ export function SwapHistory(props: PropTypes) {
             >
               Skip
             </Button>
-            <Spacer size={16} />
+            <Divider size={16} direction="horizontal" />
             <Button
               variant="contained"
               type="error"

package/src/containers/SwapHistory/mock.ts

@@ -34,7 +34,7 @@ export const pendingSwap: PendingSwap = {
       {
         swapperId: 'Osmosis',
         swapperType: 'DEX',
-        swapperLogo: '',
+        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
         from: {
           symbol: 'JUNO',
           logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
@@ -171,7 +171,7 @@ export const pendingSwap: PendingSwap = {
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
-      swapperLogo: '',
+      swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       expectedOutputAmountHumanReadable: '1.540670',
       outputAmount: '1.540658',
       status: 'running',

package/src/{components → containers}/TokenSelector/TokenSelector.stories.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { TokenSelector, PropTypes } from './TokenSelector';
-import { tokensMeta } from '../TokenList/mockData';
+import { tokensMeta } from '../../components/TokenList/mockData';
 
 export default {
-  title: 'Token Selector',
+  title: 'Containers/Token Selector',
   component: TokenSelector,
-  argTypes: {
-    type: {
-      defaultValue: 'Source',
-    },
+  args: {
+    type: 'Source',
+    loadingStatus: 'success',
   },
-} as ComponentMeta<typeof TokenSelector>;
+} as Meta<typeof TokenSelector>;
 
 export const Main = (args: PropTypes) => (
   <TokenSelector {...args} list={tokensMeta} selected={tokensMeta[0]} />

package/src/{components → containers}/TokenSelector/TokenSelector.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { containsText } from '../../helper';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { TokenList } from '../TokenList';
-import { TokenWithAmount } from '../TokenList/TokenList';
+
 import { LoadingStatus } from '../../types/meta';
-import { Spinner } from '../Spinner';
-import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { styled } from '../../theme';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { LoadingFailedAlert, SecondaryPage, Spinner } from '../../components';
+import {
+  TokenList,
+  TokenWithAmount,
+} from '../../components/TokenList/TokenList';
 
 export const LoaderContainer = styled('div', {
   display: 'flex',

package/{dist/components/TokenSelector/index.d.ts → src/containers/TokenSelector/index.ts}

@@ -1 +1 @@
-export { TokenSelector } from './TokenSelector';
+export { TokenSelector } from './TokenSelector';

package/src/containers/index.ts

@@ -1,3 +1,8 @@
 export * from './ConfirmSwap';
 export * from './History';
 export * from './SwapHistory';
+export * from './BlockchainSelector';
+export * from './ConnectWalletsModal';
+export * from './LiquiditySourcesSelector';
+export * from './TokenSelector';
+export * from './Settings';

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';

package/dist/components/Spacer/Spacer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface PropTypes {
-    size?: 4 | 8 | 12 | 16 | 18 | 20 | 24;
-    direction?: 'vertical' | 'horizontal';
-}
-export declare function Spacer({ size, direction }: PropTypes): JSX.Element;

package/dist/components/Spacer/Spacer.stories.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { PropTypes } from './Spacer';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, PropTypes>;
-export default _default;
-export declare const Main: (props: PropTypes) => JSX.Element;

package/dist/components/Spacer/index.d.ts

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

package/dist/components/SwapContainer/SwapContainer.stories.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { PropTypes } from './SwapContainer';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, React.PropsWithChildren<PropTypes>>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/TokenSelector/TokenSelector.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { TokenWithAmount } from '../TokenList/TokenList';
-import { LoadingStatus } from '../../types/meta';
-export declare const LoaderContainer: any;
-export interface PropTypes {
-    list: TokenWithAmount[];
-    type?: 'Source' | 'Destination';
-    selected: TokenWithAmount | null;
-    onChange: (token: TokenWithAmount) => void;
-    onBack?: () => void;
-    loadingStatus: LoadingStatus;
-    hasHeader?: boolean;
-}
-export declare function TokenSelector(props: PropTypes): JSX.Element;