@rango-dev/ui 0.1.12 → 0.1.13-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.12",
+  "version": "0.1.13-next.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -54,8 +54,8 @@ export function BlockchainSelector(props: PropTypes) {
     <SecondaryPage
       textField={true}
       hasHeader={hasHeader}
-      textFieldPlaceholder="Search Blockchain By Name"
-      title={`Select ${type} Network`}
+      textFieldPlaceholder="Search blockchains by name"
+      title={`Select ${type} Blockchain`}
       onBack={onBack}
     >
       {(searchedFor) => {

package/src/components/Icon/ArrowRightIcon.tsx

@@ -15,9 +15,9 @@ export const ArrowRightIcon: React.FC<IconProps> = ({
       color={color}
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}

package/src/components/Icon/ChevronRightIcon.tsx

@@ -13,9 +13,9 @@ export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}

package/src/components/Icon/DisconnectIcon.tsx

@@ -13,9 +13,9 @@ export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}

package/src/components/Icon/HistoryIcon.tsx

@@ -15,9 +15,9 @@ export const HistoryIcon: React.FC<IconProps> = ({
       color={color}
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}

package/src/components/Icon/RetryIcon.tsx

@@ -13,9 +13,9 @@ export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}

package/src/components/Icon/SettingIcon.tsx

@@ -14,9 +14,9 @@ export const SettingsIcon: React.FC<IconProps> = ({
       viewBox="0 0 24 24"
       color={color}
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -37,7 +37,7 @@ export function LiquiditySourcesSelector(props: PropTypes) {
   return (
     <SecondaryPage
       textField={true}
-      textFieldPlaceholder="Search By Name"
+      textFieldPlaceholder="Search by name"
       title="Liquidity Sources"
       TopButton={
         <Button variant="ghost" type="primary" onClick={toggleAll}>

package/src/components/SwapContainer/SwapContainer.tsx

@@ -14,6 +14,22 @@ const MainContainer = styled('div', {
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
+  overflow: 'hidden',
+  '& *': {
+    boxSizing: 'border-box',
+    listStyleType: 'none',
+    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '$neutrals400',
+      borderRadius: '$10',
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: '$neutrals500',
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '$neutrals300',
+    },
+  },
   variants: {
     fixedHeight: {
       true: {

package/src/components/SwapDetail/Token.tsx

@@ -18,7 +18,9 @@ const TokenContainer = styled('div', {
 
 const TokenImage = styled('div', {
   position: 'relative',
-
+  'img': {
+    borderRadius: '50%',
+  },
   '.overlay': {
     position: 'absolute',
     right: -4,

package/src/components/TextField/TextField.tsx

@@ -23,12 +23,21 @@ const InputContainer = styled('div', {
   variants: {
     size: {
       small: {
+        '& input': {
+          fontSize: '$14',
+        },
         height: '$32',
       },
       medium: {
+        '& input': {
+          fontSize: '$15',
+        },
         height: '$40',
       },
       large: {
+        '& input': {
+          fontSize: '$16',
+        },
         height: '$48',
       },
     },
@@ -70,7 +79,6 @@ const Input = styled('input', {
   border: 'none',
   borderRadius: '$5',
   outline: 'none',
-  fontSize: '$l',
   backgroundColor: 'transparent',
   '-webkit-appearance': 'none',
   margin: 0,
@@ -83,7 +91,7 @@ const Input = styled('input', {
   },
   '&[type="number"]': {
     '-moz-appearance': 'textfield',
-  },
+  }
 });
 const Label = styled('label', {
   display: 'inline-block',

package/src/components/TokenSelector/TokenSelector.tsx

@@ -42,9 +42,9 @@ export function TokenSelector(props: PropTypes) {
     <SecondaryPage
       textField={true}
       hasHeader={hasHeader}
-      title={`Select ${type} Token`}
+      title={`Select ${type} token`}
       onBack={onBack}
-      textFieldPlaceholder="Search Token By Name"
+      textFieldPlaceholder="Search tokens by name"
     >
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);

package/src/components/Wallet/Wallet.tsx

@@ -10,7 +10,11 @@ import { Image } from '../common';
 
 const WalletImageContainer = styled('div', {
   paddingRight: '$12',
+  '& img': {
+    borderRadius: '50%',
+  },
 });
+
 const Text = styled('div', {
   display: 'flex',
   flexDirection: 'column',

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -115,18 +115,18 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
           {extraMessages || null}
           <Alerts>
             {errors?.map((error, index) => (
-              <>
+              <React.Fragment key={index}>
                 <Spacer direction="vertical" />
                 <Alert type="error" key={index} 
                   {...(typeof error === 'string') ? {title: error} : {children: error} }/>
-              </>
+              </React.Fragment>
             ))}
             {warnings?.map((warning, index) => (
-              <>
+              <React.Fragment key={index}>
                 <Spacer direction="vertical" />
                 <Alert type="warning" key={index} 
                   {...(typeof warning === 'string') ? {title: warning} : {children: warning} }/>
-              </>
+              </React.Fragment>
             ))}
           </Alerts>
         </div>

package/src/containers/History/History.tsx

@@ -37,7 +37,7 @@ export function History(props: PropsWithChildren<PropTypes>) {
     <SecondaryPage
       onBack={onBack}
       textField={true}
-      textFieldPlaceholder="Search by Network, Token or Request ID"
+      textFieldPlaceholder="Search by blockchain, token or request Id"
       title="Swaps"
     >
       {(searchedFor) => {

package/src/containers/History/SwapsGroup.tsx

@@ -30,8 +30,8 @@ export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
       {groups
         .filter((group) => group.swaps.length > 0)
         .map((group, index) => (
-          <>
-            <Group key={index}>
+          <React.Fragment key={index}>
+            <Group>
               <Typography
                 variant="body2"
                 color="neutrals600"
@@ -39,20 +39,20 @@ export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
               >
                 {group.title}
               </Typography>
-              {group.swaps.map((swap: PendingSwap, index: number) => (
-                <>
+              {group.swaps.map((swap: PendingSwap) => (
+                <React.Fragment
+                    key={swap.requestId}>
                   <SwapDetail
-                    key={index}
                     swap={swap}
                     status={swap.status}
                     onClick={onSwapClick}
                   />
                   <Divider size={12} />
-                </>
+                </React.Fragment>
               ))}
             </Group>
             <Divider size={24} />
-          </>
+          </React.Fragment>
         ))}
     </>
   );

package/src/containers/SwapHistory/SwapMessages.tsx

@@ -66,7 +66,9 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
           <Button
             variant={'outlined'}
             type="primary"
-            onClick={props.switchNetwork}
+            onClick={() => {
+              props?.switchNetwork && props.switchNetwork().catch(() => {})
+            }}
           >
             Change network to {currentStepBlockchain}
           </Button>

package/src/hooks/index.ts

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

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import copy from 'copy-to-clipboard';
+
+export function useCopyToClipboard(resetInterval?: number) {
+  const [isCopied, setCopied] = React.useState(false);
+
+  const handleCopy = React.useCallback((text: string | number) => {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(() => setCopied(false), resetInterval);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+
+  return [isCopied, handleCopy] as const;
+}

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components';
 export * from './containers';
 export * from './theme';
 export * from './types';
+export * from './hooks';