chore: update versioning, cleaned up styling

package.json

@@ -17,7 +17,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.32.0",
+    "@coinbase/onchainkit": "^0.33.5",
+    "framer-motion": "^11.11.6",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",
@@ -26,6 +27,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.2.0",
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.7",
@@ -35,14 +38,12 @@
     "autoprefixer": "^10.4.19",
     "bufferutil": "^4.0.7",
     "encoding": "^0.1.13",
-    "lokijs": "^1.5.12",
     "jsdom": "^24.1.0",
+    "lokijs": "^1.5.12",
     "pino-pretty": "^10.2.0",
     "postcss": "^8.4.38",
     "supports-color": "^9.4.0",
     "tailwindcss": "^3.4.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.2.0",
     "typescript": "^5.3.3",
     "utf-8-validate": "^6.0.3",
     "vitest": "^2.0.1"

src/components/Footer.tsx

@@ -7,6 +7,7 @@ import {
   ONCHAINKIT_LINK,
   TWITTER_LINK,
 } from 'src/links';
+import { motion } from 'framer-motion';
 import ArrowSvg from 'src/svg/ArrowSvg';
 
 const docLinks = [
@@ -19,7 +20,7 @@ const docLinks = [
 
 export default function Footer() {
   return (
-    <section className="mt-auto mb-2 flex w-full flex-col flex-col-reverse justify-between gap-2 md:mt-8 md:mb-6 md:flex-row">
+    <section className='mt-auto mb-2 flex w-full flex-col-reverse justify-between gap-2 font-sans md:mt-8 md:mb-6 md:flex-row'>
       <aside className="flex items-center pt-2 md:pt-0">
         <h3 className="mr-2 mb-2 text-m md:mb-0">
           Built with love by{' '}
@@ -33,23 +34,26 @@ export default function Footer() {
             OnchainKit
           </a>
         </h3>
+
       </aside>
       <ul className="mt-4 flex max-w-full flex-col flex-wrap justify-center gap-3 md:mt-0 md:flex-row md:justify-start md:gap-6">
         {docLinks.map(({ href, title }) => (
           <li className="flex" key={href}>
-            <a
+            <motion.a
               href={href}
               target="_blank"
               rel="noreferrer"
               title={title}
-              className="flex items-center gap-1"
+              className="flex items-center gap-1 hover:text-indigo-600"
+              whileHover={{ y: -5 }} 
+              transition={{ type: 'spring', stiffness: 300 }} 
             >
               <p>{title}</p>
               <ArrowSvg />
-            </a>
+            </motion.a>
           </li>
         ))}
       </ul>
     </section>
   );
-}
+}

src/components/TransactionWrapper.tsx

@@ -44,7 +44,7 @@ export default function TransactionWrapper({ address }: { address: Address }) {
         onError={handleError}
         onSuccess={handleSuccess}
       >
-        <TransactionButton className="mt-0 mr-auto ml-auto w-[450px] max-w-full text-[white]" />
+        <TransactionButton text="Claim Early Adopter Badge"className="mt-0 mr-auto ml-auto w-[450px] max-w-full text-[white]" />
         <TransactionStatus>
           <TransactionStatusLabel />
           <TransactionStatusAction />

src/components/WalletWrapper.tsx

@@ -45,8 +45,8 @@ export default function WalletWrapper({
             <EthBalance />
           </Identity>
           <WalletDropdownBasename />
-          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-            Go to Wallet Dashboard
+          <WalletDropdownLink icon="wallet" target="_blank" href="https://wallet.coinbase.com">
+            Wallet
           </WalletDropdownLink>
           <WalletDropdownFundLink />
           <WalletDropdownDisconnect />

tailwind.config.ts

@@ -3,6 +3,38 @@ import type { Config } from 'tailwindcss';
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
+    extend: {
+      fontFamily: {
+        sans: ['DM Sans', 'sans-serif'],
+      },
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1rem' }],
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'base': ['1rem', { lineHeight: '1.5rem' }],
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+        '5xl': ['3rem', { lineHeight: '1' }],
+        '6xl': ['3.75rem', { lineHeight: '1' }],
+        '7xl': ['4.5rem', { lineHeight: '1' }],
+        '8xl': ['6rem', { lineHeight: '1' }],
+        '9xl': ['8rem', { lineHeight: '1' }],
+      },
+      spacing: {
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '5': '1.25rem',
+        '6': '1.5rem',
+        '7': '1.75rem',
+        '8': '2rem',
+        '9': '2.25rem',
+        '10': '2.5rem',
+      },
+    },
     container: {
       center: true,
       screens: {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -20,6 +24,13 @@
     ],
     "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }