bridge_ui: add chains to homepage

Change-Id: Ib181ab508db85420223a74d6a311bcf25e915fea

bridge_ui/src/components/Home/index.tsx

@@ -1,18 +1,21 @@
 import {
   Card,
+  Chip,
   Container,
   Link,
   makeStyles,
   Typography,
 } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
+import polygonLogo from "../../icons/polygon.svg";
 import { COLORS } from "../../muiTheme";
+import { CHAINS } from "../../utils/consts";
 import HeaderText from "../HeaderText";
 
 const useStyles = makeStyles((theme) => ({
   header: {
     marginTop: theme.spacing(12),
-    marginBottom: theme.spacing(15),
+    marginBottom: theme.spacing(8),
     [theme.breakpoints.down("sm")]: {
       marginBottom: theme.spacing(6),
     },
@@ -37,6 +40,55 @@ const useStyles = makeStyles((theme) => ({
   spacer: {
     height: theme.spacing(5),
   },
+  chainList: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    margin: theme.spacing(-1, -1, 8),
+    [theme.breakpoints.down("sm")]: {
+      margin: theme.spacing(-1, -1, 6),
+    },
+  },
+  chainCard: {
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
+    borderRadius: 8,
+    display: "flex",
+    flexDirection: "column",
+    margin: theme.spacing(1),
+    minHeight: "100%",
+    padding: theme.spacing(2),
+    width: 149, // makes it square
+    maxWidth: 149,
+    [theme.breakpoints.down("sm")]: {
+      padding: theme.spacing(1.5),
+      width: 141, // keeps it square
+      maxWidth: 141,
+    },
+  },
+  chainLogoWrapper: {
+    position: "relative",
+    textAlign: "center",
+  },
+  chainLogo: {
+    height: 64,
+    maxWidth: 64,
+  },
+  chainName: {
+    marginTop: theme.spacing(1),
+    flex: "1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    minHeight: 40, // 2 lines
+  },
+  chip: {
+    backgroundColor: COLORS.blueWithTransparency,
+    position: "absolute",
+    top: "50%",
+    right: "50%",
+    transform: "translate(50%, -50%)",
+  },
 }));
 
 function Home() {
@@ -48,6 +100,45 @@ function Home() {
           <HeaderText>The Portal is Open</HeaderText>
         </div>
       </Container>
+      <Container maxWidth="md">
+        <div className={classes.chainList}>
+          {CHAINS.map((chain) => (
+            <div key={chain.id} className={classes.chainCard}>
+              <div className={classes.chainLogoWrapper}>
+                <img
+                  src={chain.logo}
+                  alt={chain.name}
+                  className={classes.chainLogo}
+                />
+              </div>
+              <Typography
+                variant="body2"
+                component="div"
+                className={classes.chainName}
+              >
+                <div>{chain.name}</div>
+              </Typography>
+            </div>
+          ))}
+          <div className={classes.chainCard}>
+            <div className={classes.chainLogoWrapper}>
+              <img
+                src={polygonLogo}
+                alt="Polygon"
+                className={classes.chainLogo}
+              />
+              <Chip label="Coming soon" size="small" className={classes.chip} />
+            </div>
+            <Typography
+              variant="body2"
+              component="div"
+              className={classes.chainName}
+            >
+              <div>Polygon</div>
+            </Typography>
+          </div>
+        </div>
+      </Container>
       <Container maxWidth="md">
         <Card className={classes.mainCard}>
           <Typography variant="h4" className={classes.description}>
@@ -55,7 +146,7 @@ function Home() {
           </Typography>
           <Typography variant="h6" className={classes.description}>
             The Wormhole Token Bridge allows you to seamlessly transfer
-            tokenized assets across Solana and Ethereum.
+            tokenized assets across Solana, Ethereum, BSC, and Terra.
           </Typography>
           <div className={classes.spacer} />
           <Typography variant="subtitle1" className={classes.description}>

bridge_ui/src/components/TokenSelectors/NFTViewer.tsx

@@ -216,20 +216,31 @@ export default function NFTViewer({
 }) {
   const uri = safeIPFS(value.uri || "");
   const [metadata, setMetadata] = useState({
+    uri,
     image: value.image,
     animation_url: value.animation_url,
     nftName: value.nftName,
     description: value.description,
     isLoading: !!uri,
   });
+  const [isMediaLoading, setIsMediaLoading] = useState(false);
+  const onLoad = useCallback(() => {
+    setIsMediaLoading(false);
+  }, []);
+  const isLoading = isMediaLoading || metadata.isLoading;
   useEffect(() => {
-    setMetadata({
-      image: value.image,
-      animation_url: value.animation_url,
-      nftName: value.nftName,
-      description: value.description,
-      isLoading: !!uri,
-    });
+    setMetadata((m) =>
+      m.uri === uri
+        ? m
+        : {
+            uri,
+            image: value.image,
+            animation_url: value.animation_url,
+            nftName: value.nftName,
+            description: value.description,
+            isLoading: !!uri,
+          }
+    );
   }, [value, uri]);
   useEffect(() => {
     if (uri) {
@@ -239,6 +250,7 @@ export default function NFTViewer({
           const result = await axios.get(uri);
           if (!cancelled && result && result.data) {
             setMetadata({
+              uri,
               image: result.data.image,
               animation_url: result.data.animation_url,
               nftName: result.data.name,
@@ -246,10 +258,10 @@ export default function NFTViewer({
               isLoading: false,
             });
           } else if (!cancelled) {
-            setIsLoading(false);
+            setMetadata((m) => ({ ...m, isLoading: false }));
           }
         } catch (e) {
-          setIsLoading(false);
+          setMetadata((m) => ({ ...m, isLoading: false }));
         }
       })();
       return () => {
@@ -257,13 +269,6 @@ export default function NFTViewer({
       };
     }
   }, [uri]);
-  const [isLoading, setIsLoading] = useState(true);
-  const onLoad = useCallback(() => {
-    setIsLoading(false);
-  }, []);
-  useLayoutEffect(() => {
-    setIsLoading(true);
-  }, [value, chainId]);
 
   const classes = useStyles();
   const animLower = metadata.animation_url?.toLowerCase();
@@ -282,24 +287,29 @@ export default function NFTViewer({
     animLower?.endsWith("wav") ||
     animLower?.endsWith("oga");
   const hasImage = metadata.image;
+  const copyTokenId = useCopyToClipboard(value.tokenId || "");
+  const videoSrc = hasVideo && safeIPFS(metadata.animation_url || "");
+  const imageSrc = hasImage && safeIPFS(metadata.image || "");
+  const audioSrc = hasAudio && safeIPFS(metadata.animation_url || "");
+
+  //set loading when the media src changes
+  useLayoutEffect(() => {
+    if (videoSrc || imageSrc || audioSrc) {
+      setIsMediaLoading(true);
+    } else {
+      setIsMediaLoading(false);
+    }
+  }, [videoSrc, imageSrc, audioSrc]);
+
   const image = (
     <img
-      src={safeIPFS(metadata.image || "")}
+      src={imageSrc}
       alt={metadata.nftName || ""}
       style={{ maxWidth: "100%" }}
       onLoad={onLoad}
       onError={onLoad}
     />
   );
-  const copyTokenId = useCopyToClipboard(value.tokenId || "");
-
-  //report that loading is done, if the item has no reasonable media
-  useEffect(() => {
-    if (!metadata.isLoading && !hasVideo && !hasAudio && !hasImage) {
-      setIsLoading(false);
-    }
-  }, [metadata.isLoading, hasVideo, hasAudio, hasImage]);
-
   const media = (
     <>
       {hasVideo ? (
@@ -308,10 +318,10 @@ export default function NFTViewer({
           controls
           loop
           style={{ maxWidth: "100%" }}
-          onLoad={onLoad}
+          onLoadedData={onLoad}
           onError={onLoad}
         >
-          <source src={safeIPFS(metadata.animation_url || "")} />
+          <source src={videoSrc || ""} />
           {image}
         </video>
       ) : hasImage ? (
@@ -320,8 +330,8 @@ export default function NFTViewer({
       {hasAudio ? (
         <audio
           controls
-          src={safeIPFS(metadata.animation_url || "")}
-          onLoad={onLoad}
+          src={audioSrc || ""}
+          onLoadedData={onLoad}
           onError={onLoad}
         />
       ) : null}

bridge_ui/src/icons/polygon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 38.4 33.5" style="enable-background:new 0 0 38.4 33.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8247E5;}
+</style>
+<g>
+	<path class="st0" d="M29,10.2c-0.7-0.4-1.6-0.4-2.4,0L21,13.5l-3.8,2.1l-5.5,3.3c-0.7,0.4-1.6,0.4-2.4,0L5,16.3
+		c-0.7-0.4-1.2-1.2-1.2-2.1v-5c0-0.8,0.4-1.6,1.2-2.1l4.3-2.5c0.7-0.4,1.6-0.4,2.4,0L16,7.2c0.7,0.4,1.2,1.2,1.2,2.1v3.3l3.8-2.2V7
+		c0-0.8-0.4-1.6-1.2-2.1l-8-4.7c-0.7-0.4-1.6-0.4-2.4,0L1.2,5C0.4,5.4,0,6.2,0,7v9.4c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
+		c0.7,0.4,1.6,0.4,2.4,0l5.5-3.2l3.8-2.2l5.5-3.2c0.7-0.4,1.6-0.4,2.4,0l4.3,2.5c0.7,0.4,1.2,1.2,1.2,2.1v5c0,0.8-0.4,1.6-1.2,2.1
+		L29,28.8c-0.7,0.4-1.6,0.4-2.4,0l-4.3-2.5c-0.7-0.4-1.2-1.2-1.2-2.1V21l-3.8,2.2v3.3c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
+		c0.7,0.4,1.6,0.4,2.4,0l8.1-4.7c0.7-0.4,1.2-1.2,1.2-2.1V17c0-0.8-0.4-1.6-1.2-2.1L29,10.2z"/>
+</g>
+</svg>

bridge_ui/src/icons/solana.svg

@@ -1,16 +1,15 @@
-<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="400" height="400" fill="black"/>
+<svg width="96" height="84" viewBox="0 0 96 84" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M123.42 255.13C124.173 254.302 125.09 253.641 126.113 253.188C127.135 252.735 128.242 252.501 129.36 252.5L312.64 252.65C313.421 252.652 314.184 252.88 314.837 253.307C315.49 253.734 316.006 254.342 316.32 255.056C316.635 255.77 316.735 256.561 316.609 257.331C316.483 258.101 316.136 258.818 315.61 259.395L276.58 302.37C275.827 303.198 274.909 303.86 273.885 304.313C272.862 304.766 271.755 305 270.635 305L87.3602 304.85C86.5796 304.848 85.8164 304.62 85.1631 304.193C84.5098 303.766 83.9946 303.158 83.6801 302.444C83.3655 301.73 83.2652 300.939 83.3913 300.169C83.5173 299.399 83.8643 298.682 84.3902 298.105L123.42 255.13ZM315.61 219.355C316.136 219.932 316.483 220.649 316.609 221.419C316.735 222.189 316.635 222.98 316.32 223.694C316.006 224.408 315.49 225.016 314.837 225.443C314.184 225.87 313.421 226.098 312.64 226.1L129.365 226.25C128.246 226.25 127.139 226.016 126.115 225.563C125.091 225.11 124.173 224.448 123.42 223.62L84.3902 180.62C83.8643 180.043 83.5173 179.326 83.3913 178.556C83.2652 177.786 83.3655 176.995 83.6801 176.281C83.9946 175.567 84.5098 174.959 85.1631 174.532C85.8164 174.105 86.5796 173.877 87.3602 173.875L270.64 173.725C271.759 173.726 272.865 173.96 273.888 174.413C274.911 174.866 275.828 175.527 276.58 176.355L315.61 219.355ZM123.42 97.63C124.173 96.8023 125.09 96.1408 126.113 95.6879C127.135 95.2351 128.242 95.0007 129.36 95L312.64 95.15C313.421 95.1516 314.184 95.3798 314.837 95.8069C315.49 96.234 316.006 96.8416 316.32 97.5559C316.635 98.2703 316.735 99.0606 316.609 99.8308C316.483 100.601 316.136 101.318 315.61 101.895L276.58 144.87C275.827 145.698 274.909 146.36 273.885 146.813C272.862 147.266 271.755 147.5 270.635 147.5L87.3602 147.35C86.5796 147.348 85.8164 147.12 85.1631 146.693C84.5098 146.266 83.9946 145.658 83.6801 144.944C83.3655 144.23 83.2652 143.439 83.3913 142.669C83.5173 141.899 83.8643 141.182 84.3902 140.605L123.42 97.63Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.368 64.052C17.669 63.7209 18.0359 63.4563 18.445 63.2752C18.8541 63.094 19.2966 63.0003 19.744 63L93.056 63.06C93.3682 63.0606 93.6735 63.1519 93.9349 63.3228C94.1962 63.4936 94.4023 63.7367 94.5281 64.0224C94.6539 64.3081 94.694 64.6242 94.6436 64.9323C94.5932 65.2404 94.4544 65.5273 94.244 65.758L78.632 82.948C78.3308 83.2793 77.9637 83.5441 77.5542 83.7252C77.1447 83.9064 76.7018 84 76.254 84L2.94405 83.94C2.63185 83.9394 2.32654 83.8481 2.06523 83.6772C1.80391 83.5064 1.59783 83.2634 1.47202 82.9776C1.3462 82.6919 1.30607 82.3758 1.35649 82.0677C1.40691 81.7596 1.54572 81.4727 1.75605 81.242L17.368 64.052ZM94.244 49.742C94.4544 49.9727 94.5932 50.2596 94.6436 50.5677C94.694 50.8758 94.6539 51.1919 94.5281 51.4776C94.4023 51.7634 94.1962 52.0064 93.9349 52.1772C93.6735 52.3481 93.3682 52.4394 93.056 52.44L19.746 52.5C19.2983 52.5 18.8554 52.4064 18.4459 52.2252C18.0364 52.0441 17.6693 51.7793 17.368 51.448L1.75605 34.248C1.54572 34.0173 1.40691 33.7304 1.35649 33.4223C1.30607 33.1142 1.3462 32.7981 1.47202 32.5124C1.59783 32.2266 1.80391 31.9836 2.06523 31.8128C2.32654 31.6419 2.63185 31.5506 2.94405 31.55L76.256 31.49C76.7035 31.4903 77.146 31.584 77.5551 31.7652C77.9642 31.9463 78.3311 32.2109 78.632 32.542L94.244 49.742ZM17.368 1.052C17.669 0.720916 18.0359 0.456328 18.445 0.275176C18.8541 0.0940234 19.2966 0.000298083 19.744 0L93.056 0.06C93.3682 0.0606347 93.6735 0.151917 93.9349 0.322758C94.1962 0.493599 94.4023 0.736647 94.5281 1.02238C94.6539 1.30811 94.694 1.62423 94.6436 1.93234C94.5932 2.24044 94.4544 2.52728 94.244 2.758L78.632 19.948C78.3308 20.2793 77.9637 20.5441 77.5542 20.7252C77.1447 20.9064 76.7018 21 76.254 21L2.94405 20.94C2.63185 20.9394 2.32654 20.8481 2.06523 20.6772C1.80391 20.5064 1.59783 20.2634 1.47202 19.9776C1.3462 19.6919 1.30607 19.3758 1.35649 19.0677C1.40691 18.7596 1.54572 18.4727 1.75605 18.242L17.368 1.052Z" fill="url(#paint0_linear)"/>
 </g>
 <defs>
-<linearGradient id="paint0_linear" x1="90.4202" y1="309.58" x2="309.58" y2="90.42" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear" x1="4.16805" y1="85.832" x2="91.8321" y2="-1.832" gradientUnits="userSpaceOnUse">
 <stop stop-color="#9945FF"/>
 <stop offset="0.2" stop-color="#7962E7"/>
 <stop offset="1" stop-color="#00D18C"/>
 </linearGradient>
 <clipPath id="clip0">
-<rect width="240" height="210" fill="white" transform="translate(80 95)"/>
+<rect width="96" height="84" fill="white"/>
 </clipPath>
 </defs>
 </svg>