diff --git a/packages/docs-site/astro.config.ts b/packages/docs-site/astro.config.ts index 7f7e2bd6e05..c42d6690cbe 100644 --- a/packages/docs-site/astro.config.ts +++ b/packages/docs-site/astro.config.ts @@ -121,9 +121,13 @@ export default defineConfig({ label: "Run a Holesky node", link: "/guides/run-a-holesky-node/", }, - { label: "Run a Taiko node", link: "/guides/run-a-taiko-node/" }, + { label: "Run a Taiko Node with Docker", link: "/guides/run-a-taiko-node-with-docker/" }, + { label: "Build a Taiko Node from Source", link: "/guides/build-a-taiko-node-from-source/" }, + // { label: "Run a Mainnet Taiko Node from Source", link: "/guides/run-a-mainnet-taiko-node-from-source/" }, + { label: "Run a Testnet Taiko Node from Source", link: "/guides/run-a-testnet-taiko-node-from-source/" }, { label: "Enable a proposer", link: "/guides/enable-a-proposer/" }, { label: "Enable a prover", link: "/guides/enable-a-prover/" }, + { label: "Node Troubleshooting", link:"/guides/node-troubleshooting/" } ], }, { diff --git a/packages/docs-site/src/content/docs/guides/build-a-taiko-node-from-source.mdx b/packages/docs-site/src/content/docs/guides/build-a-taiko-node-from-source.mdx new file mode 100644 index 00000000000..a6e48974201 --- /dev/null +++ b/packages/docs-site/src/content/docs/guides/build-a-taiko-node-from-source.mdx @@ -0,0 +1,147 @@ +--- +title: Building a Node from Source +description: Learn how to build your own node without relying on simple-taiko-node or prebuilt images +--- + +import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'; + +This guide shows you how to build your own node from source code. + +You might want to do this if you want to run a node on a specific architecture or if you want to inspect the source code of the node you're running. + +## Node Components + +---------------------------------------------------------------------- + +A Taiko Node consists of two components, analogous to an Ethereum node; the consensus client and execution engine. + +#### Taiko Client (taiko-client) + +The taiko client is responsible for decoding L2 blocks from L1 calldata (and blobspace!), then passing those payloads to our execution engine. + +It has three subcommands, `driver`, `prover`, and `proposer`. + +The taiko client replaces the [consensus client](https://ethereum.org/en/developers/docs/nodes-and-clients/) in an Ethereum mainnet node. + +In this tutorial you will build the `taiko-client` as found in the [taiko monorepo](https://github.com/taikoxyz/taiko-mono). + +#### Execution Engine (taiko-geth) + +The execution engine is responsible for executing the block payloads it receives from the taiko client. It holds the latest state of the chain. + +`taiko-geth` exposes the standard JSON-RPC API that Ethereum developers are familiar with, and can be used accordingly to query blockchain data and submit transactions to the network. + +`taiko-geth` replaces the [execution client](https://ethereum.org/en/developers/docs/nodes-and-clients/) in an Ethereum mainnet node. + +In this tutorial you will build the `taiko-geth` implementation of `go-ethereum` as found in the [`taiko-geth` repository](https://github.com/taikoxyz/taiko-geth). + +## Software Dependencies + +| Dependency | Version | Version Check Command | +| ------------------------------------------------------------- | -------- | --------------------- | +| [git](https://git-scm.com/) | `^2` | `git --version` | +| [go](https://go.dev/) | `^1.21` | `go version` | +| [make](https://linux.die.net/man/1/make) | `^4` | `make --version` | + +## Building the Taiko Client + +First you're going to build `taiko-client`. + + + +1. Clone the Taiko monorepo + + The [Taiko monorepo](https://github.com/taikoxyz/taiko-mono) contains the source code for the `taiko-client`. + + + + ```bash + git clone https://github.com/taikoxyz/taiko-mono.git + cd taiko-mono/packages/taiko-client + ``` + + + ```sh + git clone https://github.com/taikoxyz/taiko-mono.git + cd taiko-mono/packages/taiko-client && git config core.autocrlf false + ``` + + + +2. Checkout the release branch you wish to run + + Release branches are created when new versions of the `taiko-client` are created. + Find the branch you wish to check out in the [releases page](https://github.com/taikoxyz/taiko-mono/releases). + + Search by `taiko-client` to find all relevant releases. + + ```bash + git checkout + ``` + + :::note + Make sure to read the releases page carefully to determine the correct branch to check out. + Some may be specific to testnet or mainnet. + ::: + +3. Build `taiko-client` + + ```bash + make build + ``` + + + +## Building the Execution Engine + +Next you're going to build `taiko-geth`. + + + +1. Clone taiko-geth + + The [`taiko-geth` repository](https://github.com/taikoxyz/taiko-geth) contains the source code for our execution engine. + + + + ```bash + git clone https://github.com/taikoxyz/taiko-geth.git + cd taiko-geth + ``` + + + ```sh + git clone https://github.com/taikoxyz/taiko-geth.git + cd taiko-geth && git config core.autocrlf false + ``` + + + +2. Checkout the release branch you wish to run + + Release branches are created when new versions of the `taiko-geth` are created. + Find the branch you wish to check out in the [releases page](https://github.com/taikoxyz/taiko-geth/releases). + + ```bash + git checkout + ``` + + :::note + Make sure to read the releases page carefully to determine the correct branch to check out. + Some may be specific to testnet or mainnet. + ::: + +3. Build `taiko-geth` + + ```bash + make geth + ``` + + + +## What's Next? + Now that you've built your own node from source, you can run it for Taiko Mainnet or Testnet! + +{/* * Click here to [Run a Mainnet Taiko Node from Source](/guides/run-a-mainnet-taiko-node-from-source) */} +* Click here to [Run a Testnet Taiko Node from Source](/guides/run-a-testnet-taiko-node-from-source) +* If you run into any problems, please visit the [troubleshooting page](/guides/node-troubleshooting) for help. \ No newline at end of file diff --git a/packages/docs-site/src/content/docs/guides/enable-a-proposer.mdx b/packages/docs-site/src/content/docs/guides/enable-a-proposer.mdx index e9010d85fa5..60309eaa8a1 100644 --- a/packages/docs-site/src/content/docs/guides/enable-a-proposer.mdx +++ b/packages/docs-site/src/content/docs/guides/enable-a-proposer.mdx @@ -7,7 +7,7 @@ import { Steps } from '@astrojs/starlight/components'; ## Prerequisites -- You are already [running a Taiko node](/guides/run-a-taiko-node). +- You are already running a Taiko node [with Docker](/guides/run-a-taiko-node-with-docker) or [from source](/guides/build-a-taiko-node-from-source). {/*## Using `stn` diff --git a/packages/docs-site/src/content/docs/guides/enable-a-prover.mdx b/packages/docs-site/src/content/docs/guides/enable-a-prover.mdx index de25c60c739..d4f919cb87e 100644 --- a/packages/docs-site/src/content/docs/guides/enable-a-prover.mdx +++ b/packages/docs-site/src/content/docs/guides/enable-a-prover.mdx @@ -7,7 +7,7 @@ import { Steps } from '@astrojs/starlight/components'; ## Prerequisites -- You are already [running a Taiko node](/guides/run-a-taiko-node). +- You are already running a Taiko node [with Docker](/guides/run-a-taiko-node-with-docker) or [from source](/guides/build-a-taiko-node-from-source). ## Enable a prover with simple-taiko-node diff --git a/packages/docs-site/src/content/docs/guides/node-troubleshooting.mdx b/packages/docs-site/src/content/docs/guides/node-troubleshooting.mdx new file mode 100644 index 00000000000..45242747725 --- /dev/null +++ b/packages/docs-site/src/content/docs/guides/node-troubleshooting.mdx @@ -0,0 +1,23 @@ +--- +title: Node Troubleshooting +description: This page describes common bugs and potential fixes +--- + + This page describes common bugs and potential fixes. + +### `Caught SIGILL in blst_cgo_init` + +If you get this error message, chances are you're using an older CPU that blst has trouble compiling on due to instruction differences. + +In this case, please set your env as follows and try again. + +```bash +CGO_CFLAGS="-O -D__BLST_PORTABLE__" +CGO_CFLAGS_ALLOW="-O -D__BLST_PORTABLE__" +``` + +### Failed to decode tx list: beacon client not found + +This may mean that you may be missing the `--l1.beacon` flag or have filled it in incorrectly. + +Please use an L1 Node that has a blob server configured! diff --git a/packages/docs-site/src/content/docs/guides/run-a-mainnet-taiko-node-from-source.mdx b/packages/docs-site/src/content/docs/guides/run-a-mainnet-taiko-node-from-source.mdx new file mode 100644 index 00000000000..4425c0b6c90 --- /dev/null +++ b/packages/docs-site/src/content/docs/guides/run-a-mainnet-taiko-node-from-source.mdx @@ -0,0 +1,4 @@ +--- +title: Run a Mainnet Taiko Node From Source +description: This guide will help you start up a Taiko node. +--- \ No newline at end of file diff --git a/packages/docs-site/src/content/docs/guides/run-a-taiko-node.mdx b/packages/docs-site/src/content/docs/guides/run-a-taiko-node-with-docker.mdx similarity index 91% rename from packages/docs-site/src/content/docs/guides/run-a-taiko-node.mdx rename to packages/docs-site/src/content/docs/guides/run-a-taiko-node-with-docker.mdx index 62329b806e1..53296f38296 100644 --- a/packages/docs-site/src/content/docs/guides/run-a-taiko-node.mdx +++ b/packages/docs-site/src/content/docs/guides/run-a-taiko-node-with-docker.mdx @@ -1,16 +1,21 @@ --- -title: Run a Taiko node +title: Run a Taiko node with Docker description: This guide will help you start up a Taiko RPC node using simple-taiko-node. --- import { Steps, Tabs, TabItem } from "@astrojs/starlight/components"; -This guide will help you start up a Taiko RPC node using simple-taiko-node. +This guide will help you start up a Taiko RPC node using [simple-taiko-node](https://github.com/taikoxyz/simple-taiko-node). + +## Software Dependencies + +| Dependency | Version | Version Check Command | +| ------------------------------------------------------------- | -------- | --------------------- | +| [git](https://git-scm.com/) | `^2` | `git --version` | +| [Docker](https://docs.docker.com/engine/install/) | `^24.0` | `docker --version` | ## Prerequisites -- [Docker](https://docs.docker.com/engine/install/) is installed and **running**. -- [Git](https://github.com/git-guides/install-git/) is installed. - If using Windows, you should install [Git BASH](https://gitforwindows.org/) or [WSL](https://learn.microsoft.com/en-us/windows/wsl/install) to use as your terminal. - Meet the [Geth minimum hardware requirements](https://github.com/ethereum/go-ethereum#hardware-requirements) except for the storage requirement because Taiko nodes will require less storage (at the time of writing). diff --git a/packages/docs-site/src/content/docs/guides/run-a-testnet-taiko-node-from-source.mdx b/packages/docs-site/src/content/docs/guides/run-a-testnet-taiko-node-from-source.mdx new file mode 100644 index 00000000000..8590253f16a --- /dev/null +++ b/packages/docs-site/src/content/docs/guides/run-a-testnet-taiko-node-from-source.mdx @@ -0,0 +1,154 @@ +--- +title: Run a Testnet Taiko Node From Source +description: This guide will help you start up a Testnet (Hekla) Taiko node. +--- + +import { Steps, Tabs, TabItem } from "@astrojs/starlight/components"; + +This tutorial explains how to run an Taiko node for our testnet Hekla from source code. + +## Building the Source Code + +Please follow the [Building a Node from Source](/guides/build-a-taiko-node-from-source) guide before continuing. +This guide presumes you have built the required images already (`taiko-geth` and `taiko-client`). + +## Hardware Requirements + +These are the recommended specs of a [mainnet Geth node](https://geth.ethereum.org/docs/getting-started/hardware-requirements); the actual requirements may be lower. + +* 16GB RAM +* 2TB SSD +* Quad-core CPU + +Node operators should plan for future storage needs as the requirements will grow continuously. + +### Create a JWT Secret + +`taiko-geth` and `taiko-client` communicate over the standard Ethereum engine API authrpc. This communication is secured using a shared secret. + +You will need to generate a shared secret in the form of a 32 byte hex string. + +```bash +openssl rand -hex 32 > jwt.txt +``` + +### Start `taiko-geth` + +It's generally better to start `taiko-geth` before you start `taiko-client` as you will encounter less error messages. + +`taiko-geth` can be started without `taiko-client` and will wait until `taiko-client` begins communicating. + + + +1. Navigate to your `taiko-geth` directory + + Find the directory where you built the `taiko-geth` binary. + +2. Copy the JWT secret you generated into the `taiko-geth` directory. + + ```bash + cp /path/to/jwt.txt . + ``` + +3. Start taiko-geth + + Use the following command to start `taiko-geth` in a default configuration. + The JSON-RPC API will become available on port 28545. + + ```bash + ./build/bin/geth \ + --taiko \ + --networkid 167009 \ + --gcmode archive \ + --datadir ./data/taiko-geth \ + --metrics \ + --metrics.expensive \ + --metrics.addr "0.0.0.0" \ + --bootnodes enode://2f7ee605f84362671e7d7c6d47b69a3358b0d87e9ba4648befcae8b19453275ed19059db347c459384c1a3e5486419233c06bf6c4c6f489d81ace6f301a2a446@43.153.55.134:30303,enode://c067356146268d2855ad356c1ce36ba9f78c1633a72f9b7f686679c2ffe04bab6d24e48ef6eefb0e01aa00dff5024f7f94bc583da90b6027f40be4129bbbc5fd@43.153.90.191:30303,enode://acc2bdb6416feddff9734bee1e6de91e684e9df5aeb1d36698cc78b920600aed36a2871e4ad0cf4521afcdc2cde8e2cd410a57038767c356d4ce6c69b9107a5a@170.106.109.12:30303,enode://eb5079aae185d5d8afa01bfd2d349da5b476609aced2b57c90142556cf0ee4a152bcdd724627a7de97adfc2a68af5742a8f58781366e6a857d4bde98de6fe986@34.66.210.65:30303,enode://2294f526cbb7faa778192289c252307420532191438ce821d3c50232e019a797bda8c8f8541de0847e953bb03096123856935e32294de9814d15d120131499ba@34.72.186.213:30303 \ + --authrpc.addr "0.0.0.0" \ + --authrpc.port 28551 \ + --authrpc.vhosts "*" \ + --authrpc.jwtsecret ./jwt.txt \ + --http \ + --http.api admin,debug,eth,net,web3,txpool,miner,taiko \ + --http.addr "0.0.0.0" \ + --http.port 28545 \ + --http.vhosts "*" \ + --ws \ + --ws.api admin,debug,eth,net,web3,txpool,miner,taiko \ + --ws.addr "0.0.0.0" \ + --ws.port 28546 \ + --ws.origins "*" \ + --gpo.ignoreprice "100000000" \ + --port 30304 \ + --syncmode full \ + --state.scheme=path + ``` + + +### Start `taiko-client` + +This guide assumes you are running both `taiko-geth` and `taiko-client` on the same machine. + +If you aren't, you can configure the ports and addresses so that the services can access each other. + + +1. Navigate to your `taiko-client` directory + + Find the directory where you built the `taiko-client` binary. + +2. Copy the JWT secret + + :::note + This should be the *same* JWT secret you used in the previous step for `taiko-geth`. + ::: + + ```bash + cp /path/to/jwt.txt . + ``` + +3. Set environment variables + + The following URLs should be a Holesky node. + + You will need either an RPC provider, or run a full Holesky node yourself. + + ```bash + export L1_WS=... # the WS address for the node to sync from. + export L1_BEACON_URL=... # URL address for the L1 Beacon-node HTTP endpoint to use. + ``` + +4. Start taiko-client + + Use the following command to start `taiko-client` in a default configuration. + + You can find all other configurable flags by running `./bin/taiko-client driver`. + + This command assumes you've run the `taiko-geth` command as is, if you've changed ports please change them accordingly. + + ```bash + ./bin/taiko-client driver \ + --l1.ws ${L1_WS} \ + --l1.beacon ${L1_BEACON_URL} \ + --l2.ws ws://localhost:28546 \ + --taikoL1 0x79C9109b764609df928d16fC4a91e9081F7e87DB \ + --taikoL2 0x1670090000000000000000000000000000010001 \ + --jwtSecret ./jwt.txt \ + --l2.auth http://localhost:28551/ \ + --verbosity 3 + ``` + + :::note + If you've participated in our old testnets, the L1 Node is no longer required to be an archive node! + ::: + + +### Syncing + +Once you've started `taiko-geth` and `taiko-client` properly you should see them communicate with each other and start syncing. + +Syncing can take several hours, depending on the size of the chain. + +## Next Steps + +* If you run into any problems, please visit the [troubleshooting page](/guides/node-troubleshooting) for help. \ No newline at end of file diff --git a/packages/taikoon-ui/package.json b/packages/taikoon-ui/package.json index 2805e20384d..6be9dfafa4b 100644 --- a/packages/taikoon-ui/package.json +++ b/packages/taikoon-ui/package.json @@ -4,7 +4,7 @@ "private": true, "scripts": { "dev": "vite dev", - "build": "vite build", + "build": "cd ../ui-lib && pnpm build && cd - && vite build", "preview": "vite preview", "test": "npm run test:integration && npm run test:unit", "svelte:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", @@ -69,6 +69,7 @@ "minidenticons": "^4.2.1", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", - "viem": "^2.9.29" + "viem": "^2.9.29", + "@taiko/ui-lib": "workspace:*" } } diff --git a/packages/taikoon-ui/src/components/sections/Footer.section.svelte b/packages/taikoon-ui/src/components/sections/Footer.section.svelte index e1c367656aa..f4798bf4fa2 100644 --- a/packages/taikoon-ui/src/components/sections/Footer.section.svelte +++ b/packages/taikoon-ui/src/components/sections/Footer.section.svelte @@ -1,261 +1,17 @@
-
-
- {$t('content.sections.footer.joinTaiko')} -
-
- {#each socialLinks as { name, icon, url }} - {@const Icon = Icons[icon]} - (hoveredIcon = name)} - on:mouseleave={() => (hoveredIcon = 'none')} - target="_blank" - class={socialLinkClasses}> - - {#if windowSize !== 'sm'} - {name} - {/if} - - {/each} -
- -
-
-
- {$t('content.sections.footer.content.title')} -
-
- {$t('content.sections.footer.content.text')} -
- - {#if windowSize === 'sm'} - {/if} -
- -
-
- {#each textLinks as textLink} -
    -
  • - {textLink.title} -
    • - {#each textLink.list as link} -
  • - {link.name} -
    • - {/each} -
- {/each} -
- {#if windowSize !== 'sm'} - - {/if} -
-
-
+
diff --git a/packages/taikoon-ui/src/routes/+page.server.ts b/packages/taikoon-ui/src/routes/+page.server.ts index 2aeda453ec4..c83ea55b26a 100644 --- a/packages/taikoon-ui/src/routes/+page.server.ts +++ b/packages/taikoon-ui/src/routes/+page.server.ts @@ -28,7 +28,7 @@ const bannedCountries: Record = { const bannedCountryCodes = Object.keys(bannedCountries); export function load(event: any) { const country = event.request.headers.get('x-vercel-ip-country') ?? false; - const isDev = false; // event.url.hostname === 'localhost'; + const isDev = event.url.hostname === 'localhost'; if (!isDev && (!country || bannedCountryCodes.includes(country))) { return error(400, { message: `The site is not available on the following countries: ${Object.values(bannedCountries).join(', ')}`, diff --git a/packages/taikoon-ui/tailwind.config.js b/packages/taikoon-ui/tailwind.config.js index 9c6c59fecaa..abeb99ff6db 100644 --- a/packages/taikoon-ui/tailwind.config.js +++ b/packages/taikoon-ui/tailwind.config.js @@ -1,9 +1,11 @@ +import UiLibConfig from '@taiko/ui-lib/tailwind' import daisyuiPlugin from 'daisyui' /** @type {import('tailwindcss').Config} */ export default { + ...UiLibConfig, darkMode: ['class', '[data-theme="dark"]'], - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/@taiko/ui-lib/src/**/*.{html,js,svelte,ts}'], theme: { extend: { fontFamily: { @@ -48,6 +50,8 @@ export default { 'arrows-x-3-reset': 'arrows-x-animation 300ms linear reverse', }, colors: { + ...UiLibConfig.theme.extend.colors, + 'discord-purple': '#5765f1', /*************** * Base colors * ***************/ @@ -285,6 +289,8 @@ export default { themes: [ { dark: { + ...UiLibConfig.daisyui.themes[0].dark, + 'color-scheme': 'dark', '--btn-text-case': 'capitalize', // '--rounded-box': '0.625rem', // 10px @@ -398,6 +404,7 @@ export default { }, light: { + ...UiLibConfig.daisyui.themes[0].light, 'color-scheme': 'light', '--btn-text-case': 'capitalize', diff --git a/packages/ui-lib/.storybook/main.ts b/packages/ui-lib/.storybook/main.ts index 45703fa98c0..4dd6de7a8c5 100644 --- a/packages/ui-lib/.storybook/main.ts +++ b/packages/ui-lib/.storybook/main.ts @@ -6,16 +6,9 @@ export const framework = { }; export const docs = { autodocs: false }; -export const addons = [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@chromatic-com/storybook', - '@storybook/addon-interactions', - '@storybook/addon-themes' -]; +export const addons = ['@storybook/addon-essentials']; const config: StorybookConfig = { - //framework: '@taiko/ui-lib', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], staticDirs: ['../static'], framework: { diff --git a/packages/ui-lib/src/lib/components/Footer/Footer.svelte b/packages/ui-lib/src/lib/components/Footer/Footer.svelte index 507d164546f..2d108581cdc 100644 --- a/packages/ui-lib/src/lib/components/Footer/Footer.svelte +++ b/packages/ui-lib/src/lib/components/Footer/Footer.svelte @@ -110,7 +110,7 @@ 'flex flex-col', 'items-center', 'justify-center', - 'bg-tko-background-elevated', + 'bg-background-elevated', //'bg-primary', 'mt-5', 'p-5', @@ -125,11 +125,12 @@ 'flex-row', 'items-center', 'justify-center', + 'uppercase', 'gap-5', - 'text-xs', + 'text-[12px]/[17.46px]', 'font-bold', 'font-sans', - 'text-tko-content-primary' + 'text-content-primary' ); const socialLinksWrapperClasses = classNames( 'w-full', @@ -145,12 +146,12 @@ 'flex flex-row', 'items-center', 'justify-center', - 'bg-tko-background-neutral', + 'bg-background-neutral', 'lg:p-5', 'p-3', 'gap-3', 'rounded-xl', - 'text-tko-content-primary', + 'text-content-primary', 'font-medium', 'lg:text-2xl', 'md:text-base', @@ -187,14 +188,14 @@ 'text-4xl', 'font-clash-grotesk', 'font-medium', - 'text-tko-content-primary', + 'text-content-primary', 'md:text-left', 'text-center', 'w-full' ); const bottomContentClasses = classNames( - 'text-tko-content-secondary', + 'text-content-secondary', 'font-sans', 'text-base', 'font-normal', @@ -213,7 +214,7 @@ 'pt-6', 'font-sans', 'text-base', - 'text-tko-content-secondary', + 'text-content-secondary', 'font-normal' ); @@ -222,7 +223,7 @@ 'flex flex-col', 'items-center', 'justify-center', - 'bg-tko-background-neutral', + 'bg-background-neutral', 'rounded-3xl', 'p-7' ); @@ -253,14 +254,14 @@ const textLinkTitleClasses = classNames( 'font-bold', - 'text-tko-content-primary', + 'text-content-primary', 'text-base', 'uppercase' ); const textLinkContentClasses = classNames( 'hover:text-primary', - 'text-tko-content-secondary', + 'text-content-secondary', 'text-base', 'cursor-pointer' ); @@ -275,7 +276,7 @@ 'py-3', 'font-sans', 'text-base', - 'text-tko-content-secondary', + 'text-content-secondary', 'font-normal' ); @@ -299,22 +300,22 @@ size="28" class={classNames( 'transition-colors', - //'text-primary' + hoveredIcon === link.label && hoveredIcon === 'youtube' - ? 'text-tko-red-500' - : 'text-tko-content-tertiary', + ? 'text-red-500' + : 'text-content-tertiary', hoveredIcon === link.label && hoveredIcon === 'forum' - ? 'text-tko-primary' - : 'text-tko-content-tertiary', + ? 'text-primary' + : 'text-content-tertiary', hoveredIcon === link.label && hoveredIcon === 'discord' - ? 'text-tko-discord' - : 'text-tko-content-tertiary', + ? 'text-discord-purple' + : 'text-content-tertiary', hoveredIcon === link.label && hoveredIcon === 'twitter' - ? 'text-tko-icon-primary' - : 'text-tko-content-tertiary', + ? 'text-icon-primary' + : 'text-content-tertiary', hoveredIcon === link.label && hoveredIcon === 'mirror' - ? 'text-tko-icon-primary' - : 'text-tko-content-tertiary' + ? 'text-icon-primary' + : 'text-content-tertiary' )} /> {#if windowSize !== 'sm'} diff --git a/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte b/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte index 4efcdfd46fb..5c627a512df 100644 --- a/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte +++ b/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte @@ -1,16 +1,21 @@ -

Welcome to your library project

+
Purple?
+
Welcome to your library project

Create your package using @sveltejs/package and preview/showcase your work with SvelteKit

Visit kit.svelte.dev to read the documentation

+ + diff --git a/packages/ui-lib/src/stories/Colors/Colors.stories.ts b/packages/ui-lib/src/stories/Colors/Colors.stories.ts deleted file mode 100644 index 70dc64af8ca..00000000000 --- a/packages/ui-lib/src/stories/Colors/Colors.stories.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/svelte'; -import { default as Component } from './Component.svelte'; -import colors from '../../lib/theme/colors'; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories -const meta = { - title: 'Colors', - component: Component, - tags: [], - //tags: ['autodocs'], - argTypes: { - color: { control: 'select', options: Object.keys(colors) } - //label: { control: 'text' }, - //title: { control: 'text' }, - //text: { control: 'text' } - } - - /* - argTypes: { - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - },*/ -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - color: 'yellow-700' - } -}; diff --git a/packages/ui-lib/src/stories/Colors/Component.svelte b/packages/ui-lib/src/stories/Colors/Component.svelte deleted file mode 100644 index da614b0acdb..00000000000 --- a/packages/ui-lib/src/stories/Colors/Component.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - -
-{color} - -
diff --git a/packages/ui-lib/tailwind.config.js b/packages/ui-lib/tailwind.config.js index 1ccffe6c290..a1b1107a86f 100644 --- a/packages/ui-lib/tailwind.config.js +++ b/packages/ui-lib/tailwind.config.js @@ -1,7 +1,4 @@ -import daisyuiPlugin from 'daisyui'; -import colors from './src/lib/theme/colors'; -import darkTheme from './src/lib/theme/dark-mode'; -import lightTheme from './src/lib/theme/light-mode'; +import daisyui from 'daisyui'; /** @type {import('tailwindcss').Config} */ export default { @@ -16,13 +13,127 @@ export default { footer: "url('/bg/footer-gradient.svg')", general: "url('/bg/general-gradient.svg')" }, + + fontSize: { + h0: [ + '6.25rem', + { + lineHeight: '5.313rem' + } + ], + h4: [ + '1.375rem', + { + lineHeight: '1.75rem' + } + ] + }, + keyframes: { + 'cell-pulse-animation': { + '0%': { opacity: '0' }, + '50%': { opacity: '1' }, + '100%': { opacity: '0' } + }, + 'cell-pulse-negative-animation': { + '0%': { opacity: '1' }, + '50%': { opacity: '0' }, + '100%': { opacity: '1' } + }, + 'arrows-x-animation': { + '0%': { left: '0' }, + '100%': { left: '100%' } + } + }, + animation: { + 'cell-pulse-3': 'cell-pulse-animation 3s ease-in infinite', + 'cell-pulse-5': 'cell-pulse-animation 5s ease-in infinite', + 'cell-pulse-7': 'cell-pulse-animation 7s ease-in infinite', + 'cell-pulse-negative-3': 'cell-pulse-negative-animation 3s ease-in infinite', + 'cell-pulse-negative-5': 'cell-pulse-negative-animation 5s ease-in infinite', + 'cell-pulse-negative-7': 'cell-pulse-negative-animation 7s ease-in infinite', + 'arrows-x-3': 'arrows-x-animation 300ms linear forwards', + 'arrows-x-3-reset': 'arrows-x-animation 300ms linear reverse' + }, colors: { - tko: colors + // Pink + 'pink-10': '#FFE7F6', + 'pink-50': '#FFC6E9', + 'pink-200': '#FF6FC8', + 'pink-400': '#E81899', + 'pink-500': '#C8047D', + // Gray + 'gray-0': '#FFFFFF', + 'gray-5': '#fafafa', + 'gray-10': '#F3F3F3', + 'gray-50': '#E3E3E3', + 'gray-100': '#CACBCE', + 'gray-200': '#ADB1B8', + 'gray-300': '#91969F', + 'gray-400': '#767C89', + 'gray-500': '#5D636F', + 'gray-600': '#444A55', + 'gray-700': '#2B303B', + 'gray-800': '#191E28', + 'gray-900': '#0B101B', + 'gray-1000': '#050912', + // Red + 'red-10': '#FFE7E7', + 'red-300': '#F15C5D', + 'red-400': '#DB4546', + 'red-500': '#CE2C2D', + 'red-800': '#440000', + // Green + 'green-10': '#E4FFF4', + 'green-300': '#47E0A0', + 'green-400': '#2DCA88', + 'green-600': '#059458', + 'green-700': '#005E36', + // Yellow + 'yellow-10': '#FFF6DE', + 'yellow-300': '#F8C23B', + 'yellow-500': '#DBA00D', + 'yellow-700': '#775602', + 'yellow-800': '#382800', + + // Theme + 'test-content-primary': 'var(--test-content-primary)', + 'content-primary': 'var(--content-primary)', + 'content-secondary': 'var(--content-secondary)', + 'content-tertiary': 'var(--content-tertiary)', + 'content-link-primary': 'var(--content-link-primary)', + 'content-link-hover': 'var(--content-link-hover)', + 'icon-primary': 'var(--icon-primary)', + 'icon-secondary': 'var(--icon-secondary)', + 'brand-primary': 'var(--brand-primary)', + 'brand-secondary': 'var(--brand-secondary)', + positive: 'var(--positive)', + negative: 'var(--negative)', + warning: 'var(--warning)', + 'background-primary': 'var(--background-primary)', + 'background-elevated': 'var(--background-elevated)', + 'background-neutral': 'var(--background-neutral)', + 'background-overlay': 'var(--background-overlay)', + 'interactive-primary': 'var(--interactive-primary)', + 'interactive-primary-accent': 'var(--interactive-primary-accent)', + 'interactive-secondary': 'var(--interactive-secondary)', + 'interactive-tertiary': 'var(--interactive-tertiary)', + 'interactive-accent': 'var(--interactive-accent)', + 'border-divider-default': 'var(--border-divider-default)', + 'border-primary': 'var(--border-primary)', + 'border-hover': 'var(--border-hover)', + 'border-accent': 'var(--border-accent)', + 'base-content-primary': 'var(--base-content-primary)', + 'base-background-primary': 'var(--base-background-primary)', + // Custom + 'discord-purple': '#5765f1', + + // testing + legacy: 'var(--primary-brand)' } } }, - plugins: [daisyuiPlugin, require('tailwindcss-image-rendering')()], + plugins: [daisyui, require('tailwindcss-image-rendering')()], // https://daisyui.com/docs/config/ daisyui: { @@ -36,11 +147,231 @@ export default { themes: [ { dark: { - ...darkTheme + //...darkTheme, + + 'color-scheme': 'dark', + '--btn-text-case': 'capitalize', + // '--rounded-box': '0.625rem', // 10px + + '--primary-brand': '#C8047D', // pink-500 + '--primary-content': '#F3F3F3', // grey-10 + '--primary-link': '#FF6FC8', // pink-200 + '--primary-link-hover': '#FFC6E9', // pink-50 + '--primary-icon': '#CACBCE', // grey-100 + '--primary-background': '#0B101B', // grey-900 + '--primary-interactive': '#C8047D', // pink-500 + '--primary-interactive-accent': '#E81899', // pink-400 + '--primary-interactive-hover': '#E81899', // pink-400 + '--primary-border-hover': '#FF6FC8', // pink-200 + '--primary-border-dark': '#5D636F', // grey-500 + '--primary-border-accent': '#E81899', // pink-400 + '--primary-base-background': '#FFFFFF', // grey-0 + '--primary-base-content': '#191E28', // grey-800 + + '--secondary-brand': '#E81899', // pink-400 + '--secondary-content': '#ADB1B8', // grey-200 + '--secondary-icon': '#2B303B', // grey-700 + + '--secondary-interactive-accent': '#2B303B', // grey-700 + '--secondary-interactive-hover': '#ADB1B8', // grey-200 + + '--tertiary-content': '#5D636F', // grey-500 + '--tertiary-interactive-accent': '#5D636F', // grey-500 + '--tertiary-interactive-hover': '#444A55', // grey-600 + + '--positive-sentiment': '#47E0A0', // green-300 + '--positive-background': '#00321D', // green-800 + + '--negative-sentiment': '#F15C5D', // red-300 + '--negative-background': '#440000', // red-800 + + '--warning-sentiment': '#EBB222', // yellow-400 + '--warning-background': '#382800', // yellow-800 + + '--elevated-background': '#191E28', // grey-800 + '--neutral-background': '#2B303B', // grey-700 + '--neutral-content': '#2B303B', // grey-800 + '--neutral-accent': '#2B303B', // grey-700 + '--overlay-background': 'rgba(12, 17, 28, 0.5)', // grey-900|50% + '--overlay-dialog': 'rgba(12, 17, 28, 0.90)', // grey-900|90% + '--divider-border': '#444A55', // grey-600 + '--dialog-background': '#2B303B', // grey-700 + '--dialog-dialog-interactive-disabled': '#444A55', // grey-600 + + // ==Taikoons Color Customizations==// + '--grey-500-10': 'rgba(93, 99, 111, 0.1)', // grey-500, 10% opacity + '--grey-500-20': 'rgba(93, 99, 111, 0.2)', // grey-500, 20% opacity + + '--text-dark': '#f3f3f3', + '--text-light': '#444A55', // grey-600 + + '--neutral': '#2B303B', // grey-700 + + // figma's theme + '--interactive-primary-pink': '#C8047D', // pink 500 + '--interactive-primary-accent': '#E81899', // pink-400 + '--interactive-secondary': '#2b303b', // grey-700 + '--interactive-tertiary': '#444a55', // grey-600 + '--interactive-accent': '#5D636F', // grey-500 + + '--content-primary': '#F3F3F3', // grey-10 + '--content-secondary': '#ADB1B8', // grey-200 + '--content-tertiary': '#5D636F', // grey-500 + '--content-link-primary': '#FF6FC8', // pink-200 + '--content-link-hover': '#FFC6E9', // pink-50 + + '--border-divider-default': '#444A55', // grey-600 + + '--background-primary': '#0B101B', // grey-900 + '--background-neutral': '#2B303B', // grey-700 + '--background-elevated': '#191E28', // grey-800 + + '--icon-primary': '#CACBCE', // grey-100 + '--icon-secondary': '#2B303B', // grey-700 + + // custom colors + + '--background-body': '#0b101b', + '--nav-button': '#2B303B', + // ================================ // + + primary: '#C8047D', // pink-500, + 'primary-focus': '#E81899', // pink-400 + 'primary-content': '#F3F3F3', // grey-10 + + secondary: '#E81899', // pink-400 + // 'secondary-focus': '', + 'secondary-content': '#ADB1B8', // grey-200 + + neutral: '#2B303B', // grey-700 + 'neutral-focus': '#444A55', // grey-600 + 'neutral-content': '#F3F3F3', // grey-10 + + 'base-100': '#0B101B', // grey-900 + // 'base-200': '', + // 'base-300': '', + 'base-content': '#F3F3F3', // grey-10 + + success: '#00321D', // green-800 + 'success-content': '#47E0A0', // green-300 + error: '#440000', // red-800 + 'error-content': '#F15C5D', // red-300 + warning: '#382800', // yellow-800 + 'warning-content': '#EBB222' // yellow-400 }, light: { - ...lightTheme + //...lightTheme, + 'color-scheme': 'light', + '--btn-text-case': 'capitalize', + + '--primary-brand': '#C8047D', // pink-500 + '--primary-content': '#191E28', // grey-800 + '--primary-link': '#C8047D', // pink-500 + '--primary-link-hover': '#E81899', // pink-400 + '--primary-icon': '#5D636F', // grey-500 + '--primary-background': '#FAFAFA', // grey-5 + '--primary-interactive': '#C8047D', // pink-500 + '--primary-interactive-accent': '#E81899', // pink-400 + '--primary-interactive-hover': '#E3E3E3', //grey-50 + '--primary-border-hover': '#FF6FC8', // pink-200 + '--primary-border-accent': '#E81899', // pink-400 + + // TODO: these two are yet to be decided + '--primary-base-background': '#FFFFFF', // grey-0 + '--primary-base-content': '#191E28', // grey-800 + + '--secondary-brand': '#E81899', // pink-400 + '--secondary-content': '#444A55', // grey-600 + '--secondary-icon': '#2B303B', // grey-700 + '--secondary-interactive-accent': '#E3E3E3', // grey-50 + '--secondary-interactive-hover': '##F3F3F3', // grey-10 + + '--tertiary-content': '#91969F', // grey-300 + + // TODO: these two are missing. Remain the same as dark theme + '--tertiary-interactive-hover': '#444A55', // grey-600 + '--tertiary-interactive-accent': '#5D636F', // grey-500 + + '--positive-sentiment': '#005E36', // green-700 + '--positive-background': '#BFFFE4', // green-50 + + '--negative-sentiment': '#BB1A1B', // red-600 + '--negative-background': '#FFE7E7', // red-10 + + '--warning-sentiment': '#775602', // yellow-700 + '--warning-background': '#FFF6DE', // yellow-10 + + '--elevated-background': '#e3e3e3', //#FAFAFA', // grey-5 + '--neutral-background': '#FFFFFF', // grey-0 + '--neutral-content': '#191E28', // grey-800 + '--neutral-accent': '#e3e3e3', // grey-50 + '--overlay-background': 'rgba(12, 17, 28, 0.2)', // grey-900|20% + '--overlay-dialog': 'rgba(12, 17, 28, 0.9)', // grey-900|20 + + '--dialog-background': '#FFFFFF', // grey-0 + '--dialog-dialog-interactive-disabled': '#E3E3E3', // grey-50 + + '--divider-border': '#CACBCE', // grey-100 + // ==Taikoons Color Customizations==// + + '--grey-500-10': 'rgba(250,250,250,0.5)', + '--grey-500-20': 'rgba(250,250,250,0.5)', + '--text-dark': '#191e28', + '--text-light': '#91969f', + '--neutral': '#E3E3E3', // grey-50 + + // figma's theme + '--interactive-primary-pink': '#C8047D', // pink 500 + '--interactive-primary-accent': '#E81899', // pink-400 + '--interactive-secondary': '#f3f3f3', // grey-10 + '--interactive-tertiary': '#e3e3e3', // grey-50 + '--interactive-accent': '#cacbce', // grey-100 + + '--content-primary': '#191E28', // grey-800 + '--content-secondary': '#444A55', // grey-600 + '--content-tertiary': '#91969F', // grey-300 + '--content-link-primary': '#C8047D', // pink-500 + '--content-link-hover': '#E81899', // pink-400 + + '--border-divider-default': '#CACBCE', // grey-100 + + '--background-primary': '#ffffff', // grey-5 + '--background-neutral': '#F8f8f8', // grey-50 + '--background-elevated': '#ffffff', // grey-5 + + '--icon-primary': '#5D636F', // grey-500 + '--icon-secondary': '#e3e3e3', // grey-50 + + // custom colors + + '--background-body': '#f8f8f8', + '--nav-button': '#ffffff', + // ================================ // + + primary: '#C8047D', // pink-500, + 'primary-focus': '#E81899', // pink-400 + 'primary-content': '#191E28', // grey-800 + + secondary: '#E81899', // pink-400 + // 'secondary-focus': '', + 'secondary-content': '#444A55', // grey-600 + + neutral: '#E3E3E3', // grey-50 + 'neutral-focus': '#CACBCE', // grey-100 + 'neutral-content': '#191E28', // grey-800 + + 'base-100': '#FAFAFA', // grey-5 + // 'base-200': '', + // 'base-300': '', + 'base-content': '#191E28', // grey-800 + + success: '#BFFFE4', // green-50 + 'success-content': '#005E36', // green-700 + error: '#FFE7E7', // red-10 + 'error-content': '#BB1A1B', // red-600 + warning: '#FFF6DE', // yellow-10 + 'warning-content': '#775602' // yellow-700 } } ] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 213de86190f..fe30470771e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -554,6 +554,9 @@ importers: '@openzeppelin/merkle-tree': specifier: ^1.0.6 version: 1.0.6 + '@taiko/ui-lib': + specifier: workspace:* + version: link:../ui-lib '@wagmi/cli': specifier: ^2.1.4 version: 2.1.4(bufferutil@4.0.8)(typescript@5.4.5)