Skip to content

Commit 8fefec1

Browse files
osiastedianosiastedian
authored
Merge pull request #22 from syscoin/pali-metamask-ux-improvement
Pali metamask ux improvement
2 parents 59681df + cf61d06 commit 8fefec1

File tree

5 files changed

+159
-106
lines changed

5 files changed

+159
-106
lines changed

‎components/Home/PaliMetamaskBridge.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Box, Button, Typography } from "@mui/material";
2+
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
3+
4+
import Link from "next/link";
5+
6+
import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
7+
8+
import Web3 from "web3";
9+
import { useConnectedWallet } from "@contexts/ConnectedWallet/useConnectedWallet";
10+
import WalletList from "components/WalletList";
11+
12+
export const PaliAndMetamaskBridge = () => {
13+
const { nevm, utxo } = useConnectedWallet();
14+
const { isEVMInjected } = usePaliWalletV2();
15+
16+
const isInvalidSyscoinAddress =
17+
!utxo.account || (!isEVMInjected && Web3.utils.isAddress(utxo.account));
18+
19+
const isReady = Boolean(nevm.account) && Boolean(utxo.account);
20+
21+
return (
22+
<>
23+
<WalletList />
24+
{isReady && (
25+
<Box display="flex" justifyContent="space-between">
26+
<Link href={`/bridge/v3/sys-to-nevm`}>
27+
<Button variant="contained" disabled={isInvalidSyscoinAddress}>
28+
Continue
29+
<ArrowForwardIcon />
30+
</Button>
31+
{isInvalidSyscoinAddress && (
32+
<Typography
33+
variant="caption"
34+
color="error"
35+
sx={{ ml: "auto", display: "block" }}
36+
>
37+
Invalid network selected. Please switch to UTXO Network.
38+
</Typography>
39+
)}
40+
</Link>
41+
<Link href={`/transfers/v2`}>
42+
<Button variant="text" color="secondary">
43+
View My Transfers
44+
</Button>
45+
</Link>
46+
</Box>
47+
)}
48+
</>
49+
);
50+
};
51+
52+
export default PaliAndMetamaskBridge;

‎components/Home/PaliV2Bridge.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Box, Button } from "@mui/material";
2+
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
3+
4+
import Link from "next/link";
5+
6+
export const PaliV2Bridge = () => {
7+
return (
8+
<>
9+
<Box display="flex" justifyContent="space-between">
10+
<Link href={`/bridge/v3/sys-to-nevm`}>
11+
<Button variant="contained">
12+
Go to PaliV2 Bridge
13+
<ArrowForwardIcon />
14+
</Button>
15+
</Link>
16+
<Link href={`/transfers/v2`}>
17+
<Button variant="text" color="secondary">
18+
View My Transfers
19+
</Button>
20+
</Link>
21+
</Box>
22+
</>
23+
);
24+
};
25+
26+
export default PaliV2Bridge;

‎components/WalletList/MetaMask.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,26 @@ const WalletListMetamask = () => {
2929
) : (
3030
<>
3131
<Typography variant="body1">Metamask</Typography>
32-
<Link href="https://metamask.io/" title="Go to Metamask">
33-
<Launch />
34-
</Link>
35-
<Button
36-
sx={{ ml: "auto" }}
37-
variant="contained"
38-
onClick={() => connectNEVM("metamask")}
39-
disabled={!availableWallets.metamask}
40-
>
41-
{availableWallets.metamask ? "Connect" : "Not installed"}
42-
</Button>
32+
{availableWallets.metamask ? (
33+
<Button
34+
sx={{ ml: "auto" }}
35+
variant="contained"
36+
onClick={() => connectNEVM("metamask")}
37+
>
38+
Connect
39+
</Button>
40+
) : (
41+
<Link
42+
href="https://metamask.io/"
43+
title="Go to Metamask"
44+
sx={{ ml: "auto" }}
45+
target="_blank"
46+
>
47+
<Button variant="contained">
48+
Install <Launch />
49+
</Button>
50+
</Link>
51+
)}
4352
</>
4453
)}
4554
</Box>

‎components/WalletList/PaliWallet.tsx‎

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
usePaliWallet,
77
usePaliWalletV2,
88
} from "@contexts/PaliWallet/usePaliWallet";
9+
import Web3 from "web3";
910

1011
const InstallPaliWallet = () => {
1112
return (
@@ -16,11 +17,17 @@ const InstallPaliWallet = () => {
1617
width={32}
1718
alt="PaliWallet logo"
1819
/>
19-
<Typography variant="body1">PaliWallet</Typography>
20-
<Link href="https://paliwallet.com/" title="Go to PaliWallet">
21-
<Launch />
20+
<Typography variant="body1">Pali Wallet</Typography>
21+
<Link
22+
href="https://paliwallet.com/"
23+
title="Go to PaliWallet"
24+
sx={{ ml: "auto" }}
25+
target="_blank"
26+
>
27+
<Button variant="contained">
28+
Install <Launch />
29+
</Button>
2230
</Link>
23-
<ConnectToPaliWallet />
2431
</Box>
2532
);
2633
};
@@ -50,38 +57,61 @@ const PaliWalletV2 = () => {
5057
const { utxo, nevm } = useConnectedWallet();
5158
const { isBitcoinBased, switchTo, isInstalled, isEVMInjected } =
5259
usePaliWalletV2();
53-
const isConnected = isBitcoinBased
54-
? Boolean(utxo.account)
55-
: Boolean(nevm.account);
60+
const connectedAccount = isBitcoinBased ? utxo.account : nevm.account;
61+
const isConnected = Boolean(connectedAccount);
5662

5763
if (utxo.type !== "pali-wallet" || !isInstalled || !isConnected) {
5864
return <InstallPaliWallet />;
5965
}
6066

61-
const connectedAccount = isBitcoinBased ? utxo.account : nevm.account;
67+
const isInvalidSyscoinAddress =
68+
!isEVMInjected && Web3.utils.isAddress(connectedAccount!);
69+
70+
const isValidAddress = !isInvalidSyscoinAddress;
6271

6372
return (
64-
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
65-
<Image
66-
src="/pali-wallet-logo.svg"
67-
height={32}
68-
width={32}
69-
alt="PaliWallet logo"
70-
/>
71-
<Typography variant="body1" color="secondary" noWrap maxWidth={"70%"}>
72-
{connectedAccount}
73-
</Typography>
74-
<Typography variant="body1" color="success.main" sx={{ ml: "auto" }}>
75-
CONNECTED
76-
</Typography>
77-
{isEVMInjected && (
78-
<Button
79-
variant="contained"
80-
onClick={() => switchTo(isBitcoinBased ? "ethereum" : "bitcoin")}
81-
sx={{ ml: 2 }}
73+
<Box sx={{ mb: 2 }}>
74+
<Box sx={{ display: "flex", alignItems: "center" }}>
75+
<Image
76+
src="/pali-wallet-logo.svg"
77+
height={32}
78+
width={32}
79+
alt="PaliWallet logo"
80+
/>
81+
<Typography variant="body1" color="secondary" noWrap maxWidth={"70%"}>
82+
{connectedAccount}
83+
</Typography>
84+
85+
{isValidAddress && (
86+
<>
87+
<Typography
88+
variant="body1"
89+
color="success.main"
90+
sx={{ ml: "auto" }}
91+
>
92+
CONNECTED
93+
</Typography>
94+
</>
95+
)}
96+
97+
{isEVMInjected && (
98+
<Button
99+
variant="contained"
100+
onClick={() => switchTo(isBitcoinBased ? "ethereum" : "bitcoin")}
101+
sx={{ ml: 2 }}
102+
>
103+
Switch
104+
</Button>
105+
)}
106+
</Box>
107+
{isInvalidSyscoinAddress && (
108+
<Typography
109+
variant="caption"
110+
color="error"
111+
sx={{ ml: "auto", display: "block" }}
82112
>
83-
Switch
84-
</Button>
113+
Invalid network selected. Please switch to UTXO Network.
114+
</Typography>
85115
)}
86116
</Box>
87117
);

‎pages/index.tsx‎

Lines changed: 3 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,18 @@
1-
import {
2-
Accordion,
3-
AccordionDetails,
4-
AccordionSummary,
5-
Box,
6-
Button,
7-
Container,
8-
Grid,
9-
List,
10-
ListItem,
11-
Typography,
12-
} from "@mui/material";
13-
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
1+
import { Box, Container, Grid, Typography } from "@mui/material";
142

15-
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
163
import type { NextPage } from "next";
174
import Head from "next/head";
18-
import Link from "next/link";
195

20-
import WalletList from "../components/WalletList";
21-
import { useConnectedWallet } from "../contexts/ConnectedWallet/useConnectedWallet";
226
import HomeHowItWorks from "components/Home/HowItWorks";
237
import ContactUs from "components/Home/ContactUs";
248
import FAQ from "components/Home/FAQ";
259
import Footer from "components/Footer";
2610
import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
2711
import NextImage from "next/image";
28-
import { useEffect, useState } from "react";
29-
import Image from "next/image";
3012
import BridgeMetamaskNevmInstructions from "components/Bridge/MetamaskNevmInstructions";
3113

32-
const PaliAndMetamaskBridge = () => {
33-
const [isReady, setIsReady] = useState(false);
34-
const { nevm, utxo } = useConnectedWallet();
35-
36-
useEffect(() => {
37-
setIsReady(Boolean(nevm.account) && Boolean(utxo.account));
38-
}, [nevm.account, utxo.account]);
39-
return (
40-
<>
41-
<WalletList />
42-
{isReady && (
43-
<Box display="flex" justifyContent="space-between">
44-
<Link href={`/bridge/v3/sys-to-nevm`}>
45-
<Button variant="contained">
46-
Continue
47-
<ArrowForwardIcon />
48-
</Button>
49-
</Link>
50-
<Link href={`/transfers/v2`}>
51-
<Button variant="text" color="secondary">
52-
View My Transfers
53-
</Button>
54-
</Link>
55-
</Box>
56-
)}
57-
</>
58-
);
59-
};
60-
61-
const PaliV2Bridge = () => {
62-
return (
63-
<>
64-
<Box display="flex" justifyContent="space-between">
65-
<Link href={`/bridge/v3/sys-to-nevm`}>
66-
<Button variant="contained">
67-
Go to PaliV2 Bridge
68-
<ArrowForwardIcon />
69-
</Button>
70-
</Link>
71-
<Link href={`/transfers/v2`}>
72-
<Button variant="text" color="secondary">
73-
View My Transfers
74-
</Button>
75-
</Link>
76-
</Box>
77-
</>
78-
);
79-
};
14+
import PaliAndMetamaskBridge from "components/Home/PaliMetamaskBridge";
15+
import PaliV2Bridge from "components/Home/PaliV2Bridge";
8016

8117
const Home: NextPage = () => {
8218
const { isInstalled, version, isEVMInjected } = usePaliWalletV2();

0 commit comments

Comments
 (0)