Skip to content

Commit 350e289

Browse files
corwintinescorwintines
authored
Merge pull request #11148 from ethereum/sim-patches
Interactive simulator patches
2 parents 2143170 + ec56ce0 commit 350e289

File tree

10 files changed

+149
-117
lines changed

10 files changed

+149
-117
lines changed

‎src/components/Simulator/DemoOnlyPopover.tsx

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎src/components/Simulator/NotificationPopover.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
Popover,
3+
PopoverTrigger,
4+
PopoverContent,
5+
PopoverBody,
6+
PopoverContentProps,
7+
PopoverProps,
8+
PopoverHeader,
9+
PopoverCloseButton,
10+
Flex,
11+
Portal,
12+
} from "@chakra-ui/react"
13+
import React, { type ReactNode } from "react"
14+
15+
interface IProps
16+
extends Omit<PopoverContentProps, "children">,
17+
Pick<PopoverProps, "placement"> {
18+
children: ReactNode
19+
}
20+
export const NotificationPopover: React.FC<IProps> = ({
21+
placement,
22+
children,
23+
content,
24+
title,
25+
...restProps
26+
}) => {
27+
return (
28+
<Popover placement={placement}>
29+
<PopoverTrigger>{children}</PopoverTrigger>
30+
<Portal>
31+
<PopoverContent
32+
bg="background.highlight"
33+
px={4}
34+
py={2}
35+
maxW="15rem"
36+
borderRadius="base"
37+
boxShadow="tooltip"
38+
fontSize="xs"
39+
{...restProps}
40+
>
41+
<Flex gap={2}>
42+
<PopoverHeader fontWeight="bold" mb={2} flex={1} mt={0.5}>
43+
{title || ""}
44+
</PopoverHeader>
45+
<PopoverCloseButton ms="auto" />
46+
</Flex>
47+
<PopoverBody>{content}</PopoverBody>
48+
</PopoverContent>
49+
</Portal>
50+
</Popover>
51+
)
52+
}

‎src/components/Simulator/WalletHome/AddressPill.tsx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
1-
import { Button, Icon, type ButtonProps } from "@chakra-ui/react"
1+
import { Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
22
import React from "react"
33
import { MdContentCopy } from "react-icons/md"
44
import { FAKE_DEMO_ADDRESS } from "../constants"
5+
import { NotificationPopover } from "../NotificationPopover"
56

6-
interface IProps extends Omit<ButtonProps, "children"> {
7-
children?: Pick<ButtonProps, "children">
7+
interface IProps extends Omit<FlexProps, "children"> {
8+
children?: Pick<FlexProps, "children">
89
}
910
export const AddressPill: React.FC<IProps> = ({ children, ...btnProps }) => (
10-
<Button
11-
rightIcon={<Icon as={MdContentCopy} w={4} />}
12-
borderRadius="full"
13-
isDisabled
14-
_disabled={{
15-
bg: "background.highlight",
16-
color: "disabled",
17-
border: "1px",
18-
borderColor: "border",
19-
}}
20-
py={0}
21-
px={2}
22-
alignSelf="center"
23-
pointerEvents="none"
24-
fontSize="xs"
25-
{...btnProps}
11+
<NotificationPopover
12+
title="Example walkthrough"
13+
content="Share your address (public identifier) from your own wallet when finished here"
2614
>
27-
{children ?? FAKE_DEMO_ADDRESS}
28-
</Button>
15+
<Flex
16+
gap={2}
17+
align="center"
18+
borderRadius="full"
19+
bg="background.highlight"
20+
color="disabled"
21+
border="1px"
22+
borderColor="border"
23+
py={1}
24+
px={2}
25+
alignSelf="center"
26+
fontSize="xs"
27+
{...btnProps}
28+
>
29+
<Text m={0}>{children ?? FAKE_DEMO_ADDRESS}</Text>
30+
<Icon as={MdContentCopy} w={4} fontSize="lg" />
31+
</Flex>
32+
</NotificationPopover>
2933
)

‎src/components/Simulator/WalletHome/WalletBalance.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const WalletBalance: React.FC<IProps> = ({
1111
usdAmount = 0,
1212
...boxProps
1313
}) => (
14-
<Box {...boxProps}>
14+
<Box zIndex={1} {...boxProps}>
1515
<Text textAlign="center" color="body.medium" mb={{ base: 2, md: 4 }}>
1616
Your total
1717
</Text>

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import React from "react"
1010
import { GrMenu } from "react-icons/gr"
1111
import { EthGlyphIcon } from "../../icons"
12+
import { NotificationPopover } from "../../NotificationPopover"
1213

1314
interface IProps extends BoxProps {}
1415
export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
@@ -21,10 +22,15 @@ export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
2122
app.example.com
2223
</Text>
2324
</Box>
24-
<Flex justify="space-between" p={6} fontSize="4xl">
25-
<Icon as={EthGlyphIcon} />
26-
<Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
27-
</Flex>
25+
<NotificationPopover
26+
title="Example walkthrough"
27+
content="Try out a real Ethereum application when finished here"
28+
>
29+
<Flex p={6} fontSize="4xl" justify="space-between">
30+
<Icon as={EthGlyphIcon} />
31+
<Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
32+
</Flex>
33+
</NotificationPopover>
2834
<>{children}</>
2935
</Box>
3036
)

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

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { motion } from "framer-motion"
1515
import { graphql, useStaticQuery } from "gatsby"
1616
import { GatsbyImage, getImage } from "gatsby-plugin-image"
1717
import { FAKE_DEMO_ADDRESS } from "../../constants"
18+
import { NotificationPopover } from "../../NotificationPopover"
1819

1920
const MotionBox = motion(Box)
2021

@@ -76,16 +77,22 @@ export const ReceiveEther = () => {
7677
Show this QR code containing your account address to the sender
7778
</Text>
7879
{/* QR Code */}
79-
<Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
80-
<Image
81-
as={GatsbyImage}
82-
image={qrImage}
83-
maxW={QR_SIZE}
84-
maxH={QR_SIZE}
85-
p={3}
86-
borderRadius="base"
87-
/>
88-
</Box>
80+
<NotificationPopover
81+
title="Example walkthrough"
82+
content="Share QR containing your address (public identifier) from your own wallet when finished here"
83+
placement="top"
84+
>
85+
<Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
86+
<Image
87+
as={GatsbyImage}
88+
image={qrImage}
89+
maxW={QR_SIZE}
90+
maxH={QR_SIZE}
91+
p={3}
92+
borderRadius="base"
93+
/>
94+
</Box>
95+
</NotificationPopover>
8996
<Flex
9097
borderRadius="base"
9198
border="1px"
@@ -107,37 +114,24 @@ export const ReceiveEther = () => {
107114
{FAKE_DEMO_ADDRESS}
108115
</Text>
109116
</Box>
110-
<Popover placement="top-start">
111-
<PopoverTrigger>
112-
<Button
113-
fontSize="xs"
114-
fontWeight="bold"
115-
color="body.base"
116-
bg="body.light"
117-
borderRadius="10px"
118-
h="fit-content"
119-
py={1.5}
120-
px={2}
121-
>
122-
Copy
123-
</Button>
124-
</PopoverTrigger>
125-
<PopoverContent
126-
bg="background.highlight"
127-
p={4}
128-
w="20ch"
129-
borderRadius="base"
130-
boxShadow="tooltip"
117+
<NotificationPopover
118+
title="Example walkthrough"
119+
content="Share your address (public identifier) from your own wallet when finished here"
120+
placement="top-start"
121+
>
122+
<Button
123+
fontSize="xs"
124+
fontWeight="bold"
125+
color="body.base"
126+
bg="body.light"
127+
borderRadius="10px"
128+
h="fit-content"
129+
py={1.5}
130+
px={2}
131131
>
132-
<PopoverArrow bg="background.highlight" />
133-
<PopoverBody>
134-
<Text m={0}>
135-
This is just a demo account! Try this with your own wallet when
136-
your finished here.
137-
</Text>
138-
</PopoverBody>
139-
</PopoverContent>
140-
</Popover>
132+
Copy
133+
</Button>
134+
</NotificationPopover>
141135
</Flex>
142136
<Text m={0} fontSize="xs" lineHeight={1.7}>
143137
Use this address for receiving tokens and NFTs on the Ethereum network.

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
22
import React from "react"
3-
import { DemoOnlyPopover } from "../../DemoOnlyPopover"
3+
import { NotificationPopover } from "../../NotificationPopover"
44
import { EthTokenIcon } from "../../icons"
55

66
interface IProps {
@@ -73,7 +73,11 @@ export const SendEther: React.FC<IProps> = ({
7373
fontSize="xs"
7474
>
7575
{/* Left side: Displayed send amount */}
76-
<DemoOnlyPopover placement="top">
76+
<NotificationPopover
77+
title="Example walkthrough"
78+
content="Choose a value below"
79+
placement="top"
80+
>
7781
<Flex
7882
alignItems="top"
7983
flex={1}
@@ -84,10 +88,14 @@ export const SendEther: React.FC<IProps> = ({
8488
{formatChosenAmount}
8589
</Text>
8690
</Flex>
87-
</DemoOnlyPopover>
91+
</NotificationPopover>
8892
{/* Right side */}
8993
<Flex direction="column" alignItems="end">
90-
<DemoOnlyPopover placement="top">
94+
<NotificationPopover
95+
placement="top"
96+
title="Example walkthrough"
97+
content="In this walkthrough you can only send ETH, but in real wallet you can send different tokens as well"
98+
>
9199
{/* Token selector pill */}
92100
<Flex
93101
px={2}
@@ -102,7 +110,7 @@ export const SendEther: React.FC<IProps> = ({
102110
ETH
103111
</Text>
104112
</Flex>
105-
</DemoOnlyPopover>
113+
</NotificationPopover>
106114
{/* Balances */}
107115
<Text fontWeight="bold" m={0} lineHeight={1}>
108116
Balance: {usdAmount}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { CategoryTabs } from "../../WalletHome/CategoryTabs"
1515
import { EthTokenIconGrayscale, QrCodeIcon } from "../../icons"
1616
import type { SimulatorNavProps } from "../../interfaces"
1717
import { CONTACTS } from "./constants"
18-
import { DemoOnlyPopover } from "../../DemoOnlyPopover"
18+
import { NotificationPopover } from "../../NotificationPopover"
1919

2020
interface IProps extends SimulatorNavProps {
2121
setRecipient: (name: string) => void
@@ -31,7 +31,10 @@ export const SendFromContacts: React.FC<IProps> = ({ nav, setRecipient }) => {
3131
<Text fontSize={{ base: "xl", md: "2xl" }} fontWeight="bold" mb={8}>
3232
Choose recipient
3333
</Text>
34-
<DemoOnlyPopover fontSize="sm">
34+
<NotificationPopover
35+
title="Example walkthrough"
36+
content={`Choose ${CONTACTS[0].name} from recent contacts`}
37+
>
3538
<Button
3639
variant="outline"
3740
leftIcon={<Icon as={PiMagnifyingGlass} />}
@@ -49,7 +52,7 @@ export const SendFromContacts: React.FC<IProps> = ({ nav, setRecipient }) => {
4952
Address or contacts
5053
</Text>
5154
</Button>
52-
</DemoOnlyPopover>
55+
</NotificationPopover>
5356
</Box>
5457
<Box py={8} px={6} bg="background.highlight" h="full">
5558
<CategoryTabs

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const Success: React.FC<IProps> = ({
4848
}
4949
}, [])
5050

51-
const WALLET_FADE_IN_DELAY = 2000
51+
const WALLET_FADE_IN_DELAY = 3000
5252
useEffect(() => {
5353
if (txPending) return
5454
const timeout = setTimeout(() => {

0 commit comments

Comments
 (0)