From 3596dfbc92fbdfc691aa75af736aade283751ba7 Mon Sep 17 00:00:00 2001
From: Kevin Peters <kpeters@jumptrading.com>
Date: Mon, 24 Jan 2022 01:28:05 +0000
Subject: [PATCH] UI - Added more links, relayer fee

---
 react/src/components/Footer.tsx | 116 ++++++++++++++++++++++++++++++++
 react/src/icons/Discord.svg     |   3 +
 react/src/icons/Docs.svg        |  14 ++++
 react/src/icons/Github.svg      |   3 +
 react/src/icons/Medium.svg      |   1 +
 react/src/icons/Telegram.svg    |   3 +
 react/src/icons/Twitter.svg     |   3 +
 react/src/views/Home.tsx        |  38 ++++++-----
 8 files changed, 164 insertions(+), 17 deletions(-)
 create mode 100644 react/src/components/Footer.tsx
 create mode 100644 react/src/icons/Discord.svg
 create mode 100644 react/src/icons/Docs.svg
 create mode 100644 react/src/icons/Github.svg
 create mode 100644 react/src/icons/Medium.svg
 create mode 100644 react/src/icons/Telegram.svg
 create mode 100644 react/src/icons/Twitter.svg

diff --git a/react/src/components/Footer.tsx b/react/src/components/Footer.tsx
new file mode 100644
index 0000000..ba8afef
--- /dev/null
+++ b/react/src/components/Footer.tsx
@@ -0,0 +1,116 @@
+import { IconButton, makeStyles, Typography } from "@material-ui/core";
+import Discord from "../icons/Discord.svg";
+import Docs from "../icons/Docs.svg";
+import Github from "../icons/Github.svg";
+import Medium from "../icons/Medium.svg";
+import Telegram from "../icons/Telegram.svg";
+import Twitter from "../icons/Twitter.svg";
+import Wormhole from "../icons/wormhole-network.svg";
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    margin: theme.spacing(2, 0, 2),
+    textAlign: "center",
+  },
+  socialIcon: {
+    "& img": {
+      height: 24,
+      width: 24,
+    },
+  },
+  builtWithContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: 0.5,
+    marginTop: theme.spacing(1),
+  },
+  wormholeIcon: {
+    height: 48,
+    width: 48,
+    filter: "contrast(0)",
+    transition: "filter 0.5s",
+    "&:hover": {
+      filter: "contrast(1)",
+    },
+    verticalAlign: "middle",
+    marginRight: theme.spacing(1),
+  },
+}));
+
+export default function Footer() {
+  const classes = useStyles();
+  return (
+    <footer className={classes.footer}>
+      <div>
+        <IconButton
+          href="https://docs.wormholenetwork.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Docs} alt="Docs" />
+        </IconButton>
+        <IconButton
+          href="https://discord.gg/wormholecrypto"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Discord} alt="Discord" />
+        </IconButton>
+        <IconButton
+          href="https://github.com/certusone/wormhole"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Github} alt="Github" />
+        </IconButton>
+        <IconButton
+          href="http://wormholecrypto.medium.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Medium} alt="Medium" />
+        </IconButton>
+        <IconButton
+          href="https://t.me/wormholecrypto"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Telegram} alt="Telegram" />
+        </IconButton>
+        <IconButton
+          href="https://twitter.com/wormholecrypto"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.socialIcon}
+        >
+          <img src={Twitter} alt="Twitter" />
+        </IconButton>
+      </div>
+      <div className={classes.builtWithContainer}>
+        <div>
+          <a
+            href="https://wormholenetwork.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={Wormhole}
+              alt="Wormhole"
+              className={classes.wormholeIcon}
+            />
+          </a>
+        </div>
+        <div>
+          <Typography variant="body2">Open Source</Typography>
+          <Typography variant="body2">Built with &#10084;</Typography>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/react/src/icons/Discord.svg b/react/src/icons/Discord.svg
new file mode 100644
index 0000000..8140991
--- /dev/null
+++ b/react/src/icons/Discord.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="19" viewBox="0 0 26 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.3967 2.10679C20.1472 0.316323 16.588 0.0128823 16.4354 0.00226469C16.3194 -0.00717259 16.2034 0.0192786 16.1034 0.0779529C16.0033 0.136627 15.9242 0.224619 15.877 0.329735C15.8091 0.48074 15.7515 0.636067 15.7046 0.794675C17.1928 1.04335 19.0207 1.5435 20.6745 2.55832C20.7376 2.59703 20.7924 2.64765 20.8357 2.70728C20.879 2.76692 20.91 2.8344 20.9269 2.90588C20.9438 2.97736 20.9464 3.05144 20.9343 3.12388C20.9223 3.19633 20.896 3.26572 20.8568 3.3281C20.8177 3.39047 20.7665 3.44462 20.7061 3.48743C20.6458 3.53025 20.5776 3.5609 20.5053 3.57763C20.433 3.59437 20.358 3.59686 20.2848 3.58497C20.2115 3.57307 20.1413 3.54703 20.0782 3.50832C17.2352 1.76311 13.6845 1.6765 13 1.6765C12.3161 1.6765 8.76313 1.76367 5.92178 3.50776C5.85869 3.54647 5.78851 3.57252 5.71523 3.58441C5.64196 3.5963 5.56704 3.59381 5.49474 3.57707C5.34872 3.54328 5.22227 3.45352 5.1432 3.32754C5.06412 3.20156 5.0389 3.04969 5.07309 2.90532C5.10727 2.76096 5.19806 2.63594 5.32548 2.55776C6.9793 1.54573 8.80722 1.04335 10.2954 0.79691C10.2095 0.519734 10.1315 0.344823 10.1259 0.329735C10.0788 0.223877 9.99935 0.135308 9.89863 0.0765457C9.79792 0.0177834 9.68107 -0.00820096 9.56461 0.00226469C9.412 0.0134411 5.85283 0.316323 3.57217 2.13082C2.38239 3.21941 0 9.58495 0 15.0882C0 15.1866 0.0265652 15.2805 0.0751739 15.3654C1.7177 18.221 6.20213 18.967 7.22404 19H7.24157C7.33075 19.0002 7.41872 18.9796 7.49829 18.9398C7.57786 18.8999 7.64677 18.8421 7.69939 18.7709L8.73204 17.3649C5.94383 16.6535 4.51948 15.4442 4.43809 15.3721C4.32566 15.274 4.25726 15.1358 4.24793 14.9878C4.2386 14.8398 4.28911 14.6942 4.38835 14.5831C4.48758 14.4719 4.62742 14.4043 4.77709 14.3951C4.92676 14.3858 5.07401 14.4358 5.18643 14.5339C5.21922 14.5646 7.84239 16.7647 13 16.7647C18.1661 16.7647 20.7893 14.5557 20.8158 14.5339C20.9286 14.4365 21.0759 14.3873 21.2253 14.3971C21.3747 14.407 21.5141 14.4751 21.6128 14.5864C21.6616 14.6413 21.6991 14.7052 21.723 14.7744C21.7468 14.8436 21.7567 14.9167 21.752 14.9897C21.7473 15.0627 21.728 15.134 21.6954 15.1996C21.6628 15.2652 21.6174 15.3238 21.5619 15.3721C21.4805 15.4442 20.0562 16.6535 17.268 17.3649L18.3012 18.7709C18.3537 18.842 18.4226 18.8998 18.502 18.9396C18.5815 18.9795 18.6693 19.0001 18.7584 19H18.7754C19.7984 18.967 24.2823 18.2204 25.9254 15.3654C25.9734 15.2805 26 15.1866 26 15.0882C26 9.58495 23.6176 3.21997 22.3967 2.10679V2.10679ZM9.32609 12.8529C8.23296 12.8529 7.34783 11.8527 7.34783 10.6177C7.34783 9.38266 8.23296 8.38237 9.32609 8.38237C10.4192 8.38237 11.3043 9.38266 11.3043 10.6177C11.3043 11.8527 10.4192 12.8529 9.32609 12.8529ZM16.6739 12.8529C15.5808 12.8529 14.6957 11.8527 14.6957 10.6177C14.6957 9.38266 15.5808 8.38237 16.6739 8.38237C17.767 8.38237 18.6522 9.38266 18.6522 10.6177C18.6522 11.8527 17.767 12.8529 16.6739 12.8529Z" fill="#5A5A66"/>
+</svg>
diff --git a/react/src/icons/Docs.svg b/react/src/icons/Docs.svg
new file mode 100644
index 0000000..887a45c
--- /dev/null
+++ b/react/src/icons/Docs.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="459.319px" height="459.319px" viewBox="0 0 459.319 459.319" style="enable-background:new 0 0 459.319 459.319;"
+	 xml:space="preserve">
+	<path fill="#5A5A66" d="M94.924,366.674h312.874c0.958,0,1.886-0.136,2.778-0.349c0.071,0,0.13,0.012,0.201,0.012
+		c6.679,0,12.105-5.42,12.105-12.104V12.105C422.883,5.423,417.456,0,410.777,0h-2.955H114.284H94.941
+		c-32.22,0-58.428,26.214-58.428,58.425c0,0.432,0.085,0.842,0.127,1.259c-0.042,29.755-0.411,303.166-0.042,339.109
+		c-0.023,0.703-0.109,1.389-0.109,2.099c0,30.973,24.252,56.329,54.757,58.245c0.612,0.094,1.212,0.183,1.847,0.183h317.683
+		c6.679,0,12.105-5.42,12.105-12.105v-45.565c0-6.68-5.427-12.105-12.105-12.105s-12.105,5.426-12.105,12.105v33.461H94.924
+		c-18.395,0-33.411-14.605-34.149-32.817c0.018-0.325,0.077-0.632,0.071-0.963c-0.012-0.532-0.03-1.359-0.042-2.459
+		C61.862,380.948,76.739,366.674,94.924,366.674z M103.178,58.425c0-6.682,5.423-12.105,12.105-12.105s12.105,5.423,12.105,12.105
+		V304.31c0,6.679-5.423,12.105-12.105,12.105s-12.105-5.427-12.105-12.105V58.425z"/>
+</svg>
diff --git a/react/src/icons/Github.svg b/react/src/icons/Github.svg
new file mode 100644
index 0000000..a1e9c73
--- /dev/null
+++ b/react/src/icons/Github.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5915 5.36061C18.6526 3.71151 17.3789 2.40591 15.7703 1.44353C14.1615 0.481094 12.4051 0 10.4999 0C8.59497 0 6.838 0.481241 5.22948 1.44353C3.62072 2.40586 2.34716 3.71151 1.40822 5.36061C0.469422 7.00966 0 8.81044 0 10.7629C0 13.1082 0.667524 15.2172 2.00291 17.0904C3.33815 18.9637 5.06308 20.26 7.17756 20.9794C7.42369 21.0262 7.6059 20.9933 7.72436 20.8814C7.84288 20.7694 7.90207 20.6291 7.90207 20.4611C7.90207 20.4331 7.89972 20.1809 7.89517 19.7043C7.89048 19.2278 7.88828 18.812 7.88828 18.4573L7.57381 18.513C7.37332 18.5507 7.12038 18.5666 6.81502 18.5621C6.5098 18.5577 6.19294 18.525 5.86487 18.464C5.53667 18.4036 5.2314 18.2634 4.94882 18.0439C4.6664 17.8243 4.4659 17.5369 4.34738 17.1821L4.21067 16.8596C4.11954 16.6449 3.97608 16.4064 3.78008 16.145C3.58409 15.8833 3.38589 15.7059 3.18539 15.6125L3.08967 15.5422C3.02589 15.4955 2.9667 15.4392 2.91197 15.3739C2.85728 15.3086 2.81634 15.2432 2.789 15.1777C2.76161 15.1122 2.7843 15.0584 2.85733 15.0163C2.93035 14.9741 3.06233 14.9536 3.25382 14.9536L3.52715 14.9955C3.70945 15.033 3.93494 15.1448 4.20392 15.3318C4.47275 15.5186 4.69374 15.7615 4.86694 16.0603C5.07668 16.4435 5.32937 16.7355 5.62573 16.9364C5.92186 17.1373 6.22042 17.2376 6.52115 17.2376C6.82187 17.2376 7.0816 17.2142 7.30043 17.1677C7.51903 17.121 7.72412 17.0507 7.91562 16.9574C7.99765 16.3311 8.22099 15.85 8.58544 15.5138C8.06598 15.4578 7.59895 15.3735 7.18412 15.2615C6.76953 15.1492 6.3411 14.9671 5.89911 14.7146C5.45689 14.4625 5.09004 14.1494 4.79846 13.7758C4.50684 13.4021 4.26751 12.9114 4.0808 12.3043C3.894 11.6969 3.80058 10.9962 3.80058 10.2021C3.80058 9.07138 4.16068 8.10919 4.88073 7.31498C4.54343 6.4649 4.57527 5.51194 4.97636 4.4562C5.24069 4.37201 5.63268 4.43519 6.15214 4.64533C6.6717 4.85556 7.0521 5.03566 7.29373 5.18498C7.53536 5.33425 7.72896 5.46075 7.87482 5.56334C8.72263 5.32051 9.59755 5.19907 10.4998 5.19907C11.4021 5.19907 12.2772 5.32051 13.125 5.56334L13.6445 5.22714C13.9998 5.00282 14.4193 4.79725 14.9021 4.61038C15.3852 4.4236 15.7546 4.37216 16.0099 4.45634C16.4199 5.51214 16.4564 6.46505 16.119 7.31513C16.839 8.10934 17.1993 9.07177 17.1993 10.2022C17.1993 10.9963 17.1055 11.6992 16.919 12.3113C16.7323 12.9234 16.4909 13.4136 16.1947 13.7828C15.8983 14.152 15.5291 14.4627 15.0871 14.7148C14.645 14.9671 14.2164 15.1492 13.8019 15.2614C13.3871 15.3736 12.92 15.4579 12.4006 15.514C12.8744 15.9343 13.1113 16.5977 13.1113 17.5039V20.4607C13.1113 20.6287 13.1683 20.7689 13.2823 20.881C13.3963 20.9929 13.5762 21.0258 13.8223 20.9789C15.9371 20.2597 17.662 18.9633 18.9972 17.09C20.3322 15.2168 21 13.1078 21 10.7625C20.9995 8.81029 20.5299 7.00966 19.5915 5.36061Z" fill="#5A5A66"/>
+</svg>
diff --git a/react/src/icons/Medium.svg b/react/src/icons/Medium.svg
new file mode 100644
index 0000000..14604f8
--- /dev/null
+++ b/react/src/icons/Medium.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" fill="#5A5A66"><path d="M2.846 6.887c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403h6.958l5.378 11.795 4.728-11.795h6.633v.403l-1.916 1.837c-.165.126-.247.333-.213.538v13.498c-.034.204.048.411.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537v-10.91l-5.389 13.688h-.728l-6.275-13.688v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404h-7.148v-.404l2.521-3.058c.27-.279.39-.67.325-1.052v-10.608z"/></svg>
diff --git a/react/src/icons/Telegram.svg b/react/src/icons/Telegram.svg
new file mode 100644
index 0000000..c3250d5
--- /dev/null
+++ b/react/src/icons/Telegram.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <path fill="#5A5A66" d="M12,0c-6.626,0 -12,5.372 -12,12c0,6.627 5.374,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.628 -5.373,-12 -12,-12Zm3.224,17.871c0.188,0.133 0.43,0.166 0.646,0.085c0.215,-0.082 0.374,-0.267 0.422,-0.491c0.507,-2.382 1.737,-8.412 2.198,-10.578c0.035,-0.164 -0.023,-0.334 -0.151,-0.443c-0.129,-0.109 -0.307,-0.14 -0.465,-0.082c-2.446,0.906 -9.979,3.732 -13.058,4.871c-0.195,0.073 -0.322,0.26 -0.316,0.467c0.007,0.206 0.146,0.385 0.346,0.445c1.381,0.413 3.193,0.988 3.193,0.988c0,0 0.847,2.558 1.288,3.858c0.056,0.164 0.184,0.292 0.352,0.336c0.169,0.044 0.348,-0.002 0.474,-0.121c0.709,-0.669 1.805,-1.704 1.805,-1.704c0,0 2.084,1.527 3.266,2.369Zm-6.423,-5.062l0.98,3.231l0.218,-2.046c0,0 3.783,-3.413 5.941,-5.358c0.063,-0.057 0.071,-0.153 0.019,-0.22c-0.052,-0.067 -0.148,-0.083 -0.219,-0.037c-2.5,1.596 -6.939,4.43 -6.939,4.43Z"/>
+</svg>
diff --git a/react/src/icons/Twitter.svg b/react/src/icons/Twitter.svg
new file mode 100644
index 0000000..0333a76
--- /dev/null
+++ b/react/src/icons/Twitter.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8361 2.09102C21.0578 2.4457 20.2199 2.68554 19.3409 2.79271C20.2385 2.24157 20.9273 1.36765 21.2518 0.326603C20.4113 0.83692 19.4826 1.20818 18.4905 1.4072C17.6998 0.540936 16.5697 0 15.319 0C12.9207 0 10.975 1.99662 10.975 4.4589C10.975 4.80846 11.0123 5.14783 11.0869 5.47443C7.47527 5.28816 4.27389 3.51481 2.12928 0.813956C1.75506 1.47482 1.54122 2.24157 1.54122 3.05808C1.54122 4.60434 2.30831 5.96944 3.47448 6.76936C2.76334 6.74767 2.09199 6.54482 1.50517 6.21311V6.26797C1.50517 8.42916 3.00329 10.2319 4.99249 10.6401C4.62822 10.7447 4.24406 10.797 3.84746 10.797C3.56773 10.797 3.29421 10.7702 3.0294 10.7179C3.58265 12.4887 5.18644 13.7786 7.08862 13.813C5.60169 15.0097 3.72686 15.7229 1.69166 15.7229C1.34106 15.7229 0.994193 15.7025 0.654785 15.6616C2.5781 16.9247 4.8632 17.6634 7.31613 17.6634C15.3103 17.6634 19.6803 10.8698 19.6803 4.97687C19.6803 4.78295 19.6766 4.58903 19.6691 4.39893C20.5182 3.76997 21.2555 2.98536 21.8361 2.09102" fill="#5A5A66"/>
+</svg>
diff --git a/react/src/views/Home.tsx b/react/src/views/Home.tsx
index b5fd2cd..63db034 100644
--- a/react/src/views/Home.tsx
+++ b/react/src/views/Home.tsx
@@ -24,7 +24,6 @@ import {
   WORMHOLE_RPC_HOSTS,
 } from "../utils/consts";
 import { COLORS } from "../muiTheme";
-import Wormhole from "../icons/wormhole-network.svg";
 import { UniswapToUniswapExecutor } from "../swapper/swapper";
 import { Web3Provider } from "@ethersproject/providers";
 import { hexlify, hexStripZeros } from "ethers/lib/utils";
@@ -37,6 +36,7 @@ import getIsTransferCompletedEvmWithRetry from "../utils/getIsTransferCompletedW
 import CircleLoader from "../components/CircleLoader";
 import { ArrowForward, CheckCircleOutlineRounded } from "@material-ui/icons";
 import SwapProgress from "../components/SwapProgress";
+import Footer from "../components/Footer";
 
 const useStyles = makeStyles((theme) => ({
   bg: {
@@ -415,9 +415,14 @@ export default function Home() {
               placeholder="0.0"
             ></TextField>
             <Typography variant="subtitle2">{`Slippage tolerance: ${slippage}%`}</Typography>
+            <Typography variant="subtitle2">{`Relayer fee: ${RELAYER_FEE_UST} UST`}</Typography>
             {!isSwapping && <EthereumSignerKey />}
             <ButtonWithLoader
-              disabled={!readyToSwap || isSwapping || parseFloat(amountIn) > sourceTokenInfo.maxAmount}
+              disabled={
+                !readyToSwap ||
+                isSwapping ||
+                parseFloat(amountIn) > sourceTokenInfo.maxAmount
+              }
               showLoader={isSwapping}
               onClick={handleSwapClick}
             >
@@ -473,23 +478,22 @@ export default function Home() {
           </Typography>
         </Paper>
         <div className={classes.spacer} />
-        <Typography variant="subtitle1" color="textSecondary">
-          <Link variant="subtitle2" href="https://wormholenetwork.com/">
-            powered by wormhole
-          </Link>
-        </Typography>
-        <img src={Wormhole} alt="Wormhole" className={classes.wormholeIcon} />
-        <div className={classes.spacer} />
-        <Link variant="subtitle2" href="https://github.com/certusone/wormhole-nativeswap-example/">
-          Repo
-        </Link>
-        <div />
-        <div className={classes.spacer} />
-        <Link variant="subtitle2" href="https://goerli-faucet.slock.it/">
+        <Footer />
+        <Link href="https://goerli-faucet.slock.it/" style={{ margin: "5px" }}>
           Goerli faucet
         </Link>
-        <div />
-        <Link href="https://faucet.polygon.technology/">Mumbai faucet</Link>
+        <Link
+          href="https://faucet.polygon.technology/"
+          style={{ margin: "5px" }}
+        >
+          Mumbai faucet
+        </Link>
+        <Link
+          href="https://github.com/certusone/wormhole-nativeswap-example/"
+          style={{ margin: "5px" }}
+        >
+          NativeSwap GitHub
+        </Link>
       </Container>
     </div>
   );