@rango-dev/ui 0.23.0 → 0.24.0

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -1,10 +1,7 @@
 import { Button } from '../../components';
-import { css, darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
-  maxWidth: '180px',
-  minWidth: '130px',
-  flexGrow: 1,
   backgroundColor: 'transparent',
   color: '$neutral700',
   '&:disabled': {
@@ -30,35 +27,23 @@ export const Container = styled(Button, {
   },
 });
 
-export const chainNameStyles = css();
-
 export const TokenSectionContainer = styled('div', {
-  maxWidth: '170px',
+  width: '10.625rem',
   padding: '$2 $5',
   display: 'flex',
   borderRadius: '$xs',
   justifyContent: 'start',
   boxSizing: 'border-box',
   alignItems: 'center',
-  [`& .${chainNameStyles}`]: {
-    $$color: '$colors$neutral600',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral700',
-    },
-    color: '$$color',
-  },
-});
 
-export const tokenChainStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'start',
-  paddingLeft: '$10',
-  flexGrow: 1,
-});
-
-export const skeletonStyles = css({
-  width: '100%',
-  padding: '$5 $0',
+  '& .token-chain-name': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'start',
+    paddingLeft: '$10',
+  },
+  '& .token-chain-name__skeleton': {
+    padding: '$5 $0',
+  },
 });

package/src/containers/SwapInput/TokenSection.tsx

@@ -5,13 +5,7 @@ import React from 'react';
 
 import { ChainToken, Divider, Skeleton, Typography } from '../../components';
 
-import {
-  chainNameStyles,
-  Container,
-  skeletonStyles,
-  tokenChainStyles,
-  TokenSectionContainer,
-} from './TokenSection.styles';
+import { Container, TokenSectionContainer } from './TokenSection.styles';
 
 export function TokenSection(props: TokenSectionProps) {
   const {
@@ -33,12 +27,12 @@ export function TokenSection(props: TokenSectionProps) {
           tokenImage={tokenImage}
           loading={loading}
         />
-        <div className={tokenChainStyles()}>
+        <div className="token-chain-name">
           {loading ? (
-            <div className={skeletonStyles()}>
-              <Skeleton variant="text" size="large" />
+            <div className="token-chain-name__skeleton">
+              <Skeleton variant="text" size="large" width={92} />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" />
+              <Skeleton variant="text" size="medium" width={92} />
             </div>
           ) : (
             <>
@@ -47,10 +41,7 @@ export function TokenSection(props: TokenSectionProps) {
                   ? i18n.t('Token')
                   : tokenSymbol}
               </Typography>
-              <Typography
-                variant="body"
-                size="medium"
-                className={chainNameStyles()}>
+              <Typography variant="body" size="medium" color="$neutral600">
                 {error || (!loading && !chain) ? i18n.t('Chain') : chain}
               </Typography>
             </>

package/src/containers/TokenSelector/TokenSelector.tsx

@@ -1,13 +1,14 @@
-import type { TokenWithAmount } from '../../components/TokenList/TokenList';
-import type { LoadingStatus } from '../../types/meta';
-
 import React from 'react';
+import { containsText } from '../../helper';
 
-import { LoadingFailedAlert, SecondaryPage, Spinner } from '../../components';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
-import { TokenList } from '../../components/TokenList/TokenList';
+import { LoadingStatus } from '../../types/meta';
 import { styled } from '../../theme';
-import { containsText } from '../../utils';
+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',
@@ -44,7 +45,8 @@ export function TokenSelector(props: PropTypes) {
       hasHeader={hasHeader}
       title={`Select ${type} token`}
       onBack={onBack}
-      textFieldPlaceholder="Search tokens by name">
+      textFieldPlaceholder="Search tokens by name"
+    >
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);
 

package/src/helper/index.ts

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+export function containsText(text: string, searchText: string): boolean {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
+
+export function getConciseAddress(
+  address: string | null,
+  maxChars = 8,
+  ellipsisLength = 3
+): string | null {
+  if (!address) {
+    return null;
+  }
+  if (address.length < 2 * maxChars + ellipsisLength) {
+    return address;
+  }
+  const start = Math.ceil((address.length - maxChars) / 2);
+  const end = address.length - maxChars;
+  return `${address.substr(start, maxChars)}${'.'.repeat(
+    ellipsisLength
+  )}${address.substr(end)}`;
+}
+
+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/icons/index.ts

@@ -7,13 +7,11 @@ export { default as ChevronUpIcon } from './ChevronUp';
 export { default as CloseIcon } from './Close';
 export { default as CompleteIcon } from './Complete';
 export { default as CopyIcon } from './Copy';
-export { default as CosmosCategoryIcon } from './CosmosCategory';
 export { default as CustomColorsIcon } from './CustomColors';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
 export { default as DoneIcon } from './Done';
-export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
@@ -21,7 +19,6 @@ export { default as GasIcon } from './Gas';
 export { default as InProgressIcon } from './InProgress';
 export { default as InfoErrorIcon } from './InfoError';
 export { default as InfoIcon } from './Info';
-export { default as LanguageIcon } from './Language';
 export { default as LightModeIcon } from './LightMode';
 export { default as LinkIcon } from './Link';
 export { default as LoadingIcon } from './Loading';
@@ -32,7 +29,6 @@ export { default as NoNotificationIcon } from './NoNotification';
 export { default as NotificationNumberIcon } from './NotificationNumber';
 export { default as NotificationsIcon } from './Notifications';
 export { default as NumberIcon } from './Number';
-export { default as OtherCategoryIcon } from './OtherCategory';
 export { default as PinIcon } from './Pin';
 export { default as RefreshIcon } from './Refresh';
 export { default as ReverseIcon } from './Reverse';
@@ -40,7 +36,6 @@ export { default as RouteIcon } from './Route';
 export { default as SearchIcon } from './Search';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
-export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';
 export { default as ChainsIcon } from './Chains';

package/src/index.ts

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

package/src/theme.ts

@@ -185,10 +185,10 @@ export const darkColors = {
   secondary600: '#2B3462',
 
   neutral: '#222222',
-  neutral900: '#E9E9E9',
-  neutral800: '#E6E6E6',
-  neutral700: '#B8B8B8',
-  neutral600: '#A2A2A2',
+  neutral900: '#F2F2F2',
+  neutral800: '#EEEEEE',
+  neutral700: '#E9E9E9',
+  neutral600: '#B8B8B8',
   neutral500: '#222222',
   neutral400: '#1B1B1B',
   neutral300: '#121212',

package/src/types/index.ts

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

package/src/types/swaps.ts

@@ -1,7 +1,45 @@
 import type {
+  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 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/widget/ui/src/components/QuoteCost/QuoteCost.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './QuoteCost.types';
-import React from 'react';
-export declare function QuoteCost(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=QuoteCost.d.ts.map

package/dist/widget/ui/src/components/QuoteCost/QuoteCost.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteCost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAgCzC"}