Explorer web app redesign.

Change-Id: Ida60941497f2eb0760e3623ac13ef123eaefabd1
This commit is contained in:
jschuldt 2021-07-23 18:21:59 -05:00 committed by Justin Schuldt
parent 67793cd144
commit 576ff0cabf
52 changed files with 34553 additions and 3123 deletions

View File

@ -7,3 +7,6 @@ GATSBY_APP_RPC_URL=http://localhost:8080
# Profiling
ENABLE_BUNDLE_ANALYZER=0
# Feature flags
ENABLE_NETWORK_PAGE=true

View File

@ -58,6 +58,8 @@ module.exports = {
camelcase: 0,
// Prevents exclusion of tests from passing lint check
'no-only-tests/no-only-tests': 'error',
// dont enforce semicolon usage either way
semi: 0
},
// https://eslint.org/docs/user-guide/configuring#report-unused-eslint-disable-comments

View File

@ -1,5 +1,6 @@
{
"$schema": "http://json.schemastore.org/prettierrc",
"singleQuote": true,
"trailingComma": "es5"
"trailingComma": "es5",
"semi": false
}

View File

@ -20,46 +20,65 @@
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
"preLaunchTask": {"type": "npm", "script": "clean"},
"args": ["develop"],
"preLaunchTask": {
"type": "npm",
"script": "clean"
},
"args": [
"develop"
],
"stopOnEntry": false,
"runtimeArgs": ["--nolazy", "--max-http-header-size=16385"],
"runtimeArgs": [
"--nolazy",
"--max-http-header-size=16385"
],
"sourceMaps": false,
"env": {
"NODE_OPTIONS": "-r esm"
}
},
{
},
{
// for debugging gatsby via it's 'debug' command
"name": "Gatsby debug",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
"preLaunchTask": {"type": "npm", "script": "clean"},
"args": ["debug"],
"preLaunchTask": {
"type": "npm",
"script": "clean"
},
"args": [
"debug"
],
"stopOnEntry": false,
"runtimeArgs": ["--nolazy", "--inspect-brk"],
"runtimeArgs": [
"--nolazy",
"--inspect-brk"
],
"sourceMaps": false,
"env": {
"NODE_OPTIONS": "-r esm"
}
},
{
},
{
// for debugging the gatsby build process
"name": "Gatsby build",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
"args": ["build"],
"args": [
"build"
],
"stopOnEntry": false,
"sourceMaps": false,
"env": {
"NODE_OPTIONS": "-r esm"
"NODE_OPTIONS": "-r esm",
"NODE_ENV": "production"
}
},
{
},
{
"type": "node",
"request": "launch",
"name": "translate.ts",
@ -75,4 +94,4 @@
}
}
]
}
}

View File

@ -44,6 +44,33 @@ const plugins = [
},
},
},
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: process.env.GATSBY_SITE_URL,
sitemap: `${process.env.GATSBY_SITE_URL}/sitemap.xml`,
policy: [{ userAgent: '*', allow: '/' }]
}
},
{
resolve: "gatsby-plugin-sitemap",
options: {
serialize: ({ site, allSitePage }) => {
// filter out pages that do not include a locale, along with locale specific 404 pages.
const edges = allSitePage.edges.filter(page => languages.some(lang => page.node.path.includes(lang)) && !page.node.path.includes('404'))
// return sitemap entries
return edges.map(page => {
return {
url: `${site.siteMetadata.siteUrl}${page.node.path}`,
// changefreq: `daily`,
// priority: 0.7,
// lastmod: modifiedGmt,
}
})
},
exclude: process.env.ENABLE_NETWORK_PAGE !== 'true' ? ['/*/network/'] : []
},
},
];
// Bundle analyzer, dev only
@ -51,4 +78,8 @@ if (process.env.ENABLE_BUNDLE_ANALYZER === '1') {
plugins.push('gatsby-plugin-webpack-bundle-analyser-v2');
}
export { plugins };
const siteMetadata = {
siteUrl: process.env.GATSBY_SITE_URL,
}
export { plugins, siteMetadata };

36236
explorer/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -26,7 +26,7 @@
"setupTestFrameworkScriptFile": "<rootDir>/setup-test-env.js"
},
"scripts": {
"build": "NODE_OPTIONS='-r esm' gatsby build",
"build": "npm run clean && NODE_ENV=production NODE_OPTIONS='-r esm' gatsby build",
"clean": "rm -rf public && rm -rf .cache",
"dev": "npm run clean && NODE_OPTIONS='-r esm' node --max-http-header-size=16385 node_modules/.bin/gatsby develop --port=8001",
"debug": "npm run clean && NODE_OPTIONS='-r esm' node --nolazy --inspect-brk node_modules/.bin/gatsby develop",
@ -45,9 +45,12 @@
"storybook": "NODE_OPTIONS='-r esm' gatsby build && NODE_OPTIONS='-r esm' start-storybook",
"storybook:build": "NODE_OPTIONS='-r esm' gatsby build && build-storybook -c .storybook -o .out",
"translate:deepl": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=deepl -c",
"translate:google": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=google-translate -c"
"translate:google": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=google-translate -c",
"generate-protos": "../generate-web-protos.sh"
},
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@fontsource/sora": "^4.5.0",
"@improbable-eng/grpc-web": "^0.14.0",
"@reach/router": "^1.3.1",
"@svgr/webpack": "^5.1.0",
@ -63,6 +66,8 @@
"gatsby-plugin-less": "4.6.0",
"gatsby-plugin-react-helmet": "^3.1.22",
"gatsby-plugin-remove-serviceworker": "^1.0.0",
"gatsby-plugin-robots-txt": "^1.6.8",
"gatsby-plugin-sitemap": "^2.12.0",
"gatsby-plugin-svgr": "^2.0.2",
"gatsby-plugin-typescript": "^2.1.27",
"react": "^16.12.0",

View File

@ -1,4 +1,24 @@
export default {
'primary-color': '#546e7a',
// antd variables. see https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
'font-family':
"-apple-system, BlinkMacSystemFont, 'Sora', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
'body-background': '#010114',
'component-background': '@body-background',
'primary-color': '#00EFD8',
'highlight-color': '#0074FF',
// 'processing-color': '#',
'menu-item-font-size': '18px',
'border-divider-color': 'darken(#808088, 20%)',
'link-color': 'lighten(@primary-color, 20%);', // lighten for proper contrast
'menu-dark-color': '@text-color-dark',
// make the header the same color as the body
'layout-header-background': '@layout-body-background',
'menu-dark-bg': '@layout-body-background',
'menu-dark-inline-submenu-bg': '@layout-body-background',
'menu-inline-submenu-bg': '@layout-body-background',
'menu-popup-bg': '@layout-body-background',
// global wormhole variables (not antd overrides)
'max-content-width': '1400px',
'blue-background': '#141449',
};

View File

@ -1,11 +1,18 @@
// import theme to get antd less variables + overrides from AntdTheme.js
@import "~antd/lib/style/themes/dark";
html {
scroll-behavior: smooth;
}
/* the selector matches and external link (ie. starting with http),
not including links to the current domain */
[href^="http"]:not(.no-external-icon)::after {
content: "(external link)";
display: inline-block;
width: 1.1em;
height: 1.1em;
text-indent: 1em;
width: 0.8em;
height: 0.8em;
text-indent: 0.8em;
white-space: nowrap;
overflow: hidden;
background-image: url(../../icons/external.svg);
@ -15,7 +22,30 @@ not including links to the current domain */
margin-left: 0.3em;
}
// see if it's possible to use these in other less files
@header-height: 64px;
@footer-height: 88px;
@content-height: calc(~"100vh - (@{header-height} + @{footer-height})");
// classes used throughout
.full-width {
width: '100%'
}
.max-content-width {
max-width: @max-content-width;
}
.center-content {
display: flex;
justify-content: center;
}
.blue-background {
background-color: @blue-background;
}
.responsive-padding {
// small left padding for mobile, more left padding for larger screens.
@media only screen and (min-width: 767px) {
padding: 0px 16px 0px 160px;
}
@media only screen and (max-width: 767px) {
padding: 0px 16px 0px 16px;
}
}
.background-mask-from-left {
background: linear-gradient(to right, @body-background, rgba(@body-background, 0));
}

View File

@ -1,5 +1,7 @@
import { ReactNode } from 'react';
import "@fontsource/sora"
import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'

View File

@ -13,18 +13,19 @@ import { ReactComponent as TerraIcon } from '~/icons/terra.svg';
import './GuardiansTable.less'
// TODO: find SOT for network enums
const networkEnums = ['Terra', 'Solana', 'Ethereum']
const networkEnums = ['', 'Solana', 'Ethereum', 'Terra']
const networkIcons = [
<TerraIcon key="1" style={{ height: 18, margin: '0 4px' }} />,
<></>,
<SolanaIcon key="2" style={{ height: 18, margin: '0 4px' }} />,
<EthereumIcon key="3" style={{ height: 24, margin: '0 4px' }} />
<EthereumIcon key="3" style={{ height: 24, margin: '0 4px' }} />,
<TerraIcon key="1" style={{ height: 18, margin: '0 4px' }} />,
]
const expandedRowRender = (intl: IntlShape) => (item: Heartbeat) => {
const columns: ColumnsType<Heartbeat_Network> = [
{ title: '', dataIndex: 'id', key: 'icon', render: (id: number) => networkIcons[id] },
{ title: intl.formatMessage({ id: 'network.network' }), dataIndex: 'id', key: 'id', responsive: ['md'],
{
title: intl.formatMessage({ id: 'network.network' }), dataIndex: 'id', key: 'id', responsive: ['md'],
render: (id: number) => networkEnums[id]
},
{ title: intl.formatMessage({ id: 'network.address' }), dataIndex: 'bridgeAddress', key: 'bridgeAddress' },
@ -43,15 +44,18 @@ const expandedRowRender = (intl: IntlShape) => (item: Heartbeat) => {
const GuardiansTable = ({ heartbeats, intl }: { heartbeats: { [nodeName: string]: Heartbeat }, intl: IntlShape }) => {
const columns: ColumnsType<Heartbeat> = [
{ title: intl.formatMessage({ id: 'network.guardian' }), key: 'guardian',
{
title: intl.formatMessage({ id: 'network.guardian' }), key: 'guardian',
render: (item: Heartbeat) => <>{item.nodeName}<br />{item.guardianAddr}</>
},
{ title: intl.formatMessage({ id: 'network.version' }), dataIndex: 'version', key: 'version', responsive: ['lg'] },
{ title: intl.formatMessage({ id: 'network.networks' }), dataIndex: 'networks', key: 'networks', responsive: ['md'],
{
title: intl.formatMessage({ id: 'network.networks' }), dataIndex: 'networks', key: 'networks', responsive: ['md'],
render: (networks: Heartbeat_Network[]) => networks.map(network => networkIcons[network.id])
},
{ title: intl.formatMessage({ id: 'network.heartbeat' }), dataIndex: 'counter', key: 'counter', responsive: ['xl'] },
{ title: intl.formatMessage({ id: 'network.lastHeartbeat' }), dataIndex: 'timestamp', key: 'timestamp', responsive: ['sm'],
{
title: intl.formatMessage({ id: 'network.lastHeartbeat' }), dataIndex: 'timestamp', key: 'timestamp', responsive: ['sm'],
render: (timestamp: string) =>
<ReactTimeAgo date={new Date(Number(timestamp.slice(0, -6)))} locale={intl.locale} timeStyle="round" />
}

View File

@ -2,8 +2,59 @@
@import "~antd/lib/style/themes/dark";
.logo {
float: left;
font-size: 1.6rem;
font-weight: 700;
}
header, header ul {
@media only screen and (min-width: 767px) {
border-bottom: 0.5px solid @border-divider-color !important;
}
@media only screen and (max-width: 767px) {
border: none !important;
}
}
svg:hover.external-icon {
path {
fill: @primary-color;
}
}
.external-links-left {
position: fixed;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
top: 0;
left: 0;
height: 650px;
width: 50px;
border-bottom: 0.5px solid @border-divider-color;
border-right: 0.5px solid @border-divider-color;
padding-block-end: 24px;
z-index: 10;
line-height: normal;
svg {
width: 26px;
margin: 8px;
}
@media only screen and (max-width: 767px) {
display:none;
}
}
.external-links-bottom {
left: 0px;
width: 100vw;
justify-content: space-evenly;
svg {
height: 26px;
}
display: none;
@media only screen and (max-width: 767px) {
display: flex;
}
}

View File

@ -1,50 +1,94 @@
/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import { Layout, Menu } from 'antd';
import { Layout, Menu, Grid } from 'antd';
const { Header, Content, Footer } = Layout;
const { useBreakpoint } = Grid
import { MenuOutlined } from '@ant-design/icons';
import { useIntl, FormattedMessage } from 'gatsby-plugin-intl';
import { useLocation } from '@reach/router';
import { Link } from 'gatsby'
import './DefaultLayout.less'
type Props = {};
import { socialLinks, socialAnchorArray } from '~/utils/misc/socials';
const DefaultLayout: React.FC<Props> = ({
// brand assets
import { ReactComponent as AvatarAndName } from '~/icons/FullLogo_DarkBackground.svg';
import { ReactComponent as Avatar } from '~/icons/Avatar_DarkBackground.svg';
const externalLinkProps = { target: "_blank", rel: "noopener noreferrer", className: "no-external-icon" }
const DefaultLayout: React.FC<{}> = ({
children,
...props
}) => {
const intl = useIntl()
const location = useLocation()
const screens = useBreakpoint();
const menuItemProps: { style: { textAlign: CanvasTextAlign } } = { style: { textAlign: 'center' } }
return (
<Layout style={{ minHeight: '100vh' }}>
<Header>
<Header style={{
padding: 0,
height: 70
}} >
<div className="center-content">
<Menu
theme="dark"
mode="horizontal"
selectedKeys={[location.pathname.split('/')[2]]}
style={{display: 'flex', justifyContent: 'space-around'}}
style={{
height: 70,
display: 'flex',
width: '100%',
padding: !screens.md ? 0 : '0 80px 0 148px'
}}
overflowedIndicator={<MenuOutlined style={{ fontSize: '24px', verticalAlign: 'middle', marginRight: 0 }} />}
className="max-content-width"
>
<Menu.Item key="">
<Link to={`/${intl.locale}/`}>
<span className="logo">
<FormattedMessage id="homepage.title" />
</span>
<Menu.Item key="" className="responsive-padding" >
<Link to={`/${intl.locale}/`} style={{ height: 32 }} title={intl.formatMessage({ id: 'nav.homeLinkAltText' })}>
<AvatarAndName style={{ height: 45, margin: 'auto', verticalAlign: 'middle', display: 'inline-block' }} />
</Link>
</Menu.Item>
<Menu.Item key="network">
<Link to={`/${intl.locale}/network/`}>{intl.formatMessage({id: "nav.networkLink"})}</Link>
<div style={{ flexGrow: 1, minWidth: '20%' }}>
{/* pushes the elements away on both sides */}
</div>
<Menu.Item key="about" {...menuItemProps}>
<Link to={`/${intl.locale}/about`}>
<FormattedMessage id="nav.aboutLink" />
</Link>
</Menu.Item>
<Menu.Item key="code">
{String(process.env.ENABLE_NETWORK_PAGE) === 'true' ? (
<Menu.Item key="network" {...menuItemProps}>
<Link to={`/${intl.locale}/network/`}>{intl.formatMessage({ id: "nav.networkLink" })}</Link>
</Menu.Item>
) : null}
<Menu.Item key="code" {...menuItemProps}>
<a
href="https://github.com/certusone/wormhole"
href={socialLinks['github']}
target="_blank"
rel="noopener noreferrer"
>
{intl.formatMessage({id: "nav.codeLink"})}
{intl.formatMessage({ id: "nav.codeLink" })}
</a>
</Menu.Item>
{screens.md === false ? (
<Menu.Item key="external" style={{ margin: '12px 0' }}>
<div style={{ display: 'flex', justifyContent: 'space-evenly', width: '100vw' }}>
{socialAnchorArray(intl, { zIndex: 2 }, { height: 26 })}
</div>
</Menu.Item>
) : null}
</Menu>
</div>
<div
className="external-links-left"
>
{socialAnchorArray(intl)}
</div>
</Header>
<Content>
<div
{...props}
@ -52,8 +96,36 @@ const DefaultLayout: React.FC<Props> = ({
{children}
</div>
</Content>
<Footer style={{textAlign: 'center'}} className="primary-test">
{intl.formatMessage({id: "footer.createdWith"})}{``}<br />©{new Date().getFullYear()}
<Footer style={{ textAlign: 'center', paddingLeft: 0, paddingRight: 0 }}>
<div
className="external-links-bottom"
>
{socialAnchorArray(intl)}
</div>
<div style={{
display: 'flex',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
gap: 16,
marginTop: 12
}}>
<Avatar style={{ maxHeight: 58 }} />
<div style={{ lineHeight: '1.5em' }}>
<a href={socialLinks['github']} {...externalLinkProps} style={{ color: 'white' }}>
{intl.formatMessage({ id: "footer.openSource" })}
</a>
<br />
{intl.formatMessage({ id: "footer.createdWith" })}&nbsp;
<a href="https://certus.one/" {...externalLinkProps} style={{ color: 'white' }}>
<span style={{ fontSize: '1.4em' }}></span>
</a>
<br />
©{new Date().getFullYear()}
</div>
</div>
</Footer>
</Layout>
);

View File

@ -8,10 +8,21 @@ type Props = {
description?: string;
} & HelmetProps
const socialAvatar = '/images/WH_Avatar_DarkBackground.webp'
const socialAvatarSrc = process.env.GATSBY_SITE_URL + socialAvatar
const socialAvatarHeight = '441'
const socialAvatarWidth = '375'
const socialLogo = '/images/WH_Logo_DarkBackground.webp'
const socialLogoSrc = process.env.GATSBY_SITE_URL + socialLogo
const socialLogoHeight = '543'
const socialLogoWidth = '2193'
/**
* An SEO component that handles all element in the head that can accept
*/
const SEO: React.FC<Props> = ({ children, description = '', title}) => {
const SEO: React.FC<Props> = ({ children, description = '', title }) => {
const metaDescription = description;
const intl = useIntl()
return (
@ -33,15 +44,75 @@ const SEO: React.FC<Props> = ({ children, description = '', title}) => {
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={metaDescription} />
<meta property="og:image" content={socialAvatarSrc} />
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:height" content={socialAvatarHeight} />
<meta property="og:image:width" content={socialAvatarWidth} />
<meta property="og:image:alt" content={metaDescription} />
<meta property="og:locale" content={intl.locale} />
{/* "summary" is the type of twitter card. Hardcoded string is OK here. */}
<meta property="twitter.card" content="summary" />
<meta property="twitter.creator" content="@CertusOne" />
<meta property="twitter.title" content={title} />
<meta property="twitter.description" content={metaDescription} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@wormholecrypto" />
<meta name="twitter:creator" content="@CertusOne" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={metaDescription} />
<meta name="twitter:image" content={socialAvatarSrc} />
<meta name="twitter:image:alt" content={metaDescription} />
<script type="application/ld+json">
{`
{
"@context": "https://schema.org",
"@type": "Organization",
"@id": "wormhole-org",
"url": "https://wormholenetwork.com",
"name": "Wormhole Network",
"sameAs": [
"https://github.com/certusone/wormhole",
"https://t.me/wormholecrypto",
"https://twitter.com/wormholecrypto",
"https://www.wormholebridge.com"
],
"alternateName": [
"wormhole",
"wormhole protocol",
"wormhole bridge",
"wormhole crypto",
"solana wormhole",
"SOL wormhole",
"terra wormhole",
"LUNA wormhole",
"ethereum wormhole",
"ETH wormhole",
"binance wormhole",
"BSC wormhole",
"certus one wormhole"
],
"description": "A cross-chain messaging protocol.",
"image": {
"@type": "ImageObject",
"height": "${socialAvatarHeight}",
"url": "${socialAvatarSrc}",
"width": "${socialAvatarWidth}"
},
"logo": {
"@type": "ImageObject",
"height": "${socialLogoHeight}",
"url": "${socialLogoSrc}",
"width": "${socialLogoWidth}"
}
}
`}
</script>
{/* PWA tags */}
<meta name="theme-color" content="#546e7a"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
<meta name="msapplication-TileColor" content="#00aba9" />
<meta name="theme-color" content="#141449" />
{children}
</Helmet>

View File

@ -0,0 +1,8 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.18 86.09">
<defs>
<style>.cls-1{fill:red;}.cls-2{fill:#0073ff;}.cls-3{fill:#00f3d7;}</style>
</defs>
<path class="cls-1" d="M30.29,43.05A47.76,47.76,0,0,0,16.72,9.63a1.7,1.7,0,0,0-1.2-.5H4.34A1.67,1.67,0,0,0,2.67,10.8V22.29A1.69,1.69,0,0,0,4.24,24a19.15,19.15,0,0,1,0,38.18A1.68,1.68,0,0,0,2.67,63.8V75.29A1.68,1.68,0,0,0,4.34,77H15.52a1.66,1.66,0,0,0,1.2-.51A47.75,47.75,0,0,0,30.29,43.05Z"/>
<path class="cls-2" d="M70.51,63.8a1.68,1.68,0,0,0-1.57-1.66,19.15,19.15,0,0,1,0-38.18,1.69,1.69,0,0,0,1.57-1.67V10.8a1.67,1.67,0,0,0-1.67-1.67H57.66a1.7,1.7,0,0,0-1.2.5,47.93,47.93,0,0,0,0,66.83,1.66,1.66,0,0,0,1.2.51H68.84a1.68,1.68,0,0,0,1.67-1.68Z"/>
<path class="cls-3" d="M28.06,3.14a1.89,1.89,0,0,0-1.75,2.58,102.89,102.89,0,0,1,7.05,37.33,102.87,102.87,0,0,1-7,37.32A1.89,1.89,0,0,0,28.06,83h17a1.88,1.88,0,0,0,1.74-2.58,102.33,102.33,0,0,1,0-74.65,1.88,1.88,0,0,0-1.74-2.58Z"/>
</svg>

After

Width:  |  Height:  |  Size: 993 B

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.18 86.09"><defs><style>.cls-1{fill:red;}.cls-2{fill:#0073ff;}.cls-3{fill:#00dbb8;}</style></defs><path class="cls-1" d="M30.29,43.05A47.76,47.76,0,0,0,16.72,9.63a1.7,1.7,0,0,0-1.2-.5H4.34A1.67,1.67,0,0,0,2.67,10.8V22.29A1.69,1.69,0,0,0,4.24,24a19.15,19.15,0,0,1,0,38.18A1.68,1.68,0,0,0,2.67,63.8V75.29A1.68,1.68,0,0,0,4.34,77H15.52a1.66,1.66,0,0,0,1.2-.51A47.75,47.75,0,0,0,30.29,43.05Z"/><path class="cls-2" d="M70.51,63.8a1.68,1.68,0,0,0-1.57-1.66,19.15,19.15,0,0,1,0-38.18,1.69,1.69,0,0,0,1.57-1.67V10.8a1.67,1.67,0,0,0-1.67-1.67H57.66a1.7,1.7,0,0,0-1.2.5,47.93,47.93,0,0,0,0,66.83,1.66,1.66,0,0,0,1.2.51H68.84a1.68,1.68,0,0,0,1.67-1.68Z"/><path class="cls-3" d="M28.06,3.14a1.89,1.89,0,0,0-1.75,2.58,102.89,102.89,0,0,1,7.05,37.33,102.87,102.87,0,0,1-7,37.32A1.89,1.89,0,0,0,28.06,83h17a1.88,1.88,0,0,0,1.74-2.58,102.33,102.33,0,0,1,0-74.65,1.88,1.88,0,0,0-1.74-2.58Z"/></svg>

After

Width:  |  Height:  |  Size: 969 B

View File

@ -0,0 +1,4 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.312619 2.20182L23.0221 24.9113C23.105 24.9942 23.2177 25.0405 23.3353 25.0401C23.453 25.0396 23.566 24.9925 23.6495 24.9089L24.909 23.6494C24.9926 23.5659 25.0397 23.4529 25.0402 23.3352C25.0406 23.2176 24.9943 23.1049 24.9114 23.022L2.20192 0.312516C2.11904 0.229632 2.00637 0.183317 1.88871 0.183761C1.77105 0.184205 1.65803 0.231371 1.57452 0.314883L0.314987 1.57442C0.231475 1.65793 0.184309 1.77095 0.183865 1.88861C0.183421 2.00627 0.229735 2.11893 0.312619 2.20182Z" fill="white"/>
<path d="M2.20182 24.9113L24.9113 2.20177C24.9942 2.11888 25.0405 2.00622 25.0401 1.88856C25.0396 1.7709 24.9925 1.65788 24.9089 1.57437L23.6494 0.314833C23.5659 0.23132 23.4529 0.184153 23.3352 0.18371C23.2176 0.183267 23.1049 0.229579 23.022 0.312464L0.312516 23.022C0.229632 23.1048 0.183317 23.2175 0.183761 23.3352C0.184205 23.4528 0.231371 23.5658 0.314883 23.6494L1.57442 24.9089C1.65793 24.9924 1.77095 25.0396 1.88861 25.04C2.00627 25.0405 2.11893 24.9941 2.20182 24.9113Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,16 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.65 87.18">
<defs>
<style>.cls-1{fill:#fff;}.cls-2{fill:red;}.cls-3{fill:#0073ff;}.cls-4{fill:#00f3d7;}</style>
</defs>
<polygon class="cls-1" points="113.06 53.74 112.03 53.74 106.41 30.71 99.6 30.71 94.78 53.74 93.75 53.74 87.15 29.77 82.33 29.77 90.23 57.72 91.39 57.72 93.95 57.72 94.84 57.72 97.19 57.72 98.08 57.72 103.01 34.48 108.71 57.72 109.75 57.72 112.11 57.72 113 57.72 115.56 57.72 116.51 57.72 123.36 29.77 118.81 29.77 113.06 53.74"/>
<path class="cls-1" d="M153.56,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,153.56,33.36ZM151.28,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.72,11.72,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/>
<path class="cls-1" d="M171.48,32.31A10.42,10.42,0,0,0,169,38.18V29.77h-4v28h5V42.59a8.61,8.61,0,0,1,2.25-6.41A8.79,8.79,0,0,1,178.73,34h1.78v-4.5h-.94Q174.19,29.46,171.48,32.31Z"/>
<path class="cls-1" d="M223.58,30.45a9.43,9.43,0,0,0-5.49-1.52h-.21a9.34,9.34,0,0,0-5.47,1.52,9.14,9.14,0,0,0-3.27,4.37c-.13.35-.24.72-.35,1.09-.1-.37-.2-.74-.33-1.09a8.88,8.88,0,0,0-3.22-4.37,9.34,9.34,0,0,0-5.47-1.52h-.21a8.5,8.5,0,0,0-8.66,5.89,14.1,14.1,0,0,0-.45,1.43V29.77h-4v28h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2A6,6,0,0,1,203,35.4a7.62,7.62,0,0,1,1.67,5.26V57.72h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2,6,6,0,0,1,4.66,1.86,7.62,7.62,0,0,1,1.67,5.26V57.72h5v-16a19.68,19.68,0,0,0-1.08-6.94A8.9,8.9,0,0,0,223.58,30.45Z"/>
<path class="cls-1" d="M251.27,28.93h-.21a9.62,9.62,0,0,0-5.76,1.63,9.26,9.26,0,0,0-3.14,4.2V19.51h-5V57.72h5V41.6a8.35,8.35,0,0,1,2-5.84,6.88,6.88,0,0,1,5.36-2.22,6.79,6.79,0,0,1,5,1.88,7.12,7.12,0,0,1,1.91,5.29v17h5v-16q0-6.18-2.56-9.5T251.27,28.93Z"/>
<path class="cls-1" d="M294.55,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,294.55,33.36ZM292.27,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.59,11.59,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/>
<polygon class="cls-1" points="302.45 19.51 302.45 23.49 306.32 23.49 306.32 57.72 311.35 57.72 311.35 23.49 311.35 19.51 306.32 19.51 302.45 19.51"/>
<path class="cls-1" d="M345.89,42.44a15.43,15.43,0,0,0-1.44-6.6,12.09,12.09,0,0,0-4.4-5.05,13.28,13.28,0,0,0-7.5-2,14.07,14.07,0,0,0-6.1,1.23,12,12,0,0,0-4.27,3.3A14.09,14.09,0,0,0,319.7,38a17.13,17.13,0,0,0-.81,5.28v.95a17,17,0,0,0,.81,5.23,14.09,14.09,0,0,0,2.48,4.63,12.07,12.07,0,0,0,4.35,3.32,14.71,14.71,0,0,0,6.33,1.26,15.15,15.15,0,0,0,5.91-1.1,10.89,10.89,0,0,0,6.65-8.16h-4.71a5.7,5.7,0,0,1-2.49,3.4,10.49,10.49,0,0,1-10.54.08,8.14,8.14,0,0,1-3-3.77,13.74,13.74,0,0,1-.93-4.42h22.15ZM327.6,34.59a8.47,8.47,0,0,1,4.95-1.36,8.73,8.73,0,0,1,4.76,1.2,7.37,7.37,0,0,1,2.82,3.37,11.69,11.69,0,0,1,.81,3.12h-17a12.45,12.45,0,0,1,.74-2.62A8.09,8.09,0,0,1,327.6,34.59Z"/>
<path class="cls-2" d="M33.39,43.59A47.78,47.78,0,0,0,19.81,10.17a1.68,1.68,0,0,0-1.2-.5H7.44a1.68,1.68,0,0,0-1.68,1.67V22.83A1.68,1.68,0,0,0,7.33,24.5a19.15,19.15,0,0,1,0,38.18,1.68,1.68,0,0,0-1.57,1.67V75.84a1.68,1.68,0,0,0,1.68,1.67H18.61a1.68,1.68,0,0,0,1.2-.5A47.78,47.78,0,0,0,33.39,43.59Z"/>
<path class="cls-3" d="M73.6,64.35A1.68,1.68,0,0,0,72,62.68,19.15,19.15,0,0,1,72,24.5a1.68,1.68,0,0,0,1.57-1.67V11.34a1.67,1.67,0,0,0-1.67-1.67H60.75a1.7,1.7,0,0,0-1.2.5,47.94,47.94,0,0,0,0,66.84,1.7,1.7,0,0,0,1.2.5H71.93a1.67,1.67,0,0,0,1.67-1.67Z"/>
<path class="cls-4" d="M31.15,3.69a1.88,1.88,0,0,0-1.74,2.58,102.82,102.82,0,0,1,7,37.32,102.82,102.82,0,0,1-7,37.32,1.88,1.88,0,0,0,1.74,2.58h17a1.88,1.88,0,0,0,1.74-2.58,102.3,102.3,0,0,1,0-74.64,1.88,1.88,0,0,0-1.74-2.58Z"/>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.65 87.18"><defs><style>.cls-1{fill:#00001e;}.cls-2{fill:red;}.cls-3{fill:#0073ff;}.cls-4{fill:#00dbb8;}</style></defs><polygon class="cls-1" points="113.06 53.74 112.03 53.74 106.41 30.71 99.6 30.71 94.78 53.74 93.75 53.74 87.15 29.77 82.33 29.77 90.23 57.72 91.39 57.72 93.95 57.72 94.84 57.72 97.19 57.72 98.08 57.72 103.01 34.48 108.71 57.72 109.75 57.72 112.11 57.72 113 57.72 115.56 57.72 116.51 57.72 123.36 29.77 118.81 29.77 113.06 53.74"/><path class="cls-1" d="M153.56,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,153.56,33.36ZM151.28,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.72,11.72,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/><path class="cls-1" d="M171.48,32.31A10.42,10.42,0,0,0,169,38.18V29.77h-4v28h5V42.59a8.61,8.61,0,0,1,2.25-6.41A8.79,8.79,0,0,1,178.73,34h1.78v-4.5h-.94Q174.19,29.46,171.48,32.31Z"/><path class="cls-1" d="M223.58,30.45a9.43,9.43,0,0,0-5.49-1.52h-.21a9.34,9.34,0,0,0-5.47,1.52,9.14,9.14,0,0,0-3.27,4.37c-.13.35-.24.72-.35,1.09-.1-.37-.2-.74-.33-1.09a8.88,8.88,0,0,0-3.22-4.37,9.34,9.34,0,0,0-5.47-1.52h-.21a8.5,8.5,0,0,0-8.66,5.89,14.1,14.1,0,0,0-.45,1.43V29.77h-4v28h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2A6,6,0,0,1,203,35.4a7.62,7.62,0,0,1,1.67,5.26V57.72h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2,6,6,0,0,1,4.66,1.86,7.62,7.62,0,0,1,1.67,5.26V57.72h5v-16a19.68,19.68,0,0,0-1.08-6.94A8.9,8.9,0,0,0,223.58,30.45Z"/><path class="cls-1" d="M251.27,28.93h-.21a9.62,9.62,0,0,0-5.76,1.63,9.26,9.26,0,0,0-3.14,4.2V19.51h-5V57.72h5V41.6a8.35,8.35,0,0,1,2-5.84,6.88,6.88,0,0,1,5.36-2.22,6.79,6.79,0,0,1,5,1.88,7.12,7.12,0,0,1,1.91,5.29v17h5v-16q0-6.18-2.56-9.5T251.27,28.93Z"/><path class="cls-1" d="M294.55,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,294.55,33.36ZM292.27,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.59,11.59,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/><polygon class="cls-1" points="302.45 19.51 302.45 23.49 306.32 23.49 306.32 57.72 311.35 57.72 311.35 23.49 311.35 19.51 306.32 19.51 302.45 19.51"/><path class="cls-1" d="M345.89,42.44a15.43,15.43,0,0,0-1.44-6.6,12.09,12.09,0,0,0-4.4-5.05,13.28,13.28,0,0,0-7.5-2,14.07,14.07,0,0,0-6.1,1.23,12,12,0,0,0-4.27,3.3A14.09,14.09,0,0,0,319.7,38a17.13,17.13,0,0,0-.81,5.28v.95a17,17,0,0,0,.81,5.23,14.09,14.09,0,0,0,2.48,4.63,12.07,12.07,0,0,0,4.35,3.32,14.71,14.71,0,0,0,6.33,1.26,15.15,15.15,0,0,0,5.91-1.1,10.89,10.89,0,0,0,6.65-8.16h-4.71a5.7,5.7,0,0,1-2.49,3.4,10.49,10.49,0,0,1-10.54.08,8.14,8.14,0,0,1-3-3.77,13.74,13.74,0,0,1-.93-4.42h22.15ZM327.6,34.59a8.47,8.47,0,0,1,4.95-1.36,8.73,8.73,0,0,1,4.76,1.2,7.37,7.37,0,0,1,2.82,3.37,11.69,11.69,0,0,1,.81,3.12h-17a12.45,12.45,0,0,1,.74-2.62A8.09,8.09,0,0,1,327.6,34.59Z"/><path class="cls-2" d="M33.39,43.59A47.78,47.78,0,0,0,19.81,10.17a1.68,1.68,0,0,0-1.2-.5H7.44a1.68,1.68,0,0,0-1.68,1.67V22.83A1.68,1.68,0,0,0,7.33,24.5a19.15,19.15,0,0,1,0,38.18,1.68,1.68,0,0,0-1.57,1.67V75.84a1.68,1.68,0,0,0,1.68,1.67H18.61a1.68,1.68,0,0,0,1.2-.5A47.78,47.78,0,0,0,33.39,43.59Z"/><path class="cls-3" d="M73.6,64.35A1.68,1.68,0,0,0,72,62.68,19.15,19.15,0,0,1,72,24.5a1.68,1.68,0,0,0,1.57-1.67V11.34a1.67,1.67,0,0,0-1.67-1.67H60.75a1.7,1.7,0,0,0-1.2.5,47.94,47.94,0,0,0,0,66.84,1.7,1.7,0,0,0,1.2.5H71.93a1.67,1.67,0,0,0,1.67-1.67Z"/><path class="cls-4" d="M31.15,3.69a1.88,1.88,0,0,0-1.74,2.58,102.82,102.82,0,0,1,7,37.32,102.82,102.82,0,0,1-7,37.32,1.88,1.88,0,0,0,1.74,2.58h17a1.88,1.88,0,0,0,1.74-2.58,102.3,102.3,0,0,1,0-74.64,1.88,1.88,0,0,0-1.74-2.58Z"/></svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -0,0 +1,3 @@
<svg width="33" height="38" viewBox="0 0 33 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.558 8.46094H0.441964C0.324748 8.46094 0.212333 8.41402 0.129448 8.33051C0.046564 8.247 0 8.13373 0 8.01562L0 6.23438C0 6.11627 0.046564 6.003 0.129448 5.91949C0.212333 5.83598 0.324748 5.78906 0.441964 5.78906H32.558C32.6753 5.78906 32.7877 5.83598 32.8706 5.91949C32.9534 6.003 33 6.11627 33 6.23438V8.01562C33 8.13373 32.9534 8.247 32.8706 8.33051C32.7877 8.41402 32.6753 8.46094 32.558 8.46094V8.46094ZM32.558 20.3359H0.441964C0.324748 20.3359 0.212333 20.289 0.129448 20.2055C0.046564 20.122 0 20.0087 0 19.8906L0 18.1094C0 17.9913 0.046564 17.878 0.129448 17.7945C0.212333 17.711 0.324748 17.6641 0.441964 17.6641H32.558C32.6753 17.6641 32.7877 17.711 32.8706 17.7945C32.9534 17.878 33 17.9913 33 18.1094V19.8906C33 20.0087 32.9534 20.122 32.8706 20.2055C32.7877 20.289 32.6753 20.3359 32.558 20.3359V20.3359ZM32.558 32.2109H0.441964C0.324748 32.2109 0.212333 32.164 0.129448 32.0805C0.046564 31.997 0 31.8837 0 31.7656L0 29.9844C0 29.8663 0.046564 29.753 0.129448 29.6695C0.212333 29.586 0.324748 29.5391 0.441964 29.5391H32.558C32.6753 29.5391 32.7877 29.586 32.8706 29.6695C32.9534 29.753 33 29.8663 33 29.9844V31.7656C33 31.8837 32.9534 31.997 32.8706 32.0805C32.7877 32.164 32.6753 32.2109 32.558 32.2109V32.2109Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,9 @@
<svg width="1067" height="571" viewBox="0 0 1067 571" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M809.013 569.369C966.021 569.369 1093.3 442.276 1093.3 285.5C1093.3 128.724 966.021 1.63143 809.013 1.63143C652.005 1.63143 524.724 128.724 524.724 285.5C524.724 442.276 652.005 569.369 809.013 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.75" d="M721.831 569.369C878.839 569.369 1006.12 442.276 1006.12 285.5C1006.12 128.724 878.839 1.63143 721.831 1.63143C564.823 1.63143 437.542 128.724 437.542 285.5C437.542 442.276 564.823 569.369 721.831 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.5" d="M634.65 569.369C791.658 569.369 918.938 442.276 918.938 285.5C918.938 128.724 791.658 1.63143 634.65 1.63143C477.642 1.63143 350.361 128.724 350.361 285.5C350.361 442.276 477.642 569.369 634.65 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.4" d="M547.468 569.369C704.476 569.369 831.756 442.276 831.756 285.5C831.756 128.724 704.476 1.63143 547.468 1.63143C390.459 1.63143 263.179 128.724 263.179 285.5C263.179 442.276 390.459 569.369 547.468 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.3" d="M460.285 569.369C617.293 569.369 744.573 442.276 744.573 285.5C744.573 128.724 617.293 1.63143 460.285 1.63143C303.277 1.63143 175.997 128.724 175.997 285.5C175.997 442.276 303.277 569.369 460.285 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.25" d="M373.104 569.369C530.112 569.369 657.392 442.276 657.392 285.5C657.392 128.724 530.112 1.63143 373.104 1.63143C216.096 1.63143 88.8158 128.724 88.8158 285.5C88.8158 442.276 216.096 569.369 373.104 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.1" d="M285.922 569.369C442.93 569.369 570.21 442.276 570.21 285.5C570.21 128.724 442.93 1.63143 285.922 1.63143C128.914 1.63143 1.63367 128.724 1.63367 285.5C1.63367 442.276 128.914 569.369 285.922 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0764 0.57959H2.08748C0.988245 0.57959 0.0888672 1.53518 0.0888672 2.70312V19.6914C0.0888672 20.8593 0.988245 21.8149 2.08748 21.8149H18.0764C19.1757 21.8149 20.075 20.8593 20.075 19.6914V2.70312C20.075 1.53518 19.1757 0.57959 18.0764 0.57959ZM6.08472 18.6296H3.08679V9.07372H6.08472V18.6296ZM4.58576 7.26871C3.58645 7.26871 2.787 6.4193 2.787 5.35754C2.787 4.29577 3.58645 3.44636 4.58576 3.44636C5.58507 3.44636 6.38451 4.29577 6.38451 5.35754C6.38451 6.4193 5.58507 7.26871 4.58576 7.26871ZM17.0771 18.6296H14.0792V13.0022C14.0792 12.1529 13.3797 11.4096 12.5802 11.4096C11.7808 11.4096 11.0813 12.1529 11.0813 13.0022V18.6296H8.08334V9.07372H11.0813V10.3478C11.5809 9.49842 12.6802 8.86136 13.5795 8.86136C15.4782 8.86136 17.0771 10.5602 17.0771 12.5775V18.6296Z" fill="#5A5A66"/>
</svg>

After

Width:  |  Height:  |  Size: 900 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 509 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -0,0 +1,9 @@
<svg width="1094" height="571" viewBox="0 0 1094 571" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M809.013 569.369C966.021 569.369 1093.3 442.276 1093.3 285.5C1093.3 128.724 966.021 1.63141 809.013 1.63141C652.005 1.63141 524.724 128.724 524.724 285.5C524.724 442.276 652.005 569.369 809.013 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.75" d="M721.831 569.369C878.839 569.369 1006.12 442.276 1006.12 285.5C1006.12 128.724 878.839 1.63141 721.831 1.63141C564.823 1.63141 437.542 128.724 437.542 285.5C437.542 442.276 564.823 569.369 721.831 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.5" d="M634.65 569.369C791.658 569.369 918.938 442.276 918.938 285.5C918.938 128.724 791.658 1.63141 634.65 1.63141C477.642 1.63141 350.361 128.724 350.361 285.5C350.361 442.276 477.642 569.369 634.65 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.4" d="M547.468 569.369C704.476 569.369 831.756 442.276 831.756 285.5C831.756 128.724 704.476 1.63141 547.468 1.63141C390.459 1.63141 263.179 128.724 263.179 285.5C263.179 442.276 390.459 569.369 547.468 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.3" d="M460.285 569.369C617.293 569.369 744.573 442.276 744.573 285.5C744.573 128.724 617.293 1.63141 460.285 1.63141C303.277 1.63141 175.997 128.724 175.997 285.5C175.997 442.276 303.277 569.369 460.285 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.25" d="M373.104 569.369C530.112 569.369 657.392 442.276 657.392 285.5C657.392 128.724 530.112 1.63141 373.104 1.63141C216.096 1.63141 88.8159 128.724 88.8159 285.5C88.8159 442.276 216.096 569.369 373.104 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
<path opacity="0.1" d="M285.922 569.369C442.93 569.369 570.21 442.276 570.21 285.5C570.21 128.724 442.93 1.63141 285.922 1.63141C128.914 1.63141 1.63367 128.724 1.63367 285.5C1.63367 442.276 128.914 569.369 285.922 569.369Z" stroke="white" stroke-width="0.5" stroke-miterlimit="10"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,5 @@
<svg width="519" height="534" viewBox="0 0 519 534" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="114" y="1" width="315" height="315" stroke="white" stroke-width="0.5"/>
<rect x="203" y="217" width="315" height="316" stroke="white" stroke-width="0.5"/>
<rect x="1" y="100" width="315" height="315" stroke="white" stroke-width="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 352 B

View File

@ -1,24 +1,83 @@
{
"homepage": {
"title": "Wormhole Bridge",
"description": "A decentralized multi-chain event protocol, for DeFi",
"subtext": "A new way to bridge between chains and verify layer-1 events"
"title": "Wormhole Network",
"description": "A decentralized cross-chain messaging protocol, for DeFi",
"subtext": "A new way to natively interact with foreign chains",
"openForBiz": {
"title": "The portal is open.",
"body": "Wormhole delivers new communication channels between previously siloed blockchains.",
"callToAction": "Explore",
"dataLabel": "Transactions processed",
"scrollDownAltText": "Go to Wormhole description"
},
"aboutUs": {
"heading": "How it works",
"body": "Wormhole is a simple, generic protocol that delivers a pathway for any kind of information—funds, votes, programs and more—from any blockchain in the network to any other.",
"callToAction": "About Wormhole"
},
"network": {
"heading": "Network",
"title": "A trustless protocol validated by 19 separate guardians.",
"body": "Our network of independent validators ensures the Wormhole protocol remains trustless and secure.",
"partnersAnimationAltText": "Independent validators run the Guardians that make up the network."
},
"whatWeDo": {
"heading": "Why",
"problem": "Recalculating the state of a foreign chain in a smart contract is a redundant and expensive workload.",
"title": "Wormhole treats canonical chain state for what it truly is - arbitrary data with well understood tamper-proofing requirements.",
"body": "You and your contracts just want to look stuff up. Wormhole makes it easier."
}
},
"nav": {
"homeLinkAltText": "homepage",
"aboutLink": "about",
"networkLink": "network",
"codeLink": "code"
"codeLink": "code",
"discordAltText": "Go to Wormhole's Discord",
"githubAltText": "Go to Wormhole's Github",
"mediumAltText": "Go to Wormhole's Medium",
"telegramAltText": "Go to Wormhole's Telegram",
"twitterAltText": "Go to Wormhole's Twitter"
},
"footer": {
"openSource": "Open Source",
"createdWith": "Built with"
},
"404": {
"message": "The page you visited does not exist"
},
"about": {
"title": "About Wormhole",
"description": "Use Wormhole for cross-chain messaging.",
"emailUs": "Email us",
"brief": {
"heading": "About",
"title": "Simple, generic, trustless, decentralized, fast.",
"body": "The world of blockchain is evolving daily, and evolution requires communication. "
},
"how": {
"body": "Wormhole builds bridges between chains, facilitating fast transfer of any kind of information from one chain to another.",
"stepsHeading": "How it works",
"steps": {
"1": "Send your message to Wormhole",
"2": "The Guardian network observes the transaction",
"3": "Quorum is achieved in seconds",
"4": "Guardians make your attested message publicly available.",
"5": "Access your message on a different chain"
},
"callToAction": "Documentation"
},
"readMore": {
"heading": "The next frontier in blockchain technology is communication.",
"title": "Wormhole is the protocol that makes it possible.",
"callToAction": "Documentation"
}
},
"network": {
"title": "Wormhole Network",
"description": "The Wormhole Bridge Guardians",
"listening": "Listening for Guardian heartbeats...",
"guardiansFound": "Guardians currently validating",
"guardiansFound": "Guardians currently broadcasting",
"heartbeat": "Heartbeat #",
"blockHeight": "Block height",
"address": "Address",

View File

@ -0,0 +1,208 @@
import React from 'react';
import { Typography, Grid, Button, Steps } from 'antd'
const { Title, Paragraph } = Typography
const { Step } = Steps;
import { useIntl, FormattedMessage, IntlShape } from 'gatsby-plugin-intl';
import { bodyStyles, headingStyles, titleStyles } from '~/styles'
import { Layout } from '~/components/Layout';
import { SEO } from '~/components/SEO';
const { useBreakpoint } = Grid
import { ReactComponent as LayeredSquares } from '~/icons/layered-squares.svg';
import { ReactComponent as Hole } from '~/icons/hole.svg';
const BriefAboutSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean }) => (
<div className="center-content">
<div
className="responsive-padding max-content-width"
style={{
width: '100%',
display: 'flex',
flexDirection: smScreen ? 'column' : 'row',
marginBlockStart: 80,
marginBlockEnd: 100,
}}
>
<div style={{
height: '100%',
display: 'flex', flexDirection: 'column',
justifyContent: 'center', zIndex: 2,
maxWidth: 700,
}} className="background-mask-from-left">
<div style={{ marginBottom: smScreen ? 20 : 80, alignSelf: 'flex-start' }}>
<Paragraph style={headingStyles} type="secondary">
{intl.formatMessage({ id: "about.brief.heading" }).toLocaleUpperCase()}
</Paragraph>
</div>
<Title level={1} style={{ ...titleStyles, fontSize: smScreen ? 44 : 56, }}>
<FormattedMessage id="about.brief.title" />
</Title>
<Paragraph style={{ ...bodyStyles, marginBottom: 40, maxWidth: 560 }} type="secondary">
<FormattedMessage id="about.brief.body" />
</Paragraph>
</div>
{smScreen ? (
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<LayeredSquares style={{ width: '96%' }} />
</div>
) : (
<div style={{
display: 'flex',
flexDirection: 'row-reverse',
flexGrow: 1,
minWidth: 200, maxWidth: 530,
}}>
<LayeredSquares style={{
width: 520,
minWidth: 520,
}} />
</div>
)}
</div>
</div >
)
const HowSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean }) => (
<div className="center-content blue-background">
<div
className="responsive-padding max-content-width"
style={{
marginBlock: 100,
width: '100%',
display: 'flex',
flexDirection: smScreen ? 'column' : 'row',
justifyContent: smScreen ? 'flex-start' : 'space-evenly',
alignContent: 'center',
alignItems: 'center'
}}>
<div style={{
width: '90%',
display: 'flex', flexDirection: 'column',
justifyContent: 'center',
}}>
<Paragraph style={{ ...bodyStyles, maxWidth: smScreen ? '100%' : '80%', marginBottom: 50 }} >
<FormattedMessage id="about.how.body" />
</Paragraph>
<a
href="https://github.com/certusone/wormhole/blob/dev.v2/design/navbar.md"
target="_blank" rel="noopener noreferrer" className="no-external-icon"
>
<Button style={{ width: 255, height: 38, border: "1.5px solid", marginBottom: 50 }} size="large">
<FormattedMessage id="about.how.callToAction" />
</Button>
</a>
</div>
<div style={{
height: '100%',
width: '90%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<Paragraph style={{ ...headingStyles, alignSelf: 'flex-start' }} type="secondary">
{intl.formatMessage({ id: "about.how.stepsHeading" }).toLocaleUpperCase()}
</Paragraph>
<Steps progressDot current={6} direction="vertical">
<Step title={intl.formatMessage({ id: 'about.how.steps.1' })} />
<Step title={intl.formatMessage({ id: 'about.how.steps.2' })} />
<Step title={intl.formatMessage({ id: 'about.how.steps.3' })} />
<Step title={intl.formatMessage({ id: 'about.how.steps.4' })} />
<Step title={intl.formatMessage({ id: 'about.how.steps.5' })} />
</Steps>
</div>
</div>
</div >
)
const ReadMoreSection = ({ smScreen }: { intl: IntlShape, smScreen: boolean }) => (
<div className="center-content">
<div
className="responsive-padding max-content-width"
style={{
height: smScreen ? 'auto' : 800,
width: '100%',
position: 'relative',
marginBlockEnd: smScreen ? 100 : 0
}}>
<div style={{
position: smScreen ? 'static' : 'absolute',
height: '100%',
display: 'flex', flexDirection: 'column',
justifyContent: smScreen ? 'flex-start' : 'center',
alignItems: 'flex-start',
zIndex: 2
}}>
<div style={{
maxWidth: 500,
marginBottom: smScreen ? 0 : 60,
marginTop: smScreen ? 100 : 0,
}}>
<Paragraph
style={{ ...headingStyles, fontSize: 24 }}
type="secondary">
<FormattedMessage id="about.readMore.heading" />
</Paragraph>
</div>
<Title level={1} style={{
...titleStyles,
fontSize: 56,
marginTop: smScreen ? 20 : '',
maxWidth: 800
}}>
<FormattedMessage id="about.readMore.title" />
</Title>
{/* Placeholder link to Documentation page */}
{/* <Link to={`/${intl.locale}/documentation`}>
<Button ghost style={{ width: 255, height: 38, border: "1.5px solid", marginTop: 30 }} size="large">
<FormattedMessage id="about.readMore.callToAction" />
</Button>
</Link> */}
{/* <a href="mailto:contact@wormholenetwork.com" target="_blank" rel="noopener noreferrer" >
<Button ghost style={{ width: 255, height: 38, border: "1.5px solid", marginTop: 30 }} size="large">
<FormattedMessage id="about.emailUs" />
</Button>
</a> */}
</div>
{smScreen ? null : (
<div style={{ position: 'absolute', right: 0, height: '100%', display: 'flex', alignItems: 'center' }}>
<Hole style={{ right: 0, height: '100%' }} />
</div>
)}
</div>
</div>
)
const About = () => {
const intl = useIntl()
const screens = useBreakpoint();
const smScreen = screens.md === false
return (
<Layout>
<SEO
title={intl.formatMessage({ id: 'homepage.title' })}
description={intl.formatMessage({ id: 'homepage.description' })}
/>
<BriefAboutSection intl={intl} smScreen={smScreen} />
<HowSection intl={intl} smScreen={smScreen} />
<ReadMoreSection intl={intl} smScreen={smScreen} />
<div>
</div>
</Layout>
);
};
export default About

View File

@ -1,166 +1,289 @@
import React, { useRef, useEffect } from 'react';
import { Typography } from 'antd'
const { Title } = Typography
import { useIntl } from 'gatsby-plugin-intl';
import React from 'react';
import { Typography, Grid, Button } from 'antd'
const { Title, Paragraph } = Typography
import { useIntl, FormattedMessage, IntlShape } from 'gatsby-plugin-intl';
import { Link } from 'gatsby'
import { Layout } from '~/components/Layout';
import { SEO } from '~/components/SEO';
import { bodyStyles, headingStyles, titleStyles } from '~/styles'
const { useBreakpoint } = Grid
import { ReactComponent as LayeredCircles } from '~/icons/layered-circles.svg';
import { ReactComponent as CircledArrowDown } from '~/icons/circled-arrow-down.svg';
import { ReactComponent as BinanceChainIcon } from '~/icons/binancechain.svg';
import { ReactComponent as EthereumIcon } from '~/icons/ethereum.svg';
import { ReactComponent as SolanaIcon } from '~/icons/solana.svg';
import { ReactComponent as TerraIcon } from '~/icons/terra.svg';
import { ReactComponent as BinanceChainIcon } from '~/icons/binancechain.svg';
const headerHeight = 64
const footerHeight = 88
const contentHeight = `calc(100vh - (${headerHeight}px + ${footerHeight}px))`
const OpenForBizSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScreen: boolean, howAnchor: string }) => (
<div className="center-content">
<div
className="responsive-padding max-content-width"
style={{
width: '100%',
display: 'flex',
justifyContent: 'space-around',
marginBlock: 180,
}}>
<div style={{
height: '100%',
maxWidth: 650,
display: 'flex', flexDirection: 'column',
justifyContent: 'center', zIndex: 2,
marginRight: 'auto'
}}>
<Title level={1} style={{ ...titleStyles, fontSize: 64 }}>
<FormattedMessage id="homepage.openForBiz.title" />
</Title>
<Paragraph style={{ ...bodyStyles, marginRight: 'auto', marginBottom: 60 }} type="secondary">
<FormattedMessage id="homepage.openForBiz.body" />
</Paragraph>
{/* Placeholder: call to action from designs- to explorer or elsewhere */}
{/* <Link to={`/${intl.locale}/explorer`}>
<Button ghost style={{ width: 160, height: 36, border: "1.5px solid" }} size="large">
<FormattedMessage id="homepage.openForBiz.callToAction" />
</Button>
</Link> */}
</div>
{smScreen ? null : (
<div style={{ display: 'flex', flexDirection: 'column', placeContent: 'center', marginRight: 'auto' }}>
{/* Placeholder: live metric of some kind from designs, commented out until we have some data to put here. */}
{/* <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'flex-end', marginTop: 80, marginRight: 80 }}>
<Text style={{ fontSize: 16 }} type="secondary"><FormattedMessage id="homepage.openForBiz.dataLabel" /></Text>
<Text style={{ fontSize: 24 }} type="warning">12,319,215</Text>
</div> */}
<Link to={'#' + howAnchor} title={intl.formatMessage({ id: "homepage.openForBiz.scrollDownAltText" })} >
<CircledArrowDown style={{ width: 252 }} />
</Link>
</div>
)}
</div>
</div>
)
const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScreen: boolean, howAnchor: string }) => (
<div className="center-content blue-background">
<div
className="responsive-padding max-content-width"
style={{
width: '100%',
display: 'flex',
flexDirection: smScreen ? 'column' : 'row',
justifyContent: smScreen ? 'flex-start' : 'space-between',
marginBlockStart: smScreen ? 200 : 0,
marginBlockEnd: smScreen ? 100 : 0,
}}>
{/* copy layout & formatting */}
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: smScreen ? 'flex-start' : 'center',
alignItems: 'flex-start',
marginBlock: smScreen ? 0 : 200,
zIndex: 2,
}}>
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 60 }}>
<Paragraph style={headingStyles} id={howAnchor}>
{intl.formatMessage({ id: "homepage.aboutUs.heading" }).toLocaleUpperCase()}
</Paragraph>
</div>
<Paragraph style={{ ...bodyStyles, maxWidth: smScreen ? '100%' : 500, marginBottom: 30 }} >
<FormattedMessage id="homepage.aboutUs.body" />
</Paragraph>
<Link to={`/${intl.locale}/about`}>
<Button style={{ width: 160, height: 36, border: "1.5px solid" }} size="large">
<FormattedMessage id="homepage.aboutUs.callToAction" />
</Button>
</Link>
</div>
{/* background image, ternary for seperate mobile layout */}
{smScreen ? (
<div style={{ position: 'relative', marginTop: 60, height: 260, }}>
<div style={{ position: 'absolute', right: 40, height: '100%', display: 'flex', alignItems: 'center', zIndex: 1 }}>
<LayeredCircles style={{ height: 260 }} />
</div>
</div>
) : (
<div style={{
position: 'relative', height: '100%', display: 'flex', alignItems: 'center',
}}>
<div style={{ position: 'absolute', right: -16, height: '100%', display: 'flex', alignItems: 'center', }}>
<LayeredCircles style={{ height: '80%' }} />
</div>
</div>
)}
</div>
</div>
)
const NetworkSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean }) => {
const PartnersImg = <img
src="/images/Partners.gif"
style={{ width: 345, height: 375 }}
alt={intl.formatMessage({ id: 'homepage.network.partnersAnimationAltText' })}
/>
return (
<div className="center-content">
<div
className="responsive-padding max-content-width"
style={{
width: '100%',
minHeight: 550,
display: 'flex',
flexDirection: smScreen ? 'column' : 'row',
justifyContent: smScreen ? 'center' : 'space-between',
overflow: 'hidden',
}}>
<div style={{
height: '100%',
display: 'flex', flexDirection: 'column',
justifyContent: smScreen ? 'flex-start' : 'center',
paddingBlockStart: smScreen ? 100 : 0,
zIndex: 2,
}}>
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 90 }}>
<Paragraph style={headingStyles} type="secondary">
{intl.formatMessage({ id: "homepage.network.heading" }).toLocaleUpperCase()}
</Paragraph>
</div>
<Title level={1} style={{ ...titleStyles, maxWidth: '100%', minWidth: '40%' }}>
{intl.formatMessage({ id: "homepage.network.title" })}
</Title>
<Paragraph style={{ ...bodyStyles, maxWidth: '100%', minWidth: '40%', marginBottom: 30 }} type="secondary" >
<FormattedMessage id="homepage.network.body" />
</Paragraph>
</div>
{smScreen ? (
<div style={{
display: 'flex', justifyContent: 'center',
alignContent: 'center', alignItems: 'center',
marginBottom: 60, width: '100%'
}}>
{PartnersImg}
</div>
) : (
<div style={{
display: 'flex', flexDirection: 'column',
justifyContent: 'center', alignItems: 'center',
margin: '0 8px', minWidth: '40%', maxWidth: 400
}}>
{PartnersImg}
</div>
)}
</div>
</div>
)
}
const WhatWeDoSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean }) => {
const iconStyles = { width: 160, margin: '0 4px' }
const iconWithCaption = (IconEle: React.ElementType, caption: string, figureStyle: object = {}) => {
return <figure style={{ ...iconStyles, ...figureStyle }}>
<IconEle />
<figcaption style={{ textAlign: 'center' }}>{caption}</figcaption>
</figure>
}
return (
<div className="center-content blue-background">
<div
className="responsive-padding max-content-width"
style={{
width: '100%',
display: 'flex',
flexDirection: smScreen ? 'column' : 'row',
justifyContent: smScreen ? 'center' : 'space-between',
marginBlock: 100,
}}>
<div style={{
height: '100%',
display: 'flex', flexDirection: 'column',
justifyContent: smScreen ? 'flex-start' : 'center',
// paddingBlockStart: 100,
}}>
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 60 }}>
<Paragraph style={headingStyles}>
{intl.formatMessage({ id: "homepage.whatWeDo.heading" }).toLocaleUpperCase()}
</Paragraph>
</div>
<Paragraph style={{ ...bodyStyles, maxWidth: '100%', minWidth: '40%', marginBottom: 0 }} type="secondary" >
<FormattedMessage id="homepage.whatWeDo.problem" />
</Paragraph>
<Title level={1} style={{ ...titleStyles, maxWidth: '100%', minWidth: '40%', marginBottom: 40 }}>
{intl.formatMessage({ id: "homepage.whatWeDo.title" })}
</Title>
<Paragraph style={{ ...bodyStyles, maxWidth: '100%', minWidth: '40%' }} type="secondary" >
<FormattedMessage id="homepage.whatWeDo.body" />
</Paragraph>
</div>
{smScreen ? (
<div style={{
display: 'flex', justifyContent: 'space-evenly',
alignContent: 'flex-end', alignItems: 'baseline',
width: '100%', height: 150
}}>
{iconWithCaption(EthereumIcon, 'Ethereum', { width: 70 })}
{iconWithCaption(SolanaIcon, 'Solana', { width: 90 })}
{iconWithCaption(TerraIcon, 'Terra', { width: 90 })}
{iconWithCaption(BinanceChainIcon, 'Binance Smart Chain', { width: 90 })}
</div>
) : (
<div style={{
display: 'flex', flexWrap: 'wrap',
placeContent: 'space-evenly', alignItems: 'center',
margin: '8px',
maxWidth: 400,
width: '100%',
}}>
{iconWithCaption(EthereumIcon, 'Ethereum', { width: 130 })}
{iconWithCaption(SolanaIcon, 'Solana', {})}
{iconWithCaption(TerraIcon, 'Terra', {})}
{iconWithCaption(BinanceChainIcon, 'Binance Smart Chain', {})}
</div>
)}
</div>
</div>
)
}
const Index = () => {
const intl = useIntl()
const canvasRef = useRef<HTMLCanvasElement>(null);
const screens = useBreakpoint();
const smScreen = screens.md === false
const howAnchor = intl.formatMessage({ id: "homepage.aboutUs.heading" }).replace(/\s+/g, '-').toLocaleLowerCase()
useEffect(() => {
if (canvasRef.current) {
// (maybe) TODO: refactor this away from es5?
// maybe not, as this will be replaced by Breakout (design firm) designs.
// pulled this animation from here https://codepen.io/lans/pen/WQGZoZ
// Global Animation Setting
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback: any) {
window.setTimeout(callback, 1000 / 60);
};
// Global Canvas Setting
let canvas = canvasRef.current // document.getElementById('particle');
let ctx = canvas.getContext('2d');
if (ctx != null) {
const resizeCanvas = () => {
canvas.width = window.innerWidth
canvas.height = (window.innerHeight - (headerHeight + footerHeight))
emitter = new Emitter(canvas.width / 2, canvas.height / 2);
}
window.addEventListener('resize', resizeCanvas, false);
canvas.width = window.innerWidth
canvas.height = (window.innerHeight - (headerHeight + footerHeight))
// Particles Around the Parent
const Particle = function (x: number, y: number, dist: number, rbgStr: string) {
this.angle = Math.random() * 2 * Math.PI;
this.radius = Math.random();
this.opacity = (Math.random() * 5 + 2) / 10;
this.distance = (1 / this.opacity) * dist;
this.speed = this.distance * 0.00009
this.position = {
x: x + this.distance * Math.cos(this.angle),
y: y + this.distance * Math.sin(this.angle)
};
this.draw = function () {
if (!ctx) return
ctx.fillStyle = `rgba(${rbgStr},${this.opacity})`
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
this.update = function () {
this.angle += this.speed;
this.position = {
x: x + this.distance * Math.cos(this.angle),
y: y + this.distance * Math.sin(this.angle)
};
this.draw();
}
}
const Emitter = function (x: number, y: number) {
this.position = { x: x, y: y };
this.radius = 60;
this.count = 4000;
this.particles = [];
for (var i = 0; i < this.count; i++) {
this.particles.push(new Particle(this.position.x, this.position.y, this.radius, "255,233,31"));
this.particles.push(new Particle(this.position.x, this.position.y, this.radius, "255,110,253"));
this.particles.push(new Particle(this.position.x, this.position.y, this.radius, "166,128,255"));
this.particles.push(new Particle(this.position.x, this.position.y, this.radius, "128,232,255"));
}
}
Emitter.prototype = {
draw: function () {
if (!ctx) return
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
},
update: function () {
for (var i = 0; i < this.count; i++) {
this.particles[i].update();
}
this.draw();
}
}
let emitter = new Emitter(canvas.width / 2, canvas.height / 2);
const loop = () => {
if (!ctx) return
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.canvas.width = window.innerWidth
ctx.canvas.height = (window.innerHeight - (headerHeight + footerHeight))
emitter.update();
window.requestAnimFrame(loop);
}
loop();
}
}
}, []);
const iconStyles = { width: 100, margin: '0 4px' }
const iconWithCaption = (IconEle: React.ElementType, caption: string, figureStyle: object = {}) => {
return <figure style={{...iconStyles, ...figureStyle}}>
<IconEle />
<figcaption style={{textAlign: 'center'}}>{caption}</figcaption>
</figure>
}
return (
<Layout>
<SEO
<SEO
title={intl.formatMessage({ id: 'homepage.title' })}
description={intl.formatMessage({ id: 'homepage.description' })}
/>
<div style={{ position: 'relative', height: contentHeight, width:"100vw" }}>
<div style={{ position: 'absolute', top: '5vh', zIndex: 100, width: '100%', textAlign: 'center'}}>
<OpenForBizSection intl={intl} smScreen={smScreen} howAnchor={howAnchor} />
<AboutUsSection intl={intl} smScreen={smScreen} howAnchor={howAnchor} />
<NetworkSection intl={intl} smScreen={smScreen} />
{/* <WhatWeDoSection intl={intl} smScreen={smScreen} /> */}
<Title level={1}>{intl.formatMessage({ id: 'homepage.description' })}</Title>
<Title level={2}>{intl.formatMessage({ id: 'homepage.subtext' })}</Title>
</div>
<div style={{ position: 'absolute', bottom: '5vh', zIndex: 100, width: '100%' }}>
<div style={{ display: 'flex', justifyContent: 'space-evenly', alignContent: 'flex-end',
alignItems: 'center', margin: '0 8px'}}>
{iconWithCaption(EthereumIcon, 'Ethereum', {width: 70})}
{iconWithCaption(TerraIcon, 'Terra')}
{iconWithCaption(BinanceChainIcon, 'Binance Smart Chain')}
{iconWithCaption(SolanaIcon, 'Solana')}
</div>
</div>
<canvas ref={canvasRef} height={contentHeight} width="100vw" style={{ position: 'relative', zIndex: 99 }} />
</div>
</Layout>
);
};

View File

@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Typography } from 'antd';
const { Title } = Typography;
import { Typography, Grid } from 'antd';
const { Title, Paragraph } = Typography;
const { useBreakpoint } = Grid
import { injectIntl, WrappedComponentProps } from 'gatsby-plugin-intl';
import { grpc } from '@improbable-eng/grpc-web';
@ -13,6 +14,7 @@ import { PublicrpcGetRawHeartbeatsDesc, GetRawHeartbeatsRequest } from '~/proto/
const Network = ({ intl }: WrappedComponentProps) => {
const [heartbeats, setHeartbeats] = useState<{ [nodeName: string]: Heartbeat }>({})
const screens = useBreakpoint()
const addHeartbeat = (hb: grpc.ProtobufMessage) => {
const hbObj = hb.toObject() as Heartbeat
@ -41,18 +43,22 @@ const Network = ({ intl }: WrappedComponentProps) => {
title={intl.formatMessage({ id: 'network.title' })}
description={intl.formatMessage({ id: 'network.description' })}
/>
<div style={{ margin: '1em' }}>
<Title level={1}>{intl.formatMessage({ id: 'network.title' })}</Title>
{Object.keys(heartbeats).length === 0 ?
<Title level={2}>
{intl.formatMessage({ id: 'network.listening' })}
</Title>
:
<Title level={2}>
{Object.keys(heartbeats).length}&nbsp;
{intl.formatMessage({ id: 'network.guardiansFound' })}
</Title>
}
<div
style={{
padding: screens.md === false ? 'inherit' : '48px 0 0 100px'
}} >
<div style={{ padding: screens.md === false ? '100px 0 0 16px' : '' }} >
<Title level={1} style={{ fontWeight: 'normal' }}>{intl.formatMessage({ id: 'network.title' })}</Title>
<Paragraph style={{ fontSize: 24, fontWeight: 400, lineHeight: '36px' }} type="secondary">
{Object.keys(heartbeats).length === 0 ? (
intl.formatMessage({ id: 'network.listening' })
) :
<>
{Object.keys(heartbeats).length}&nbsp;
{intl.formatMessage({ id: 'network.guardiansFound' })}
</>}
</Paragraph>
</div>
<GuardiansTable heartbeats={heartbeats} intl={intl} />
</div>
</Layout>

8
explorer/src/styles.ts Normal file
View File

@ -0,0 +1,8 @@
// shared styles, applied as element styles
export const headingStyles = {
fontSize: 18,
fontWeight: 400,
marginBottom: '0.5em',
}
export const titleStyles = { fontWeight: 400 }
export const bodyStyles = { fontSize: 26, fontWeight: 400, lineHeight: '36px' }

View File

@ -0,0 +1,51 @@
import React from 'react'
import { IntlShape } from 'gatsby-plugin-intl';
import { ReactComponent as DiscordIcon } from '~/icons/Discord.svg';
import { ReactComponent as GithubIcon } from '~/icons/Github.svg';
import { ReactComponent as MediumIcon } from '~/icons/Medium.svg';
import { ReactComponent as TelegramIcon } from '~/icons/Telegram.svg';
import { ReactComponent as TwitterIcon } from '~/icons/Twitter.svg';
interface KeyToElement { [service: string]: React.SFC<React.SVGProps<SVGSVGElement>> }
const socialLinks: { [service: string]: string } = {
'discord': "https://discord.gg/xsT8qrHAvV",
'github': "https://github.com/certusone/wormhole",
'medium': "http://wormholecrypto.medium.com",
'telegram': "https://t.me/wormholecrypto",
'twitter': "https://twitter.com/wormholecrypto",
}
const socialIcons: KeyToElement = {
'discord': DiscordIcon,
'github': GithubIcon,
'medium': MediumIcon,
'telegram': TelegramIcon,
'twitter': TwitterIcon,
}
// map of url to SVGIcon
const externalLinks = Object.keys(socialLinks).reduce<KeyToElement>((accum, service) => (
{ ...accum, [socialLinks[service]]: socialIcons[service] }
), Object())
// map of url to name
const linkToService = Object.entries(socialLinks).reduce<{ [url: string]: string }>((accum, [service, url]) => (
{ ...accum, [url]: service }
), Object())
const externalLinkProps = { target: "_blank", rel: "noopener noreferrer", className: "no-external-icon" }
const socialAnchorArray = (intl: IntlShape, linkStyles: any = {}, iconStyle: any = {}) =>
Object.entries(externalLinks).map(([url, Icon]) => <a
href={url}
key={url}
{...externalLinkProps}
style={linkStyles}
title={intl.formatMessage({ id: `nav.${linkToService[url]}AltText` })}
>
<Icon style={iconStyle} className="external-icon" />
</a>)
export { socialLinks, socialIcons, externalLinks, linkToService, socialAnchorArray }

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1014 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

View File

@ -0,0 +1,8 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.18 86.09" style='background-color: #202225;'>
<defs>
<style>.cls-1{fill:red;}.cls-2{fill:#0073ff;}.cls-3{fill:#00f3d7;}</style>
</defs>
<path class="cls-1" d="M30.29,43.05A47.76,47.76,0,0,0,16.72,9.63a1.7,1.7,0,0,0-1.2-.5H4.34A1.67,1.67,0,0,0,2.67,10.8V22.29A1.69,1.69,0,0,0,4.24,24a19.15,19.15,0,0,1,0,38.18A1.68,1.68,0,0,0,2.67,63.8V75.29A1.68,1.68,0,0,0,4.34,77H15.52a1.66,1.66,0,0,0,1.2-.51A47.75,47.75,0,0,0,30.29,43.05Z"/>
<path class="cls-2" d="M70.51,63.8a1.68,1.68,0,0,0-1.57-1.66,19.15,19.15,0,0,1,0-38.18,1.69,1.69,0,0,0,1.57-1.67V10.8a1.67,1.67,0,0,0-1.67-1.67H57.66a1.7,1.7,0,0,0-1.2.5,47.93,47.93,0,0,0,0,66.83,1.66,1.66,0,0,0,1.2.51H68.84a1.68,1.68,0,0,0,1.67-1.68Z"/>
<path class="cls-3" d="M28.06,3.14a1.89,1.89,0,0,0-1.75,2.58,102.89,102.89,0,0,1,7.05,37.33,102.87,102.87,0,0,1-7,37.32A1.89,1.89,0,0,0,28.06,83h17a1.88,1.88,0,0,0,1.74-2.58,102.33,102.33,0,0,1,0-74.65,1.88,1.88,0,0,0-1.74-2.58Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -0,0 +1,16 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.65 87.18" style="background-color: #202225;">
<defs>
<style>.cls-1{fill:#fff;}.cls-2{fill:red;}.cls-3{fill:#0073ff;}.cls-4{fill:#00f3d7;}</style>
</defs>
<polygon class="cls-1" points="113.06 53.74 112.03 53.74 106.41 30.71 99.6 30.71 94.78 53.74 93.75 53.74 87.15 29.77 82.33 29.77 90.23 57.72 91.39 57.72 93.95 57.72 94.84 57.72 97.19 57.72 98.08 57.72 103.01 34.48 108.71 57.72 109.75 57.72 112.11 57.72 113 57.72 115.56 57.72 116.51 57.72 123.36 29.77 118.81 29.77 113.06 53.74"/>
<path class="cls-1" d="M153.56,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,153.56,33.36ZM151.28,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.72,11.72,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/>
<path class="cls-1" d="M171.48,32.31A10.42,10.42,0,0,0,169,38.18V29.77h-4v28h5V42.59a8.61,8.61,0,0,1,2.25-6.41A8.79,8.79,0,0,1,178.73,34h1.78v-4.5h-.94Q174.19,29.46,171.48,32.31Z"/>
<path class="cls-1" d="M223.58,30.45a9.43,9.43,0,0,0-5.49-1.52h-.21a9.34,9.34,0,0,0-5.47,1.52,9.14,9.14,0,0,0-3.27,4.37c-.13.35-.24.72-.35,1.09-.1-.37-.2-.74-.33-1.09a8.88,8.88,0,0,0-3.22-4.37,9.34,9.34,0,0,0-5.47-1.52h-.21a8.5,8.5,0,0,0-8.66,5.89,14.1,14.1,0,0,0-.45,1.43V29.77h-4v28h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2A6,6,0,0,1,203,35.4a7.62,7.62,0,0,1,1.67,5.26V57.72h5V41a7.56,7.56,0,0,1,1.89-5.47,6.55,6.55,0,0,1,5-2,6,6,0,0,1,4.66,1.86,7.62,7.62,0,0,1,1.67,5.26V57.72h5v-16a19.68,19.68,0,0,0-1.08-6.94A8.9,8.9,0,0,0,223.58,30.45Z"/>
<path class="cls-1" d="M251.27,28.93h-.21a9.62,9.62,0,0,0-5.76,1.63,9.26,9.26,0,0,0-3.14,4.2V19.51h-5V57.72h5V41.6a8.35,8.35,0,0,1,2-5.84,6.88,6.88,0,0,1,5.36-2.22,6.79,6.79,0,0,1,5,1.88,7.12,7.12,0,0,1,1.91,5.29v17h5v-16q0-6.18-2.56-9.5T251.27,28.93Z"/>
<path class="cls-1" d="M294.55,33.36a14.28,14.28,0,0,0-4.71-3.3,16.93,16.93,0,0,0-12.67,0,14.25,14.25,0,0,0-7.64,8,14.64,14.64,0,0,0-1,5.26v.95a14.59,14.59,0,0,0,1,5.23,13.94,13.94,0,0,0,2.88,4.63,14.14,14.14,0,0,0,4.68,3.32,17.06,17.06,0,0,0,12.87,0,14.15,14.15,0,0,0,7.57-7.95,14.8,14.8,0,0,0,1-5.23v-.95a14.64,14.64,0,0,0-1-5.26A14.23,14.23,0,0,0,294.55,33.36ZM292.27,49a9.09,9.09,0,0,1-3.4,3.74,11,11,0,0,1-10.73,0,9.16,9.16,0,0,1-3.4-3.74,11.59,11.59,0,0,1-1.18-5.29,11.46,11.46,0,0,1,1.21-5.33,9.1,9.1,0,0,1,3.45-3.72,11,11,0,0,1,10.6,0,9.26,9.26,0,0,1,3.43,3.72,12.44,12.44,0,0,1,0,10.62Z"/>
<polygon class="cls-1" points="302.45 19.51 302.45 23.49 306.32 23.49 306.32 57.72 311.35 57.72 311.35 23.49 311.35 19.51 306.32 19.51 302.45 19.51"/>
<path class="cls-1" d="M345.89,42.44a15.43,15.43,0,0,0-1.44-6.6,12.09,12.09,0,0,0-4.4-5.05,13.28,13.28,0,0,0-7.5-2,14.07,14.07,0,0,0-6.1,1.23,12,12,0,0,0-4.27,3.3A14.09,14.09,0,0,0,319.7,38a17.13,17.13,0,0,0-.81,5.28v.95a17,17,0,0,0,.81,5.23,14.09,14.09,0,0,0,2.48,4.63,12.07,12.07,0,0,0,4.35,3.32,14.71,14.71,0,0,0,6.33,1.26,15.15,15.15,0,0,0,5.91-1.1,10.89,10.89,0,0,0,6.65-8.16h-4.71a5.7,5.7,0,0,1-2.49,3.4,10.49,10.49,0,0,1-10.54.08,8.14,8.14,0,0,1-3-3.77,13.74,13.74,0,0,1-.93-4.42h22.15ZM327.6,34.59a8.47,8.47,0,0,1,4.95-1.36,8.73,8.73,0,0,1,4.76,1.2,7.37,7.37,0,0,1,2.82,3.37,11.69,11.69,0,0,1,.81,3.12h-17a12.45,12.45,0,0,1,.74-2.62A8.09,8.09,0,0,1,327.6,34.59Z"/>
<path class="cls-2" d="M33.39,43.59A47.78,47.78,0,0,0,19.81,10.17a1.68,1.68,0,0,0-1.2-.5H7.44a1.68,1.68,0,0,0-1.68,1.67V22.83A1.68,1.68,0,0,0,7.33,24.5a19.15,19.15,0,0,1,0,38.18,1.68,1.68,0,0,0-1.57,1.67V75.84a1.68,1.68,0,0,0,1.68,1.67H18.61a1.68,1.68,0,0,0,1.2-.5A47.78,47.78,0,0,0,33.39,43.59Z"/>
<path class="cls-3" d="M73.6,64.35A1.68,1.68,0,0,0,72,62.68,19.15,19.15,0,0,1,72,24.5a1.68,1.68,0,0,0,1.57-1.67V11.34a1.67,1.67,0,0,0-1.67-1.67H60.75a1.7,1.7,0,0,0-1.2.5,47.94,47.94,0,0,0,0,66.84,1.7,1.7,0,0,0,1.2.5H71.93a1.67,1.67,0,0,0,1.67-1.67Z"/>
<path class="cls-4" d="M31.15,3.69a1.88,1.88,0,0,0-1.74,2.58,102.82,102.82,0,0,1,7,37.32,102.82,102.82,0,0,1-7,37.32,1.88,1.88,0,0,0,1.74,2.58h17a1.88,1.88,0,0,0,1.74-2.58,102.3,102.3,0,0,1,0-74.64,1.88,1.88,0,0,0-1.74-2.58Z"/>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -0,0 +1,73 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="688.000000pt" height="688.000000pt" viewBox="0 0 688.000000 688.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,688.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2710 6617 c-53 -25 -71 -43 -86 -89 -18 -54 -15 -67 46 -228 37 -99
177 -518 184 -552 3 -13 14 -54 26 -93 12 -38 24 -81 27 -95 10 -50 11 -55 13
-55 1 0 3 -7 5 -15 1 -8 15 -62 29 -119 24 -92 101 -459 113 -536 2 -16 6 -41
9 -55 4 -26 31 -205 40 -272 7 -53 11 -84 19 -158 3 -36 8 -76 11 -90 2 -14 6
-62 9 -105 3 -44 8 -100 10 -125 24 -271 24 -945 0 -1192 -2 -20 -7 -72 -10
-115 -3 -43 -8 -94 -10 -113 -2 -19 -7 -62 -10 -95 -4 -33 -8 -71 -10 -85 -2
-14 -7 -52 -11 -85 -3 -33 -8 -62 -9 -65 -2 -3 -6 -30 -10 -60 -3 -30 -8 -62
-10 -70 -2 -8 -7 -33 -10 -55 -3 -23 -7 -50 -9 -60 -5 -25 -34 -181 -40 -215
-3 -20 -56 -256 -71 -320 -15 -67 -60 -234 -85 -320 -17 -58 -33 -112 -35
-120 -2 -8 -11 -37 -20 -65 -10 -27 -19 -57 -20 -65 -2 -8 -4 -15 -5 -15 -1 0
-3 -7 -5 -15 -2 -8 -29 -87 -60 -175 -32 -88 -70 -196 -86 -240 -25 -71 -27
-85 -17 -123 13 -53 60 -99 111 -109 47 -10 1393 -9 1431 1 59 15 112 90 107
151 -2 25 -37 129 -71 210 -68 167 -246 754 -274 905 -2 14 -5 25 -6 25 -1 0
-3 7 -5 16 -1 10 -11 50 -20 90 -19 85 -20 88 -40 189 -8 41 -16 85 -19 96 -2
12 -7 37 -10 55 -3 19 -8 44 -10 56 -3 11 -7 41 -11 65 -3 23 -8 57 -10 73 -3
17 -6 39 -9 50 -6 30 -21 158 -19 173 0 6 -2 12 -6 12 -3 0 -6 12 -7 28 0 15
-4 61 -8 102 -59 544 -63 1194 -11 1670 3 25 7 70 10 100 11 106 13 125 19
160 4 19 8 51 10 70 7 53 26 180 31 204 2 12 7 39 10 61 3 22 7 47 10 55 2 8
6 31 9 50 5 33 19 105 31 160 3 14 8 39 11 55 3 17 9 48 15 70 10 40 14 60 24
103 11 49 14 59 30 122 9 36 18 70 19 75 1 6 5 19 9 30 3 11 8 31 11 45 11 54
95 330 130 428 8 23 16 46 17 50 1 4 3 12 5 17 2 6 24 66 48 135 24 69 54 150
65 180 27 70 26 112 -1 161 -42 76 -6 72 -803 75 -527 2 -716 -1 -735 -9z"/>
<path d="M804 6134 c-17 -8 -39 -32 -50 -54 -19 -37 -20 -59 -18 -527 0 -268
2 -493 3 -500 0 -6 13 -25 27 -42 27 -33 71 -49 156 -56 29 -3 64 -7 78 -11
14 -3 39 -8 55 -10 107 -19 301 -90 408 -151 33 -18 63 -33 68 -33 5 0 9 -4 9
-10 0 -5 5 -10 11 -10 19 0 191 -135 263 -207 109 -108 207 -241 283 -383 55
-103 119 -281 139 -385 4 -22 9 -47 10 -55 18 -90 24 -357 10 -459 -9 -72 -34
-188 -48 -231 -7 -19 -13 -39 -14 -45 -5 -23 -54 -145 -81 -200 -47 -95 -109
-198 -148 -242 -5 -7 -19 -25 -30 -40 -57 -78 -238 -244 -338 -311 -118 -78
-347 -194 -347 -175 0 3 -6 1 -13 -5 -13 -10 -203 -60 -259 -68 -18 -2 -57 -7
-86 -10 -80 -8 -116 -26 -143 -74 -11 -20 -14 -118 -15 -515 -1 -480 -1 -491
20 -528 39 -72 24 -70 563 -71 531 0 493 -4 564 67 19 19 60 63 90 97 30 35
59 68 64 74 6 6 41 49 78 96 37 47 71 90 75 95 4 6 37 53 72 105 36 52 67 97
70 100 3 3 11 16 19 30 29 49 75 125 91 150 27 40 171 330 164 330 -4 0 -2 6
4 13 28 34 150 366 191 521 11 39 22 78 25 86 3 8 7 26 10 40 2 14 10 48 16
75 6 28 13 59 16 70 2 11 6 31 9 45 9 47 17 95 19 115 1 11 5 38 9 60 38 238
49 681 22 903 -3 26 -8 70 -11 97 -4 43 -16 123 -29 200 -2 11 -6 36 -9 55 -7
45 -14 78 -20 98 -3 9 -7 28 -10 42 -11 63 -86 329 -113 400 -3 8 -7 20 -9 25
-4 17 -75 197 -96 245 -56 125 -205 418 -219 430 -3 3 -12 16 -19 30 -24 45
-123 195 -132 198 -4 2 -8 8 -8 13 0 27 -239 320 -361 441 l-77 77 -489 1
c-418 0 -492 -2 -519 -16z"/>
<path d="M5065 6131 c-45 -27 -203 -201 -300 -329 -5 -7 -18 -21 -27 -30 -10
-9 -18 -20 -18 -25 0 -5 -7 -15 -15 -23 -17 -17 -186 -272 -238 -360 -64 -108
-230 -444 -233 -473 0 -3 -8 -23 -17 -45 -9 -21 -17 -40 -17 -42 0 -1 -5 -15
-12 -31 -6 -15 -12 -30 -13 -33 0 -3 -18 -56 -39 -119 -31 -94 -58 -188 -80
-281 -2 -8 -15 -69 -29 -135 -24 -113 -29 -145 -43 -247 -3 -24 -7 -58 -9 -75
-15 -109 -20 -217 -20 -443 0 -221 10 -433 20 -450 2 -3 6 -32 10 -65 3 -33 7
-67 9 -75 1 -8 6 -35 10 -60 4 -25 8 -52 10 -60 1 -8 5 -24 9 -35 3 -11 8 -37
12 -59 3 -21 7 -42 10 -46 2 -3 7 -22 10 -41 5 -32 33 -135 56 -206 5 -18 12
-40 14 -50 8 -37 88 -258 119 -328 8 -16 26 -59 42 -95 95 -219 280 -533 416
-707 26 -35 48 -65 48 -68 0 -4 6 -12 13 -19 27 -29 67 -76 67 -80 0 -3 10
-16 23 -28 28 -31 170 -189 177 -198 3 -4 20 -15 38 -24 29 -15 81 -16 520
-14 469 3 488 4 514 23 55 41 55 38 54 575 -1 463 -3 497 -20 523 -21 32 -72
58 -118 62 -117 10 -283 46 -378 82 -8 3 -21 7 -28 9 -25 5 -237 112 -287 145
-129 85 -283 224 -365 329 -19 25 -38 47 -42 48 -4 2 -8 9 -8 16 0 7 -9 21
-20 31 -11 10 -20 24 -20 31 0 7 -3 14 -7 16 -33 14 -182 355 -199 452 -2 11
-8 44 -14 71 -23 110 -33 352 -18 475 41 342 195 658 443 903 90 89 136 128
205 173 25 16 50 34 56 40 11 9 196 103 249 126 22 9 168 59 173 58 1 0 3 0 5
1 2 1 7 2 87 17 58 12 124 22 177 28 44 4 87 28 109 61 18 26 19 56 20 523 1
551 2 541 -66 579 -37 21 -48 21 -516 21 -449 0 -481 -1 -509 -19z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -0,0 +1,19 @@
{
"name": "Wormhole Network",
"short_name": "Wormhole",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#00EFD8",
"background_color": "#141449",
"display": "standalone"
}