Skip to content

Commit 3fd1046

Browse files
wackerowwackerow
committed
add new intro slide to ConnectWeb3 sim
with copy and design adjustments
1 parent ba18135 commit 3fd1046

File tree

7 files changed

+130
-41
lines changed

7 files changed

+130
-41
lines changed

‎src/components/Simulator/screens/ConnectWeb3/Browser.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react"
2+
import { Box, type FlexProps, Text, Icon, Flex, Grid } from "@chakra-ui/react"
3+
import { BsTriangle } from "react-icons/bs"
4+
import { PiMagnifyingGlass } from "react-icons/pi"
5+
import { IoEllipsisHorizontalSharp } from "react-icons/io5"
6+
import { NFTSupportIcon } from "../../../icons/wallets/NFTSupportIcon"
7+
8+
export const Browser: React.FC<FlexProps> = (props) => {
9+
return (
10+
<Flex direction="column" h="full" bg="body.light" {...props}>
11+
<Box bg="background.highlight" w="full" px={3} pt={9} pb={3}>
12+
<Box bg="background.base" w="full" borderRadius="base" px={3} py={2}>
13+
<Text color="disabled">Search or enter address</Text>
14+
</Box>
15+
</Box>
16+
<Box p={8} flex={1}>
17+
<Flex direction="column" alignItems="center" gap={2} w="fit-content">
18+
<Grid
19+
placeItems="center"
20+
w={16}
21+
h={16}
22+
bg="background.highlight"
23+
borderRadius="lg"
24+
>
25+
<Icon as={NFTSupportIcon} fontSize="4xl" />
26+
</Grid>
27+
<Text>NFT Market</Text>
28+
</Flex>
29+
</Box>
30+
<Flex
31+
bg="background.highlight"
32+
w="full"
33+
px={3}
34+
pb={9}
35+
pt={4}
36+
justify="space-around"
37+
fontSize="xl"
38+
color="disabled"
39+
>
40+
<Icon as={BsTriangle} transform="rotate(-90deg)" />
41+
<Icon as={BsTriangle} transform="rotate(90deg)" />
42+
<Icon as={PiMagnifyingGlass} />
43+
<Icon as={IoEllipsisHorizontalSharp} />
44+
</Flex>
45+
</Flex>
46+
)
47+
}

‎src/components/Simulator/screens/ConnectWeb3/Slider.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import { Box, Flex, Grid, Icon, Text } from "@chakra-ui/react"
1+
import { Box, Flex, Grid, Icon, Text, TextProps } from "@chakra-ui/react"
22
import React from "react"
33
import { motion } from "framer-motion"
44
import { EthGlyphIcon } from "../../icons"
55
import { PiCheckThin } from "react-icons/pi"
66

7-
interface IProps {
7+
interface IProps extends Pick<TextProps, "children"> {
88
isConnected: boolean
9+
displayUrl: string
910
}
10-
export const Slider: React.FC<IProps> = ({ isConnected }) => {
11+
export const Slider: React.FC<IProps> = ({
12+
isConnected,
13+
displayUrl,
14+
children,
15+
}) => {
1116
const ICON_SIZE = "4.5rem" as const
1217
return (
1318
<>
@@ -96,14 +101,11 @@ export const Slider: React.FC<IProps> = ({ isConnected }) => {
96101
/>
97102
</Grid>
98103
<Text mb={0} me={0.5}>
99-
app.example.com
104+
{displayUrl}
100105
</Text>
101106
</Flex>
102107
{/* Information */}
103-
<Text>
104-
Connecting to the website will not share any personal
105-
information with the site owners.
106-
</Text>
108+
<Text>{children}</Text>
107109
</>
108110
)}
109111
</Flex>

‎src/components/Simulator/screens/ConnectWeb3/Web3App.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,40 @@ import {
88
} from "@chakra-ui/react"
99
import React from "react"
1010
import { GrMenu } from "react-icons/gr"
11+
import { FAKE_DEMO_ADDRESS } from "../../constants"
1112
import { EthGlyphIcon } from "../../icons"
1213
import { NotificationPopover } from "../../NotificationPopover"
1314

14-
interface IProps extends BoxProps {}
15-
export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
15+
interface IProps extends BoxProps {
16+
displayUrl: string
17+
connected?: boolean
18+
}
19+
export const Web3App: React.FC<IProps> = ({
20+
displayUrl,
21+
connected,
22+
children,
23+
...boxProps
24+
}) => {
1625
const bg = useColorModeValue("#e8e8e8", "#171717")
1726

1827
return (
1928
<Box h="full" w="full" bg="background.highlight" {...boxProps}>
2029
<Box p={1} bg={bg}>
2130
<Text textAlign="center" fontSize="xs" m={0}>
22-
app.example.com
31+
{displayUrl}
2332
</Text>
2433
</Box>
2534
<NotificationPopover
2635
title="Example walkthrough"
2736
content="Try out a real Ethereum application when finished here"
2837
>
29-
<Flex p={6} fontSize="4xl" justify="space-between">
38+
<Flex p={6} fontSize="4xl" justify="space-between" alignItems="center">
3039
<Icon as={EthGlyphIcon} />
40+
{connected && <Text fontSize="sm">{FAKE_DEMO_ADDRESS}</Text>}
3141
<Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
3242
</Flex>
3343
</NotificationPopover>
34-
<>{children}</>
44+
{children}
3545
</Box>
3646
)
3747
}

‎src/components/Simulator/screens/ConnectWeb3/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const EXAMPLE_APP_URL = "app.example.com"

‎src/components/Simulator/screens/ConnectWeb3/index.tsx

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { useEthPrice } from "../../../../hooks/useEthPrice"
1717
import { useNFT } from "../../WalletHome/hooks/useNFT"
1818
import GatsbyImage from "../../../GatsbyImage"
1919
import { FALLBACK_ETH_PRICE, USD_RECEIVE_AMOUNT } from "../../constants"
20+
import { EXAMPLE_APP_URL } from "./constants"
21+
import { Browser } from "./Browser"
2022

2123
export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
2224
const { progressStepper, step } = nav
@@ -44,8 +46,9 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
4446
}
4547
return (
4648
<>
47-
{[0, 1, 2].includes(step) && (
48-
<Web3App>
49+
{[0].includes(step) && <Browser />}
50+
{[1, 2, 3].includes(step) && (
51+
<Web3App displayUrl={EXAMPLE_APP_URL}>
4952
<Flex
5053
px={6}
5154
py={{ base: 8, md: 16 }}
@@ -80,18 +83,28 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
8083
</Web3App>
8184
)}
8285
<AnimatePresence>
83-
{[1, 2].includes(step) && <Slider isConnected={step === 2} />}
86+
{[2, 3].includes(step) && (
87+
<Slider isConnected={step === 3} displayUrl={EXAMPLE_APP_URL}>
88+
Connecting to the website will not share any personal or secure
89+
information with the site owners.
90+
</Slider>
91+
)}
8492
</AnimatePresence>
85-
{[3].includes(step) && (
93+
{[4].includes(step) && (
8694
<motion.div
8795
{...fadeInProps}
8896
exit={{ opacity: 0 }}
8997
style={{ height: "100%" }}
9098
>
91-
<Web3App bg="background.base">
92-
<Box px={6} py={{ base: 2, md: 6 }} fontSize="lg">
99+
<Web3App bg="background.base" connected displayUrl="app.example.com">
100+
<Box
101+
px={6}
102+
py={{ base: 2, md: 6 }}
103+
fontSize="lg"
104+
sx={{ button: { textDecoration: "none" } }}
105+
>
93106
<Text fontWeight="bold" mb={4}>
94-
Your collection
107+
Your collection (1)
95108
</Text>
96109
<Flex gap={2} mb={6}>
97110
<GatsbyImage image={NFTs[0].image} alt="NFT Image" />
@@ -101,7 +114,6 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
101114
textAlign="start"
102115
alignItems="start"
103116
gap={1}
104-
sx={{ button: { textDecoration: "none" } }}
105117
>
106118
<Text fontWeight="bold" fontSize="md" mb="auto" ms={2}>
107119
Cool art
@@ -129,19 +141,26 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
129141
</Button>
130142
</Flex>
131143
</Flex>
132-
<Button variant="outline" w="full" isDisabled>
133-
Browser other artwork
144+
<Button variant="link" isDisabled>
145+
Browse other artwork
146+
</Button>
147+
<Button variant="link" isDisabled>
148+
Mint new NFT
134149
</Button>
135150
</Box>
136151
</Web3App>
137152
</motion.div>
138153
)}
139-
{[0, 1, 2, 3].includes(step) && (
140-
<ProgressCta isAnimated={step === 0} progressStepper={progressStepper}>
154+
{[0, 1, 2, 3, 4].includes(step) && (
155+
<ProgressCta
156+
isAnimated={step === 0}
157+
progressStepper={progressStepper}
158+
mb={step === 0 ? 16 : 0}
159+
>
141160
{ctaLabel}
142161
</ProgressCta>
143162
)}
144-
{[4].includes(step) && (
163+
{[5].includes(step) && (
145164
<motion.div
146165
key="final-wallet-display"
147166
{...fadeInProps}

‎src/components/Simulator/screens/SendReceive/SendFromContacts.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
import {
2-
Box,
3-
Button,
4-
Flex,
5-
Icon,
6-
Popover,
7-
PopoverBody,
8-
PopoverContent,
9-
PopoverTrigger,
10-
Text,
11-
} from "@chakra-ui/react"
1+
import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
122
import React from "react"
133
import { PiMagnifyingGlass } from "react-icons/pi"
144
import { CategoryTabs } from "../../WalletHome/CategoryTabs"

‎src/data/WalletSimulatorData.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -330,14 +330,29 @@ export const walletOnboardingSimData: SimulatorData = {
330330
explanations: [
331331
{
332332
header: "Explore Web3: from NFTs to decentralized finance and identity",
333+
description: (
334+
<>
335+
<Text>
336+
Your wallet can be used to connect to all sorts of applications,
337+
allowing you to interact with your on-chain assets.
338+
</Text>
339+
<Text>
340+
Your friend just sent an NFT art piece to your address! Let's
341+
login to a new NFT marketplace to view it.
342+
</Text>
343+
</>
344+
),
345+
},
346+
{
347+
header: "No need to create a new account for each service",
333348
description: (
334349
<>
335350
<Text>
336351
Your account is universal across all Ethereum and
337352
Ethereum-compatible applications.
338353
</Text>
339354
<Text>
340-
There is no need to create a new account for each service.
355+
Assets stored on-chain can be accessed from any application.
341356
</Text>
342357
</>
343358
),
@@ -352,7 +367,8 @@ export const walletOnboardingSimData: SimulatorData = {
352367
Polygon or Optimism.
353368
</Text>
354369
<Text>
355-
Assets stored on-chain can be accessed from any application.
370+
Logins are handled by your wallet—no more creating insecure
371+
passwords.
356372
</Text>
357373
</>
358374
),
@@ -366,16 +382,19 @@ export const walletOnboardingSimData: SimulatorData = {
366382
Your personal information, such as email or phone number, is not
367383
needed to use Web3 apps—you only need a wallet.
368384
</Text>
385+
<Text>
386+
Also note there are no associated transaction fees here—signing in
387+
using Ethereum is free, fast and easy!
388+
</Text>
369389
</>
370390
),
371391
},
372-
373392
{
374393
header:
375394
"No geographical or political discrimination against who can use Ethereum services",
376395
description: (
377396
<>
378-
<Text>You can use the same address on multiple devices.</Text>
397+
<Text>There's the NFT you received!</Text>
379398
<Text>
380399
Wallets are technically only an interface to show you your balance
381400
and to make transactions—
@@ -413,6 +432,7 @@ export const walletOnboardingSimData: SimulatorData = {
413432
},
414433
],
415434
ctaLabels: [
435+
"Go to website",
416436
"Connect wallet",
417437
"Connect to app",
418438
"Go to account",

0 commit comments

Comments
 (0)