Skip to content

Commit d7752b7

Browse files
corwintinescorwintines
authored
Merge pull request #14947 from ethereum/web3-integration
Start with Ethereum web3
2 parents 1a54816 + 9878674 commit d7752b7

File tree

21 files changed

+2750
-41
lines changed

21 files changed

+2750
-41
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@
4747
"@radix-ui/react-tabs": "^1.1.0",
4848
"@radix-ui/react-tooltip": "^1.1.2",
4949
"@radix-ui/react-visually-hidden": "^1.1.0",
50+
"@rainbow-me/rainbowkit": "^2.2.3",
5051
"@socialgouv/matomo-next": "^1.8.0",
52+
"@tanstack/react-query": "^5.66.7",
5153
"@tanstack/react-table": "^8.19.3",
5254
"chart.js": "^4.4.2",
5355
"chartjs-plugin-datalabels": "^2.2.0",
@@ -86,6 +88,8 @@
8688
"tailwindcss-animate": "^1.0.7",
8789
"usehooks-ts": "^3.1.0",
8890
"vaul": "^1.0.0",
91+
"viem": "^2.23.3",
92+
"wagmi": "^2.14.11",
8993
"yaml-loader": "^0.8.0"
9094
},
9195
"devDependencies": {

‎public/images/dapps/uni.png

47.6 KB
Loading

‎public/images/dapps/warpcast.png

2.6 KB
Loading

‎public/images/start-with-ethereum/man-doge-playing.png

85.5 KB
Loading

‎src/components/ConnectToEthereumButton/index.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ConnectButton } from "@rainbow-me/rainbowkit"
2+
3+
import EthGlyphSolid from "@/components/icons/eth-glyph-solid.svg"
4+
import { Button } from "@/components/ui/buttons/Button"
5+
6+
const ConnectToEthereumButton = ({ onClick }: { onClick: () => void }) => {
7+
return (
8+
<ConnectButton.Custom>
9+
{({ account, chain, openConnectModal, mounted }) => {
10+
const ready = mounted
11+
if (!ready) return null
12+
13+
if (account && chain) {
14+
return <ConnectButton />
15+
}
16+
17+
return (
18+
<Button
19+
onClick={() => {
20+
openConnectModal()
21+
onClick()
22+
}}
23+
className="w-full px-8 sm:w-auto"
24+
>
25+
<EthGlyphSolid />
26+
Sign in with Ethereum
27+
</Button>
28+
)
29+
}}
30+
</ConnectButton.Custom>
31+
)
32+
}
33+
34+
export default ConnectToEthereumButton

‎src/components/Content/ai-agents/AiAgentProductLists.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ const AiAgentProductLists = ({ list }: { list: string }) => {
8989
contentItems: [
9090
<p key="botto-description">
9191
Botto creates art and NFTs, with the community voting on its best
92-
work. Users formed a DAO that guides Botto’s artistic evolution while also
93-
earning token rewards for participation.
92+
work. Users formed a DAO that guides Botto’s artistic evolution
93+
while also earning token rewards for participation.
9494
</p>,
9595
<div key="botto-button">
9696
<ButtonLink

‎src/components/Nav/useNav.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,11 @@ export const useNav = () => {
122122
description: t("nav-get-started-description"),
123123
icon: BsPinAngle,
124124
items: [
125+
{
126+
label: t("nav-start-with-crypto-title"),
127+
description: t("nav-start-with-crypto-description"),
128+
href: "/start/",
129+
},
125130
{
126131
label: t("nav-find-wallet-label"),
127132
description: t("nav-find-wallet-description"),

‎src/components/StartWithEthereumFlow/ConnectYourWallet/index.tsx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { useEffect } from "react"
2+
import { useAccount } from "wagmi"
3+
4+
import ConnectToEthereumButton from "@/components/ConnectToEthereumButton"
5+
import Emoji from "@/components/Emoji"
6+
import { Image } from "@/components/Image"
7+
import { Button } from "@/components/ui/buttons/Button"
8+
import { Tag } from "@/components/ui/tag"
9+
10+
import { trackCustomEvent } from "@/lib/utils/matomo"
11+
12+
import FinanceImage from "@/public/images/finance_transparent.png"
13+
14+
const ConnectYourWallet = ({
15+
handleNext,
16+
stepIndex,
17+
totalSteps,
18+
}: {
19+
handleNext: () => void
20+
stepIndex: number
21+
totalSteps: number
22+
}) => {
23+
const { isConnected } = useAccount()
24+
25+
useEffect(() => {
26+
if (isConnected) {
27+
trackCustomEvent({
28+
eventCategory: "start page",
29+
eventAction: "sign in",
30+
eventName: "connected",
31+
})
32+
}
33+
}, [isConnected])
34+
35+
return (
36+
<div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-24">
37+
<div className="flex flex-1 flex-col gap-14">
38+
<div className="flex flex-col gap-5">
39+
<div>
40+
<Tag status="tag">
41+
{stepIndex} / {totalSteps}
42+
</Tag>
43+
</div>
44+
<h2 className="text-3xl font-bold">Connect Your Wallet</h2>
45+
<p>
46+
You can use your new wallet as a single account in all apps and
47+
projects on Ethereum. No separate accounts needed.
48+
</p>
49+
</div>
50+
<div className="hidden flex-col items-center justify-center gap-4 lg:flex">
51+
{isConnected && <Emoji text="🎉" className="text-[72px]" />}
52+
{isConnected && (
53+
<p className="text-center text-md font-bold">
54+
This is your account
55+
</p>
56+
)}
57+
<ConnectToEthereumButton
58+
onClick={() => {
59+
trackCustomEvent({
60+
eventCategory: "start page",
61+
eventAction: "connect wallet",
62+
eventName: "Connect to Ethereum",
63+
})
64+
}}
65+
/>
66+
{isConnected && (
67+
<Button
68+
onClick={() => {
69+
handleNext()
70+
trackCustomEvent({
71+
eventCategory: "start page",
72+
eventAction: "next step",
73+
eventName: "Continue from 2",
74+
})
75+
}}
76+
>
77+
Lets continue
78+
</Button>
79+
)}
80+
</div>
81+
</div>
82+
<div className="flex w-full flex-1 flex-col gap-4 lg:gap-8">
83+
<div className="mx-auto">
84+
<Image
85+
className="hidden lg:block"
86+
src={FinanceImage}
87+
alt="Finance"
88+
width={370}
89+
height={370}
90+
/>
91+
{!isConnected && (
92+
<Image
93+
className="block lg:hidden"
94+
src={FinanceImage}
95+
alt="Finance"
96+
width={200}
97+
height={200}
98+
/>
99+
)}
100+
</div>
101+
<div className="mb-2.5 flex w-full flex-col items-center justify-center gap-4 sm:mb-0 lg:hidden">
102+
{isConnected && <Emoji text="🎉" className="text-[72px]" />}
103+
{isConnected && (
104+
<p className="text-center text-md font-bold">
105+
This is your account
106+
</p>
107+
)}
108+
<ConnectToEthereumButton
109+
onClick={() => {
110+
trackCustomEvent({
111+
eventCategory: "start page",
112+
eventAction: "connect wallet",
113+
eventName: "Connect to Ethereum",
114+
})
115+
}}
116+
/>
117+
{isConnected && (
118+
<Button
119+
onClick={() => {
120+
handleNext()
121+
trackCustomEvent({
122+
eventCategory: "start page",
123+
eventAction: "next step",
124+
eventName: "Continue from 2",
125+
})
126+
}}
127+
>
128+
Lets continue
129+
</Button>
130+
)}
131+
</div>
132+
</div>
133+
</div>
134+
)
135+
}
136+
137+
export default ConnectYourWallet

‎src/components/StartWithEthereumFlow/DownloadAWallet/index.tsx

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { useState } from "react"
2+
3+
import { Wallet } from "@/lib/types"
4+
5+
import { Image } from "@/components/Image"
6+
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
7+
import Checkbox from "@/components/ui/checkbox"
8+
import InlineLink from "@/components/ui/Link"
9+
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
10+
import { Tag } from "@/components/ui/tag"
11+
12+
import { trackCustomEvent } from "@/lib/utils/matomo"
13+
14+
const DownloadAWallet = ({
15+
handleNext,
16+
stepIndex,
17+
totalSteps,
18+
newToCryptoWallets,
19+
}: {
20+
handleNext: () => void
21+
stepIndex: number
22+
totalSteps: number
23+
newToCryptoWallets: Wallet[]
24+
}) => {
25+
const [hasWallet, setHasWallet] = useState(false)
26+
27+
return (
28+
<div className="flex flex-col items-center gap-8 lg:flex-row lg:gap-24">
29+
<div className="flex flex-1 flex-col gap-14">
30+
<div className="flex flex-col gap-5">
31+
<div>
32+
<Tag status="tag">
33+
{stepIndex} / {totalSteps}
34+
</Tag>
35+
</div>
36+
<h2 className="text-3xl font-bold">Download a wallet</h2>
37+
<p>
38+
Wallet is an app that allows you to receive, send cryptocurrencies
39+
and manage your Ethereum account.
40+
</p>
41+
</div>
42+
<div className="hidden flex-col gap-8 lg:flex">
43+
<div
44+
className="group flex cursor-pointer flex-row items-center gap-2 hover:text-primary-hover"
45+
onClick={() => {
46+
setHasWallet(!hasWallet)
47+
trackCustomEvent({
48+
eventCategory: "start page",
49+
eventAction: "wallet checkbox",
50+
eventName: "I have a wallet",
51+
})
52+
}}
53+
>
54+
<Checkbox className="size-6 [&_svg]:text-xl" checked={hasWallet} />
55+
<p>I have a wallet.</p>
56+
</div>
57+
<Button
58+
disabled={!hasWallet}
59+
className="w-fit px-10"
60+
onClick={() => {
61+
handleNext()
62+
trackCustomEvent({
63+
eventCategory: "start page",
64+
eventAction: "next step",
65+
eventName: "Continue from 1",
66+
})
67+
}}
68+
>
69+
Continue
70+
</Button>
71+
</div>
72+
</div>
73+
<div className="flex w-full flex-1 flex-col gap-8">
74+
<div className="flex flex-col overflow-hidden rounded-2xl border shadow-window-box">
75+
{newToCryptoWallets.map((wallet) => (
76+
<LinkBox
77+
key={wallet.name}
78+
className="flex flex-col gap-4 border-b border-body-light bg-background p-4 last:border-b-0 hover:bg-background-highlight sm:p-6"
79+
>
80+
<div className="flex flex-row items-center justify-between gap-2">
81+
<div className="flex w-full max-w-[200px] flex-row items-center gap-4">
82+
<div>
83+
<Image
84+
src={wallet.image}
85+
alt={wallet.name}
86+
width={30}
87+
height={30}
88+
/>
89+
</div>
90+
<p>
91+
<LinkOverlay
92+
className="text-body no-underline hover:text-body"
93+
asChild
94+
>
95+
<InlineLink
96+
href={wallet.url}
97+
hideArrow
98+
onClick={() => {
99+
trackCustomEvent({
100+
eventCategory: "start page",
101+
eventAction: "get wallet",
102+
eventName: wallet.name,
103+
})
104+
}}
105+
>
106+
{wallet.name}
107+
</InlineLink>
108+
</LinkOverlay>
109+
</p>
110+
</div>
111+
112+
<ButtonLink href={wallet.url} variant="outline" size="sm">
113+
Get wallet
114+
</ButtonLink>
115+
</div>
116+
</LinkBox>
117+
))}
118+
</div>
119+
<div className="flex flex-col gap-8 lg:hidden">
120+
<div
121+
className="group flex cursor-pointer flex-row items-center gap-2 hover:text-primary-hover"
122+
onClick={() => {
123+
setHasWallet(!hasWallet)
124+
trackCustomEvent({
125+
eventCategory: "start page",
126+
eventAction: "wallet checkbox",
127+
eventName: "I have a wallet",
128+
})
129+
}}
130+
>
131+
<Checkbox className="size-6 [&_svg]:text-xl" checked={hasWallet} />
132+
<p>I have a wallet.</p>
133+
</div>
134+
<Button
135+
disabled={!hasWallet}
136+
className="w-full px-10 lg:w-fit"
137+
onClick={() => {
138+
handleNext()
139+
trackCustomEvent({
140+
eventCategory: "start page",
141+
eventAction: "next step",
142+
eventName: "Continue from 1",
143+
})
144+
}}
145+
>
146+
Continue
147+
</Button>
148+
</div>
149+
</div>
150+
</div>
151+
)
152+
}
153+
154+
export default DownloadAWallet

0 commit comments

Comments
 (0)