Merge remote-tracking branch 'origin/master' into chore/refactor-chakra-text

# Conflicts:
#	src/components/swap/components/warning.tsx
#	src/components/swap/index.tsx

Author: 0xonramp

src/app/leverage/components/faq-section/index.tsx

@@ -103,6 +103,29 @@ export function FaqSection() {
           tracking error, volatility drift, rebalancing overheads as well as
           costs and fees compounding over time.
         </p>
+        <p>
+          What is volatility Drift?
+          <ul className='list-disc pl-6'>
+            <li>
+              Volatility drift (sometimes called &quot;volatility decay&quot;)
+              is the compounding effect on leveraged products that causes their
+              returns to deviate from the underlying asset&apos;s
+              performance—beyond what a simple multiplication by the leverage
+              factor would suggest. In the context of our tokens, periodic
+              adjustments to maintain the respective token&apos;s target
+              leverage ratio can magnify price swings, leading to drift. For a
+              deeper look, check out our deep dive on{' '}
+              <a
+                target='_blank'
+                href='https://indexcoop.com/blog/fli-volatility-drift'
+                className='underline'
+              >
+                volatility drift
+              </a>
+              .
+            </li>
+          </ul>
+        </p>
         <p>
           Users should frequently monitor their token holdings and take time to
           fully understand how the products work and are expected to behave in
@@ -225,22 +248,30 @@ export function FaqSection() {
           charged for trading using the Leverage Interface.
         </p>
       </FaqItem>
-      <FaqItem question='What is volatility drift?' id='faq-volatility-drift'>
-        Volatility drift (sometimes called &quot;volatility decay&quot;) is the
-        compounding effect on leveraged products that causes their returns to
-        deviate from the underlying asset&apos;s performance—beyond what a
-        simple multiplication by the leverage factor would suggest. In the
-        context of our tokens, periodic adjustments to maintain the respective
-        token&apos;s target leverage ratio can magnify price swings, leading to
-        drift. For a deeper look, check out our{' '}
-        <a
-          target='_blank'
-          href='https://indexcoop.com/blog/fli-volatility-drift'
-          className='underline'
-        >
-          deep dive on volatility drift
-        </a>
-        .
+      <FaqItem
+        question='How can I trade SOL or SUI if I’m on an EVM chain?'
+        id='trade-sol-sui-evm'
+      >
+        <p>
+          Our new SOL and SUI tokens make it possible to trade these tokens on
+          Base with no bridging required. We do this by partnering with&nbsp;
+          <a
+            href='https://www.universal.xyz/reserves'
+            target='_blank'
+            className='underline'
+          >
+            Universal
+          </a>
+          , which wraps native SOL or SUI into an EVM-friendly token (uSOL /
+          uSUI).
+        </p>
+        <p>
+          These wrapped tokens are fully backed by the underlying assets, so you
+          can hold them just like any other ERC-20 token. From there, we create
+          the leveraged version with the same process we use for all Index Coop
+          leverage tokens. The result? Real SOL and SUI exposure from the
+          comfort of your favorite L2.
+        </p>
       </FaqItem>
       <FaqItem
         question='Why do I see a “Not available for Restricted Persons” message?'

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/trade-details/index.tsx

@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Flex,
 } from '@chakra-ui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
@@ -95,7 +94,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                             height={16}
                           />
                         )}
-                        <Box onClick={onToggleTokenPrice}>
+                        <div onClick={onToggleTokenPrice}>
                           {isLoading ? (
                             <StyledSkeleton width={200} />
                           ) : (
@@ -104,7 +103,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                               usdLabel={usdLabel}
                             />
                           )}
-                        </Box>
+                        </div>
                       </Flex>
                       <div className={cn('flex gap-4', isExpanded && 'hidden')}>
                         {!isLoading &&

src/components/swap/components/warning.tsx

@@ -1,4 +1,4 @@
-import { Flex, Link } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
 import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
 import { ReactNode } from 'react'
 
@@ -30,19 +30,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.
       </>
     ),
@@ -54,19 +56,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.
       </>
     ),
@@ -108,19 +112,15 @@ export const WarningCompProtection = () => {
           MEV Protection
         </p>
       </Flex>
-      <p className='text-ic-gray-600 mt-2 text-xs'>
+      <p className='text-ic-gray-600 mt-2 text-xs font-normal'>
         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>
       </p>
     </Flex>
   )

src/components/swap/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, IconButton } from '@chakra-ui/react'
+import { Flex, IconButton } from '@chakra-ui/react'
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { useCallback, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
@@ -215,15 +215,15 @@ export const Swap = (props: SwapProps) => {
             if (inputTokenslist.length > 1) onOpenSelectInputToken()
           }}
         />
-        <Box h='6px' alignSelf={'center'}>
+        <div className='flex h-1.5 self-center'>
           <IconButton
             className='bg-ic-white text-ic-gray-400'
             margin={'-16px 0 0 0'}
             aria-label='switch input/output tokens'
             icon={<ChevronUpDownIcon className='h-7 w-5 text-gray-500' />}
             onClick={onSwitchTokens}
           />
-        </Box>
+        </div>
         <TradeOutput
           caption={'You receive'}
           selectedToken={outputToken}