diff --git a/.vscode/settings.json b/.vscode/settings.json index 4983c80..3ac1da9 100644 --- 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 index d5d5bcd..75391ee 100644 --- 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 index 516a9f8..d212060 100644 --- 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 new file mode 100644 index 0000000..3d7be04 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/fonts/inter-variable.ttf b/public/fonts/inter-variable.ttf new file mode 100644 index 0000000..ec3164e Binary files /dev/null and b/public/fonts/inter-variable.ttf differ diff --git a/public/logos/celo-full.png b/public/logos/celo-full.png new file mode 100644 index 0000000..2460c83 Binary files /dev/null and b/public/logos/celo-full.png differ diff --git a/public/logos/celo-full.svg b/public/logos/celo-full.svg new file mode 100644 index 0000000..b9ce6f4 --- /dev/null +++ b/public/logos/celo-full.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/public/logos/celo.svg b/public/logos/celo.svg index 521b76d..bd3f57c 100644 --- a/public/logos/celo.svg +++ b/public/logos/celo.svg @@ -1,5 +1,3 @@ - - +
{children}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e94510a..e270ffb 100644 --- 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) { return ( - + {children} diff --git a/src/components/buttons/SolidButton.tsx b/src/components/buttons/SolidButton.tsx new file mode 100644 index 0000000..38528c4 --- /dev/null +++ b/src/components/buttons/SolidButton.tsx @@ -0,0 +1,16 @@ +import { ButtonHTMLAttributes, PropsWithChildren } from 'react'; + +export function SolidButton({ + children, + className, + ...props +}: PropsWithChildren>) { + return ( + + ); +} diff --git a/src/components/icons/Celo.tsx b/src/components/icons/Celo.tsx deleted file mode 100644 index d0ccdb7..0000000 --- a/src/components/icons/Celo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { SVGProps, memo } from 'react'; - -function _CeloLogo(props: SVGProps) { - return ( - - - - - - ); -} -export const CeloLogo = memo(_CeloLogo); diff --git a/src/components/icons/LinkedIn.tsx b/src/components/icons/LinkedIn.tsx deleted file mode 100644 index f0adadd..0000000 --- a/src/components/icons/LinkedIn.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Linkedin({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Linkedin = memo(_Linkedin); diff --git a/src/components/icons/Medium.tsx b/src/components/icons/Medium.tsx deleted file mode 100644 index 11d0d17..0000000 --- a/src/components/icons/Medium.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { memo } from 'react'; - -function _Medium({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Medium = memo(_Medium); diff --git a/src/components/logos/Celo.tsx b/src/components/logos/Celo.tsx new file mode 100644 index 0000000..66fff46 --- /dev/null +++ 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) { + const { fill, ...rest } = props; + return ( + + + + ); +} +export const CeloGlyph = memo(_CeloGlyph); + +function _CeloLogo(props: SVGProps) { + const { fill, ...rest } = props; + return ( + + + + + + + + + ); +} +export const CeloLogo = memo(_CeloLogo); diff --git a/src/components/icons/Discord.tsx b/src/components/logos/Discord.tsx similarity index 69% rename from src/components/icons/Discord.tsx rename to src/components/logos/Discord.tsx index 9831cb3..316beb6 100644 --- a/src/components/icons/Discord.tsx +++ b/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) { + const { fill, ...rest } = props; return ( - + ) { + const { fill, ...rest } = props; return ( - + ) { + const { fill, ...rest } = props; return ( - + ) { + const { fill, ...rest } = props; return ( - + +
+ {button} +
+
+ {content} +
+
+ ); +} + +/** + * A dropdown menu with a list of items + */ +export function DropdownMenu({ + button, + items, + className, +}: { + button: ReactNode; + items: Array; + className?: string; +}) { + return ( +
+
+ {button} +
+
    + {items.map((item, index) => ( +
  • {item}
    • + ))} +
+
+ ); +} diff --git a/src/components/nav/Header.tsx b/src/components/nav/Header.tsx index c679db9..0261c4f 100644 --- a/src/components/nav/Header.tsx +++ b/src/components/nav/Header.tsx @@ -1,20 +1,22 @@ -import Image from 'next/image'; import Link from 'next/link'; -import Celo from 'src/images/logos/celo.svg'; +import { WalletDropdown } from 'src/features/wallet/WalletDropdown'; +import { CeloGlyph, CeloLogo } from '../logos/Celo'; +import { NavBar } from './NavBar'; export function Header() { return (
- - Celo Station + + + + + +
+ +
+
); diff --git a/src/components/nav/NavBar.tsx b/src/components/nav/NavBar.tsx new file mode 100644 index 0000000..a4d2de7 --- /dev/null +++ b/src/components/nav/NavBar.tsx @@ -0,0 +1,33 @@ +import clsx from 'clsx'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; + +const LINKS = [ + { label: 'Staking', to: '/staking' }, + { label: 'Governance', to: '/governance' }, + { label: 'Bridge', to: '/bridge' }, + { label: 'My Account', to: '/account' }, +]; + +export function NavBar() { + const pathname = usePathname(); + return ( + + ); +} diff --git a/src/config/wagmi.tsx b/src/config/wagmi.tsx index 10706bf..321c674 100644 --- a/src/config/wagmi.tsx +++ b/src/config/wagmi.tsx @@ -56,7 +56,7 @@ export function WagmiContext({ children }: { children: React.ReactNode }) { { + if (!address) return; + await tryClipboardSet(address); + toast.success('Address copied to clipboard', { autoClose: 1200 }); + }; + + return ( +
+ {address && isConnected ? ( + {shortenAddress(address)}} + content={'FOObar'} + className="dropdown-end" + /> + ) : ( + Connect + )} +
+ ); +} diff --git a/src/images/logos/celo-full.svg b/src/images/logos/celo-full.svg new file mode 100644 index 0000000..b9ce6f4 --- /dev/null +++ b/src/images/logos/celo-full.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/src/images/logos/celo.svg b/src/images/logos/celo.svg index 521b76d..bd3f57c 100644 --- a/src/images/logos/celo.svg +++ b/src/images/logos/celo.svg @@ -1,5 +1,3 @@ - -