From 7610dad761c835ad5a03029756a85f6fa462e2aa Mon Sep 17 00:00:00 2001 From: Mateusz Jasiuk Date: Mon, 5 Feb 2024 12:24:27 +0100 Subject: [PATCH] chore: update faucet with tailwind (#609) --- apps/faucet/package.json | 5 ++ apps/faucet/postcss.config.js | 6 ++ apps/faucet/src/App/App.tsx | 2 +- apps/faucet/src/App/CallToActionCard.tsx | 17 +++-- apps/faucet/src/App/Faq.components.tsx | 68 ++++++++++-------- apps/faucet/src/App/Faq.tsx | 29 ++++---- apps/faucet/src/App/FaqDropdown.tsx | 15 ++-- apps/faucet/src/App/Faucet.tsx | 6 +- apps/faucet/src/index.tsx | 4 +- apps/faucet/src/tailwind.css | 3 + apps/faucet/tailwind.config.js | 12 ++++ apps/faucet/tsconfig.json | 1 + apps/faucet/tsconfig.webpack.json | 2 +- apps/faucet/webpack.config.js | 19 +++-- yarn.lock | 90 +++++++++++++++++++++++- 15 files changed, 210 insertions(+), 69 deletions(-) create mode 100644 apps/faucet/postcss.config.js create mode 100644 apps/faucet/src/tailwind.css create mode 100644 apps/faucet/tailwind.config.js diff --git a/apps/faucet/package.json b/apps/faucet/package.json index 5cd7c9be234..13b9fb7134b 100644 --- a/apps/faucet/package.json +++ b/apps/faucet/package.json @@ -45,8 +45,13 @@ "eslint-plugin-react": "^7.33.0", "eslint-plugin-react-hooks": "^4.6.0", "local-cors-proxy": "^1.1.0", + "postcss": "^8.4.33", + "postcss-loader": "^8.1.0", + "postcss-preset-env": "^9.3.0", + "tailwindcss": "^3.4.1", "ts-loader": "^9.3.1", "ts-node": "^10.9.1", + "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript-plugin-styled-components": "^2.0.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1" diff --git a/apps/faucet/postcss.config.js b/apps/faucet/postcss.config.js new file mode 100644 index 00000000000..12a703d900d --- /dev/null +++ b/apps/faucet/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/faucet/src/App/App.tsx b/apps/faucet/src/App/App.tsx index 384ba8c6725..0f000eefe2e 100644 --- a/apps/faucet/src/App/App.tsx +++ b/apps/faucet/src/App/App.tsx @@ -149,7 +149,7 @@ export const App: React.FC = () => { - + Namada Faucet diff --git a/apps/faucet/src/App/CallToActionCard.tsx b/apps/faucet/src/App/CallToActionCard.tsx index a8a1e060a6b..1f9e807ff50 100644 --- a/apps/faucet/src/App/CallToActionCard.tsx +++ b/apps/faucet/src/App/CallToActionCard.tsx @@ -1,17 +1,17 @@ import React, { useState } from "react"; +import InclineArrowBlack from "../../public/incline-arrow-black.svg"; +import InclineArrowYellow from "../../public/incline-arrow-yellow.svg"; import { BottomBorder, CallToActionContainer, CardContainer, + CardDescription, + CardHeading, InclineArrowIcon, LeftBorder, RightBorder, TopBorder, - CardDescription, - CardHeading } from "./Card.components"; -import InclineArrowYellow from "../../public/incline-arrow-yellow.svg"; -import InclineArrowBlack from "../../public/incline-arrow-black.svg"; type Props = { description: string; @@ -33,13 +33,18 @@ export const CallToActionCard: React.FC = ({ }; return ( - + {description} - + {title} ` overflow: hidden; /* Ensure content doesn't overflow during animation */ margin-top: 8px; ${({ isOpen }) => { - const toggleAnimation = isOpen ? - css` - max-height: 200px; - animation: ${expand} 0.35s ease-out; - `: css` - max-height: 0px; - animation: ${collapse} 0.35s ease-out; - `; - return isOpen === null ? css`max-height: 0px;` : toggleAnimation - }} + const toggleAnimation = isOpen + ? css` + max-height: 200px; + animation: ${expand} 0.35s ease-out; + ` + : css` + max-height: 0px; + animation: ${collapse} 0.35s ease-out; + `; + return isOpen === null + ? css` + max-height: 0px; + ` + : toggleAnimation; + }} `; export const DropDownTitle = styled.div` @@ -63,13 +68,15 @@ export const DropDownTitle = styled.div` export const DropDownTitleText: React.FC = ({ children }) => { return ( -
- {children} +
+ {children}
- ) -} + ); +}; const FaqUrlStyle = styled.a` color: ${(props) => props.theme.colors.utility3.black}; @@ -78,12 +85,11 @@ const FaqUrlStyle = styled.a` } `; -interface FaqUrlProps extends React.AnchorHTMLAttributes { -} +interface FaqUrlProps extends React.AnchorHTMLAttributes {} export const FaqUrl: React.FC = ({ ...props }) => { // prevent onClick from bubbling up to parent return e.stopPropagation()} {...props} />; -} +}; const rotateAnimation = keyframes` from { @@ -91,7 +97,7 @@ const rotateAnimation = keyframes` } to { transform: rotate(45deg); - }` + }`; const reverseRotateAnimation = keyframes` from { @@ -99,13 +105,17 @@ const reverseRotateAnimation = keyframes` } to { transform: rotate(0deg); - }` -export const PlusIcon = styled.img<{ isOpen: boolean | null}>` + }`; +export const PlusIcon = styled.img<{ isOpen: boolean | null }>` width: 24px; ${({ isOpen }) => { - const rotateAnimationCss = isOpen - ? css`animation: ${rotateAnimation} 0.2s ease-in-out forwards;` : css`animation: ${reverseRotateAnimation} 0.2s ease-in-out forwards;`; - return isOpen === null ? '': rotateAnimationCss; - }}`; - - + const rotateAnimationCss = isOpen + ? css` + animation: ${rotateAnimation} 0.2s ease-in-out forwards; + ` + : css` + animation: ${reverseRotateAnimation} 0.2s ease-in-out forwards; + `; + return isOpen === null ? "" : rotateAnimationCss; + }} +`; diff --git a/apps/faucet/src/App/Faq.tsx b/apps/faucet/src/App/Faq.tsx index dd725b50d4f..37cd8ea48f0 100644 --- a/apps/faucet/src/App/Faq.tsx +++ b/apps/faucet/src/App/Faq.tsx @@ -1,6 +1,6 @@ +import { Text } from "@namada/components"; import React from "react"; import { FaqContainer, FaqUrl } from "./Faq.components"; -import { Text } from "@namada/components"; import { FaqDropdown } from "./FaqDropdown"; const namadaDiscord = "https://discord.com/invite/namada"; @@ -10,25 +10,24 @@ const becomeValidatorUrl = export const Faq: React.FC = () => { return ( - - FAQs - + FAQs - + To request funds, simply enter your wallet address and hit “Get Testnet Tokens”. -
- - See the{" \""} +
+ + See the{' "'} - {'Generating a validator account'} - {"\" "} + {"Generating a validator account"} + + {'" '} section if you need to create a new address. - + These are test coins on a test network and do not have any real value for regular users. They are designed for developers to test and develop their applications without using real money. Please note that @@ -37,19 +36,19 @@ export const Faq: React.FC = () => { - + The time required to receive test tokens may vary. It depends on the speed of the blocks in the current chain. -
- +
+ If more than a few hours have passed and you still have not received your tokens, please email us at{" "} {"Discord!"} - + {"Join our Discord"} to share any issues or questions you have relating to the faucet. We will definitely help! diff --git a/apps/faucet/src/App/FaqDropdown.tsx b/apps/faucet/src/App/FaqDropdown.tsx index f0754f200e6..a9d7a149fc9 100644 --- a/apps/faucet/src/App/FaqDropdown.tsx +++ b/apps/faucet/src/App/FaqDropdown.tsx @@ -1,6 +1,12 @@ import React, { useState } from "react"; -import { FaqDropdownContainer, FaqDropdownContent, PlusIcon, DropDownTitle, DropDownTitleText } from "./Faq.components"; -import plusIcon from '../../public/plus-icon.svg' +import plusIcon from "../../public/plus-icon.svg"; +import { + DropDownTitle, + DropDownTitleText, + FaqDropdownContainer, + FaqDropdownContent, + PlusIcon, +} from "./Faq.components"; type Props = { title: string; @@ -16,14 +22,11 @@ export const FaqDropdown: React.FC = ({ children, title }) => { return ( - - {title} - + {title} {children} - ); }; diff --git a/apps/faucet/src/App/Faucet.tsx b/apps/faucet/src/App/Faucet.tsx index b16ee216367..e9afddb77e9 100644 --- a/apps/faucet/src/App/Faucet.tsx +++ b/apps/faucet/src/App/Faucet.tsx @@ -1,4 +1,4 @@ -import { AmountInput, ActionButton, Alert, Input } from "@namada/components"; +import { ActionButton, Alert, AmountInput, Input } from "@namada/components"; import BigNumber from "bignumber.js"; import { sanitize } from "dompurify"; import React, { useCallback, useContext, useEffect, useState } from "react"; @@ -211,12 +211,14 @@ export const FaucetForm: React.FC = ({ isTestnetLive }) => { diff --git a/apps/faucet/src/index.tsx b/apps/faucet/src/index.tsx index 6c70af3b063..9dd54cbd206 100644 --- a/apps/faucet/src/index.tsx +++ b/apps/faucet/src/index.tsx @@ -1,7 +1,8 @@ import React from "react"; import ReactDOM from "react-dom"; -import "./index.css"; import { App } from "./App"; +import "./index.css"; +import "./tailwind.css"; ReactDOM.render( @@ -9,4 +10,3 @@ ReactDOM.render( , document.getElementById("root") ); - diff --git a/apps/faucet/src/tailwind.css b/apps/faucet/src/tailwind.css new file mode 100644 index 00000000000..b5c61c95671 --- /dev/null +++ b/apps/faucet/src/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/apps/faucet/tailwind.config.js b/apps/faucet/tailwind.config.js new file mode 100644 index 00000000000..bcb1daca3fe --- /dev/null +++ b/apps/faucet/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + "../../packages/components/src/**/*.{js,ts,jsx,tsx}", + ], + presets: [require("@namada/components/src/theme.js")], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/apps/faucet/tsconfig.json b/apps/faucet/tsconfig.json index 1e06db9c922..5157748e29c 100644 --- a/apps/faucet/tsconfig.json +++ b/apps/faucet/tsconfig.json @@ -1,4 +1,5 @@ { + "extends": "../../tsconfig.base.json", "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, diff --git a/apps/faucet/tsconfig.webpack.json b/apps/faucet/tsconfig.webpack.json index 12b6f0f1898..cd496e50525 100644 --- a/apps/faucet/tsconfig.webpack.json +++ b/apps/faucet/tsconfig.webpack.json @@ -1,5 +1,5 @@ { - "extends": "./tsconfig", + "extends": "./tsconfig.json", "exclude": [ "**/*.test.ts", "./node_modules/**/*.tsx", diff --git a/apps/faucet/webpack.config.js b/apps/faucet/webpack.config.js index c3d42994a7c..747f9be3c91 100644 --- a/apps/faucet/webpack.config.js +++ b/apps/faucet/webpack.config.js @@ -1,5 +1,6 @@ const webpack = require("webpack"); const { resolve, join } = require("path"); +const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const { getProcessEnv } = require("@namada/config/webpack.js"); @@ -40,10 +41,13 @@ const plugins = [ // Provide environment variables to interface: new webpack.DefinePlugin({ process: { - env: JSON.stringify(getProcessEnv( - "NAMADA_INTERFACE", - ["TARGET", "NODE_ENV", "npm_package_version"] - )), + env: JSON.stringify( + getProcessEnv("NAMADA_INTERFACE", [ + "TARGET", + "NODE_ENV", + "npm_package_version", + ]) + ), }, }), ]; @@ -81,7 +85,7 @@ module.exports = { }, { test: /\.css$/i, - use: ["style-loader", "css-loader"], + use: ["style-loader", "css-loader", "postcss-loader"], }, { test: /\.png$/i, @@ -131,6 +135,11 @@ module.exports = { buffer: require.resolve("buffer/"), crypto: require.resolve("crypto-browserify"), }, + plugins: [ + new TsconfigPathsPlugin({ + configFile: "tsconfig.json", + }), + ], }, performance: { hints: false, diff --git a/yarn.lock b/yarn.lock index 41f297137a3..1675037e4f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7657,12 +7657,17 @@ __metadata: eslint-plugin-react-hooks: "npm:^4.6.0" local-cors-proxy: "npm:^1.1.0" node-forge: "npm:^1.3.1" + postcss: "npm:^8.4.33" + postcss-loader: "npm:^8.1.0" + postcss-preset-env: "npm:^9.3.0" react: "npm:^17.0.2" react-dom: "npm:^17.0.2" react-router-dom: "npm:^6.0.0" styled-components: "npm:^5.3.5" + tailwindcss: "npm:^3.4.1" ts-loader: "npm:^9.3.1" ts-node: "npm:^10.9.1" + tsconfig-paths-webpack-plugin: "npm:^4.1.0" typescript: "npm:^5.1.3" typescript-plugin-styled-components: "npm:^2.0.0" webpack-cli: "npm:^4.10.0" @@ -13957,6 +13962,23 @@ __metadata: languageName: node linkType: hard +"cosmiconfig@npm:^9.0.0": + version: 9.0.0 + resolution: "cosmiconfig@npm:9.0.0" + dependencies: + env-paths: "npm:^2.2.1" + import-fresh: "npm:^3.3.0" + js-yaml: "npm:^4.1.0" + parse-json: "npm:^5.2.0" + peerDependencies: + typescript: ">=4.9.5" + peerDependenciesMeta: + typescript: + optional: true + checksum: 1c1703be4f02a250b1d6ca3267e408ce16abfe8364193891afc94c2d5c060b69611fdc8d97af74b7e6d5d1aac0ab2fb94d6b079573146bc2d756c2484ce5f0ee + languageName: node + linkType: hard + "cosmjs-types@npm:^0.4.0": version: 0.4.1 resolution: "cosmjs-types@npm:0.4.1" @@ -15618,7 +15640,7 @@ __metadata: languageName: node linkType: hard -"env-paths@npm:^2.2.0": +"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1": version: 2.2.1 resolution: "env-paths@npm:2.2.1" checksum: 285325677bf00e30845e330eec32894f5105529db97496ee3f598478e50f008c5352a41a30e5e72ec9de8a542b5a570b85699cd63bd2bc646dbcb9f311d83bc4 @@ -22938,7 +22960,7 @@ __metadata: languageName: node linkType: hard -"jiti@npm:^1.18.2, jiti@npm:^1.19.1": +"jiti@npm:^1.18.2, jiti@npm:^1.19.1, jiti@npm:^1.20.0": version: 1.21.0 resolution: "jiti@npm:1.21.0" bin: @@ -26601,6 +26623,26 @@ __metadata: languageName: node linkType: hard +"postcss-loader@npm:^8.1.0": + version: 8.1.0 + resolution: "postcss-loader@npm:8.1.0" + dependencies: + cosmiconfig: "npm:^9.0.0" + jiti: "npm:^1.20.0" + semver: "npm:^7.5.4" + peerDependencies: + "@rspack/core": 0.x || 1.x + postcss: ^7.0.0 || ^8.0.1 + webpack: ^5.0.0 + peerDependenciesMeta: + "@rspack/core": + optional: true + webpack: + optional: true + checksum: 75f46f2728469a5dc410c21fdcabbf98236329a7763243ad0087d971fb9ee5a771e2f5c958b131698e22381b147927e2b4bee1a81c010ae137a147b45909adc7 + languageName: node + linkType: hard + "postcss-logical@npm:^5.0.4": version: 5.0.4 resolution: "postcss-logical@npm:5.0.4" @@ -27300,6 +27342,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.33": + version: 8.4.33 + resolution: "postcss@npm:8.4.33" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.0.2" + checksum: 16eda83458fcd8a91bece287b5920c7f57164c3ea293e6c80d0ea71ce7843007bcd8592260a5160b9a7f02693e6ac93e2495b02d8c7596d3f3f72c1447e3ba79 + languageName: node + linkType: hard + "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -31136,6 +31189,39 @@ __metadata: languageName: node linkType: hard +"tailwindcss@npm:^3.4.1": + version: 3.4.1 + resolution: "tailwindcss@npm:3.4.1" + dependencies: + "@alloc/quick-lru": "npm:^5.2.0" + arg: "npm:^5.0.2" + chokidar: "npm:^3.5.3" + didyoumean: "npm:^1.2.2" + dlv: "npm:^1.1.3" + fast-glob: "npm:^3.3.0" + glob-parent: "npm:^6.0.2" + is-glob: "npm:^4.0.3" + jiti: "npm:^1.19.1" + lilconfig: "npm:^2.1.0" + micromatch: "npm:^4.0.5" + normalize-path: "npm:^3.0.0" + object-hash: "npm:^3.0.0" + picocolors: "npm:^1.0.0" + postcss: "npm:^8.4.23" + postcss-import: "npm:^15.1.0" + postcss-js: "npm:^4.0.1" + postcss-load-config: "npm:^4.0.1" + postcss-nested: "npm:^6.0.1" + postcss-selector-parser: "npm:^6.0.11" + resolve: "npm:^1.22.2" + sucrase: "npm:^3.32.0" + bin: + tailwind: lib/cli.js + tailwindcss: lib/cli.js + checksum: eec3d758f1cd4f51ab3b4c201927c3ecd18e55f8ac94256af60276aaf8d1df78f9dddb5e9fb1e057dfa7cea3c1356add4994cc3d42da9739df874e67047e656f + languageName: node + linkType: hard + "tapable@npm:^1.0.0": version: 1.1.3 resolution: "tapable@npm:1.1.3"