From a20b6adb1875ded089ccf2bc80859fb3e6d02e98 Mon Sep 17 00:00:00 2001 From: justinschuldt Date: Wed, 23 Feb 2022 17:10:05 -0600 Subject: [PATCH] all the changes from Tibi and Adrian --- explorer/.env.development | 2 +- explorer/.env.production | 2 +- explorer/.env.sample | 2 +- explorer/gatsby-browser.js | 5 +- explorer/package-lock.json | 11 + explorer/package.json | 1 + .../gatsby-plugin-top-layout/TopLayout.js | 60 +- .../ExplorerStats/ChainOverviewCard.tsx | 6 +- .../ExplorerStats/DailyCountBarChart.tsx | 2 +- .../ExplorerStats/DailyNotionalBarChart.tsx | 2 +- .../ExplorerStats/ExplorerStats.tsx | 23 +- .../components/ExplorerStats/PastWeekCard.tsx | 2 +- explorer/src/components/Footer.tsx | 32 +- explorer/src/components/GridWithCards.tsx | 26 +- explorer/src/components/HeroText.tsx | 2 +- explorer/src/components/Layout.tsx | 2 +- explorer/src/components/Navbar.tsx | 30 +- explorer/src/components/SEO.tsx | 3 +- explorer/src/fonts/SuisseBPIntlAntique.woff2 | Bin 0 -> 30916 bytes explorer/src/fonts/SuisseBPIntlBold.woff2 | Bin 0 -> 31060 bytes explorer/src/fonts/SuisseBPIntlLight.woff2 | Bin 0 -> 30684 bytes explorer/src/fonts/SuisseBPIntlRegular.woff2 | Bin 0 -> 30572 bytes explorer/src/images/apps/swim.png | Bin 10536 -> 8526 bytes explorer/src/images/bg.svg | 28 + explorer/src/images/brand/gradient1.svg | 19 + explorer/src/images/brand/gradient2.svg | 38 + explorer/src/images/brand/icons1.png | Bin 0 -> 148358 bytes explorer/src/images/brand/icons2.svg | 267 ++++++ explorer/src/images/brand/logo-name.svg | 23 + explorer/src/images/brand/logo.svg | 10 + explorer/src/images/brand/logos.svg | 66 ++ explorer/src/images/brand/world.svg | 252 ++++++ explorer/src/images/brand/worm1.png | Bin 0 -> 13882 bytes explorer/src/images/brand/worm2.png | Bin 0 -> 17150 bytes explorer/src/images/index/apps2.png | Bin 0 -> 85581 bytes explorer/src/images/index/portal.png | Bin 60232 -> 111613 bytes explorer/src/images/index/protocol.png | Bin 0 -> 277483 bytes explorer/src/images/index/protocol_new.png | Bin 0 -> 400491 bytes explorer/src/images/index/protocols.png | Bin 41121 -> 0 bytes explorer/src/images/shape.png | Bin 0 -> 456933 bytes explorer/src/images/shape2.png | Bin 0 -> 488920 bytes explorer/src/images/wormhole.png | Bin 0 -> 270135 bytes explorer/src/pages/apps.tsx | 231 +++-- explorer/src/pages/brand.tsx | 828 ++++++++++++++++++ explorer/src/pages/buidl.tsx | 445 ++++++---- explorer/src/pages/explorer.tsx | 68 +- explorer/src/pages/index.tsx | 393 ++++++--- explorer/src/pages/network.tsx | 47 + explorer/src/styles/global.css | 34 + explorer/src/utils/urls.ts | 19 + 50 files changed, 2574 insertions(+), 407 deletions(-) create mode 100644 explorer/src/fonts/SuisseBPIntlAntique.woff2 create mode 100644 explorer/src/fonts/SuisseBPIntlBold.woff2 create mode 100644 explorer/src/fonts/SuisseBPIntlLight.woff2 create mode 100644 explorer/src/fonts/SuisseBPIntlRegular.woff2 create mode 100644 explorer/src/images/bg.svg create mode 100644 explorer/src/images/brand/gradient1.svg create mode 100644 explorer/src/images/brand/gradient2.svg create mode 100644 explorer/src/images/brand/icons1.png create mode 100644 explorer/src/images/brand/icons2.svg create mode 100644 explorer/src/images/brand/logo-name.svg create mode 100644 explorer/src/images/brand/logo.svg create mode 100644 explorer/src/images/brand/logos.svg create mode 100644 explorer/src/images/brand/world.svg create mode 100644 explorer/src/images/brand/worm1.png create mode 100644 explorer/src/images/brand/worm2.png create mode 100644 explorer/src/images/index/apps2.png create mode 100644 explorer/src/images/index/protocol.png create mode 100644 explorer/src/images/index/protocol_new.png delete mode 100644 explorer/src/images/index/protocols.png create mode 100644 explorer/src/images/shape.png create mode 100644 explorer/src/images/shape2.png create mode 100644 explorer/src/images/wormhole.png create mode 100644 explorer/src/pages/brand.tsx create mode 100644 explorer/src/styles/global.css diff --git a/explorer/.env.development b/explorer/.env.development index 6d01f558..0cf43329 100644 --- a/explorer/.env.development +++ b/explorer/.env.development @@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one -GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090 +GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/ GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet- GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet- diff --git a/explorer/.env.production b/explorer/.env.production index b149b2d5..d70832fe 100644 --- a/explorer/.env.production +++ b/explorer/.env.production @@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one -GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090 +GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/ GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet- GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet- diff --git a/explorer/.env.sample b/explorer/.env.sample index 5fffd3b7..b1b14615 100644 --- a/explorer/.env.sample +++ b/explorer/.env.sample @@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one -GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090 +GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/ GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet- GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet- diff --git a/explorer/gatsby-browser.js b/explorer/gatsby-browser.js index 37c44a78..73eef75f 100644 --- a/explorer/gatsby-browser.js +++ b/explorer/gatsby-browser.js @@ -1 +1,4 @@ -import "@fontsource/poppins"; // Defaults to weight 400 with all styles included. +// import "@fontsource/poppins"; // Defaults to weight 400 with all styles included. +import "@fontsource/poppins/300.css"; +import "@fontsource/poppins/400.css"; +import "./src/styles/global.css"; // bug loading multiple fonts in MuiCssBaseline diff --git a/explorer/package-lock.json b/explorer/package-lock.json index f1939df4..6698f04e 100644 --- a/explorer/package-lock.json +++ b/explorer/package-lock.json @@ -28,6 +28,7 @@ "gatsby-plugin-react-helmet": "^5.4.0", "gatsby-plugin-robots-txt": "^1.6.14", "gatsby-plugin-sitemap": "^5.4.0", + "gsap": "3.9.1", "javascript-time-ago": "^2.3.10", "path-browserify": "^1.0.1", "react": "^17.0.1", @@ -12003,6 +12004,11 @@ "graphql": ">=0.11 <=15" } }, + "node_modules/gsap": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz", + "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w==" + }, "node_modules/gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -29481,6 +29487,11 @@ "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", "requires": {} }, + "gsap": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz", + "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w==" + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", diff --git a/explorer/package.json b/explorer/package.json index 2dd57d3c..3e573d5e 100644 --- a/explorer/package.json +++ b/explorer/package.json @@ -30,6 +30,7 @@ "gatsby-plugin-react-helmet": "^5.4.0", "gatsby-plugin-robots-txt": "^1.6.14", "gatsby-plugin-sitemap": "^5.4.0", + "gsap": "3.9.1", "javascript-time-ago": "^2.3.10", "path-browserify": "^1.0.1", "react": "^17.0.1", diff --git a/explorer/plugins/gatsby-plugin-top-layout/TopLayout.js b/explorer/plugins/gatsby-plugin-top-layout/TopLayout.js index d3cbe59f..738d9505 100644 --- a/explorer/plugins/gatsby-plugin-top-layout/TopLayout.js +++ b/explorer/plugins/gatsby-plugin-top-layout/TopLayout.js @@ -8,6 +8,10 @@ import TimeAgo from "javascript-time-ago"; import en from "javascript-time-ago/locale/en"; import React from "react"; import { NetworkContextProvider } from "../../src/contexts/NetworkContext"; +import bg from "../../src/images/bg.svg"; +import { Helmet } from "react-helmet"; + +import Suisse from "../../src/fonts/SuisseBPIntlBold.woff2"; TimeAgo.addDefaultLocale(en); @@ -21,13 +25,54 @@ let theme = createTheme({ typography: { fontFamily: ["Poppins", "Arial"].join(","), fontSize: 13, + body1: { + fontWeight: 300, + }, + body2: { + fontWeight: 300, + }, h1: { fontWeight: "bold", + fontFamily: ["Suisse BP Intl", "Arial"], + lineHeight: 0.9, + letterSpacing: -2.7, + }, + h3: { + fontSize: 49, + fontWeight: "bold", + fontFamily: "Suisse BP Intl", + lineHeight: 0.9, + letterSpacing: -1.47, + }, + h4: { + fontSize: 40, + fontWeight: "bold", + fontFamily: "Suisse BP Intl", + letterSpacing: -1.2, + lineHeight: 0.9, + }, + caption: { + textTransform: "uppercase", + fontSize: 8, + letterSpacing: 2, + fontFamily: "Suisse BP Intl", + fontWeight: 400, + display: "block", + marginTop: 10, }, }, + components: { MuiCssBaseline: { styleOverrides: { + body: { + overscrollBehaviorY: "none", + backgroundColor: "#17153f", + backgroundImage: `url(${bg})`, + backgroundPosition: "top center", + backgroundRepeat: "repeat-y", + backgroundSize: "120%", + }, ul: { paddingLeft: "0px", }, @@ -57,9 +102,9 @@ let theme = createTheme({ fontSize: 12, fontWeight: 700, letterSpacing: 1.5, - padding: "8px 22.5px 6px", + padding: "8px 22.5px 8px", "&:hover .MuiButton-endIcon": { - marginLeft: 16, + transform: "translateX(4px)", }, }, contained: { @@ -73,7 +118,7 @@ let theme = createTheme({ }, endIcon: { marginLeft: 12, - transition: "margin-left 300ms", + transition: "transform 300ms", }, }, }, @@ -100,6 +145,15 @@ theme = responsiveFontSizes(theme); const TopLayout = ({ children }) => ( + + + {children} diff --git a/explorer/src/components/ExplorerStats/ChainOverviewCard.tsx b/explorer/src/components/ExplorerStats/ChainOverviewCard.tsx index 2af6d822..1ebd94af 100644 --- a/explorer/src/components/ExplorerStats/ChainOverviewCard.tsx +++ b/explorer/src/components/ExplorerStats/ChainOverviewCard.tsx @@ -74,7 +74,7 @@ const ChainOverviewCard: React.FC = ({
- received + received
)} @@ -99,7 +99,7 @@ const ChainOverviewCard: React.FC = ({
- sent + sent
) : ( @@ -124,7 +124,7 @@ const ChainOverviewCard: React.FC = ({
- messages + messages
)} diff --git a/explorer/src/components/ExplorerStats/DailyCountBarChart.tsx b/explorer/src/components/ExplorerStats/DailyCountBarChart.tsx index a770f5a0..c4a85fac 100644 --- a/explorer/src/components/ExplorerStats/DailyCountBarChart.tsx +++ b/explorer/src/components/ExplorerStats/DailyCountBarChart.tsx @@ -49,7 +49,7 @@ const DailyCountBarChart = (props: DailyCountProps) => { const today = new Date().toISOString().slice(0, 10); return ( -
+
Messages/Day { const today = new Date().toISOString().slice(0, 10) return ( -
+
value received (USD) = ({ signal: AbortSignal ) => { const totalsUrl = `${baseUrl}totals`; - let url = `${totalsUrl}?${daysSinceDataStart}&daily=true` + let url = `${totalsUrl}?&daily=true&last24Hours=true` if (groupBy) { url = `${url}&groupBy=${groupBy}`; } @@ -402,6 +422,7 @@ const ExplorerStats: React.FC = ({ useEffect(() => { return function cleanup() { + controller.abort(); if (pollInterval) { clearInterval(pollInterval); } diff --git a/explorer/src/components/ExplorerStats/PastWeekCard.tsx b/explorer/src/components/ExplorerStats/PastWeekCard.tsx index 34a25db6..9d7c07ef 100644 --- a/explorer/src/components/ExplorerStats/PastWeekCard.tsx +++ b/explorer/src/components/ExplorerStats/PastWeekCard.tsx @@ -76,7 +76,7 @@ const PastWeekCard: React.FC = ({ > - {/* */} +
( + <> + ( background: `url(${shape})`, backgroundRepeat: "no-repeat", backgroundPosition: { xs: "center center", md: "right top -426px" }, - // backgroundSize: "cover", width: "100%", height: { xs: "100%", md: 540 }, + bottom:0 }} /> + ( > Blog + + Brand + ( + + ); export default Footer; diff --git a/explorer/src/components/GridWithCards.tsx b/explorer/src/components/GridWithCards.tsx index 4e7a2aae..61e4ac11 100644 --- a/explorer/src/components/GridWithCards.tsx +++ b/explorer/src/components/GridWithCards.tsx @@ -1,3 +1,4 @@ +import { Block } from "@mui/icons-material"; import { Card, CardActionArea, @@ -12,6 +13,7 @@ import { OutboundLink } from "gatsby-plugin-google-gtag"; import React from "react"; interface CardData { + key?: string; src: string; header: string; @@ -19,6 +21,7 @@ interface CardData { href?: string; to?: string; imgStyle?: React.CSSProperties | undefined; + size: number; } const GridWithCards = ({ @@ -56,17 +59,16 @@ const GridWithCards = ({ justifyContent="space-evenly" sx={{ "& > .MuiGrid-item": { pt: { xs: 8.25, md: 5.25 } } }} > - {data.map(({ key, src, header, description, href, to, imgStyle }) => ( + {data.map(({ key, src, header, description, size, href, to, imgStyle }) => ( div": { + display: 'flex', + flexDirection: 'column', + "& > *": { + width: '100%', transition: { md: "300ms top" }, }, "&:hover > div": { @@ -97,17 +102,18 @@ const GridWithCards = ({ sx={{ textAlign: { xs: "center", md: imgAlignMd }, position: "relative", - right: { xs: null, md: imgOffsetRightMd }, + marginRight: { xs: 'auto', md: imgOffsetRightMd }, + marginLeft: { xs: 'auto' }, top: { xs: imgOffsetTopXs, md: imgOffsetTopMd }, - pb: { xs: imgPaddingBottomXs, md: imgPaddingBottomMd }, + mb: { xs: imgPaddingBottomXs, md: imgPaddingBottomMd }, zIndex: 1, + width: size, + height: size, }} > - - {header} - + {header} {description} diff --git a/explorer/src/components/HeroText.tsx b/explorer/src/components/HeroText.tsx index 460711b3..3d0649f6 100644 --- a/explorer/src/components/HeroText.tsx +++ b/explorer/src/components/HeroText.tsx @@ -15,7 +15,7 @@ const HeroText = ({ - + {Array.isArray(subtitleText) ? ( ) : ( diff --git a/explorer/src/components/Layout.tsx b/explorer/src/components/Layout.tsx index e0af63d1..5b4965e9 100644 --- a/explorer/src/components/Layout.tsx +++ b/explorer/src/components/Layout.tsx @@ -3,7 +3,7 @@ import Footer from "./Footer"; import NavBar from "./Navbar"; const Layout: React.FC = ({ children }) => ( -
+
{children}