Merge pull request #1887 from IndexCoop/feat/complete-chakra-refactor

feat: complete chakra refactor

Author: 0xonramp

package-lock.json

@@ -19,8 +19,6 @@
   },
   "dependencies": {
     "@0xarc-io/analytics": "2.2.3",
-    "@chakra-ui/next-js": "^2.2.0",
-    "@chakra-ui/react": "2.8.2",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "0.26.25",

package.json

@@ -1,8 +1,7 @@
-import { Flex } from '@chakra-ui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import Image from 'next/image'
 
-import { colors } from '@/lib/styles/colors'
+import { cn } from '@/lib/utils/tailwind'
 
 type SelectorProps = {
   onClick: () => void
@@ -19,21 +18,17 @@ export const SelectorButton = ({
   showChevron,
   visible = true,
 }: SelectorProps) => (
-  <Flex
-    align='center'
-    bg={colors.ic.gray[100]}
-    borderRadius='32'
-    cursor='pointer'
+  <div
+    className={cn(
+      'bg-ic-gray-100 flex h-11 shrink-0 cursor-pointer items-center rounded-[32px] p-2.5',
+      visible ? 'visible' : 'invisible',
+    )}
     onClick={onClick}
-    p='10px'
-    h='44px'
-    shrink={0}
-    visibility={visible ? 'visible' : 'hidden'}
   >
     <Image alt={`${symbol} logo`} src={image} width={20} height={20} />
     <p className='text-ic-black mx-2 text-sm font-medium'>{symbol}</p>
     {showChevron !== false && (
       <ChevronDownIcon className='text-ic-gray-900 size-6' />
     )}
-  </Flex>
+  </div>
 )

src/app/earn/components/earn-widget/components/selector-button.tsx

@@ -1,6 +1,6 @@
 export const StatBox = ({ label, value }: { label: string; value: string }) => (
   <div className='w-[calc(50%-8px)] space-y-9 rounded-lg border border-neutral-700 p-4 transition-all hover:bg-zinc-800/90'>
     <p className='text-xs font-medium text-neutral-400'>{label}</p>
-    <p className='text-xl font-medium'>{value}</p>
+    <p className='text-xl font-medium text-neutral-50'>{value}</p>
   </div>
 )

src/app/earn/components/stat-box.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useColorMode } from '@chakra-ui/react'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import { AnimatePresence } from 'framer-motion'
 import { useEffect } from 'react'
@@ -12,20 +11,6 @@ import { useEarnContext } from './provider'
 export default function Page() {
   const { products, balances } = useEarnContext()
 
-  const { colorMode, toggleColorMode } = useColorMode()
-
-  useEffect(() => {
-    if (colorMode === 'light') {
-      toggleColorMode()
-    }
-
-    return () => {
-      if (colorMode === 'dark') {
-        toggleColorMode()
-      }
-    }
-  }, [colorMode, toggleColorMode])
-
   useEffect(() => {
     document.body.classList.add('dark', 'bg-ic-black')
     return () => {

src/app/earn/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useColorMode } from '@chakra-ui/react'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import { getTokenByChainAndAddress } from '@indexcoop/tokenlists'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -17,7 +16,6 @@ import { formatAmount, formatDollarAmount } from '@/lib/utils'
 export default function Page() {
   const { address: queryProductAddress } = useParams()
   const { products, onSelectIndexToken } = useEarnContext()
-  const { colorMode, toggleColorMode } = useColorMode()
 
   const selectedProduct = products.find(
     (p) => p.tokenAddress === queryProductAddress,
@@ -34,18 +32,6 @@ export default function Page() {
     }
   }, [selectedProduct, onSelectIndexToken])
 
-  useEffect(() => {
-    if (colorMode === 'light') {
-      toggleColorMode()
-    }
-
-    return () => {
-      if (colorMode === 'dark') {
-        toggleColorMode()
-      }
-    }
-  }, [colorMode, toggleColorMode])
-
   useEffect(() => {
     document.body.classList.add('dark', 'bg-ic-black')
     return () => {
@@ -61,7 +47,7 @@ export default function Page() {
             <motion.div className='flex w-full flex-wrap gap-6 rounded-3xl border border-gray-600 border-opacity-[0.8] bg-zinc-900 p-6 md:flex-nowrap'>
               <div className='flex w-full flex-col gap-8'>
                 <div className='flex flex-col gap-6'>
-                  <h3 className='text-xl font-medium'>
+                  <h3 className='text-xl font-medium text-neutral-50'>
                     {selectedProduct.name}
                   </h3>
                   <p className='text-xs font-medium leading-5 text-neutral-400'>

src/app/earn/product/[address]/page.tsx

@@ -4,6 +4,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number'] {
+    -webkit-appearance: none;
+    margin: 0;
+    -moz-appearance: textfield !important;
+  }
+}
+
 html,
 body,
 :root {
@@ -127,3 +137,21 @@ body,
   background-attachment: fixed;
   filter: blur(20px) opacity(20%) saturate(100%);
 }
+
+.swap-widget {
+  background:
+    linear-gradient(
+      33deg,
+      rgba(0, 189, 192, 0.05) -9.23%,
+      rgba(0, 249, 228, 0.05) 48.82%,
+      rgba(212, 0, 216, 0.05) 131.54%
+    ),
+    linear-gradient(
+      187deg,
+      rgb(252, 255, 255) -184.07%,
+      rgb(247, 248, 248) 171.05%
+    );
+  box-shadow:
+    rgba(44, 51, 51, 0.25) 0.5px 1px 2px 0px,
+    rgb(252, 255, 255) 2px 2px 1px 0px inset;
+}

src/app/globals.css

@@ -1,27 +1,12 @@
 'use client'
 
-import { useColorMode } from '@chakra-ui/react'
 import { useEffect } from 'react'
 
 import { LeveragePanel } from '@/app/leverage/components/leverage-panel'
 
 import { FaqSection } from './components/faq-section'
 
 export default function Page() {
-  const { colorMode, toggleColorMode } = useColorMode()
-
-  useEffect(() => {
-    if (colorMode === 'light') {
-      toggleColorMode()
-    }
-
-    return () => {
-      if (colorMode === 'dark') {
-        toggleColorMode()
-      }
-    }
-  }, [colorMode, toggleColorMode])
-
   useEffect(() => {
     document.body.classList.add('dark', 'bg-zinc-950')
     return () => {

src/app/leverage/page.tsx

@@ -1,13 +1,10 @@
 'use client'
 
-import { CacheProvider } from '@chakra-ui/next-js'
-import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 
 import { useInitialize } from '@/lib/hooks/use-initialize'
 import { ProtectionProvider } from '@/lib/providers/protection'
-import theme from '@/lib/styles/theme'
 import { initAppkit, wagmiAdapter } from '@/lib/utils/wagmi'
 
 import '@/lib/styles/fonts'
@@ -21,17 +18,12 @@ export function Providers({ children }: { children: React.ReactNode }) {
   useInitialize()
 
   return (
-    <CacheProvider prepend={true}>
-      <ChakraProvider theme={theme}>
-        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
-          <QueryClientProvider client={queryClient}>
-            <AnalyticsProvider>
-              <ProtectionProvider>{children}</ProtectionProvider>
-            </AnalyticsProvider>
-          </QueryClientProvider>
-        </WagmiProvider>
-      </ChakraProvider>
-    </CacheProvider>
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <AnalyticsProvider>
+          <ProtectionProvider>{children}</ProtectionProvider>
+        </AnalyticsProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   )
 }

src/app/providers.tsx

@@ -1,30 +1,19 @@
 'use client'
 
-import { Flex } from '@chakra-ui/react'
-
 import { Swap } from '@/components/swap'
 import { useSelectedToken } from '@/lib/providers/selected-token-provider'
 
 export default function SwapPage() {
   const { inputToken, isMinting, outputToken } = useSelectedToken()
   return (
-    <Flex
-      direction={['column', 'column', 'column', 'row']}
-      mx='auto'
-      height='inherit'
-    >
-      <Flex
-        className='flex-col gap-8'
-        mb={[4, 4, 4, 12]}
-        mr={4}
-        w={['inherit', '500px']}
-      >
+    <div className='mx-auto flex h-full flex-col lg:flex-row'>
+      <div className='mb-4 mr-1 flex w-full max-w-lg flex-col gap-8 lg:mb-3'>
         <Swap
           isBuying={isMinting}
           inputToken={inputToken}
           outputToken={outputToken}
         />
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   )
 }