-
Notifications
You must be signed in to change notification settings - Fork 5.1k
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
Start with Ethereum web3 #14947
Changes from 43 commits
Commits
Show all changes
45 commits
Select commit
Hold shift + click to select a range
bd1b36f
header area
corwintines 002f5e2
Need help with crypto section
corwintines 6c91bd4
Base for StartWithEthereum flow
corwintines 0a4b308
Download wallet step
corwintines 8d7cd63
Sign in step base
corwintines 633b6de
finish last step in start with ethereum flow
corwintines ff06271
rainbow kit work
corwintines da82dfd
abstract button
corwintines cd9773f
remove ssr
corwintines bbbf0a5
fix breaking build
corwintines a370fa9
Merge branch 'dev' into web3-integration
corwintines 9a5fc67
feat: move Start with Crypto page and translation namespace support
corwintines 4108df1
fix: type cast locale in getStaticProps for Start with Crypto page
corwintines 34cb4ce
fix: improve wallet download section responsiveness and UI
corwintines 781aaf3
feat: enhance checkbox interaction and styling in wallet download sec…
corwintines cfd9561
feat: add "Start with Crypto" navigation item
corwintines 46f5556
feat: improve responsiveness and UI for Ethereum onboarding components
corwintines 82e0c88
fix: improve button and layout responsiveness in Ethereum onboarding
corwintines 9b05c95
feat: add interactivity and hover effects to dapp list items
corwintines 5cd2125
feat: add Matomo tracking events to Ethereum onboarding flow
corwintines ef33479
fix: adjust max-width for Ethereum onboarding flow container
corwintines 73c029b
feat: improve slide height management in Ethereum onboarding flow
corwintines e2e62fe
fix: adjust wallet name text style in Ethereum onboarding flow
corwintines 30cca4c
feat: add wallet disclaimer and configuration to RainbowKit provider
corwintines bb51ee8
fix: center mobile dapp link in Ethereum onboarding flow
corwintines 1919099
feat: improve scrolling behavior in Ethereum onboarding flow
corwintines 0076ce3
feat: enhance ConnectToEthereumButton with custom account display
corwintines 7ff1161
refactor: simplify RainbowKit provider configuration and button styling
corwintines c4995f4
feat: customize RainbowKit wallet selection for new users
corwintines 0883dcf
feat: create new "/start" page for Ethereum onboarding
corwintines 47d0c73
feat: update RainbowKit wallet configuration with MetaMask and Wallet…
corwintines b4983a7
feat: add ShareModal to Start with Crypto page
corwintines aed6a4b
Merge branch 'dev' into web3-integration
corwintines 6275001
move providers
corwintines ed39f40
add PageMetadata props
corwintines 0521f77
refactor new to crypto wallets to come from start page getStaticProps
corwintines 3dc4266
Merge branch 'dev' into web3-integration
corwintines bdecf72
use LinkBox
corwintines 0d51105
container ref
corwintines b53b8bd
use rainbowkit connect button when connected
corwintines 11be853
see if adding web3 libraries to outputFileTracingExcludes gets it to …
corwintines 873e16c
ignore content & intl folder from server build
pettinarip 86eba6b
Merge branch 'dev' into web3-integration
wackerow 93bbf0f
wrap wallet name with LinkOverlay
pettinarip 9878674
get locale from useLocale
pettinarip File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 137 additions & 0 deletions
137
src/components/StartWithEthereumFlow/ConnectYourWallet/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
141
src/components/StartWithEthereumFlow/DownloadAWallet/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.