Skip to content

Start with Ethereum web3 #14947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 45 commits into from
Mar 25, 2025
Merged
Show file tree
Hide file tree
Changes from 43 commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
bd1b36f
header area
corwintines Feb 18, 2025
002f5e2
Need help with crypto section
corwintines Feb 18, 2025
6c91bd4
Base for StartWithEthereum flow
corwintines Feb 18, 2025
0a4b308
Download wallet step
corwintines Feb 18, 2025
8d7cd63
Sign in step base
corwintines Feb 18, 2025
633b6de
finish last step in start with ethereum flow
corwintines Feb 19, 2025
ff06271
rainbow kit work
corwintines Feb 19, 2025
da82dfd
abstract button
corwintines Feb 19, 2025
cd9773f
remove ssr
corwintines Feb 20, 2025
bbbf0a5
fix breaking build
corwintines Feb 20, 2025
a370fa9
Merge branch 'dev' into web3-integration
corwintines Feb 27, 2025
9a5fc67
feat: move Start with Crypto page and translation namespace support
corwintines Feb 27, 2025
4108df1
fix: type cast locale in getStaticProps for Start with Crypto page
corwintines Feb 27, 2025
34cb4ce
fix: improve wallet download section responsiveness and UI
corwintines Feb 27, 2025
781aaf3
feat: enhance checkbox interaction and styling in wallet download sec…
corwintines Feb 27, 2025
cfd9561
feat: add "Start with Crypto" navigation item
corwintines Feb 27, 2025
46f5556
feat: improve responsiveness and UI for Ethereum onboarding components
corwintines Feb 27, 2025
82e0c88
fix: improve button and layout responsiveness in Ethereum onboarding
corwintines Feb 27, 2025
9b05c95
feat: add interactivity and hover effects to dapp list items
corwintines Feb 27, 2025
5cd2125
feat: add Matomo tracking events to Ethereum onboarding flow
corwintines Feb 27, 2025
ef33479
fix: adjust max-width for Ethereum onboarding flow container
corwintines Feb 27, 2025
73c029b
feat: improve slide height management in Ethereum onboarding flow
corwintines Mar 2, 2025
e2e62fe
fix: adjust wallet name text style in Ethereum onboarding flow
corwintines Mar 2, 2025
30cca4c
feat: add wallet disclaimer and configuration to RainbowKit provider
corwintines Mar 2, 2025
bb51ee8
fix: center mobile dapp link in Ethereum onboarding flow
corwintines Mar 2, 2025
1919099
feat: improve scrolling behavior in Ethereum onboarding flow
corwintines Mar 2, 2025
0076ce3
feat: enhance ConnectToEthereumButton with custom account display
corwintines Mar 2, 2025
7ff1161
refactor: simplify RainbowKit provider configuration and button styling
corwintines Mar 3, 2025
c4995f4
feat: customize RainbowKit wallet selection for new users
corwintines Mar 4, 2025
0883dcf
feat: create new "/start" page for Ethereum onboarding
corwintines Mar 4, 2025
47d0c73
feat: update RainbowKit wallet configuration with MetaMask and Wallet…
corwintines Mar 4, 2025
b4983a7
feat: add ShareModal to Start with Crypto page
corwintines Mar 9, 2025
aed6a4b
Merge branch 'dev' into web3-integration
corwintines Mar 17, 2025
6275001
move providers
corwintines Mar 18, 2025
ed39f40
add PageMetadata props
corwintines Mar 18, 2025
0521f77
refactor new to crypto wallets to come from start page getStaticProps
corwintines Mar 18, 2025
3dc4266
Merge branch 'dev' into web3-integration
corwintines Mar 18, 2025
bdecf72
use LinkBox
corwintines Mar 18, 2025
0d51105
container ref
corwintines Mar 18, 2025
b53b8bd
use rainbowkit connect button when connected
corwintines Mar 18, 2025
11be853
see if adding web3 libraries to outputFileTracingExcludes gets it to …
corwintines Mar 19, 2025
873e16c
ignore content & intl folder from server build
pettinarip Mar 20, 2025
86eba6b
Merge branch 'dev' into web3-integration
wackerow Mar 21, 2025
93bbf0f
wrap wallet name with LinkOverlay
pettinarip Mar 21, 2025
9878674
get locale from useLocale
pettinarip Mar 21, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ module.exports = (phase, { defaultConfig }) => {
"node_modules/@swc/core-linux-x64-musl",
"node_modules/@esbuild/linux-x64",
"src/data",
"src/intl",
"public/**/*.jpg",
"public/**/*.png",
"public/**/*.webp",
Expand All @@ -127,6 +128,7 @@ module.exports = (phase, { defaultConfig }) => {
"public/**/*.pdf",
"public/fonts",
"public/images",
"public/content",
],
},
},
Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-visually-hidden": "^1.1.0",
"@rainbow-me/rainbowkit": "^2.2.3",
"@socialgouv/matomo-next": "^1.8.0",
"@tanstack/react-query": "^5.66.7",
"@tanstack/react-table": "^8.19.3",
"chart.js": "^4.4.2",
"chartjs-plugin-datalabels": "^2.2.0",
Expand Down Expand Up @@ -86,6 +88,8 @@
"tailwindcss-animate": "^1.0.7",
"usehooks-ts": "^3.1.0",
"vaul": "^1.0.0",
"viem": "^2.23.3",
"wagmi": "^2.14.11",
"yaml-loader": "^0.8.0"
},
"devDependencies": {
Expand Down
Binary file modified public/images/dapps/uni.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dapps/warpcast.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions src/components/ConnectToEthereumButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { ConnectButton } from "@rainbow-me/rainbowkit"

import EthGlyphSolid from "@/components/icons/eth-glyph-solid.svg"
import { Button } from "@/components/ui/buttons/Button"

const ConnectToEthereumButton = ({ onClick }: { onClick: () => void }) => {
return (
<ConnectButton.Custom>
{({ account, chain, openConnectModal, mounted }) => {
const ready = mounted
if (!ready) return null

if (account && chain) {
return <ConnectButton />
}

return (
<Button
onClick={() => {
openConnectModal()
onClick()
}}
className="w-full px-8 sm:w-auto"
>
<EthGlyphSolid />
Sign in with Ethereum
</Button>
)
}}
</ConnectButton.Custom>
)
}

export default ConnectToEthereumButton
4 changes: 2 additions & 2 deletions src/components/Content/ai-agents/AiAgentProductLists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ const AiAgentProductLists = ({ list }: { list: string }) => {
contentItems: [
<p key="botto-description">
Botto creates art and NFTs, with the community voting on its best
work. Users formed a DAO that guides Botto’s artistic evolution while also
earning token rewards for participation.
work. Users formed a DAO that guides Botto’s artistic evolution
while also earning token rewards for participation.
</p>,
<div key="botto-button">
<ButtonLink
Expand Down
5 changes: 5 additions & 0 deletions src/components/Nav/useNav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,11 @@ export const useNav = () => {
description: t("nav-get-started-description"),
icon: BsPinAngle,
items: [
{
label: t("nav-start-with-crypto-title"),
description: t("nav-start-with-crypto-description"),
href: "/start/",
},
{
label: t("nav-find-wallet-label"),
description: t("nav-find-wallet-description"),
Expand Down
137 changes: 137 additions & 0 deletions src/components/StartWithEthereumFlow/ConnectYourWallet/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { useEffect } from "react"
import { useAccount } from "wagmi"

import ConnectToEthereumButton from "@/components/ConnectToEthereumButton"
import Emoji from "@/components/Emoji"
import { Image } from "@/components/Image"
import { Button } from "@/components/ui/buttons/Button"
import { Tag } from "@/components/ui/tag"

import { trackCustomEvent } from "@/lib/utils/matomo"

import FinanceImage from "@/public/images/finance_transparent.png"

const ConnectYourWallet = ({
handleNext,
stepIndex,
totalSteps,
}: {
handleNext: () => void
stepIndex: number
totalSteps: number
}) => {
const { isConnected } = useAccount()

useEffect(() => {
if (isConnected) {
trackCustomEvent({
eventCategory: "start page",
eventAction: "sign in",
eventName: "connected",
})
}
}, [isConnected])

return (
<div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-24">
<div className="flex flex-1 flex-col gap-14">
<div className="flex flex-col gap-5">
<div>
<Tag status="tag">
{stepIndex} / {totalSteps}
</Tag>
</div>
<h2 className="text-3xl font-bold">Connect Your Wallet</h2>
<p>
You can use your new wallet as a single account in all apps and
projects on Ethereum. No separate accounts needed.
</p>
</div>
<div className="hidden flex-col items-center justify-center gap-4 lg:flex">
{isConnected && <Emoji text="🎉" className="text-[72px]" />}
{isConnected && (
<p className="text-center text-md font-bold">
This is your account
</p>
)}
<ConnectToEthereumButton
onClick={() => {
trackCustomEvent({
eventCategory: "start page",
eventAction: "connect wallet",
eventName: "Connect to Ethereum",
})
}}
/>
{isConnected && (
<Button
onClick={() => {
handleNext()
trackCustomEvent({
eventCategory: "start page",
eventAction: "next step",
eventName: "Continue from 2",
})
}}
>
Lets continue
</Button>
)}
</div>
</div>
<div className="flex w-full flex-1 flex-col gap-4 lg:gap-8">
<div className="mx-auto">
<Image
className="hidden lg:block"
src={FinanceImage}
alt="Finance"
width={370}
height={370}
/>
{!isConnected && (
<Image
className="block lg:hidden"
src={FinanceImage}
alt="Finance"
width={200}
height={200}
/>
)}
</div>
<div className="mb-2.5 flex w-full flex-col items-center justify-center gap-4 sm:mb-0 lg:hidden">
{isConnected && <Emoji text="🎉" className="text-[72px]" />}
{isConnected && (
<p className="text-center text-md font-bold">
This is your account
</p>
)}
<ConnectToEthereumButton
onClick={() => {
trackCustomEvent({
eventCategory: "start page",
eventAction: "connect wallet",
eventName: "Connect to Ethereum",
})
}}
/>
{isConnected && (
<Button
onClick={() => {
handleNext()
trackCustomEvent({
eventCategory: "start page",
eventAction: "next step",
eventName: "Continue from 2",
})
}}
>
Lets continue
</Button>
)}
</div>
</div>
</div>
)
}

export default ConnectYourWallet
141 changes: 141 additions & 0 deletions src/components/StartWithEthereumFlow/DownloadAWallet/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import { useState } from "react"

import { Wallet } from "@/lib/types"

import { Image } from "@/components/Image"
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
import Checkbox from "@/components/ui/checkbox"
import { LinkBox } from "@/components/ui/link-box"
import { Tag } from "@/components/ui/tag"

import { trackCustomEvent } from "@/lib/utils/matomo"

const DownloadAWallet = ({
handleNext,
stepIndex,
totalSteps,
newToCryptoWallets,
}: {
handleNext: () => void
stepIndex: number
totalSteps: number
newToCryptoWallets: Wallet[]
}) => {
const [hasWallet, setHasWallet] = useState(false)

return (
<div className="flex flex-col items-center gap-8 lg:flex-row lg:gap-24">
<div className="flex flex-1 flex-col gap-14">
<div className="flex flex-col gap-5">
<div>
<Tag status="tag">
{stepIndex} / {totalSteps}
</Tag>
</div>
<h2 className="text-3xl font-bold">Download a wallet</h2>
<p>
Wallet is an app that allows you to receive, send cryptocurrencies
and manage your Ethereum account.
</p>
</div>
<div className="hidden flex-col gap-8 lg:flex">
<div
className="group flex cursor-pointer flex-row items-center gap-2 hover:text-primary-hover"
onClick={() => {
setHasWallet(!hasWallet)
trackCustomEvent({
eventCategory: "start page",
eventAction: "wallet checkbox",
eventName: "I have a wallet",
})
}}
>
<Checkbox className="size-6 [&_svg]:text-xl" checked={hasWallet} />
<p>I have a wallet.</p>
</div>
<Button
disabled={!hasWallet}
className="w-fit px-10"
onClick={() => {
handleNext()
trackCustomEvent({
eventCategory: "start page",
eventAction: "next step",
eventName: "Continue from 1",
})
}}
>
Continue
</Button>
</div>
</div>
<div className="flex w-full flex-1 flex-col gap-8">
<div className="flex flex-col overflow-hidden rounded-2xl border shadow-window-box">
{newToCryptoWallets.map((wallet) => (
<LinkBox
key={wallet.name}
className="flex cursor-pointer flex-col gap-4 border-b border-body-light bg-background p-4 last:border-b-0 hover:bg-background-highlight sm:p-6"
onClick={() => {
window.open(wallet.url, "_blank")
trackCustomEvent({
eventCategory: "start page",
eventAction: "get wallet",
eventName: wallet.name,
})
}}
>
<div className="flex flex-row items-center justify-between gap-2">
<div className="flex w-full max-w-[200px] flex-row items-center gap-4">
<div>
<Image
src={wallet.image}
alt={wallet.name}
width={30}
height={30}
/>
</div>
<p className="text-body">{wallet.name}</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The LinkBox is fine but we are missing the LinkOverlay that needs to wrap the description/text for the link. Pushing a commit for this.

</div>
<ButtonLink href={wallet.url} variant="outline" size="sm">
Get wallet
</ButtonLink>
</div>
</LinkBox>
))}
</div>
<div className="flex flex-col gap-8 lg:hidden">
<div
className="group flex cursor-pointer flex-row items-center gap-2 hover:text-primary-hover"
onClick={() => {
setHasWallet(!hasWallet)
trackCustomEvent({
eventCategory: "start page",
eventAction: "wallet checkbox",
eventName: "I have a wallet",
})
}}
>
<Checkbox className="size-6 [&_svg]:text-xl" checked={hasWallet} />
<p>I have a wallet.</p>
</div>
<Button
disabled={!hasWallet}
className="w-full px-10 lg:w-fit"
onClick={() => {
handleNext()
trackCustomEvent({
eventCategory: "start page",
eventAction: "next step",
eventName: "Continue from 1",
})
}}
>
Continue
</Button>
</div>
</div>
</div>
)
}

export default DownloadAWallet
Loading