Skip to content

Commit 313e7d9

Browse files
osiastedianosiastedian
authored
Merge pull request #16 from syscoin/bridge-v3
Bridge v3
2 parents 2ae8c15 + 3f48823 commit 313e7d9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2435
-142
lines changed

‎components/Bridge/Transfer/Complete.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ArrowForward } from "@mui/icons-material";
22
import {
33
Alert,
44
Box,
5-
Button,
65
Card,
76
CardActions,
87
CardContent,
@@ -14,11 +13,8 @@ import LoadingButton from "@mui/lab/LoadingButton";
1413

1514
import { useTransfer } from "contexts/Transfer/useTransfer";
1615
import { useRouter } from "next/router";
17-
import { useEffect, useState } from "react";
16+
import { useState } from "react";
1817
import { useConnectedWallet } from "@contexts/ConnectedWallet/useConnectedWallet";
19-
import { TransactionReceipt } from "web3-core";
20-
import { utils } from "syscoinjs-lib";
21-
import { usePaliWallet } from "@contexts/PaliWallet/usePaliWallet";
2218

2319
const SYSCOIN_TX_BLOCKCHAIN_URL = "https://blockbook.elint.services/tx/";
2420
const NEVM_TX_BLOCKCHAIN_URL = "https://explorer.syscoin.org/tx/";

‎components/Bridge/Transfer/Title.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { useTransfer } from "@contexts/Transfer/useTransfer";
2-
import { Typography } from "@mui/material";
1+
import { Typography, TypographyProps } from "@mui/material";
2+
import { useTransfer } from "../v3/context/TransferContext";
33

4-
const TransferTitle = () => {
4+
const TransferTitle: React.FC<TypographyProps> = (props) => {
55
const { transfer } = useTransfer();
66

77
return (
8-
<Typography variant="body1" sx={{ my: 3 }}>
9-
Transfer #{transfer.status === "initialize" ? "--------" : transfer.id}
8+
<Typography variant="body1" {...props}>
9+
Transfer #
10+
{transfer == undefined || transfer.status === "initialize"
11+
? "--------"
12+
: transfer.id}
1013
</Typography>
1114
);
1215
};

‎components/Bridge/WalletSwitchV2.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const WalletInfoCard: React.FC<WalletInfoCardProps> = ({
2727
network,
2828
walletType,
2929
}) => {
30+
const { transfer, setUtxo, setNevm } = useTransfer();
3031
return (
3132
<Card variant="outlined" sx={{ mb: 1 }}>
3233
<CardContent
@@ -45,8 +46,12 @@ const WalletInfoCard: React.FC<WalletInfoCardProps> = ({
4546
<Typography variant="h6" display="block">
4647
{network.name}
4748
</Typography>
48-
{walletType === "utxo" && <UTXOConnect />}
49-
{walletType === "nevm" && <NEVMConnect />}
49+
{walletType === "utxo" && (
50+
<UTXOConnect setUtxo={setUtxo} transfer={transfer} />
51+
)}
52+
{walletType === "nevm" && (
53+
<NEVMConnect setNevm={setNevm} transfer={transfer} />
54+
)}
5055
</Box>
5156
</CardContent>
5257
</Card>

‎components/Bridge/WalletSwitchV2/Card.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Alert, Box, Button, Link, Typography } from "@mui/material";
1+
import { Alert, Box, Button, Link, Typography, useTheme } from "@mui/material";
22
import Check from "@mui/icons-material/Check";
33

44
type WalletSwitchCardProps = {
@@ -16,6 +16,9 @@ const WalletSwitchCard: React.FC<WalletSwitchCardProps> = ({
1616
allowChange,
1717
faucetLink,
1818
}) => {
19+
const {
20+
palette: { success },
21+
} = useTheme();
1922
return (
2023
<Box>
2124
<Box
@@ -28,7 +31,10 @@ const WalletSwitchCard: React.FC<WalletSwitchCardProps> = ({
2831
<Typography variant="body2" noWrap display="block" marginRight="auto">
2932
{address}
3033
</Typography>
31-
<Check color="success" />
34+
<Typography variant="body2" color={success.main}>
35+
Confirmed
36+
<Check color="success" />
37+
</Typography>
3238
</Box>
3339
<Box display="flex" sx={{ alignItems: "center" }}>
3440
<Typography marginRight="auto">Balance: {balance}</Typography>

‎components/Bridge/WalletSwitchV2/ConfirmCard.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Button, IconButton, Tooltip, Typography } from "@mui/material";
1+
import { Button, Typography } from "@mui/material";
22
import ChangeCirlce from "@mui/icons-material/ChangeCircle";
33
import { Box } from "@mui/system";
4-
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
54

65
type WalletSwitchConfirmCardProps = {
76
address: string;
@@ -21,20 +20,20 @@ const WalletSwitchConfirmCard: React.FC<WalletSwitchConfirmCardProps> = ({
2120
variant="contained"
2221
aria-label="Change"
2322
onClick={onChange}
24-
color="primary"
23+
color="secondary"
2524
size="small"
2625
>
27-
Change <ChangeCirlce sx={{ ml: 1 }} />
26+
Change <ChangeCirlce />
2827
</Button>
2928
<Button
3029
variant="contained"
31-
aria-label="Change"
30+
aria-label="Set"
3231
onClick={onConfirm}
33-
color="success"
32+
color="primary"
3433
sx={{ ml: 1 }}
3534
size="small"
3635
>
37-
Confirm <CheckCircleIcon sx={{ ml: 1 }} />
36+
Set
3837
</Button>
3938
</Box>
4039
);

‎components/Bridge/WalletSwitchV2/NEVMConnect.tsx‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
import { useNEVM } from "@contexts/ConnectedWallet/NEVMProvider";
22
import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
3-
import { useTransfer } from "@contexts/Transfer/useTransfer";
43
import { Alert, Button, Link, Typography } from "@mui/material";
5-
import { useQuery } from "react-query";
64
import WalletSwitchCard from "./Card";
75
import WalletSwitchConfirmCard from "./ConfirmCard";
6+
import { ITransfer } from "@contexts/Transfer/types";
7+
import { useNevmBalance } from "utils/balance-hooks";
88

9-
const NEVMConnect = () => {
10-
const { transfer, setNevm } = useTransfer();
11-
const { account, connect } = useNEVM();
9+
type NEVMConnectProps = {
10+
transfer: ITransfer;
11+
setNevm: (nevm: { address: string }) => void;
12+
};
13+
14+
const NEVMConnect: React.FC<NEVMConnectProps> = ({ setNevm, transfer }) => {
15+
const { account, connect, switchToMainnet } = useNEVM();
1216
const { isBitcoinBased, switchTo, changeAccount } = usePaliWalletV2();
13-
const balance = useQuery(
14-
["nevm", "balance", transfer.nevmAddress],
15-
async () => {
16-
if (!transfer.nevmAddress) return Promise.resolve(0);
17-
const url = `https://explorer.syscoin.org/api?module=account&action=eth_get_balance&address=${transfer.nevmAddress}&tag=latest`;
18-
const ethBalanceInHex = await fetch(url)
19-
.then((res) => res.json())
20-
.then((rpcResp) => rpcResp.result);
21-
const ethBalance = parseInt(ethBalanceInHex) / Math.pow(10, 18);
22-
return ethBalance;
23-
}
24-
);
17+
const balance = useNevmBalance(transfer.nevmAddress);
2518

2619
const setTransferNevm = () => {
2720
if (!account) return;
@@ -71,7 +64,7 @@ const NEVMConnect = () => {
7164
if (isBitcoinBased) {
7265
return (
7366
<Button variant="contained" onClick={() => switchTo("ethereum")}>
74-
Set NEVM
67+
Set NEVM Account
7568
</Button>
7669
);
7770
}

‎components/Bridge/WalletSwitchV2/UTXOConnect.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
2-
import { useTransfer } from "@contexts/Transfer/useTransfer";
32
import { Alert, Button, Typography } from "@mui/material";
4-
import { useQuery } from "react-query";
5-
import { BlockbookAPIURL } from "@contexts/Transfer/constants";
63
import WalletSwitchCard from "./Card";
74
import WalletSwitchConfirmCard from "./ConfirmCard";
5+
import { ITransfer } from "@contexts/Transfer/types";
6+
import { useUtxoBalance } from "utils/balance-hooks";
87

9-
const UTXOConnect = () => {
10-
const { transfer, setUtxo } = useTransfer();
11-
const balance = useQuery(
12-
["utxo", "balance", transfer.utxoXpub],
13-
async () => {
14-
const url = BlockbookAPIURL + "/api/v2/xpub/" + transfer.utxoXpub;
15-
const balanceInText = await fetch(url)
16-
.then((res) => res.json())
17-
.then((res) => res.balance);
18-
return parseInt(balanceInText) / Math.pow(10, 8);
19-
},
20-
{
21-
enabled: Boolean(transfer.utxoXpub),
22-
}
23-
);
8+
type UTXOConnectProps = {
9+
transfer: ITransfer;
10+
setUtxo: (utxo: { xpub: string; address: string }) => void;
11+
};
12+
13+
const UTXOConnect: React.FC<UTXOConnectProps> = ({ setUtxo, transfer }) => {
14+
const balance = useUtxoBalance(transfer.utxoXpub);
2415
const {
2516
isBitcoinBased,
2617
switchTo,
@@ -78,7 +69,7 @@ const UTXOConnect = () => {
7869
if (!isBitcoinBased) {
7970
return (
8071
<Button variant="contained" onClick={() => switchTo("bitcoin")}>
81-
Set Syscoin Core
72+
Set UTXO Account
8273
</Button>
8374
);
8475
}

‎components/Bridge/v3/Loading.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Box } from "@mui/material";
2+
3+
const BridgeV3Loading = () => {
4+
return (
5+
<Box
6+
sx={{
7+
mt: 5,
8+
display: "flex",
9+
flexDirection: "column",
10+
minWidth: "20rem",
11+
width: "50%",
12+
}}
13+
>
14+
Loading
15+
</Box>
16+
);
17+
};
18+
19+
export default BridgeV3Loading;

‎components/Bridge/v3/NEVMStepWrapepr.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {
2+
MAINNET_CHAIN_ID,
3+
useNEVM,
4+
} from "@contexts/ConnectedWallet/NEVMProvider";
5+
import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
6+
import { Button } from "@mui/material";
7+
import { isValidEthereumAddress } from "@pollum-io/sysweb3-utils";
8+
9+
type Props = {
10+
children: React.ReactNode;
11+
};
12+
13+
const NEVMStepWrapper: React.FC<Props> = ({ children }) => {
14+
const { version, isBitcoinBased, switchTo, isEVMInjected, connectWallet } =
15+
usePaliWalletV2();
16+
17+
const { connect, account, chainId, switchToMainnet } = useNEVM();
18+
19+
if (version === "v2" && isBitcoinBased && isEVMInjected) {
20+
return (
21+
<Button variant="contained" onClick={() => switchTo("ethereum")}>
22+
Switch to Syscoin NEVM
23+
</Button>
24+
);
25+
}
26+
27+
if (!account) {
28+
return <Button onClick={connectWallet}>Connect Pali Wallet</Button>;
29+
}
30+
31+
if (!isValidEthereumAddress(account)) {
32+
return (
33+
<>
34+
<Button variant="contained" onClick={connect}>
35+
Switch Account
36+
</Button>
37+
</>
38+
);
39+
}
40+
41+
if (chainId !== MAINNET_CHAIN_ID) {
42+
return (
43+
<Button variant="contained" onClick={switchToMainnet}>
44+
Switch to NEVM Network
45+
</Button>
46+
);
47+
}
48+
return <>{children}</>;
49+
};
50+
51+
export default NEVMStepWrapper;

‎components/Bridge/v3/SavingIndicator.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { CircularProgress, Typography } from "@mui/material";
2+
import { useTransfer } from "./context/TransferContext";
3+
4+
const BridgeV3SavingIndicator = () => {
5+
const { isSaving } = useTransfer();
6+
if (!isSaving) return null;
7+
return (
8+
<Typography variant="body2" sx={{ mt: 2 }}>
9+
<CircularProgress sx={{ mr: 1 }} size={"1rem"} />
10+
Saving state...
11+
</Typography>
12+
);
13+
};
14+
15+
export default BridgeV3SavingIndicator;

0 commit comments

Comments
 (0)