@rango-dev/ui 0.26.1-next.1 → 0.26.1-next.10

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,4 +2,8 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
+  onClickFee?: () => void;
+  tooltipGas?: string;
+  feeWarning?: boolean;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/RefreshProgressButton/RefreshProgressButton.styles.ts

@@ -0,0 +1,28 @@
+import { styled } from '../../theme';
+
+export const StyledEllipse = styled('ellipse', {
+  cx: '12.5px',
+  cy: '12.5px',
+  rx: '7.7px',
+  ry: '7.7px',
+  strokeLinecap: 'round',
+  fill: 'none',
+  strokeDasharray: 100,
+  transform: `rotate(20deg)`,
+  transformOrigin: 'center',
+  variants: {
+    type: {
+      'in-progress': {
+        stroke: '$info500',
+        strokeWidth: 2,
+      },
+      basic: {
+        strokeWidth: 1.8,
+      },
+    },
+  },
+});
+
+export const StyledPath = styled('path', {
+  fill: '$info500',
+});

package/src/components/RefreshProgressButton/RefreshProgressButton.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { SvgIconPropsWithChildren } from '../SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+import { StyledEllipse, StyledPath } from './RefreshProgressButton.styles';
+
+const DEFAULT_STROKE_DASHOFFSET = 59;
+const MAX_PERCENTAGE = 100;
+const MAX_PROGRESS = 41;
+const MIN_PROGRESS = 0;
+const NORMALIZE_FACTOR = 10;
+const OPACITY_THRESHOLD = 82;
+const DIVISION_FACTOR = 2;
+
+const Ellipse = (props: { fill?: string; progress?: number }) => {
+  const type = props.progress ? 'in-progress' : 'basic';
+  return (
+    <StyledEllipse
+      type={type}
+      stroke="currentColor"
+      strokeDashoffset={props.progress || DEFAULT_STROKE_DASHOFFSET}
+    />
+  );
+};
+
+function RefreshProgressButton(
+  props: SvgIconPropsWithChildren & { progress: number }
+) {
+  const normalizeValue = (value: number) => {
+    return (value - OPACITY_THRESHOLD) / NORMALIZE_FACTOR;
+  };
+  const normalizedProgress = Math.min(
+    props.progress / DIVISION_FACTOR,
+    MAX_PROGRESS
+  );
+  const opacity =
+    normalizedProgress !== MAX_PROGRESS
+      ? MIN_PROGRESS
+      : normalizeValue(props.progress);
+
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <Ellipse />
+      <Ellipse progress={MAX_PERCENTAGE - normalizedProgress} />
+
+      <path
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fillOpacity={opacity}
+      />
+      <path
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fillOpacity={opacity}
+      />
+    </svg>
+  );
+}
+export { RefreshProgressButton };

package/src/components/RefreshProgressButton/index.ts

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

package/src/components/StepDetails/StepDetails.styles.ts

@@ -12,6 +12,7 @@ export const Container = styled('div', {
     type: {
       'quote-details': { border: 'none' },
       'swap-progress': {
+        backgroundColor: '$neutral100',
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',
@@ -33,10 +34,6 @@ export const Container = styled('div', {
       error: { borderColor: '$error500' },
     },
   },
-  '& .swapper__description': {
-    fontWeight: '$medium',
-  },
-  '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
 });
 
 export const SwapperImage = styled('div', {
@@ -86,6 +83,26 @@ export const DashedLine = styled('div', {
   },
 });
 
+export const SwapperSeparator = styled('div', {
+  borderLeft: '1px solid transparent',
+  margin: '0 $12',
+  display: 'block',
+  height: '8px',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
 export const StepSeparator = styled('div', {
   borderLeft: '1px dashed transparent',
   margin: '0 $10',
@@ -114,7 +131,13 @@ export const tokensContainerStyles = css({
   width: '100%',
 });
 
-export const swapperStyles = css({
+export const swappersStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+export const swapperItemStyles = css({
   display: 'flex',
   alignItems: 'center',
 });

package/src/components/StepDetails/StepDetails.tsx

@@ -1,7 +1,7 @@
-import type { StepDetailsProps } from './StepDetails.types';
+import type { InternalSwap, StepDetailsProps } from './StepDetails.types';
 
 import { i18n } from '@lingui/core';
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import React, { forwardRef, Fragment, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
 import { NextIcon } from '../../icons';
@@ -17,7 +17,9 @@ import {
   stepInfoStyles,
   StepSeparator,
   SwapperImage,
-  swapperStyles,
+  swapperItemStyles,
+  SwapperSeparator,
+  swappersStyles,
   tokensContainerStyles,
   tokensStyles,
 } from './StepDetails.styles';
@@ -33,8 +35,20 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
       tabIndex,
       tooltipContainer,
     } = props;
+
+    const { from, to, swapper } = step;
     const containerRef = useRef<HTMLDivElement>(null);
     const isCompleted = state === 'completed' || state === 'error';
+    const swappers: InternalSwap[] = step.internalSwaps?.length
+      ? step.internalSwaps
+      : [
+          {
+            from: { blockchain: from.chain.displayName },
+            to: { blockchain: to.chain.displayName },
+            swapper,
+          },
+        ];
+
     useEffect(() => {
       const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
         ?.current;
@@ -51,27 +65,63 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className={swapperStyles()}>
-          {type === 'swap-progress' && hasSeparator && (
-            <StepSeparator state={state} />
-          )}
-          <SwapperImage state={state}>
-            <Image size={22} src={step.swapper.image} />
-          </SwapperImage>
-          <Typography
-            className="swapper__description"
-            ml={8}
-            size="small"
-            variant="body">
-            {i18n.t({
-              id: 'Swap on {fromChain} via {swapper}',
-              values: {
-                fromChain: step.from.chain.displayName,
-                swapper: step.swapper.displayName,
-              },
+        {type === 'quote-details' && (
+          <div className={swapperItemStyles()}>
+            <SwapperImage state={state}>
+              <Image size={22} src={step.swapper.image} />
+            </SwapperImage>
+            <Typography ml={8} size="medium" variant="label">
+              {i18n.t({
+                id: 'Swap on {fromChain} via {swapper}',
+                values: {
+                  fromChain: step.from.chain.displayName,
+                  swapper: step.swapper.displayName,
+                },
+              })}
+            </Typography>
+          </div>
+        )}
+
+        {type === 'swap-progress' && (
+          <div className={swappersStyles()}>
+            {hasSeparator && <StepSeparator state={state} />}
+            {swappers.map((swapperItem, index) => {
+              const key = `${swapperItem.swapper.displayName}-${index}`;
+              return (
+                <Fragment key={key}>
+                  <div
+                    id={swapperItem.swapper.displayName}
+                    className={swapperItemStyles()}>
+                    <SwapperImage state={state}>
+                      <Image size={22} src={swapperItem.swapper.image} />
+                    </SwapperImage>
+                    <Typography ml={8} size="medium" variant="label">
+                      {swapperItem?.swapper.type === 'DEX'
+                        ? i18n.t({
+                            id: 'Swap on {fromChain} via {swapper}',
+                            values: {
+                              fromChain: swapperItem.from.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })
+                        : i18n.t({
+                            id: 'Bridge to {toChain} via {swapper}',
+                            values: {
+                              toChain: swapperItem.to.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })}
+                    </Typography>
+                  </div>
+                  {index !== swappers.length - 1 && (
+                    <SwapperSeparator state={state} />
+                  )}
+                </Fragment>
+              );
             })}
-          </Typography>
-        </div>
+          </div>
+        )}
+
         <div className={stepInfoStyles()}>
           <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
           <div className={tokensContainerStyles()}>

package/src/components/StepDetails/StepDetails.types.ts

@@ -1,10 +1,25 @@
+import type { SwapperType } from 'rango-sdk';
 import type { ReactNode } from 'react';
 import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
 
 type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
 
+type SwapperInfo = SwapInputProps['chain'] & {
+  type?: SwapperType;
+};
+
+export type InternalSwap = {
+  swapper: SwapperInfo;
+  from: {
+    blockchain: string;
+  };
+  to: {
+    blockchain: string;
+  };
+};
+
 export type Step = {
-  swapper: SwapInputProps['chain'];
+  swapper: SwapperInfo;
   from: BaseStep;
   to: BaseStep;
   error?: {
@@ -13,6 +28,7 @@ export type Step = {
   };
   alerts?: ReactNode;
   state?: 'error' | 'warning';
+  internalSwaps?: InternalSwap[];
 };
 
 export type StepDetailsProps = {

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -32,6 +32,7 @@ export interface SwapTokenData {
       image: string;
     };
     amount: string;
+    realAmount: string;
   };
 
   to: {

package/src/components/SwapListItem/SwapToken.tsx

@@ -71,12 +71,13 @@ export function SwapToken(props: PropTypes) {
         token: fromToken,
         amount: fromAmount,
         blockchain: fromBlockchain,
+        realAmount: fromRealAmount,
       },
       to: {
         token: toToken,
         amount: toAmount,
         blockchain: toBlockchain,
-        realAmount,
+        realAmount: toRealAmount,
       },
     },
     status,
@@ -128,7 +129,7 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Tooltip content={fromAmount} container={tooltipContainer}>
+              <Tooltip content={fromRealAmount} container={tooltipContainer}>
                 <Typography size="small" variant="body" color="neutral700">
                   {fromAmount}
                 </Typography>
@@ -142,7 +143,7 @@ export function SwapToken(props: PropTypes) {
             <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
-            <Tooltip content={realAmount} container={tooltipContainer}>
+            <Tooltip content={toRealAmount} container={tooltipContainer}>
               <Typography size="small" variant="body" color="neutral700">
                 {toAmount}
               </Typography>

package/src/components/SwapListItem/mock.ts

@@ -305,6 +305,7 @@ export const swapTokenData: SwapTokenData = {
       image: 'https://api.rango.exchange/swappers/osmosis.png',
     },
     amount: '1.1',
+    realAmount: '1.1',
   },
   to: {
     token: {

package/src/components/Switch/Switch.styles.tsx

@@ -17,6 +17,7 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   padding: '0',
   cursor: 'pointer',
   transition: 'all 0.35s',
+  overflow: 'hidden',
 
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
@@ -41,6 +42,12 @@ export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
+  '&:hover': {
+    boxShadow: 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-moz-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-webkit-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-o-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+  },
 
   '&[data-state="checked"]': {
     transform: 'translateX(8px)',

package/src/components/TextField/TextField.tsx

@@ -17,14 +17,17 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     style,
     variant,
     fullWidth,
+    labelProps,
     ...inputAttributes
   } = props;
   return (
     <>
       {label && (
         <>
-          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
-            <Typography variant="label" size="large">
+          <Label
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            <Typography variant="label" size="large" {...labelProps}>
               {label}
             </Typography>
           </Label>

package/src/components/TextField/TextField.types.tsx

@@ -1,4 +1,5 @@
 import type { InputContainer } from './TextField.styles';
+import type { PropTypes as TypographyProps } from '../Typography/Typography.types';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof InputContainer>;
@@ -12,10 +13,11 @@ export type Ref =
   | undefined;
 
 export type PropTypes = {
-  label?: string;
+  label?: string | React.ReactNode;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   size?: BaseSizes;
   variant?: BaseVariants;
   fullWidth?: boolean;
+  labelProps?: TypographyProps;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'>;

package/src/components/Tooltip/Tooltip.styles.ts

@@ -5,6 +5,13 @@ import { Typography } from '../Typography';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',
+  variants: {
+    align: {
+      right: {
+        position: 'absolute',
+      },
+    },
+  },
 });
 
 export const TooltipTypography = styled(Typography, {

package/src/components/Tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     open,
     side = 'top',
     style,
+    align,
   } = props;
   return (
     <RadixTooltip.Provider delayDuration={0}>
@@ -28,7 +29,7 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
           <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
-          <TooltipContent side={side} sideOffset={sideOffset}>
+          <TooltipContent align={align} side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,8 +1,11 @@
+import type { TooltipContent } from './Tooltip.styles';
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
-import type { CSSProperties } from '@stitches/react';
+import type * as Stitches from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+type BaseProps = Stitches.VariantProps<typeof TooltipContent>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
 
 export interface PropTypes {
   content: ReactNode;
@@ -11,5 +14,6 @@ export interface PropTypes {
   sideOffset?: RadixTooltipContentProps['sideOffset'];
   container?: HTMLElement;
   open?: boolean;
-  style?: CSSProperties;
+  style?: Stitches.CSSProperties;
+  align?: BaseAlign;
 }

package/src/components/Wallet/Wallet.styles.ts

@@ -72,5 +72,5 @@ export const LoadingButton = styled('div', {
   backgroundColor: '$neutral100',
   alignItems: 'center',
   justifyContent: 'center',
-  width: 110,
+  width: 100,
 });

package/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './Modal';
 export * from './MessageBox';
 export * from './PercentageChange';
 export * from './RadioGroup';
+export * from './RefreshProgressButton';
 export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';

package/src/icons/Height.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgHeight(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Height">
+        <path
+          id="Height_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.3807 23.7933C12.1204 24.0689 11.6983 24.0689 11.4379 23.7933L7.19526 19.301C6.93491 19.0254 6.93491 18.5784 7.19526 18.3028C7.45561 18.0271 7.87772 18.0271 8.13807 18.3028L11.2426 21.59V2.41003L8.13807 5.69723C7.87772 5.97289 7.45561 5.97289 7.19526 5.69723C6.93491 5.42156 6.93491 4.97462 7.19526 4.69896L11.4379 0.206747C11.6983 -0.0689157 12.1204 -0.0689157 12.3807 0.206747L16.6234 4.69896C16.8837 4.97462 16.8837 5.42156 16.6234 5.69723C16.363 5.97289 15.9409 5.97289 15.6805 5.69723L12.576 2.41003V21.59L15.6805 18.3028C15.9409 18.0271 16.363 18.0271 16.6234 18.3028C16.8837 18.5784 16.8837 19.0254 16.6234 19.301L12.3807 23.7933Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgHeight;

package/src/icons/Key.tsx

@@ -0,0 +1,32 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgKey(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg">
+      <g id="key">
+        <path
+          id="Vector"
+          d="M3.26028 12.4995C3.20753 12.4995 3.1495 12.4942 3.10203 12.489L1.95736 12.3307C1.40876 12.2569 0.912912 11.7663 0.828513 11.2072L0.670263 10.052C0.617513 9.68278 0.775763 9.20278 1.03951 8.93377L3.35523 6.61815C2.98071 5.12011 3.41325 3.53768 4.51573 2.44581C6.22482 0.742057 9.00473 0.736782 10.7191 2.44581C11.5473 3.27394 12.0009 4.37637 12.0009 5.54737C12.0009 6.71837 11.5473 7.82079 10.7191 8.64893C9.61136 9.74608 8.03414 10.1786 6.54659 9.79883L4.2256 12.1144C4.00405 12.3465 3.60843 12.4995 3.26028 12.4995ZM7.61214 1.95525C6.68902 1.95525 5.77117 2.30339 5.0696 3.00493C4.1201 3.94911 3.77723 5.3311 4.17285 6.61815C4.21505 6.76056 4.17813 6.90826 4.07263 7.01375L1.59338 9.49289C1.50371 9.58256 1.42986 9.81465 1.44569 9.93597L1.60393 11.0911C1.63558 11.2916 1.85186 11.5184 2.05231 11.5448L3.20225 11.703C3.32885 11.7241 3.56095 11.6503 3.65063 11.5606L6.14042 9.07619C6.24592 8.97069 6.39889 8.93904 6.53604 8.98124C7.80731 9.38212 9.19463 9.03926 10.1441 8.0898C10.8193 7.41463 11.1939 6.50737 11.1939 5.54737C11.1939 4.58209 10.8193 3.6801 10.1441 3.00493C9.45838 2.30866 8.53526 1.95525 7.61214 1.95525Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_2"
+          d="M4.84974 11.3351C4.74951 11.3351 4.64929 11.2982 4.57016 11.2191L3.35692 10.0059C3.20394 9.85291 3.20394 9.59973 3.35692 9.44676C3.50989 9.29379 3.76309 9.29379 3.91607 9.44676L5.12931 10.66C5.28229 10.8129 5.28229 11.0661 5.12931 11.2191C5.05019 11.2982 4.94996 11.3351 4.84974 11.3351Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_3"
+          d="M7.64781 6.69786C6.99371 6.69786 6.46094 6.16511 6.46094 5.51104C6.46094 4.85697 6.99371 4.32422 7.64781 4.32422C8.30191 4.32422 8.83468 4.85697 8.83468 5.51104C8.83468 6.16511 8.30191 6.69786 7.64781 6.69786ZM7.64781 5.11543C7.43153 5.11543 7.25218 5.29478 7.25218 5.51104C7.25218 5.72731 7.43153 5.90665 7.64781 5.90665C7.86408 5.90665 8.04343 5.72731 8.04343 5.51104C8.04343 5.29478 7.86408 5.11543 7.64781 5.11543Z"
+          fill="#727272"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgKey;

package/src/icons/Refresh.tsx

@@ -8,9 +8,17 @@ function SvgRefresh(props: SvgIconPropsWithChildren) {
   return createElement(
     SvgIcon,
     props,
-    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M12.4546 0C15.6794 0 18.7049 1.27949 20.9399 3.51478C21.3431 3.9179 21.7166 4.34848 22.0576 4.80302L22.0546 2.40003C22.0546 1.78465 22.5179 1.27739 23.1147 1.20809L23.2546 1.20006C23.87 1.20006 24.3773 1.6633 24.4466 2.26008L24.4546 2.40003V8.4C24.4546 9.01539 23.9913 9.52264 23.3946 9.59194L23.2546 9.59998H17.2546C16.5919 9.59998 16.0546 9.06277 16.0546 8.39998C16.0546 7.7846 16.5179 7.27735 17.1147 7.20805L17.2546 7.20001L20.7707 7.20035C20.3512 6.47529 19.8376 5.80651 19.2428 5.21187C17.4533 3.42225 15.0365 2.40007 12.4547 2.40007C7.15284 2.40007 2.85471 6.69819 2.85471 12C2.85471 17.3019 7.15284 21.6 12.4547 21.6C15.0365 21.6 17.4535 20.5777 19.2428 18.7882C20.1344 17.8967 20.8439 16.8385 21.3267 15.6744C21.5668 15.0954 21.7496 14.4933 21.8718 13.8749C22.0006 13.2247 22.6318 12.802 23.2819 12.9305C23.9321 13.0591 24.3548 13.6904 24.2262 14.3406C24.0731 15.1149 23.8442 15.8689 23.5437 16.5936C22.9398 18.0497 22.0533 19.3719 20.9398 20.4852C18.7047 22.7205 15.6795 24 12.4545 24C5.82714 24 0.45459 18.6275 0.45459 12.0001C0.45459 5.37267 5.82719 0 12.4546 0Z"
+        d="M6.29926 18.2997C2.82191 15.1563 2.5569 9.7767 5.6942 6.30604C8.8315 2.83538 14.2165 2.55094 17.6939 5.69429C18.4094 6.34109 19.0142 7.07007 19.4955 7.88186C19.6905 8.2039 19.5837 8.61775 19.2617 8.8127C18.9396 9.00765 18.5258 8.90088 18.3308 8.57884C17.9196 7.89116 17.4024 7.2535 16.7871 6.69737C13.8648 4.05575 9.34494 4.28377 6.70333 7.20608C4.06171 10.1284 4.28973 14.6483 7.21204 17.2899C10.1343 19.9315 14.6542 19.7035 17.2959 16.7812C18.251 15.7246 18.8622 14.4301 19.0662 13.0348C19.1179 12.6684 19.4622 12.4086 19.8353 12.4663C20.2017 12.518 20.4616 12.8623 20.4038 13.2354C20.1624 14.9006 19.436 16.4435 18.2996 17.7007C15.1556 21.1653 9.77661 21.443 6.29926 18.2997Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
         fill="currentColor"
       />
     </svg>

package/src/icons/Width.tsx

@@ -0,0 +1,29 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgWidth(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Width" clipPath="url(#clip0_5933_20072)">
+        <path
+          id="Width_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.206748 12.0355C-0.0689161 11.8403 -0.0689161 11.5237 0.206748 11.3284L4.69896 8.14645C4.97462 7.95118 5.42156 7.95118 5.69722 8.14645C5.97289 8.34171 5.97289 8.65829 5.69722 8.85355L2.41003 11.182H21.59L18.3028 8.85355C18.0271 8.65829 18.0271 8.34171 18.3028 8.14645C18.5784 7.95118 19.0254 7.95118 19.301 8.14645L23.7933 11.3284C24.0689 11.5237 24.0689 11.8403 23.7933 12.0355L19.301 15.2175C19.0254 15.4128 18.5784 15.4128 18.3028 15.2175C18.0271 15.0223 18.0271 14.7057 18.3028 14.5104L21.59 12.182H2.41003L5.69722 14.5104C5.97289 14.7057 5.97289 15.0223 5.69722 15.2175C5.42156 15.4128 4.97462 15.4128 4.69896 15.2175L0.206748 12.0355Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5933_20072">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgWidth;

package/src/icons/index.ts

@@ -18,6 +18,7 @@ export { default as ErrorIcon } from './Error';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';
+export { default as HeightIcon } from './Height';
 export { default as InProgressIcon } from './InProgress';
 export { default as InfoErrorIcon } from './InfoError';
 export { default as InfoIcon } from './Info';
@@ -43,7 +44,9 @@ 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 WidthIcon } from './Width';
 export { default as ChainsIcon } from './Chains';
 export { default as ColorsIcon } from './Colors';
+export { default as KeyIcon } from './Key';
 export { default as SettingsIcon } from './Settings';
 export { default as StyleIcon } from './Style';