Merge pull request #114 from BootNodeDev/feat/#107-header-#108-welcom…

…e-section

feat: header + welcome section

.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
   }

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"

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',
+  },
+]

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 <Avatar address={address} ensImage={avatarImg} ensName={ensName} size={size} />
+}
 
 export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ConnectKitProvider
       options={{
-        customAvatar: CustomAvatar as React.FC<Types.CustomAvatarProps>,
+        customAvatar: Avatar as React.FC<Types.CustomAvatarProps>,
       }}
     >
       {children}
@@ -27,7 +43,7 @@ export const ConnectWalletButton = () => {
           <ConnectButton disabled={isConnecting} onClick={show}>
             {isConnected ? (
               <>
-                {address && <Avatar address={address} size={25} />}
+                {address && <UserAvatar address={address} size={25} />}
                 {truncatedAddress}
               </>
             ) : (

src/sharedComponents/web3/Avatar.test.tsx → 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', () => ({

src/sharedComponents/web3/Avatar.tsx → 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 <Avatar address="0x1234567890abcdef1234567890abcdef12345678" />
  */
-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 <CustomAvatar address={address} ensImage={avatarImg} ensName={ensName} size={size} />
+  return <BaseAvatar address={address} ensImage={avatarImg} ensName={ensName} size={size} />
 }
 
 export default Avatar

src/pageComponents/tokens/ADemoInput.tsx → 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 = () => {
     </Wrapper>
   )
 }
+
+export default DemoInput

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 (
+    <Text>
+      {status === 'pending' ? (
+        <>Loading ENS name</>
+      ) : status === 'error' ? (
+        <>Error fetching ENS name: {error.message}</>
+      ) : (
+        <>
+          <b>ENS name:</b> {data}
+        </>
+      )}
+    </Text>
+  )
+}
+
+export default EnsName

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 (
+    <BaseHash
+      explorerURL={`https://etherscan.io/address/${hash}`}
+      hash={hash}
+      onCopy={() => console.log('Copied!')}
+      showCopyButton
+    />
+  )
+}
+
+export default Hash

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 (
+    <Wrapper id="examples" {...restProps}>
+      <InnerContainer>
+        <EnsName address={address} />
+        <Hash hash={address} />
+        <Avatar address={address} size={30} />
+        <BigNumberInput />
+      </InnerContainer>
+    </Wrapper>
+  )
+}
+
+export default Examples