diff --git a/.stylelintrc b/.stylelintrc index 780972d9..16e24aff 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,7 +1,6 @@ { "extends": "stylelint-config-standard", "customSyntax": "postcss-styled-syntax", - "plugins": ["stylelint-order"], "rules": { "number-max-precision": 8, "selector-class-pattern": [ @@ -10,7 +9,6 @@ "message": "Class selectors should be in camelCase (e.g., myClassName)" } ], - "order/order": ["custom-properties", "declarations", "rules", "at-rules"], "custom-property-empty-line-before": null, "no-empty-source": null } diff --git a/package.json b/package.json index 07e1eb94..b28ae981 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@tanstack/react-query": "^5.36.0", "@tanstack/react-router": "^1.32.5", "connectkit": "^1.7.3", - "db-ui-toolkit": "github:BootNodeDev/db-ui-toolkit#0.0.7", + "db-ui-toolkit": "github:BootNodeDev/db-ui-toolkit", "modern-normalize": "^2.0.0", "next-themes": "^0.3.0", "react": "^18.3.1", @@ -79,7 +79,6 @@ "prettier": "^3.2.5", "stylelint": "^16.5.0", "stylelint-config-standard": "^36.0.0", - "stylelint-order": "^6.0.4", "typescript": "^5.4.5", "vite": "^5.2.11", "vitest": "^1.6.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d317476c..2488b80f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.7.3 version: 1.7.3(@babel/core@7.24.5)(@tanstack/react-query@5.36.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(viem@2.10.11(bufferutil@4.0.8)(typescript@5.4.5)(zod@3.23.8))(wagmi@2.9.2(@tanstack/query-core@5.36.1)(@tanstack/react-query@5.36.2(react@18.3.1))(@types/react@18.3.2)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-i18next@13.5.0(i18next@22.5.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1))(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1))(react@18.3.1)(rollup@4.17.2)(typescript@5.4.5)(viem@2.10.11(bufferutil@4.0.8)(typescript@5.4.5)(zod@3.23.8))(zod@3.23.8)) db-ui-toolkit: - specifier: github:BootNodeDev/db-ui-toolkit#0.0.7 - version: https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/5aef8f3852f19fb36f00447d034b58f5fdeee80b + specifier: github:BootNodeDev/db-ui-toolkit + version: https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/68c9cb96bc22e1087b795072cf1c5cbb71823e1d modern-normalize: specifier: ^2.0.0 version: 2.0.0 @@ -147,9 +147,6 @@ importers: stylelint-config-standard: specifier: ^36.0.0 version: 36.0.0(stylelint@16.5.0(typescript@5.4.5)) - stylelint-order: - specifier: ^6.0.4 - version: 6.0.4(stylelint@16.5.0(typescript@5.4.5)) typescript: specifier: ^5.4.5 version: 5.4.5 @@ -2848,8 +2845,8 @@ packages: dayjs@1.11.11: resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==} - db-ui-toolkit@https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/5aef8f3852f19fb36f00447d034b58f5fdeee80b: - resolution: {tarball: https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/5aef8f3852f19fb36f00447d034b58f5fdeee80b} + db-ui-toolkit@https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/68c9cb96bc22e1087b795072cf1c5cbb71823e1d: + resolution: {tarball: https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/68c9cb96bc22e1087b795072cf1c5cbb71823e1d} version: 0.1.0 engines: {node: '>=20.0.0'} @@ -4761,11 +4758,6 @@ packages: resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} engines: {node: '>=4'} - postcss-sorting@8.0.2: - resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==} - peerDependencies: - postcss: ^8.4.20 - postcss-styled-syntax@0.6.4: resolution: {integrity: sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==} engines: {node: '>=14.17'} @@ -5410,11 +5402,6 @@ packages: peerDependencies: stylelint: ^16.1.0 - stylelint-order@6.0.4: - resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==} - peerDependencies: - stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 - stylelint@16.5.0: resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==} engines: {node: '>=18.12.0'} @@ -9576,7 +9563,7 @@ snapshots: dayjs@1.11.11: {} - db-ui-toolkit@https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/5aef8f3852f19fb36f00447d034b58f5fdeee80b: + db-ui-toolkit@https://codeload.github.com/BootNodeDev/db-ui-toolkit/tar.gz/68c9cb96bc22e1087b795072cf1c5cbb71823e1d: dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -11772,10 +11759,6 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 - postcss-sorting@8.0.2(postcss@8.4.38): - dependencies: - postcss: 8.4.38 - postcss-styled-syntax@0.6.4(postcss@8.4.38): dependencies: postcss: 8.4.38 @@ -12521,12 +12504,6 @@ snapshots: stylelint: 16.5.0(typescript@5.4.5) stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) - stylelint-order@6.0.4(stylelint@16.5.0(typescript@5.4.5)): - dependencies: - postcss: 8.4.38 - postcss-sorting: 8.0.2(postcss@8.4.38) - stylelint: 16.5.0(typescript@5.4.5) - stylelint@16.5.0(typescript@5.4.5): dependencies: '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1) diff --git a/public/images/bg-body.svg b/public/images/bg-body.svg deleted file mode 100644 index bd41bd2b..00000000 --- a/public/images/bg-body.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/constants/menuItems.ts b/src/constants/menuItems.ts new file mode 100644 index 00000000..0e45a6c7 --- /dev/null +++ b/src/constants/menuItems.ts @@ -0,0 +1,20 @@ +type MenuItem = { + href?: string + label: string + to?: string +} + +export const menuItems: MenuItem[] = [ + { + label: 'Home', + to: '/#top', + }, + { + label: 'Documentation', + href: 'https://docs.dappboster.io', + }, + { + label: 'Examples', + to: '/#examples', + }, +] diff --git a/src/lib/wallets/connectkit.config.tsx b/src/lib/wallets/connectkit.config.tsx index d934db1b..c3a735c2 100644 --- a/src/lib/wallets/connectkit.config.tsx +++ b/src/lib/wallets/connectkit.config.tsx @@ -1,17 +1,33 @@ +import React from 'react' + import { getDefaultConfig, ConnectKitProvider, ConnectKitButton, Types } from 'connectkit' -import { createConfig } from 'wagmi' +import { Address } from 'viem' +import { normalize } from 'viem/ens' +import { createConfig, useEnsName, useEnsAvatar } from 'wagmi' import { env } from '@/src/env' import { chains, transports } from '@/src/lib/networks.config' -import CustomAvatar from '@/src/sharedComponents/ui/Avatar' -import ConnectButton from '@/src/sharedComponents/ui/ConnectButton' -import Avatar from '@/src/sharedComponents/web3/Avatar' +import Avatar from '@/src/sharedComponents/Avatar' +import ConnectButton from '@/src/sharedComponents/ConnectButton' + +const UserAvatar: React.FC<{ + address: Address + size: number +}> = ({ address, size }) => { + const { data: ensName } = useEnsName({ address }) + + const { data: avatarImg } = useEnsAvatar({ + name: ensName ? normalize(ensName) : undefined, + }) + + return +} export const WalletProvider = ({ children }: { children: React.ReactNode }) => { return ( , + customAvatar: Avatar as React.FC, }} > {children} @@ -27,7 +43,7 @@ export const ConnectWalletButton = () => { {isConnected ? ( <> - {address && } + {address && } {truncatedAddress} ) : ( diff --git a/src/pageComponents/about/index.tsx b/src/pageComponents/about/index.tsx deleted file mode 100644 index 8059336b..00000000 --- a/src/pageComponents/about/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components' - -const Wrapper = styled.div` - display: flex; - flex-grow: 1; - justify-content: center; - flex-direction: column; - align-items: center; -` - -export const About = () => { - return ( - -

Hello from About!

- - ) -} diff --git a/src/pageComponents/contact/index.tsx b/src/pageComponents/contact/index.tsx deleted file mode 100644 index e78dc6cf..00000000 --- a/src/pageComponents/contact/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components' - -const Wrapper = styled.div` - display: flex; - flex-grow: 1; - justify-content: center; - flex-direction: column; - align-items: center; -` - -export const Contact = () => { - return ( - -

Hello from Contact!

- - ) -} diff --git a/src/sharedComponents/web3/Avatar.test.tsx b/src/pageComponents/home/Examples/Items/Avatar.test.tsx similarity index 95% rename from src/sharedComponents/web3/Avatar.test.tsx rename to src/pageComponents/home/Examples/Items/Avatar.test.tsx index b74b33dd..5026ce5a 100644 --- a/src/sharedComponents/web3/Avatar.test.tsx +++ b/src/pageComponents/home/Examples/Items/Avatar.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react' import { Mock, describe, expect, it, vi } from 'vitest' import { useEnsName, useEnsAvatar } from 'wagmi' -import Avatar from '@/src/sharedComponents/web3/Avatar' +import Avatar from '@/src/pageComponents/home/Examples/Items/Avatar' // Mock wagmi hooks vi.mock('wagmi', () => ({ diff --git a/src/sharedComponents/web3/Avatar.tsx b/src/pageComponents/home/Examples/Items/Avatar.tsx similarity index 61% rename from src/sharedComponents/web3/Avatar.tsx rename to src/pageComponents/home/Examples/Items/Avatar.tsx index 1cb4e296..be4b8b7c 100644 --- a/src/sharedComponents/web3/Avatar.tsx +++ b/src/pageComponents/home/Examples/Items/Avatar.tsx @@ -2,28 +2,28 @@ import { Address } from 'viem' import { normalize } from 'viem/ens' import { useEnsName, useEnsAvatar } from 'wagmi' -import CustomAvatar from '@/src/sharedComponents/ui/Avatar' +import BaseAvatar from '@/src/sharedComponents/Avatar' -interface AvatarProps { +interface Props { address: Address size: number } /** - * Avatar WEB3 component using wagmi hooks to fetch ENS name and avatar image for the provided address. + * Avatar component using wagmi hooks to fetch ENS name and avatar image for the provided address. * * @param {string} props.address - The address * @param {number} props.size - The size of the avatar * @example */ -const Avatar = ({ address, size }: AvatarProps) => { +const Avatar = ({ address, size }: Props) => { const { data: ensName } = useEnsName({ address }) const { data: avatarImg } = useEnsAvatar({ name: ensName ? normalize(ensName) : undefined, }) - return + return } export default Avatar diff --git a/src/pageComponents/tokens/ADemoInput.tsx b/src/pageComponents/home/Examples/Items/BigNumberInput.tsx similarity index 93% rename from src/pageComponents/tokens/ADemoInput.tsx rename to src/pageComponents/home/Examples/Items/BigNumberInput.tsx index 3e645e48..351cce14 100644 --- a/src/pageComponents/tokens/ADemoInput.tsx +++ b/src/pageComponents/home/Examples/Items/BigNumberInput.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { Button } from 'db-ui-toolkit' -import { BigNumberInput } from '@/src/sharedComponents/web3/BigNumberInput' +import { BigNumberInput } from '@/src/sharedComponents/BigNumberInput' const Wrapper = styled.div` display: flex; @@ -24,7 +24,7 @@ const decimals = 6 const max = '1.999998' const min = '0.000001' -export const ADemoInput = () => { +const DemoInput = () => { const [value, setValue] = useState('1.123') const [disabled, setDisabled] = useState(false) const [error, setError] = useState<{ value: string; message: string } | null>() @@ -79,3 +79,5 @@ export const ADemoInput = () => { ) } + +export default DemoInput diff --git a/src/pageComponents/home/Examples/Items/EnsName.tsx b/src/pageComponents/home/Examples/Items/EnsName.tsx new file mode 100644 index 00000000..bf8ba092 --- /dev/null +++ b/src/pageComponents/home/Examples/Items/EnsName.tsx @@ -0,0 +1,31 @@ +import { Text } from 'db-ui-toolkit' +import { Address } from 'viem' +import { useEnsName } from 'wagmi' +import { mainnet } from 'wagmi/chains' + +interface Props { + address: Address +} + +const EnsName = ({ address }: Props) => { + const { data, error, status } = useEnsName({ + address: address, + chainId: mainnet.id, + }) + + return ( + + {status === 'pending' ? ( + <>Loading ENS name + ) : status === 'error' ? ( + <>Error fetching ENS name: {error.message} + ) : ( + <> + ENS name: {data} + + )} + + ) +} + +export default EnsName diff --git a/src/pageComponents/home/Examples/Items/Hash.tsx b/src/pageComponents/home/Examples/Items/Hash.tsx new file mode 100644 index 00000000..839df2cd --- /dev/null +++ b/src/pageComponents/home/Examples/Items/Hash.tsx @@ -0,0 +1,20 @@ +import { Address } from 'viem' + +import BaseHash from '@/src/sharedComponents/Hash' + +interface Props { + hash: Address +} + +const Hash = ({ hash }: Props) => { + return ( + console.log('Copied!')} + showCopyButton + /> + ) +} + +export default Hash diff --git a/src/pageComponents/home/Examples/index.tsx b/src/pageComponents/home/Examples/index.tsx new file mode 100644 index 00000000..9b6c94af --- /dev/null +++ b/src/pageComponents/home/Examples/index.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import styled from 'styled-components' + +import { InnerContainer as Inner, ContainerPadding } from 'db-ui-toolkit' +import { useAccount } from 'wagmi' + +import Avatar from '@/src/pageComponents/home/Examples/Items/Avatar' +import BigNumberInput from '@/src/pageComponents/home/Examples/Items/BigNumberInput' +import EnsName from '@/src/pageComponents/home/Examples/Items/EnsName' +import Hash from '@/src/pageComponents/home/Examples/Items/Hash' + +const Wrapper = styled.section` + background-color: var(--landing-page-main-background-color); + flex-grow: 1; +` + +const InnerContainer = styled(Inner)` + align-items: center; + flex-direction: column; + padding-bottom: 100px; + padding-top: 100px; + + ${ContainerPadding} +` + +const Examples: React.FC = ({ ...restProps }) => { + const { address = '0x87885AaEEdED51C7e3858a782644F5d89759f245' } = useAccount() + + return ( + + + + + + + + + ) +} + +export default Examples diff --git a/src/pageComponents/home/Welcome/ButtonCSS.tsx b/src/pageComponents/home/Welcome/ButtonCSS.tsx new file mode 100644 index 00000000..66e36ac6 --- /dev/null +++ b/src/pageComponents/home/Welcome/ButtonCSS.tsx @@ -0,0 +1,11 @@ +import { css } from 'styled-components' + +export const ButtonCSS = css` + column-gap: calc(var(--base-gap) * 2); + font-size: 1.8rem; + height: 50px; + padding-left: calc(var(--base-gap) * 4); + padding-right: calc(var(--base-gap) * 4); + min-width: 156px; + justify-content: start; +` diff --git a/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-dark.svg b/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-dark.svg new file mode 100644 index 00000000..5077f657 --- /dev/null +++ b/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-light.svg b/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-light.svg new file mode 100644 index 00000000..08107b49 --- /dev/null +++ b/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pageComponents/home/Welcome/Clouds/index.tsx b/src/pageComponents/home/Welcome/Clouds/index.tsx new file mode 100644 index 00000000..34fc1a1f --- /dev/null +++ b/src/pageComponents/home/Welcome/Clouds/index.tsx @@ -0,0 +1,37 @@ +import styled from 'styled-components' + +import ImgCloudsDark from '@/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-dark.svg' +import ImgCloudsLight from '@/src/pageComponents/home/Welcome/Clouds/assets/img-clouds-light.svg' + +const Clouds = styled.img` + display: none; + object-fit: cover; + object-position: center; + min-width: fit-content; + flex-grow: 0; + flex-shrink: 0; +` + +Clouds.defaultProps = { + alt: '', +} + +export const DarkClouds = styled(Clouds)` + [data-theme='dark'] & { + display: block; + } +` + +DarkClouds.defaultProps = { + src: ImgCloudsDark, +} + +export const LightClouds = styled(Clouds)` + [data-theme='light'] & { + display: block; + } +` + +LightClouds.defaultProps = { + src: ImgCloudsLight, +} diff --git a/src/pageComponents/home/Welcome/DocsButton.tsx b/src/pageComponents/home/Welcome/DocsButton.tsx new file mode 100644 index 00000000..3dab2c30 --- /dev/null +++ b/src/pageComponents/home/Welcome/DocsButton.tsx @@ -0,0 +1,28 @@ +import styled from 'styled-components' + +import { ButtonCSS } from '@/src/pageComponents/home/Welcome/ButtonCSS' +import { SecondaryButton } from '@/src/sharedComponents/Buttons' + +const Icon = () => ( + + + +) + +const Wrapper = styled(SecondaryButton)` + ${ButtonCSS} +` + +const DocsButton = ({ ...restProps }) => { + return ( + + + Docs + + ) +} + +export default DocsButton diff --git a/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-dark.svg b/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-dark.svg new file mode 100644 index 00000000..1bcca592 --- /dev/null +++ b/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-light.svg b/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-light.svg new file mode 100644 index 00000000..85239e41 --- /dev/null +++ b/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pageComponents/home/Welcome/Ghost/index.tsx b/src/pageComponents/home/Welcome/Ghost/index.tsx new file mode 100644 index 00000000..87ebcaa9 --- /dev/null +++ b/src/pageComponents/home/Welcome/Ghost/index.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +import ImgGhostDark from '@/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-dark.svg' +import ImgGhostLight from '@/src/pageComponents/home/Welcome/Ghost/assets/img-ghost-light.svg' + +const Ghost = styled.img` + --ghost-image: url(${ImgGhostLight}); + + [data-theme='dark'] & { + --ghost-image: url(${ImgGhostDark}); + } + + content: var(--ghost-image); + object-fit: none; + flex-grow: 0; + flex-shrink: 0; +` + +export default Ghost diff --git a/src/pageComponents/home/Welcome/GitClone.tsx b/src/pageComponents/home/Welcome/GitClone.tsx new file mode 100644 index 00000000..2fd55ef4 --- /dev/null +++ b/src/pageComponents/home/Welcome/GitClone.tsx @@ -0,0 +1,93 @@ +import { useState } from 'react' +import styled from 'styled-components' + +import { CopyButton } from 'db-ui-toolkit' + +const CopyIcon = () => ( + + + + +) + +const OkIcon = () => ( + + + +) + +const Wrapper = styled.section` + --git-clone-background-color: #e2e0e7; + + [data-theme='dark'] & { + --git-clone-background-color: #292b43; + } + + align-items: center; + background-color: var(--git-clone-background-color); + border-radius: 80px; + column-gap: calc(var(--base-gap) * 2); + display: flex; + height: 50px; + max-width: 100%; + padding: 0 calc(var(--base-gap) * 3); +` + +const Value = styled.span` + flex-shrink: 1; + font-size: 1.6rem; + line-height: 1.2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +` + +const IconWrapper = styled.div` + align-items: center; + display: flex; + justify-content: center; + width: 17px; +` + +const GitClone = ({ ...restProps }) => { + const [copied, setCopied] = useState(false) + const cloneString = 'git clone git@github.com:BootNodeDev/db-ui-toolkit.git' + + const handleCopy = () => { + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 3000) + } + + return ( + + {cloneString} + + + {copied ? : } + + + + ) +} + +export default GitClone diff --git a/src/pageComponents/home/Welcome/GithubButton.tsx b/src/pageComponents/home/Welcome/GithubButton.tsx new file mode 100644 index 00000000..253c6dbf --- /dev/null +++ b/src/pageComponents/home/Welcome/GithubButton.tsx @@ -0,0 +1,33 @@ +import styled from 'styled-components' + +import { ButtonCSS } from '@/src/pageComponents/home/Welcome/ButtonCSS' +import { PrimaryButton } from '@/src/sharedComponents/Buttons' + +const Icon = () => ( + + + +) + +const Wrapper = styled(PrimaryButton)` + ${ButtonCSS} +` + +const GithubButton = ({ ...restProps }) => { + return ( + + + Github + + ) +} + +export default GithubButton diff --git a/src/pageComponents/home/Welcome/index.tsx b/src/pageComponents/home/Welcome/index.tsx new file mode 100644 index 00000000..aa9268f6 --- /dev/null +++ b/src/pageComponents/home/Welcome/index.tsx @@ -0,0 +1,117 @@ +import React from 'react' +import styled from 'styled-components' + +import { + Title as BasetTitle, + Text as BaseText, + InnerContainer as Inner, + ContainerPadding, +} from 'db-ui-toolkit' + +import { LightClouds, DarkClouds } from '@/src/pageComponents/home/Welcome/Clouds' +import DocsButton from '@/src/pageComponents/home/Welcome/DocsButton' +import BaseGhost from '@/src/pageComponents/home/Welcome/Ghost' +import GitClone from '@/src/pageComponents/home/Welcome/GitClone' +import GithubButton from '@/src/pageComponents/home/Welcome/GithubButton' + +const Wrapper = styled.section` + display: flex; + flex-direction: column; + max-height: 1080px; + min-height: 100vh; + position: relative; + z-index: 0; +` + +const Clouds = styled.div` + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + width: 100%; + + &::before, + &::after { + content: ''; + background-color: var(--landing-page-main-background-color); + display: block; + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } +` + +const Ghost = styled(BaseGhost)` + bottom: 70px; + left: 50%; + position: absolute; + transform: translateX(-50%); + z-index: 1; +` + +const Contents = styled.div` + flex-grow: 1; + background-color: var(--landing-page-main-background-color); +` + +const InnerContainer = styled(Inner)` + align-items: center; + flex-direction: column; + + ${ContainerPadding} +` + +const Title = styled(BasetTitle)` + font-size: 4.8rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: var(--base-gap); + text-align: center; +` + +const Text = styled(BaseText)` + font-size: 1.8rem; + line-height: 1.5; + margin-bottom: calc(var(--base-gap) * 4); + text-align: center; +` + +const Buttons = styled.div` + display: flex; + gap: calc(var(--base-gap) + var(--base-gap) / 2); + justify-content: center; + margin-bottom: calc(var(--base-gap) * 4); +` + +const Welcome: React.FC = ({ ...restProps }) => { + return ( + + + + + + + + + + Boost dApp + <br /> + development on the + <br /> blockchain + + + A modern blockchain boilerplate built to quickly get +
you started with your next project. + + + + + + + + + + ) +} + +export default Welcome diff --git a/src/pageComponents/home/index.tsx b/src/pageComponents/home/index.tsx index c450fa0b..644f3fbb 100644 --- a/src/pageComponents/home/index.tsx +++ b/src/pageComponents/home/index.tsx @@ -1,59 +1,22 @@ import styled from 'styled-components' -import { Title, Text } from 'db-ui-toolkit' -import { useAccount, useEnsName } from 'wagmi' -import { mainnet } from 'wagmi/chains' - -import Hash from '@/src/sharedComponents/ui/Hash' -import Avatar from '@/src/sharedComponents/web3/Avatar' +import Examples from '@/src/pageComponents/home/Examples' +import Welcome from '@/src/pageComponents/home/Welcome' const Wrapper = styled.div` display: flex; - flex-grow: 1; - justify-content: center; flex-direction: column; - align-items: center; -` - -const Grid = styled.div` - display: flex; - gap: 16px; - justify-content: center; - align-items: center; + flex-grow: 1; + margin-top: calc(var(--base-header-height) * -1); + position: relative; + width: 100%; ` -export const Home = () => { - const { address } = useAccount() - const { data, error, status } = useEnsName({ - address: '0x87885AaEEdED51C7e3858a782644F5d89759f245', - chainId: mainnet.id, - }) - +export const Home = ({ ...restProps }) => { return ( - - Welcome to dApp👻ster! - - {status === 'pending' ? ( - <>Loading ENS name - ) : status === 'error' ? ( - <>Error fetching ENS name: {error.message} - ) : ( - <> - ENS name: {data} - - )} - - - Avatar: - - -
- console.log('Copied!')} - showCopyButton - /> + + + ) } diff --git a/src/pageComponents/tokens/index.tsx b/src/pageComponents/tokens/index.tsx deleted file mode 100644 index 80576623..00000000 --- a/src/pageComponents/tokens/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components' - -import { ADemoInput } from '@/src/pageComponents/tokens/ADemoInput' - -const Wrapper = styled.div` - display: flex; - flex-grow: 1; - justify-content: center; - flex-direction: column; - align-items: center; -` - -export const Tokens = () => { - return ( - -

Hello from Tokens!

- - - ) -} diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 765df778..1837943b 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -16,28 +16,10 @@ import { Route as rootRoute } from './routes/__root' // Create Virtual Routes -const TokensLazyImport = createFileRoute('/tokens')() -const ContactLazyImport = createFileRoute('/contact')() -const AboutLazyImport = createFileRoute('/about')() const IndexLazyImport = createFileRoute('/')() // Create/Update Routes -const TokensLazyRoute = TokensLazyImport.update({ - path: '/tokens', - getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/tokens.lazy').then((d) => d.Route)) - -const ContactLazyRoute = ContactLazyImport.update({ - path: '/contact', - getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/contact.lazy').then((d) => d.Route)) - -const AboutLazyRoute = AboutLazyImport.update({ - path: '/about', - getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/about.lazy').then((d) => d.Route)) - const IndexLazyRoute = IndexLazyImport.update({ path: '/', getParentRoute: () => rootRoute, @@ -54,37 +36,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexLazyImport parentRoute: typeof rootRoute } - '/about': { - id: '/about' - path: '/about' - fullPath: '/about' - preLoaderRoute: typeof AboutLazyImport - parentRoute: typeof rootRoute - } - '/contact': { - id: '/contact' - path: '/contact' - fullPath: '/contact' - preLoaderRoute: typeof ContactLazyImport - parentRoute: typeof rootRoute - } - '/tokens': { - id: '/tokens' - path: '/tokens' - fullPath: '/tokens' - preLoaderRoute: typeof TokensLazyImport - parentRoute: typeof rootRoute - } } } // Create and export the route tree -export const routeTree = rootRoute.addChildren({ - IndexLazyRoute, - AboutLazyRoute, - ContactLazyRoute, - TokensLazyRoute, -}) +export const routeTree = rootRoute.addChildren({ IndexLazyRoute }) /* prettier-ignore-end */ diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index b9f9e9fe..4692ef87 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -1,14 +1,12 @@ -import styled from 'styled-components' - import { createRootRoute, Outlet } from '@tanstack/react-router' -import { Wrapper, InnerContainer as Inner, Main, ContainerPadding } from 'db-ui-toolkit' +import { Wrapper, Main } from 'db-ui-toolkit' import { ThemeProvider } from 'next-themes' -import { TanStackReactQueryDevtools } from '@/src/sharedComponents/helpers/TanStackReactQueryDevtools' -import { TanStackRouterDevtools } from '@/src/sharedComponents/helpers/TanStackRouterDevtools' -import { Footer } from '@/src/sharedComponents/ui/Footer' -import { Header } from '@/src/sharedComponents/ui/Header' -import { Web3Provider } from '@/src/sharedComponents/web3/Web3Provider' +import { Footer } from '@/src/sharedComponents/Footer' +import { Header } from '@/src/sharedComponents/Header' +import { TanStackReactQueryDevtools } from '@/src/sharedComponents/TanStackReactQueryDevtools' +import { TanStackRouterDevtools } from '@/src/sharedComponents/TanStackRouterDevtools' +import { Web3Provider } from '@/src/sharedComponents/Web3Provider' import { GlobalStyles } from '@/src/styles/globalStyles' import 'modern-normalize/modern-normalize.css' @@ -17,13 +15,6 @@ export const Route = createRootRoute({ component: Root, }) -const InnerContainer = styled(Inner)` - flex-direction: column; - min-height: 100%; - - ${ContainerPadding} -` - function Root() { return ( @@ -32,9 +23,7 @@ function Root() {
- - - +