Setup DaisyUI

Fix inter font Create wallet dropdown
celo-org · Dec 16, 2023 · 601927a · 601927a
1 parent 1f64045
commit 601927a
Show file tree

Hide file tree

Showing 31 changed files with 342 additions and 316 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -43,4 +43,7 @@
       "source.organizeImports": "explicit"
     }
   },
+  "tailwindCSS.experimental.classRegex": [
+    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
diff --git a/next.config.js b/next.config.js
@@ -36,15 +36,6 @@ module.exports = {
     return config
   },
 
-  async rewrites() {
-    return [
-      {
-        source: '/:any*',
-        destination: '/',
-      },
-    ]
-  },
-
   async headers() {
     return [
       {

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "homepage": "https://github.com/jmrossy/celo-station",
   "license": "MIT",
   "dependencies": {
+    "@celo/abis": "^10.0.0",
     "@celo/rainbowkit-celo": "^1.1.2",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@metamask/post-message-stream": "6.1.2",
@@ -23,6 +24,7 @@
     "@tanstack/react-query": "^5.13.4",
     "@vercel/analytics": "^1.1.1",
     "bignumber.js": "^9.1.2",
+    "clsx": "^2.0.0",
     "formik": "2.4.5",
     "next": "14.0.4",
     "react": "^18.2.0",
@@ -40,6 +42,7 @@
     "@typescript-eslint/parser": "^6.14.0",
     "autoprefixer": "^10.4.16",
     "critters": "^0.0.20",
+    "daisyui": "^4.4.20",
     "eslint": "^8.55.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/fonts/inter-variable.ttf b/public/fonts/inter-variable.ttf
diff --git a/public/logos/celo-full.png b/public/logos/celo-full.png
diff --git a/public/logos/celo-full.svg b/public/logos/celo-full.svg
diff --git a/public/logos/celo.svg b/public/logos/celo.svg
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -8,8 +8,6 @@ import { ErrorBoundary } from 'src/components/errors/ErrorBoundary';
 import { Footer } from 'src/components/nav/Footer';
 import { Header } from 'src/components/nav/Header';
 import { WagmiContext } from 'src/config/wagmi';
-import 'src/styles/fonts.css';
-import 'src/styles/globals.css';
 import { useIsSsr } from 'src/utils/ssr';
 import 'src/vendor/inpage-metamask';
 
@@ -44,7 +42,7 @@ export function App({ children }: PropsWithChildren<any>) {
 
 export function BodyLayout({ children }: PropsWithChildren<any>) {
   return (
-    <div className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-yellow-500">
+    <div className="min-w-screen bg-taupe-100 relative flex h-full min-h-screen w-full flex-col justify-between text-black">
       <Header />
       <div className="mx-auto flex max-w-screen-xl grow items-center sm:px-4">
         <main className="my-4 flex w-full flex-1 items-center justify-center">{children}</main>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 import { PropsWithChildren } from 'react';
-import 'react-toastify/dist/ReactToastify.css';
 import { links } from 'src/config/links';
-import 'src/styles/fonts.css';
 import 'src/styles/globals.css';
-import 'src/vendor/inpage-metamask';
 import { App } from './app';
 
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+
 export const metadata: Metadata = {
   applicationName: 'Celo Station',
   metadataBase: new URL(links.home),
@@ -34,7 +34,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren<any>) {
   return (
     <html lang="en">
-      <body className="">
+      <body className={`${inter.variable} font-sans`}>
         <App>{children}</App>
       </body>
     </html>

diff --git a/src/components/buttons/SolidButton.tsx b/src/components/buttons/SolidButton.tsx
@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+export function SolidButton({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
+  return (
+    <button
+      className={`border-taupe-300 btn rounded-full bg-yellow-500 font-semibold text-black hover:bg-yellow-500 hover:opacity-90 ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/icons/Celo.tsx b/src/components/icons/Celo.tsx
diff --git a/src/components/icons/LinkedIn.tsx b/src/components/icons/LinkedIn.tsx
diff --git a/src/components/icons/Medium.tsx b/src/components/icons/Medium.tsx
diff --git a/src/components/logos/Celo.tsx b/src/components/logos/Celo.tsx
@@ -0,0 +1,44 @@
+import { SVGProps, memo } from 'react';
+import { Color } from 'src/styles/Color';
+
+function _CeloGlyph(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 383" {...rest}>
+      <path
+        d="M383.5,0H0.5v383h383V249.3h-63.6C298,298.1,248.7,332,192.3,332c-77.8,0-140.8-63.6-140.8-140.8 C51.4,114,114.5,51,192.3,51C249.8,51,299.1,86,321,135.9h62.5V0z"
+        fill={fill || Color.Purple}
+      />
+    </svg>
+  );
+}
+export const CeloGlyph = memo(_CeloGlyph);
+
+function _CeloLogo(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 968 219" fill="none" {...rest}>
+      <g>
+        <path
+          d="M858.1,189.8c44.4,0,80-35.9,80-80.3c0-44.4-35.6-80-80-80c-44.4,0-80,35.9-80,80C778.2,153.5,814.1,189.8,858.1,189.8z M749.1,0.4h218.4v218.4H749.1V0.4z"
+          fill={fill || Color.Purple}
+        />
+        <path
+          d="M430.3,142.6c-12.8,27.8-40.6,47.2-73.1,47.2c-43.1,0-78.4-34.4-80-77.2h189.3V0.4H248.2v218.4h218.4v-76.2 H430.3z M280.7,85.7h152.5c-11.2-37.2-41.2-56.2-75.9-56.2S290.3,49.8,280.7,85.7L280.7,85.7z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill={fill || Color.Purple}
+        />
+        <path
+          d="M218.8,0.4H0.4v218.4h218.4v-76.2h-36.2c-12.5,27.8-40.6,47.2-72.8,47.2c-44.4,0-80.3-36.2-80.3-80.3 c0-44.1,35.9-80,80.3-80c32.8,0,60.9,20,73.4,48.4h35.6V0.4z"
+          fill={fill || Color.Purple}
+        />
+        <path
+          d="M721.8,142.6h-36.2v0c-10.9,28.7-40.3,46.9-73.7,46.9c-43.1,0-79.4-31.2-79.4-80V0.4h-36.9v218.4h226.2V142.6z"
+          fill={fill || Color.Purple}
+        />
+      </g>
+    </svg>
+  );
+}
+export const CeloLogo = memo(_CeloLogo);
diff --git a/src/components/icons/Discord.tsx → src/components/logos/Discord.tsx b/src/components/icons/Discord.tsx → src/components/logos/Discord.tsx
@@ -1,25 +1,9 @@
-import { memo } from 'react';
+import { SVGProps, memo } from 'react';
 
-function _Discord({
-  width,
-  height,
-  fill,
-  className = '',
-}: {
-  width?: number | string;
-  height?: number | string;
-  fill?: string;
-  className?: string;
-}) {
+function _Discord(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 71 55"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 55" fill="none" {...rest}>
       <g clipPath="url(#a)">
         <path
           d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z"

diff --git a/src/components/icons/Github.tsx → src/components/logos/Github.tsx b/src/components/icons/Github.tsx → src/components/logos/Github.tsx
@@ -1,24 +1,9 @@
-import { memo } from 'react';
+import { SVGProps, memo } from 'react';
 
-function _Github({
-  width,
-  height,
-  fill,
-  className = '',
-}: {
-  width?: number | string;
-  height?: number | string;
-  fill?: string;
-  className?: string;
-}) {
+function _Github(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 16 16"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...rest}>
       <path
         d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         fill={fill}

diff --git a/src/components/icons/Twitter.tsx → src/components/logos/Twitter.tsx b/src/components/icons/Twitter.tsx → src/components/logos/Twitter.tsx
@@ -1,24 +1,9 @@
-import { memo } from 'react';
+import { SVGProps, memo } from 'react';
 
-function _Twitter({
-  width,
-  height,
-  fill,
-  className = '',
-}: {
-  width?: number | string;
-  height?: number | string;
-  fill?: string;
-  className?: string;
-}) {
+function _Twitter(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 16 16"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...rest}>
       <path
         d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
         fill={fill}

diff --git a/src/components/icons/Web.tsx → src/components/logos/Web.tsx b/src/components/icons/Web.tsx → src/components/logos/Web.tsx
@@ -1,24 +1,9 @@
-import { memo } from 'react';
+import { SVGProps, memo } from 'react';
 
-function _Web({
-  width,
-  height,
-  fill,
-  className = '',
-}: {
-  width?: number | string;
-  height?: number | string;
-  fill?: string;
-  className?: string;
-}) {
+function _Web(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 29 29"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" {...rest}>
       <path
         fill={fill}
         d="m11 18.6-.39.17a13.45 13.45 0 0 0 1.12 2.9 5.25 5.25 0 0 0 2.08 2.24c.36.18.7.26 1.03.26.95 0 2.1-.71 3.1-2.5.46-.82.85-1.8 1.13-2.9a10.3 10.3 0 0 0-8.06-.17Z"