From bc34697ee4ef2e6910247e2517b4d20fa3a1c22b Mon Sep 17 00:00:00 2001 From: Evan Gray Date: Thu, 2 Sep 2021 23:28:53 -0400 Subject: [PATCH] bridge_ui: landing page fixes https://github.com/certusone/wormhole/issues/373 remove outdated TODOs Change-Id: I0b62bcb8bf6f9ab8a880c4a571df240c857f9bf1 --- bridge_ui/public/index.html | 4 +- bridge_ui/src/App.js | 22 +++++- bridge_ui/src/components/Attest/Target.tsx | 1 - bridge_ui/src/components/Attest/index.tsx | 2 - bridge_ui/src/components/Home/index.tsx | 74 +++++++++++++++++++ .../SolanaCreateAssociatedAddress.tsx | 2 - .../src/components/Transfer/Recovery.tsx | 4 +- .../src/components/Transfer/TargetPreview.tsx | 2 +- .../components/Transfer/TransferProgress.tsx | 1 - bridge_ui/src/components/Transfer/index.tsx | 4 - bridge_ui/src/hooks/useHandleAttest.ts | 1 - bridge_ui/src/hooks/useHandleCreateWrapped.ts | 1 - bridge_ui/src/hooks/useHandleRedeem.ts | 1 - bridge_ui/src/hooks/useHandleTransfer.ts | 3 - bridge_ui/src/images/overview.svg | 16 ++++ bridge_ui/src/muiTheme.js | 6 ++ bridge_ui/src/utils/getForeignAsset.ts | 1 - bridge_ui/src/utils/getOriginalAsset.ts | 1 - 18 files changed, 121 insertions(+), 25 deletions(-) create mode 100644 bridge_ui/src/components/Home/index.tsx create mode 100644 bridge_ui/src/images/overview.svg diff --git a/bridge_ui/public/index.html b/bridge_ui/public/index.html index 5183c37e..b7ad4662 100644 --- a/bridge_ui/public/index.html +++ b/bridge_ui/public/index.html @@ -24,7 +24,9 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - + + + Wormhole Token Bridge diff --git a/bridge_ui/src/App.js b/bridge_ui/src/App.js index 78b43b3e..e5b87e11 100644 --- a/bridge_ui/src/App.js +++ b/bridge_ui/src/App.js @@ -9,8 +9,15 @@ import { Typography, } from "@material-ui/core"; import { GitHub, Publish, Send } from "@material-ui/icons"; -import { NavLink, Redirect, Route, Switch } from "react-router-dom"; +import { + Link as RouterLink, + NavLink, + Redirect, + Route, + Switch, +} from "react-router-dom"; import Attest from "./components/Attest"; +import Home from "./components/Home"; import Transfer from "./components/Transfer"; import wormholeLogo from "./icons/wormhole.svg"; @@ -58,7 +65,13 @@ function App() { <> - Wormhole Logo + + Wormhole Logo +
@@ -132,8 +145,11 @@ function App() { + + + - +
diff --git a/bridge_ui/src/components/Attest/Target.tsx b/bridge_ui/src/components/Attest/Target.tsx index 023145dd..cef16436 100644 --- a/bridge_ui/src/components/Attest/Target.tsx +++ b/bridge_ui/src/components/Attest/Target.tsx @@ -46,7 +46,6 @@ function Target() { ))} - {/* TODO: determine "to" token address */} ({ rootContainer: { backgroundColor: "rgba(0,0,0,0.2)", diff --git a/bridge_ui/src/components/Home/index.tsx b/bridge_ui/src/components/Home/index.tsx new file mode 100644 index 00000000..6044ccb8 --- /dev/null +++ b/bridge_ui/src/components/Home/index.tsx @@ -0,0 +1,74 @@ +import { + Button, + Container, + Link, + makeStyles, + Typography, +} from "@material-ui/core"; +import { Link as RouterLink } from "react-router-dom"; +import overview from "../../images/overview.svg"; + +const useStyles = makeStyles((theme) => ({ + rootContainer: { + backgroundColor: "rgba(0,0,0,0.2)", + margin: theme.spacing(4, 0), + padding: theme.spacing(4, 4), + textAlign: "center", + }, + header: { + marginBottom: theme.spacing(12), + [theme.breakpoints.down("sm")]: { + marginBottom: theme.spacing(6), + }, + }, + description: { + fontWeight: 400, + marginBottom: theme.spacing(4), + }, + button: { + marginBottom: theme.spacing(4), + }, + overview: { + marginTop: theme.spacing(6), + [theme.breakpoints.down("sm")]: { + marginTop: theme.spacing(2), + }, + maxWidth: "100%", + }, +})); + +function Home() { + const classes = useStyles(); + return ( + +
+ + The portal is open. + + + The Wormhole Token Bridge allows you to seamlessly transfer tokenized + assets across Solana and Ethereum. + + + + To learn more about the Wormhole Protocol that powers it, visit{" "} + + wormholenetwork.com + + + overview +
+ + ); +} + +export default Home; diff --git a/bridge_ui/src/components/SolanaCreateAssociatedAddress.tsx b/bridge_ui/src/components/SolanaCreateAssociatedAddress.tsx index a9703860..dcd17a21 100644 --- a/bridge_ui/src/components/SolanaCreateAssociatedAddress.tsx +++ b/bridge_ui/src/components/SolanaCreateAssociatedAddress.tsx @@ -31,7 +31,6 @@ export function useAssociatedAccountExistsState( return; let cancelled = false; (async () => { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); const mintPublicKey = new PublicKey(mintAddress); const payerPublicKey = new PublicKey(solPK); // currently assumes the wallet is the owner @@ -86,7 +85,6 @@ export default function SolanaCreateAssociatedAddress({ ) return; (async () => { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); const mintPublicKey = new PublicKey(mintAddress); const payerPublicKey = new PublicKey(solPK); // currently assumes the wallet is the owner diff --git a/bridge_ui/src/components/Transfer/Recovery.tsx b/bridge_ui/src/components/Transfer/Recovery.tsx index 06262dcc..4ca637e7 100644 --- a/bridge_ui/src/components/Transfer/Recovery.tsx +++ b/bridge_ui/src/components/Transfer/Recovery.tsx @@ -145,8 +145,8 @@ async function terra(tx: string) { // TODO: move to wasm / sdk, share with solana const parsePayload = (arr: Buffer) => ({ amount: BigNumber.from(arr.slice(1, 1 + 32)).toBigInt(), - originAddress: arr.slice(33, 33 + 32).toString("hex"), // TODO: is this origin or source? - originChain: arr.readUInt16BE(65) as ChainId, // TODO: is this origin or source? + originAddress: arr.slice(33, 33 + 32).toString("hex"), + originChain: arr.readUInt16BE(65) as ChainId, targetAddress: arr.slice(67, 67 + 32).toString("hex"), targetChain: arr.readUInt16BE(99) as ChainId, }); diff --git a/bridge_ui/src/components/Transfer/TargetPreview.tsx b/bridge_ui/src/components/Transfer/TargetPreview.tsx index b382bf57..fce92060 100644 --- a/bridge_ui/src/components/Transfer/TargetPreview.tsx +++ b/bridge_ui/src/components/Transfer/TargetPreview.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ export default function TargetPreview() { const classes = useStyles(); const targetChain = useSelector(selectTransferTargetChain); - const targetAddress = useSelector(selectTransferTargetAddressHex); //TODO convert to readable + const targetAddress = useSelector(selectTransferTargetAddressHex); const targetAddressNative = hexToNativeString(targetAddress, targetChain); const explainerString = targetAddressNative diff --git a/bridge_ui/src/components/Transfer/TransferProgress.tsx b/bridge_ui/src/components/Transfer/TransferProgress.tsx index eec36ba3..509acecf 100644 --- a/bridge_ui/src/components/Transfer/TransferProgress.tsx +++ b/bridge_ui/src/components/Transfer/TransferProgress.tsx @@ -48,7 +48,6 @@ export default function TransferProgress() { } if (sourceChain === CHAIN_ID_SOLANA) { (async () => { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); while (!cancelled) { await new Promise((resolve) => setTimeout(resolve, 200)); diff --git a/bridge_ui/src/components/Transfer/index.tsx b/bridge_ui/src/components/Transfer/index.tsx index d7e81aec..be870b50 100644 --- a/bridge_ui/src/components/Transfer/index.tsx +++ b/bridge_ui/src/components/Transfer/index.tsx @@ -28,10 +28,6 @@ import Source from "./Source"; import SourcePreview from "./SourcePreview"; import Target from "./Target"; import TargetPreview from "./TargetPreview"; -// TODO: ensure that both wallets are connected to the same known network -// TODO: loaders and such, navigation block? -// TODO: refresh displayed token amount after transfer somehow, could be resolved by having different components appear -// TODO: warn if amount exceeds balance const useStyles = makeStyles(() => ({ rootContainer: { diff --git a/bridge_ui/src/hooks/useHandleAttest.ts b/bridge_ui/src/hooks/useHandleAttest.ts index febf51d8..557f6018 100644 --- a/bridge_ui/src/hooks/useHandleAttest.ts +++ b/bridge_ui/src/hooks/useHandleAttest.ts @@ -86,7 +86,6 @@ async function solana( ) { dispatch(setIsSending(true)); try { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); const transaction = await attestFromSolana( connection, diff --git a/bridge_ui/src/hooks/useHandleCreateWrapped.ts b/bridge_ui/src/hooks/useHandleCreateWrapped.ts index 4df3b328..769d8583 100644 --- a/bridge_ui/src/hooks/useHandleCreateWrapped.ts +++ b/bridge_ui/src/hooks/useHandleCreateWrapped.ts @@ -61,7 +61,6 @@ async function solana( ) { dispatch(setIsCreating(true)); try { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); await postVaaSolana( connection, diff --git a/bridge_ui/src/hooks/useHandleRedeem.ts b/bridge_ui/src/hooks/useHandleRedeem.ts index 3ae88dac..403d3d33 100644 --- a/bridge_ui/src/hooks/useHandleRedeem.ts +++ b/bridge_ui/src/hooks/useHandleRedeem.ts @@ -67,7 +67,6 @@ async function solana( ) { dispatch(setIsRedeeming(true)); try { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); await postVaaSolana( connection, diff --git a/bridge_ui/src/hooks/useHandleTransfer.ts b/bridge_ui/src/hooks/useHandleTransfer.ts index 11b2a6e2..95e00b46 100644 --- a/bridge_ui/src/hooks/useHandleTransfer.ts +++ b/bridge_ui/src/hooks/useHandleTransfer.ts @@ -116,8 +116,6 @@ async function solana( ) { dispatch(setIsSending(true)); try { - //TODO: check if token attestation exists on the target chain - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); const amountParsed = parseUnits(amount, decimals).toBigInt(); const originAddress = originAddressStr @@ -242,7 +240,6 @@ export function useHandleTransfer() { const disabled = !isTargetComplete || isSending || isSendComplete; const handleTransferClick = useCallback(() => { // TODO: we should separate state for transaction vs fetching vaa - // TODO: more generic way of calling these if ( sourceChain === CHAIN_ID_ETH && !!signer && diff --git a/bridge_ui/src/images/overview.svg b/bridge_ui/src/images/overview.svg new file mode 100644 index 00000000..641a8c4f --- /dev/null +++ b/bridge_ui/src/images/overview.svg @@ -0,0 +1,16 @@ + + + + + + + EthereumSolanaBSCTerraBridgeMessageobservationsUser agent /walletSigned messagepublished by WormholeSigned messagepublished to chains(fee paid by user) \ No newline at end of file diff --git a/bridge_ui/src/muiTheme.js b/bridge_ui/src/muiTheme.js index 40d8a609..ce896631 100644 --- a/bridge_ui/src/muiTheme.js +++ b/bridge_ui/src/muiTheme.js @@ -9,6 +9,9 @@ export const theme = responsiveFontSizes( paper: "#010114", }, divider: "#4e4e54", + text: { + primary: "rgba(255,255,255,0.98)", + }, primary: { main: "rgba(0, 116, 255, 0.8)", // #0074FF }, @@ -20,6 +23,9 @@ export const theme = responsiveFontSizes( main: "#FD3503", }, }, + typography: { + fontFamily: "'Sora', sans-serif", + }, overrides: { MuiButton: { root: { diff --git a/bridge_ui/src/utils/getForeignAsset.ts b/bridge_ui/src/utils/getForeignAsset.ts index dbcb9b58..0debda94 100644 --- a/bridge_ui/src/utils/getForeignAsset.ts +++ b/bridge_ui/src/utils/getForeignAsset.ts @@ -51,7 +51,6 @@ export async function getForeignAssetSol( arrayify(originAsset, { hexPad: "left" }), 32 ); - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); return await getForeignAssetSolanaTx( connection, diff --git a/bridge_ui/src/utils/getOriginalAsset.ts b/bridge_ui/src/utils/getOriginalAsset.ts index 02a2306e..42c38cf2 100644 --- a/bridge_ui/src/utils/getOriginalAsset.ts +++ b/bridge_ui/src/utils/getOriginalAsset.ts @@ -45,7 +45,6 @@ export async function getOriginalAssetEth( export async function getOriginalAssetSol( mintAddress: string ): Promise { - // TODO: share connection in context? const connection = new Connection(SOLANA_HOST, "confirmed"); return makeStateSafe( await getOriginalAssetSolTx(