@rango-dev/ui 0.1.10-next.73 → 0.1.10-next.75

package/src/components/Icon/TrashIcon.tsx

@@ -2,28 +2,30 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const TrashIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 16, color, ...props }) => {
-    return (
-      <SvgWithStrokeColor
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        color={color}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="_icon"
-        {...props}
-      >
-        <path
-          d="M21.5 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3l-2.04.2M9 4.97l.22-1.31C9.38 2.71 9.5 2 11.19 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M19.35 9.14l-.65 10.07c-.11 1.57-.2 2.79-2.99 2.79H9.29c-2.79 0-2.88-1.22-2.99-2.79L5.65 9.14M10.83 16.5h3.33M10 12.5h5"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const TrashIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M21.5 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3l-2.04.2M9 4.97l.22-1.31C9.38 2.71 9.5 2 11.19 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M19.35 9.14l-.65 10.07c-.11 1.57-.2 2.79-2.99 2.79H9.29c-2.79 0-2.88-1.22-2.99-2.79L5.65 9.14M10.83 16.5h3.33M10 12.5h5"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
 
 TrashIcon.toString = () => '._icon';

package/src/components/Icon/TryAgainIcon.tsx

@@ -2,28 +2,30 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const TryAgainIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 16, color, ...props }) => {
-    return (
-      <SvgWithStrokeColor
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        color={color}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="_icon"
-        {...props}
-      >
-        <path
-          d="M22 12c0 5.52-4.48 10-10 10s-8.89-5.56-8.89-5.56m0 0h4.52m-4.52 0v5M2 12C2 6.48 6.44 2 12 2c6.67 0 10 5.56 10 5.56m0 0v-5m0 5h-4.44"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const TryAgainIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M22 12c0 5.52-4.48 10-10 10s-8.89-5.56-8.89-5.56m0 0h4.52m-4.52 0v5M2 12C2 6.48 6.44 2 12 2c6.67 0 10 5.56 10 5.56m0 0v-5m0 5h-4.44"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
 
 TryAgainIcon.toString = () => '._icon';

package/src/components/Icon/VerticalSwapIcon.tsx

@@ -2,35 +2,37 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const VerticalSwapIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 16, color, ...props }) => {
-    return (
-      <SvgWithStrokeColor
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        color={color}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="_icon"
-        {...props}
-      >
-        <path
-          d="m13.82 6.85 3.04 3.04M13.82 17.15V6.85M10.18 17.15l-3.04-3.04M10.18 6.85v10.3"
-          strokeWidth={1.5}
-          strokeMiterlimit={10}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const VerticalSwapIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="m13.82 6.85 3.04 3.04M13.82 17.15V6.85M10.18 17.15l-3.04-3.04M10.18 6.85v10.3"
+        strokeWidth={1.5}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
 
 VerticalSwapIcon.toString = () => '._icon';

package/src/components/Icon/WalletIconIcon.tsx

@@ -2,37 +2,39 @@ import * as React from 'react';
 import { SvgWithFillColor } from './common';
 import { IconProps } from './types';
 
-export const WalletIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 16, color, ...props }) => {
-    return (
-      <SvgWithFillColor
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        color={color}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="_icon"
-        {...props}
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M4.51 7.205a3.018 3.018 0 0 0-3.01 3.01v6.73a3.018 3.018 0 0 0 3.01 3.01h11.48a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227 2.743 2.743 0 0 1 1.971-.82H19v-.69a3.018 3.018 0 0 0-3.01-3.01H4.51ZM0 10.215a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H4.51A4.518 4.518 0 0 1 0 16.945v-6.73Z"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12.35 2.655a1.15 1.15 0 0 0-1.554-1.079l-7.94 3A2.098 2.098 0 0 0 1.5 6.547v4.569a.75.75 0 1 1-1.5 0v-4.57c0-1.5.922-2.84 2.325-3.371l7.94-3s-.001 0 0 0c1.732-.657 3.585.629 3.585 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM17.729 12.405c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.943a.276.276 0 0 0 .267-.27v-2.06a.276.276 0 0 0-.267-.27h-2.063Zm-1.97-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.723 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.778-1.03-2.907-2.553a2.759 2.759 0 0 1 .816-2.227Z"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M4.5 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Z"
-        />
-      </SvgWithFillColor>
-    );
-  }
-);
+export const WalletIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.51 7.205a3.018 3.018 0 0 0-3.01 3.01v6.73a3.018 3.018 0 0 0 3.01 3.01h11.48a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227 2.743 2.743 0 0 1 1.971-.82H19v-.69a3.018 3.018 0 0 0-3.01-3.01H4.51ZM0 10.215a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H4.51A4.518 4.518 0 0 1 0 16.945v-6.73Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.35 2.655a1.15 1.15 0 0 0-1.554-1.079l-7.94 3A2.098 2.098 0 0 0 1.5 6.547v4.569a.75.75 0 1 1-1.5 0v-4.57c0-1.5.922-2.84 2.325-3.371l7.94-3s-.001 0 0 0c1.732-.657 3.585.629 3.585 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM17.729 12.405c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.943a.276.276 0 0 0 .267-.27v-2.06a.276.276 0 0 0-.267-.27h-2.063Zm-1.97-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.723 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.778-1.03-2.907-2.553a2.759 2.759 0 0 1 .816-2.227Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Z"
+      />
+    </SvgWithFillColor>
+  );
+};
 
 WalletIcon.toString = () => '._icon';

package/src/components/Icon/WarningIcon.tsx

@@ -2,34 +2,36 @@ import * as React from 'react';
 import { IconProps } from './types';
 import { SvgWithStrokeColor } from './common';
 
-export const WarningIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 16, color, ...props }) => {
-    return (
-      <SvgWithStrokeColor
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        color={color}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="_icon"
-        {...props}
-      >
-        <path
-          d="M12 9v5M12 21.41H5.94c-3.47 0-4.92-2.48-3.24-5.51l3.12-5.62L8.76 5c1.78-3.21 4.7-3.21 6.48 0l2.94 5.29 3.12 5.62c1.68 3.03.22 5.51-3.24 5.51H12v-.01Z"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M11.994 17h.01"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const WarningIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M12 9v5M12 21.41H5.94c-3.47 0-4.92-2.48-3.24-5.51l3.12-5.62L8.76 5c1.78-3.21 4.7-3.21 6.48 0l2.94 5.29 3.12 5.62c1.68 3.03.22 5.51-3.24 5.51H12v-.01Z"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.994 17h.01"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
 
 WarningIcon.toString = () => '._icon';

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -55,30 +55,9 @@ export function LiquiditySourceList(props: PropTypes) {
       if (clickedItem.selected) return [...prevState, clickedItem];
       return prevState.filter((item) => item.title != clickedItem.title);
     });
-    onChange(clickedItem);
-  };
-
-  const LiquiditySourceItem = ({
-    liquiditySource,
-    selected,
-  }: {
-    liquiditySource: LiquiditySource;
-    selected: boolean;
-  }) => {
-    return (
-      <Button
-        size="large"
-        align="start"
-        variant="outlined"
-        prefix={<LiquidityImage src={liquiditySource.logo} />}
-        suffix={<Switch checked={selected} />}
-        style={{ marginBottom: '12px' }}
-        type={selected ? 'primary' : undefined}
-        onClick={changeLiquiditySources.bind(null, liquiditySource)}
-      >
-        <Typography variant="body1">{liquiditySource.title}</Typography>
-      </Button>
-    );
+    setTimeout(() => {
+      onChange(clickedItem);
+    }, 200);
   };
 
   const isSelected = (liquiditySource: LiquiditySource) =>
@@ -88,12 +67,13 @@ export function LiquiditySourceList(props: PropTypes) {
     <div style={{ height: '450px', ...listContainerStyle }}>
       <div>
         <LiquiditySourceType variant="h5">Bridges</LiquiditySourceType>
-        <Spacer size={16} direction="vertical"/>
+        <Spacer size={16} direction="vertical" />
         {groupLiquiditySources(list).bridge.map((liquiditySource, index) => (
           <LiquiditySourceItem
             liquiditySource={liquiditySource}
             key={index}
             selected={isSelected(liquiditySource)}
+            onChange={changeLiquiditySources}
           />
         ))}
       </div>
@@ -106,9 +86,35 @@ export function LiquiditySourceList(props: PropTypes) {
             liquiditySource={liquiditySource}
             key={index}
             selected={isSelected(liquiditySource)}
+            onChange={changeLiquiditySources}
           />
         ))}
       </div>
     </div>
   );
 }
+
+const LiquiditySourceItem = ({
+  liquiditySource,
+  selected,
+  onChange,
+}: {
+  liquiditySource: LiquiditySource;
+  selected: boolean;
+  onChange: (clickedItem: LiquiditySource) => void;
+}) => {
+  return (
+    <Button
+      size="large"
+      align="start"
+      variant="outlined"
+      prefix={<LiquidityImage src={liquiditySource.logo} />}
+      suffix={<Switch checked={selected} />}
+      style={{ marginBottom: '12px' }}
+      type={selected ? 'primary' : undefined}
+      onClick={onChange.bind(null, liquiditySource)}
+    >
+      <Typography variant="body1">{liquiditySource.title}</Typography>
+    </Button>
+  );
+};

package/src/components/Radio/Radio.tsx

@@ -81,8 +81,8 @@ export function Radio(props: PropTypes) {
         direction={direction}
         style={style}
       >
-        {props.options.map((option) => (
-          <ItemContainer>
+        {props.options.map((option, index) => (
+          <ItemContainer key={index}>
             <StyledItem value={option.value} id={option.value}>
               <StyledIndicator />
             </StyledItem>

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -6,6 +6,7 @@ import { Typography } from '../Typography';
 const Row = styled('div', {
   display: 'flex',
   flexWrap: 'wrap',
+  justifyContent: 'center',
 });
 
 const Circle = styled('div', {
@@ -101,7 +102,7 @@ export function SelectableWalletList({
             key={index}
           >
             <img src={w.image} alt={w.walletType} width={24} height={24} />
-            <Typography variant="body2">{w.walletType}</Typography>
+            <Typography variant="body2">{w.name}</Typography>
             <Circle checked={checked}>
               <SolidCircle checked={checked} />
             </Circle>

package/src/components/Switch/Switch.tsx

@@ -28,7 +28,7 @@ const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   width: '18px',
   height: '18px',
   backgroundColor: '$neutrals500',
-  transition: ' transform 100ms',
+  transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
   '&[data-state="checked"]': {

package/src/components/Tooltip/Tooltip.tsx

@@ -88,6 +88,10 @@ const TooltipArrow = styled(RadixTooltip.Arrow, {
   },
 });
 
+const ChildrenWrapper = styled('div', {
+  display: 'inline-block',
+});
+
 export function Tooltip({
   children,
   content,
@@ -97,7 +101,9 @@ export function Tooltip({
   return (
     <RadixTooltip.Provider>
       <RadixTooltip.Root>
-        <TooltipTrigger>{children}</TooltipTrigger>
+        <TooltipTrigger asChild>
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </TooltipTrigger>
         <RadixTooltip.Portal>
           <TooltipContent color={color} side={side} sideOffset={5}>
             {content}

package/src/components/Typography/Typography.tsx

@@ -4,6 +4,7 @@ import { styled } from '../../theme';
 const TypographyContainer = styled('span', {
   margin: 0,
   color: '$foreground',
+  display: 'inline-block',
   variants: {
     variant: {
       h1: {

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
 import { BestRouteResponse } from 'rango-sdk';
-import React, { PropsWithChildren } from 'react';
+import React, { Fragment, PropsWithChildren } from 'react';
 import { Alert } from '../../components/Alert';
 import { Button } from '../../components/Button';
 import { RetryIcon, GasIcon } from '../../components/Icon';
@@ -105,7 +105,7 @@ export function ConfirmSwap({
         </Footer>
       }
       Content={bestRoute?.result?.swaps.map((swap, index) => (
-        <>
+        <Fragment key={index}>
           <Alerts>
             {error && <Alert description={error} type="error" />}
             {warning && <Alert description={warning} type="warning" />}
@@ -147,7 +147,7 @@ export function ConfirmSwap({
             blockchain={swap.to.blockchain}
             amount={swap.toAmount}
           />
-        </>
+        </Fragment>
       ))}
     />
   );

package/src/containers/ConfirmWallets/ConfirmWallets.tsx

@@ -47,7 +47,7 @@ export function ConfirmWallets({
   return (
     <SecondaryPage
       textField={false}
-      title="Swap"
+      title="Confirm Swap"
       onBack={onBack}
       Footer={
         <Footer>

package/src/containers/ConfirmWallets/types.ts

@@ -6,4 +6,5 @@ export interface SelectableWallet {
   address: string;
   image: string;
   selected: boolean;
+  name: string;
 }

package/src/containers/History/History.tsx

@@ -51,11 +51,12 @@ const SwapsGroup = (props: Omit<PropTypes, 'onBack'>) => {
 
   return (
     <>
-      {swapsInGroup.map((group) => (
-        <Group>
+      {swapsInGroup.map((group, index) => (
+        <Group key={index}>
           <GroupTitle variant="body2">{group.title}</GroupTitle>
-          {group.swaps.map((swap: PendingSwap) => (
+          {group.swaps.map((swap: PendingSwap, index: number) => (
             <SwapDetail
+              key={index}
               swap={swap}
               status={swap.status}
               onClick={onSwapClick}

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import {
   StepDetail,
   SecondaryPage,
@@ -70,7 +70,7 @@ export function SwapHistory(props: PropTypes) {
       Content={
         <>
           {pendingSwap?.steps.map((step, index) => (
-            <>
+            <Fragment key={index}>
               {index === 0 && (
                 <RelativeContainer>
                   <StepDetail
@@ -110,7 +110,7 @@ export function SwapHistory(props: PropTypes) {
                   {!!step.explorerUrl && (
                     <div>
                       {step.explorerUrl.map((item, index) => (
-                        <InternalDetail>
+                        <InternalDetail key={index}>
                           <DescriptionContainer>
                             <CheckCircleIcon color="success" />
                             <Description variant="body2">
@@ -156,7 +156,7 @@ export function SwapHistory(props: PropTypes) {
                 blockchain={step.toBlockchain}
                 amount={step.outputAmount}
               />
-            </>
+            </Fragment>
           ))}
         </>
       }