Merge pull request #1821 from IndexCoop/chore/refactor-chakra-image-link

chore: refactor chakra image/link

Author: 0xonramp

src/components/swap/components/select-token-modal.tsx

@@ -1,5 +1,4 @@
 import {
-  Image,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -8,6 +7,7 @@ import {
   ModalOverlay,
 } from '@chakra-ui/react'
 import clsx from 'clsx'
+import Image from 'next/image'
 import { useMemo } from 'react'
 import { arbitrum, base } from 'viem/chains'
 
@@ -121,19 +121,18 @@ const TokenItem = ({
       <div className='flex items-center'>
         <div className='relative inline-block h-11 w-11'>
           <Image
-            className='h-10 w-10'
             alt={`${item.symbol} logo`}
             src={item.image}
-            w='40px'
-            h='40px'
+            width={40}
+            height={40}
           />
           {networkAsset && (
             <div className='bg-ic-gray-100 absolute bottom-0 right-0 h-5 w-5 rounded-full'>
               <Image
                 alt={`${item.symbol} logo`}
                 src={networkAsset}
-                w='20px'
-                h='20px'
+                width={20}
+                height={20}
               />
             </div>
           )}

src/components/swap/components/warning.tsx

@@ -1,4 +1,4 @@
-import { Flex, Link, Text } from '@chakra-ui/react'
+import { Flex, Text } from '@chakra-ui/react'
 import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
 import { ReactNode } from 'react'
 
@@ -31,19 +31,21 @@ const warningsData: Record<
       <>
         Some of our tokens are not available to Restricted Persons - including
         US persons - as defined in our{' '}
-        <Link
+        <a
           href='https://indexcoop.com/terms-of-service'
-          style={{ textDecoration: 'underline' }}
+          className='underline'
+          target='_blank'
         >
           Terms of Service
-        </Link>
+        </a>
         . Please also see our{' '}
-        <Link
+        <a
           href='https://indexcoop.com/tokens-restricted-for-restricted-persons'
-          style={{ textDecoration: 'underline' }}
+          className='underline'
+          target='_blank'
         >
           Tokens Restricted for Restricted Persons
-        </Link>{' '}
+        </a>{' '}
         page.
       </>
     ),
@@ -55,19 +57,21 @@ const warningsData: Record<
         It appears you may be using a VPN and, because some of our tokens are
         not available to Restricted Persons - including US persons - as defined
         in our{' '}
-        <Link
+        <a
           href='https://indexcoop.com/terms-of-service'
-          style={{ textDecoration: 'underline' }}
+          className='underline'
+          target='_blank'
         >
           Terms of Service
-        </Link>
+        </a>
         , we are required to restrict access to VPN users. Please also see our{' '}
-        <Link
+        <a
           href='https://indexcoop.com/tokens-restricted-for-restricted-persons'
-          style={{ textDecoration: 'underline' }}
+          className='underline'
+          target='_blank'
         >
           Tokens Restricted for Restricted Persons
-        </Link>{' '}
+        </a>{' '}
         page.
       </>
     ),
@@ -121,17 +125,13 @@ export const WarningCompProtection = () => {
         textColor={colors.ic.gray[600]}
       >
         It is highly recommended to use an MEV protected RPC.{' '}
-        <Link onClick={onClick} style={{ textDecoration: 'underline' }}>
+        <span onClick={onClick} className='cursor-pointer underline'>
           Click here
-        </Link>{' '}
+        </span>{' '}
         to add the MEV Blocker network to your wallet.{' '}
-        <Link
-          href='https://mevblocker.io/'
-          isExternal
-          style={{ textDecoration: 'underline' }}
-        >
+        <a href='https://mevblocker.io/' target='_blank' className='underline'>
           Learn More about MEV protection
-        </Link>
+        </a>
       </Text>
     </Flex>
   )