- 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 a770f5a07..c4a85fac7 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 34a25db61..9d7c07ef6 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 4e7a2aae1..61e4ac11a 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 460711b3b..3d0649f61 100644
--- a/explorer/src/components/HeroText.tsx
+++ b/explorer/src/components/HeroText.tsx
@@ -15,7 +15,7 @@ const HeroText = ({
-
+
{Array.isArray(subtitleText) ? (
+
-
-
-
-
-
-
-
- Integrate into{" "}
-
-
- every chain at once
-
-
-
- Wormhole SDK integrates your project with our generic
- messaging layer. Wormhole SDK makes it easier than ever for
- teams, apps, protocols, and users to move value seamlessly
- across networks without fees.
-
-
-
-
+
- 
-
-
-
-
- 
-
-
-
-
-
-
- Connecting projects{" "}
-
-
- to networks
-
-
-
- Six high-value networks, two centralized exchanges, and 19 dexes.
- Anyone in the community can add new networks to the protocol
- and build the future of blockchain.
-
-
-
-
-
-
-
-
-
-
-
-
-
- build
-
-
-
- Wormhole is built to be trust-minimized from the ground up
- with the networks secured by 19 equally weighted
- guardians in the core layer.
-
-
-
-
-
-
+
+
+
+
+
+
+ Integrate into{" "}
+
+
+ every chain at once
+
+
+
+ Wormhole SDK integrates your project with our generic
+ messaging layer. Wormhole SDK makes it easier than ever for
+ teams, apps, protocols, and users to move value seamlessly
+ across networks without fees.
+
+
+
+
+
-
-
- 
-
- Send your message to Wormhole
-
-
-
-
-
-
- The Guardian network observes the transaction
-
-
-
-
-
-
- Quorum is achieved in seconds
-
-
-
-
-
-
- Guardians make your attested message publicly available.
-
-
-
-
-
-
-
- Access your message on a different chain
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ Connecting projects{" "}
+
+
+ to networks
+
+
+
+ Six high-value networks, two centralized exchanges, and 19 dexes.
+ Anyone in the community can add new networks to the protocol
+ and build the future of blockchain.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ build
+
+
+
+ Wormhole is built to be trust-minimized from the ground up
+ with a group of six networks secured by 19 equally weighted
+ guardians in the core layer.
+
+
+
+
+
+
+
+
+
+
+ Send your message to Wormhole
+
+
+
+
+
+
+ The Guardian network observes the transaction
+
+
+
+
+
+
+ Quorum is achieved in seconds
+
+
+
+
+
+
+ Guardians make your attested message publicly available.
+
+
+
+
+
+
+
+ Access your message on a different chain
+
+
+
+
diff --git a/explorer/src/pages/explorer.tsx b/explorer/src/pages/explorer.tsx
index af7814290..901d8b3e5 100644
--- a/explorer/src/pages/explorer.tsx
+++ b/explorer/src/pages/explorer.tsx
@@ -8,6 +8,7 @@ import Layout from "../components/Layout";
import NetworkSelect from "../components/NetworkSelect";
import shape1 from "../images/index/shape1.svg";
import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
interface ExplorerQueryValues {
@@ -70,6 +71,20 @@ const ExplorerPage = ({ location }: PageProps) => {
pathname={location.pathname}
/>
+ {
]}
/>
+
+
{
-
+
- {doneReadingQueryParams && <>
+ {doneReadingQueryParams && <>
-
);
diff --git a/explorer/src/pages/index.tsx b/explorer/src/pages/index.tsx
index 2a6f5b0f7..6e66597ae 100644
--- a/explorer/src/pages/index.tsx
+++ b/explorer/src/pages/index.tsx
@@ -1,29 +1,46 @@
import ArrowForward from "@mui/icons-material/ArrowForward";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Grid, Typography } from "@mui/material";
import {
Link as RouterLink,
PageProps,
graphql,
useStaticQuery
} from "gatsby";
-import * as React from "react";
+import React, { useEffect, useState } from "react";
import GridWithCards from "../components/GridWithCards";
import HeroText from "../components/HeroText";
import Layout from "../components/Layout";
import { SEO } from "../components/SEO";
import { portal as portalUrl } from "../utils/urls";
-import apps from "../images/index/apps.png";
+
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import apps from "../images/index/apps2.png";
import blob from "../images/index/blob.svg";
import cross from "../images/index/cross.svg";
import cube from "../images/index/cube.svg";
import portal from "../images/index/portal.png";
-import protocols from "../images/index/protocols.png";
+import protocols from "../images/index/protocol_new.png";
import shape1 from "../images/index/shape1.svg";
+import shape from "../images/shape.png";
+import shape2 from "../images/shape2.png";
+import { Totals, NotionalTvl } from "../components/ExplorerStats/ExplorerStats";
+import { amountFormatter } from "../utils/explorer";
-const featuredNumber = { fontSize: 42, fontWeight: "bold" };
+const featuredNumber = { fontSize: 42, fontFamily: "Suisse BP Intl", fontWeight: "bold" };
+const statsBaseUrl = "https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-"
const IndexPage = ({ location }: PageProps) => {
const { site } = useStaticQuery(IndexStaticQuery)
+ const [tvl, setTvl] = useState(undefined)
+ const [messageTotal, setMessageTotal] = useState(undefined)
+
+ let statsInterval: NodeJS.Timer | undefined = undefined
+ const controller = new AbortController()
+ const { signal } = controller
+
+
const logo = {
"@type": "ImageObject",
"url": `${site.siteMetadata.siteUrl}/logo-and-name-stacked.png`,
@@ -69,6 +86,78 @@ const IndexPage = ({ location }: PageProps) => {
logo: logo
}
+ const headerImage = React.useRef(null);
+ const gradient1 = React.useRef(null);
+ const gradient2 = React.useRef(null);
+
+
+ function fetchStats() {
+ const tvlUrl = `${statsBaseUrl}notionaltvl`
+ const messagesUrl = `${statsBaseUrl}totals`
+
+ fetch(tvlUrl, { signal }).then((res) => {
+ if (res.ok) return res.json();
+ }).then((result: NotionalTvl) => {
+ setTvl(result.AllTime["*"]["*"].Notional);
+ }, (error) => {
+ if (error.name !== "AbortError") console.error("failed fetching notional TVL. error: ", error);
+ });
+ fetch(messagesUrl, { signal }).then((res) => {
+ if (res.ok) return res.json();
+ }).then((result: Totals) => {
+ setMessageTotal(result.TotalCount["*"]);
+ }, (error) => {
+ if (error.name !== "AbortError") console.error("failed fetching totals. error: ", error);
+ });
+ }
+
+ useEffect(() => {
+ statsInterval = setInterval(fetchStats, 30000)
+
+ gsap.registerPlugin(ScrollTrigger);
+
+
+ gsap.from(headerImage.current, {
+ scale: 1.1,
+ duration: 10,
+ delay: 1,
+ rotation: 3,
+ ease: "Power3.easeOut",
+ })
+
+ gsap.to(gradient1.current, {
+ scale: 1.2,
+ ease: "Power3.easeOut",
+ x: 300,
+ scrollTrigger: {
+ trigger: gradient1.current,
+ start: "-0% 0%",
+ end: "+=500",
+ scrub: 1,
+ },
+ })
+
+ gsap.from(gradient2.current, {
+ scale: 0.5,
+ ease: "Power3.easeOut",
+ scrollTrigger: {
+ trigger: gradient2.current,
+ start: "-50% 50%",
+ end: "+=1000",
+ scrub: 1,
+ },
+ })
+
+ return function cleanup() {
+ // clear any ongoing intervals
+ if (statsInterval) {
+ clearInterval(statsInterval);
+ }
+ // abort any in-flight requests
+ controller.abort();
+ }
+ }, [])
+
return (
{
{
justifyContent: "center",
}}
>
- {
borderTop: "1px solid white",
}}
>
- $1bn
+ ${amountFormatter(tvl)}
in TVL
-
+ }
{
7
chain integrations
- {
borderTop: "1px solid white",
}}
>
- 60k+
+
+ {amountFormatter(messageTotal, 0)}
+
txs
-
+ }
-
+
+
+
+
-
-
-
-
- Protocol:{" "}
-
-
- the core layer
-
-
-
- The foundation that an ecosystem of apps is built on top of.
-
- }
- >
- Learn More
-
-
-
-
+ />
+
+
+
+
+ Protocol:{" "}
+
+
+ the core layer
+
+
+
+ The foundation that an ecosystem of apps is built on top of.
+
+ }
+ >
+ Learn More
+
+
+
+
+
+
+
+
{
-
+
+
-
-
-
-
- Portal:{" "}
-
-
- a token bridge
-
-
-
- Never have to retrace your steps, with unlimited transfers
- across chains for tokens and NFTs wrapped by Wormhole.
-
- }
- >
- Learn More
-
+
+
+
+
+
+ Portal:{" "}
+
+
+ a token bridge
+
+
+
+ Never have to retrace your steps, with unlimited transfers
+ across chains for tokens and NFTs wrapped by Wormhole.
+
+ }
+ >
+ Learn More
+
+
-
-
-
+
+
+
@@ -335,7 +506,7 @@ const IndexPage = ({ location }: PageProps) => {
everything
-
+
Each blockchain has a distinct strength. Wormhole lets you get the
best out of every blockchain without compromise.
@@ -345,18 +516,21 @@ const IndexPage = ({ location }: PageProps) => {
data={[
{
src: cross,
+ size: 220,
header: "Never stop expanding",
description:
"Chains, information, and users are growing everyday. Build on a protocol that is set up to scale, with no limits, right from the start.",
},
{
src: blob,
+ size: 220,
header: "Explore and experiment",
description:
"Now is the time to explore and experiment. The only limit to what you're able to build is your imagination.",
},
{
src: cube,
+ size: 220,
header: "Power your project",
description:
"Join the growing list of projects that are composing, raising, and succeeding with Wormhole core layer.",
@@ -364,6 +538,7 @@ const IndexPage = ({ location }: PageProps) => {
]}
/>
+
);
};
diff --git a/explorer/src/pages/network.tsx b/explorer/src/pages/network.tsx
index 2a975d583..ec48251d7 100644
--- a/explorer/src/pages/network.tsx
+++ b/explorer/src/pages/network.tsx
@@ -29,6 +29,7 @@ import { ChainId } from "@certusone/wormhole-sdk";
import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
import { ChainID } from "../utils/consts";
import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
const GuardianRow = ({ hb }: { hb: Heartbeat }) => {
const [open, setOpen] = React.useState(false);
@@ -218,6 +219,20 @@ const NetworkPage = ({ location }: PageProps) => {
pathname={location.pathname}
/>
+ {
]}
/>
+
+
+
);
};
diff --git a/explorer/src/styles/global.css b/explorer/src/styles/global.css
new file mode 100644
index 000000000..7856667ce
--- /dev/null
+++ b/explorer/src/styles/global.css
@@ -0,0 +1,34 @@
+/* @font-face {
+ font-family: "Suisse BP Intl";
+ src: url('../fonts/SuisseBPIntlLight.woff2') format('woff2');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Suisse BP Intl Antique";
+ src: url('../fonts/SuisseBPIntlAntique.woff2') format('woff2');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+} */
+
+@font-face {
+ font-family: "Suisse BP Intl";
+ src: url('../fonts/SuisseBPIntlBold.woff2') format('woff2');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* @font-face {
+ font-family: "Suisse BP Intl";
+ src: url('../fonts/SuisseBPIntlRegular.woff2') format('woff2');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+} */
+
+
+
diff --git a/explorer/src/utils/urls.ts b/explorer/src/utils/urls.ts
index 7eeaa4672..476e3ce31 100644
--- a/explorer/src/utils/urls.ts
+++ b/explorer/src/utils/urls.ts
@@ -4,6 +4,7 @@ export const apps = "/apps/";
export const buidl = "/buidl/";
export const explorer = "/explorer/";
export const network = "/network/";
+export const brand = "/brand/";
// External
export const portal = "https://wormholebridge.com/";
@@ -14,3 +15,21 @@ export const discord = "https://discord.gg/wormholecrypto";
export const github = "https://github.com/certusone/wormhole";
export const telegram = "https://t.me/wormholecrypto";
export const twitter = "https://twitter.com/wormholecrypto";
+
+
+
+// Brand
+
+export const logopackage = "https://drive.google.com/drive/folders/13I4_XdW8D0c1wMT_W2pie1cm6B4-57l3?usp=sharing";
+export const colors = "https://drive.google.com/drive/folders/1GOUAh5gCG41mBXCiPDSIGzIEdM8pQTsW?usp=sharing";
+export const icons = "https://drive.google.com/drive/folders/1UKLfHPwmssU8WBnAQckWD_WFriq5ntuE?usp=sharing";
+export const assets = "https://drive.google.com/drive/folders/1r3lCaTT44SX2sOf2njuwO8GmWQQnAlhF?usp=sharing";
+export const logonamesvg = "https://drive.google.com/drive/folders/16urPGWs5mC9e9F0CKuZSwwdQe-R5cvZ8?usp=sharing";
+export const logonamepng = "https://drive.google.com/drive/folders/12Ayj3ya0oBKI-ohI-BBTbtFMREnpBJJj?usp=sharing";
+export const logopng = "https://drive.google.com/drive/folders/1Upxwp2l9PTsjhBy6kYGpjo0YeSB8h-r4?usp=sharing";
+export const logosvg = "https://drive.google.com/drive/folders/1DMBmdv4wL-k6keVFUXV8NC9krGOtx6xC?usp=sharing";
+export const wormpng1 = "https://drive.google.com/file/d/1mqbbfvKoUD61dT0ojcMB2t3qL19TYZml/view?usp=sharing";
+export const wormpng2 = "https://drive.google.com/file/d/1BuYdcOuVD9s9ZVPyQBr6DEHbXnPDYN9y/view?usp=sharing";
+export const gradients = "https://drive.google.com/drive/folders/1XWIL47NhrMB_eWRtm3AnWKnI4m_mNbl2?usp=sharing";
+export const gradient2svg = "https://drive.google.com/drive/folders/1ZBV1hJMjvd6BKYnNYRx92E_PK5rTpzbf?usp=sharing";
+export const contact = "https://wormholebridge.com/";