import last landing page status from drop box

This commit is contained in:
Maximilian Schneider 2021-07-08 14:33:11 +02:00
parent 2bc93297cf
commit 1b5ccf34d0
123 changed files with 7008 additions and 3357 deletions

View File

@ -1,14 +1,3 @@
{
"presets": [
"next/babel"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
"presets": ["next/babel"]
}

3
.eslintignore Normal file
View File

@ -0,0 +1,3 @@
**/node_modules/*
**/out/*
**/.next/*

47
.eslintrc.json Normal file
View File

@ -0,0 +1,47 @@
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
// Uncomment the following lines to enable eslint-config-prettier
// Is not enabled right now to avoid issues with the Next.js repo
// "prettier",
],
"env": {
"es6": true,
"browser": true,
"jest": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"react/react-in-jsx-scope": 0,
"react/display-name": 0,
"react/prop-types": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/no-use-before-define": 0,
"@typescript-eslint/no-unused-vars": [
2,
{
"argsIgnorePattern": "^_"
}
],
"no-console": [
2,
{
"allow": ["warn", "error"]
}
]
}
}

1
.husky/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
_

4
.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged

4
.husky/pre-push Executable file
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn type-check && yarn lint

6
.prettierignore Normal file
View File

@ -0,0 +1,6 @@
node_modules
.next
yarn.lock
package-lock.json
public
components/charting_library

4
.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"semi": false,
"singleQuote": true
}

4
@types/index.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module '*.svg' {
const content: any
export default content
}

62
@types/types.tsx Normal file
View File

@ -0,0 +1,62 @@
import {
AccountInfo,
Connection,
PublicKey,
Transaction,
} from '@solana/web3.js'
import Wallet from '@project-serum/sol-wallet-adapter'
export interface ConnectionContextValues {
endpoint: string
setEndpoint: (newEndpoint: string) => void
connection: Connection
sendConnection: Connection
availableEndpoints: EndpointInfo[]
setCustomEndpoints: (newCustomEndpoints: EndpointInfo[]) => void
}
export interface EndpointInfo {
name: string
url: string
websocket: string
}
export interface WalletContextValues {
wallet: Wallet
connected: boolean
providerUrl: string
setProviderUrl: (newProviderUrl: string) => void
providerName: string
}
export interface TokenAccount {
pubkey: PublicKey
account: AccountInfo<Buffer> | null
effectiveMint: PublicKey
}
/**
* {tokenMint: preferred token account's base58 encoded public key}
*/
export interface SelectedTokenAccounts {
[tokenMint: string]: string
}
// Token infos
export interface KnownToken {
tokenSymbol: string
tokenName: string
icon?: string
mintAddress: string
}
export interface WalletAdapter {
publicKey: PublicKey
autoApprove: boolean
connected: boolean
signTransaction: (transaction: Transaction) => Promise<Transaction>
signAllTransactions: (transaction: Transaction[]) => Promise<Transaction[]>
connect: () => any
disconnect: () => any
on(event: string, fn: () => void): this
}

View File

@ -1,41 +1,27 @@
# TypeScript Next.js example
# NextJS Typescript Boilerplate
This is a really simple project that shows the usage of Next.js with TypeScript.
Bootstrap a developer-friendly NextJS app configured with:
- [Typescript](https://www.typescriptlang.org/)
- Linting with [ESLint](https://eslint.org/)
- Formatting with [Prettier](https://prettier.io/)
- Linting, typechecking and formatting on by default using [`husky`](https://github.com/typicode/husky) for commit hooks
- Testing with [Jest](https://jestjs.io/) and [`react-testing-library`](https://testing-library.com/docs/react-testing-library/intro)
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript&project-name=with-typescript&repository-name=with-typescript)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest&project-name=with-typescript-eslint-jest&repository-name=with-typescript-eslint-jest)
## How to use it?
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
npx create-next-app --example with-typescript with-typescript-app
npx create-next-app --example with-typescript-eslint-jest with-typescript-eslint-jest-app
# or
yarn create next-app --example with-typescript with-typescript-app
yarn create next-app --example with-typescript-eslint-jest with-typescript-eslint-jest-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
## Notes
This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript.
```
npm install --save-dev typescript
```
To enable TypeScript's features, we install the type declarations for React and Node.
```
npm install --save-dev @types/react @types/react-dom @types/node
```
When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings.
Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts.

35
components/Balances.tsx Normal file
View File

@ -0,0 +1,35 @@
import BN from 'bn.js'
import useWalletStore from '../stores/useWalletStore'
const Balances = () => {
const { tokenAccounts, mints } = useWalletStore((state) => state)
function fixedPointToNumber(value: BN, decimals: number) {
const divisor = new BN(10).pow(new BN(decimals))
const quotient = value.div(divisor)
const remainder = value.mod(divisor)
return quotient.toNumber() + remainder.toNumber() / divisor.toNumber()
}
function calculateBalance(a) {
const mint = mints[a.account.mint.toBase58()]
return mint ? fixedPointToNumber(a.account.amount, mint.decimals) : 0
}
const displayedBalances = tokenAccounts
.map((a) => ({ id: a.publicKey.toBase58(), balance: calculateBalance(a) }))
.sort((a, b) => (a.id > b.id ? 1 : -1))
return (
<ul>
{displayedBalances.map((b) => (
<li key={b.id}>
{b.id}: {b.balance}
</li>
))}
</ul>
)
}
export default Balances

View File

@ -0,0 +1,24 @@
const CardSection = () => {
return (
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-4 -mb-4 md:mb-0">
<div class="w-full md:w-1/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Small1.png" alt="" />
</div>
<div class="w-full md:w-2/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Large1.png" alt="" />
</div>
</div>
<div class="flex flex-wrap -mx-4 -mb-4 md:mb-0">
<div class="w-full md:w-2/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Large2.png" alt="" />
</div>
<div class="w-full md:w-1/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Small2.png" alt="" />
</div>
</div>
</div>
)
}
export default CardSection

View File

@ -0,0 +1,45 @@
import styled from '@emotion/styled'
import useWalletStore from '../stores/useWalletStore'
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
import useLocalStorageState from '../hooks/useLocalStorageState'
import WalletSelect from './WalletSelect'
import WalletIcon from './WalletIcon'
const StyledWalletTypeLabel = styled.div`
font-size: 0.6rem;
`
const ConnectWalletButton = () => {
const wallet = useWalletStore((s) => s.current)
const [savedProviderUrl] = useLocalStorageState(
'walletProvider',
DEFAULT_PROVIDER.url
)
return (
<div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
<button
onClick={() => wallet.connect()}
disabled={!wallet}
className="text-th-primary hover:text-th-fgd-1 focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
>
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
<div>
<span className="whitespace-nowrap">Connect Wallet</span>
<StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
{WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
({ name }) => name
)}
</StyledWalletTypeLabel>
</div>
</div>
</button>
<div className="relative h-full">
<WalletSelect isPrimary />
</div>
</div>
)
}
export default ConnectWalletButton

View File

@ -1,25 +0,0 @@
import { Space } from "antd";
export default function ContactIcons() {
return (
<>
<Space size="large">
<a href="https://discord.gg/67jySBhxrg">
<img height="40px" width="40px" src="/contact/discord.svg" />
</a>
<a href="https://twitter.com/mangomarkets">
<img height="40px" width="40px" src="/contact/twitter.svg" />
</a>
<a href="https://github.com/blockworks-foundation">
<img height="40px" width="40px" src="/contact/github.svg" />
</a>
<a href="mailto:hello@blockworks.foundation">
<img height="40px" width="40px" src="/contact/email.svg" />
</a>
</Space>
</>
);
}

View File

@ -0,0 +1,36 @@
const EmailSection = () => {
return (
<div class="container mx-auto px-4">
<section class="py-8 px-4">
<div class="flex flex-wrap items-center text-center md:text-left -mx-2">
<div class="lg:w-1/2 px-2 lg:pl-16 mt-10 lg:mt-0 order-1 lg:order-none">
<h2 class="text-4xl mb-6 font-semibold font-heading">
Keep in touch through email.
</h2>
<form class="w-full max-w-lg mx-auto sm:mx-0">
<div class="flex flex-wrap">
<div class="w-full md:w-2/3 mb-4">
<input
class="appearance-none block w-full py-3 px-4 leading-snug text-gray-700 bg-gray-50 focus:bg-white border border-gray-200 focus:border-gray-500 rounded md:rounded-r-none focus:outline-none"
type="text"
placeholder="Your email @protnmail.com.."
/>
</div>
<div class="w-full md:w-1/3 mb-4">
<button class="inline-block w-full py-4 px-8 leading-none text-white bg-indigo-600 hover:bg-indigo-700 font-semibold rounded md:rounded-l-none">
Subscribe
</button>
</div>
<div class="w-full">
<p>We promise to never spam and only send alpha.</p>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
)
}
export default EmailSection

View File

@ -0,0 +1,350 @@
const FeatureSection = () => {
return (
<div class="bg-th-bkg-3 transform -skew-y-3 pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64">
<div class="max-w-7xl mx-auto px-4 transform skew-y-3">
<section class="py-12 px-3">
<div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
<div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
<h2 class="text-5xl mb-6 leading-tight font-semibold font-heading">
Simple, intuitive, and fast.{' '}
</h2>
<p class="mb-8 text-gray-400 leading-relaxed">
The Mango margin protocol is a fully open-source margin trading
exchange. Its best in class user interface provides access to
deep liquidity and high leverage for traders, built by traders.{' '}
</p>
<div>
<button
class="inline-flex items-center px-8 py-2 text-lg text-white font-bold bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500 hover:bg-blue-600 rounded-full transition duration-200"
href="#"
>
<span class="pr-4">Start trading</span>
<svg
width="9"
height="16"
viewBox="0 0 9 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1.6665L7.8963 7.99984L1 14.3332"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="py-28 px-4">
<div class="flex flex-wrap -mx-4 mb-6">
<div class="lg:w-1/3 px-4 mb-6">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.8668 10.8357C13.1764 10.6293 13.5588 10.4448 14 10.302L14 13.698C13.5588 13.5552 13.1764 13.3707 12.8668 13.1643C12.1385 12.6788 12 12.2278 12 12C12 11.7722 12.1385 11.3212 12.8668 10.8357Z"
fill="url(#paint0_linear)"
/>
<path
d="M18 21.698L18 18.302C18.4412 18.4448 18.8237 18.6293 19.1333 18.8357C19.8615 19.3212 20 19.7722 20 20C20 20.2278 19.8615 20.6788 19.1333 21.1643C18.8237 21.3707 18.4413 21.5552 18 21.698Z"
fill="url(#paint1_linear)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM18 6C18 4.89543 17.1046 4 16 4C14.8954 4 14 4.89543 14 6V6.18399C12.7568 6.41745 11.607 6.86814 10.648 7.50747C9.20461 8.46971 8 10.0187 8 12C8 13.9813 9.20461 15.5303 10.648 16.4925C11.607 17.1319 12.7568 17.5826 14 17.816L14 21.6985C13.218 21.4446 12.6383 21.0638 12.3133 20.6892C11.5894 19.855 10.3263 19.7655 9.49198 20.4894C8.6577 21.2133 8.56822 22.4765 9.29213 23.3108C10.4171 24.6073 12.1191 25.4617 14 25.8153L14 26C14 27.1045 14.8954 28 16 28C17.1045 28 18 27.1046 18 26L18 25.816C19.2432 25.5826 20.3931 25.1319 21.3521 24.4925C22.7954 23.5303 24 21.9813 24 20C24 18.0187 22.7954 16.4697 21.3521 15.5075C20.3931 14.8681 19.2432 14.4175 18 14.184L18 10.3015C18.782 10.5554 19.3617 10.9362 19.6867 11.3108C20.4106 12.145 21.6738 12.2345 22.5081 11.5106C23.3423 10.7867 23.4318 9.52353 22.7079 8.68925C21.5829 7.39273 19.8809 6.5383 18 6.18472V6Z"
fill="url(#paint2_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-15"
y1="-31.5"
x2="41.5"
y2="25.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.536458" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="-15"
y1="-31.5"
x2="41.5"
y2="25.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.536458" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="-15"
y1="-31.5"
x2="41.5"
y2="25.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.536458" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
</defs>
</svg>
<h3 class="text-xl my-3 font-semibold font-heading">
Maximum capital efficiency
</h3>
<p class="text-gray-400 leading-relaxed">
Utilize all your assets as collateral to trade any other asset
with up to 5x leverage.{' '}
</p>
</div>
<div class="lg:w-1/3 px-4 mb-6">
<svg
width="26"
height="33"
viewBox="0 0 26 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.4155 0.0849461C16.1886 0.325514 16.7143 1.03326 16.7143 1.83345V11L24.1429 11C24.8353 11 25.4703 11.3804 25.7901 11.9867C26.1099 12.5931 26.0614 13.3247 25.6643 13.8847L12.6643 32.2179C12.1994 32.8734 11.3576 33.1556 10.5845 32.9151C9.81144 32.6745 9.28572 31.9667 9.28572 31.1665L9.28572 22H1.85715C1.16466 22 0.529698 21.6196 0.209902 21.0133C-0.109894 20.4069 -0.0613954 19.6753 0.335717 19.1153L13.3357 0.782112C13.8006 0.126572 14.6424 -0.155622 15.4155 0.0849461Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-23.5"
y1="-35.5"
x2="26"
y2="44.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.5" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
</defs>
</svg>
<h3 class="text-xl my-3 font-semibold font-heading">
Sub-second latency
</h3>
<p class="text-gray-400 leading-relaxed">
Low latency allows market makers to post tight spreads on the
books. That means Instant order execution at the price of less
than a cent.
</p>
</div>
<div class="lg:w-1/3 px-4 mb-6">
<svg
width="29"
height="33"
viewBox="0 0 29 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.14286 0C1.85482 0 0 1.84683 0 4.125V33L7.25 28.875L14.5 33L21.75 28.875L29 33V4.125C29 1.84683 27.1452 0 24.8571 0H4.14286ZM9.32143 6.1875C7.6054 6.1875 6.21429 7.57262 6.21429 9.28125C6.21429 10.9899 7.6054 12.375 9.32143 12.375C11.0375 12.375 12.4286 10.9899 12.4286 9.28125C12.4286 7.57262 11.0375 6.1875 9.32143 6.1875ZM22.179 6.79159C21.3701 5.98614 20.0585 5.98614 19.2496 6.79159L6.82099 19.1666C6.01205 19.972 6.01205 21.278 6.82099 22.0834C7.62994 22.8889 8.94149 22.8889 9.75043 22.0834L22.179 9.70841C22.988 8.90295 22.988 7.59705 22.179 6.79159ZM19.6786 16.5C17.9625 16.5 16.5714 17.8851 16.5714 19.5938C16.5714 21.3024 17.9625 22.6875 19.6786 22.6875C21.3946 22.6875 22.7857 21.3024 22.7857 19.5938C22.7857 17.8851 21.3946 16.5 19.6786 16.5Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-32.0208"
y1="-20.1667"
x2="59.8765"
y2="42.4076"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.520833" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
</defs>
</svg>
<h3 class="text-xl my-3 font-semibold font-heading">
The lowest fees
</h3>
<p class="text-gray-400 leading-relaxed">
Trade with the lowest fee possible. SRM deposits are pooled for
a collective discount. Mango is the first protocol to charge
zero fees on margin borrowing & lending.
</p>
</div>
</div>
<div class="flex flex-wrap -mx-4 -mb-6">
<div class="lg:w-1/3 px-4 mb-6">
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.5 31C24.0604 31 31 24.0604 31 15.5C31 6.93959 24.0604 0 15.5 0C6.93959 0 0 6.93959 0 15.5C0 24.0604 6.93959 31 15.5 31ZM4.51784 11.6781C5.24176 9.59761 6.54018 7.78612 8.22315 6.43358C8.74218 7.22622 9.63808 7.74983 10.6563 7.74983C12.2614 7.74983 13.5625 9.051 13.5625 10.6561V11.6248C13.5625 13.7649 15.2974 15.4998 17.4375 15.4998C19.5776 15.4998 21.3125 13.7649 21.3125 11.6248C21.3125 9.80335 22.5693 8.2754 24.263 7.86081C26.0454 9.90374 27.125 12.5757 27.125 15.4999C27.125 16.1601 27.07 16.8075 26.9642 17.4377H25.1875C23.0473 17.4377 21.3125 19.1726 21.3125 21.3127V25.5697C19.6026 26.5588 17.6172 27.1249 15.4998 27.1249V23.25C15.4998 21.1099 13.7649 19.375 11.6248 19.375C9.48473 19.375 7.74984 17.6401 7.74984 15.5C7.74984 13.579 6.35192 11.9844 4.51784 11.6781Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-29.0625"
y1="-7.75"
x2="31"
y2="31"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.520833" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
</defs>
</svg>
<h3 class="text-xl my-3 font-semibold font-heading">
Fully decentralized
</h3>
<p class="text-gray-400 leading-relaxed">
No more centralized counter party risk to deal with. Non
custodial means you control your funds. Every bid & ask is
on-chain.
</p>
</div>
<div class="lg:w-1/3 px-4 mb-6">
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 2.90625C15.5 1.30117 16.8012 0 18.4062 0C20.0113 0 21.3125 1.30117 21.3125 2.90625V3.875C21.3125 4.94505 22.1799 5.8125 23.25 5.8125H29.0625C30.1326 5.8125 31 6.67995 31 7.75V13.5625C31 14.6326 30.1326 15.5 29.0625 15.5H28.0938C26.4887 15.5 25.1875 16.8012 25.1875 18.4062C25.1875 20.0113 26.4887 21.3125 28.0938 21.3125H29.0625C30.1326 21.3125 31 22.1799 31 23.25V29.0625C31 30.1326 30.1326 31 29.0625 31H23.25C22.1799 31 21.3125 30.1326 21.3125 29.0625V28.0938C21.3125 26.4887 20.0113 25.1875 18.4062 25.1875C16.8012 25.1875 15.5 26.4887 15.5 28.0938V29.0625C15.5 30.1326 14.6326 31 13.5625 31H7.75C6.67995 31 5.8125 30.1326 5.8125 29.0625V23.25C5.8125 22.1799 4.94505 21.3125 3.875 21.3125H2.90625C1.30117 21.3125 0 20.0113 0 18.4062C0 16.8012 1.30117 15.5 2.90625 15.5H3.875C4.94505 15.5 5.8125 14.6326 5.8125 13.5625V7.75C5.8125 6.67995 6.67995 5.8125 7.75 5.8125H13.5625C14.6326 5.8125 15.5 4.94505 15.5 3.875V2.90625Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-15.5"
y1="-5.8125"
x2="53.2813"
y2="31"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E54033" />
<stop offset="0.520833" stop-color="#FECA1A" />
<stop offset="1" stop-color="#AFD803" />
</linearGradient>
</defs>
</svg>
<h3 class="text-xl my-3 font-semibold font-heading">
Want to help build Mango?
</h3>
<p class="text-gray-400 leading-relaxed">
Mango is a fully open-source project built by a global team of
contributors. Help build the worlds best exchange, period.
</p>
<a class="text-indigo-600 hover:underline" href="#">
Join the discord &raquo;
</a>
</div>
</div>
</section>
<section class="">
<div class="grid grid-cols-3 gap-6 mb-6">
<div>
<div class="bg-th-fgd-4 bg-feature-one bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Simply connect your wallet.
</h2>
<p class="text-gray-500 text-base">
Trade knowing you control your funds, no more centralized
counter-party risk.
</p>
</div>
</div>
</div>
</div>
<div class="col-span-2">
<div class="bg-th-fgd-4 bg-feature-two bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Customize your experience.
</h2>
<p class="text-gray-500 text-base">
Complete control over layout, theme, and your trading
view.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="col-span-2">
<div class="bg-th-fgd-4 bg-feature-three bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Measure your results.
</h2>
<p class="text-gray-500 text-base">
Full overview over trading history and PNL is always
tracked.
</p>
</div>
</div>
</div>
</div>
<div>
<div class="bg-th-fgd-4 bg-feature-four bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Liquidation alerts
</h2>
<p class="text-gray-500 text-base">
Sleep knowing youll be ready when the market starts
moving.{' '}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
)
}
export default FeatureSection

View File

@ -1,24 +0,0 @@
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
margin: 5px;
padding: 20px;
background-color: #141026;
border: 1px solid #584f81;
border-radius: 9px;
`;
export default function FloatingElement({ children, style = undefined, stretchVertical = false }) {
return (
<Wrapper
style={{
height: stretchVertical ? 'calc(100% - 10px)' : undefined,
...style,
}}
>
{children}
</Wrapper>
);
}

View File

@ -0,0 +1,142 @@
import MangoPill from '../components/MangoPill'
const FooterSection = () => {
return (
<div class="bg-bg-texture bg-cover bg-bottom bg-no-repeat">
<div class="max-w-7xl mx-auto ">
<section class="py-8 px-4">
<div class="flex flex-wrap items-center text-center md:text-left -mx-2">
<div class="lg:w-1/2 px-2 mt-10 lg:mt-0 order-1 lg:order-none">
<h2 class="text-4xl mb-6 font-semibold font-heading">
Keep in touch through email.
</h2>
<form class="w-full max-w-lg mx-auto sm:mx-0">
<div class="flex flex-wrap">
<div class="w-full md:w-2/3 mb-4">
<input
class="appearance-none block w-full py-3 px-4 leading-snug text-gray-700 bg-gray-50 focus:bg-white border border-gray-200 focus:border-green-500 rounded-l-full focus:outline-none"
type="text"
placeholder="Your email @protnmail.com.."
/>
</div>
<div class="w-full md:w-1/3 mb-4">
<button
class="inline-block w-full py-4 px-8 leading-none text-white bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500
hover:bg-indigo-700 font-semibold rounded-r-full"
>
Subscribe
</button>
</div>
<div class="w-full">
<p>We promise to never spam and only send alpha.</p>
</div>
</div>
</form>
</div>
</div>
</section>
<footer class="py-20">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
<div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
<a class="text-gray-600 text-2xl leading-none" href="#">
<img
class="h-8"
src="img/logoMango.png"
alt=""
width="auto"
/>
</a>
<p class="mt-5 mb-6 max-w-xs text-gray-500 leading-loose">
Mango is a decentralized autonomous organization.{' '}
</p>
<div>
<a class="inline-block h-6 mr-8" href="#">
<img class="mx-auto" src="socials/github.svg" />
</a>
<a class="inline-block h-6 mr-8" href="#">
<img class="mx-auto" src="socials/discord.svg" />
</a>
<a class="inline-block h-6" href="#">
<img class="mx-auto" src="socials/twitter.svg" />
</a>
</div>
</div>
<div class="w-full lg:w-2/3 px-4">
<div class="flex flex-wrap justify-between">
<div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
<h3 class="mb-6 text-lg font-bold font-heading">
Products
</h3>
<ul class="text-sm">
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Spot Markets
</a>
</li>
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Perpetual Futures
</a>{' '}
<MangoPill />
</li>
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Decentralized Lending
</a>
</li>
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Liquidator Program
</a>
</li>
</ul>
</div>
<div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
<h3 class="mb-6 text-lg font-bold font-heading">
Developers
</h3>
<ul class="text-sm">
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Explore the docs
</a>
</li>
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Interested in contributing?
</a>
</li>
</ul>
</div>
<div class="w-1/2 lg:w-1/4">
<h3 class="mb-6 text-lg font-bold font-heading">Contact</h3>
<ul class="text-sm">
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Discord
</a>
</li>
<li class="mb-4">
<a class="text-gray-500 hover:text-gray-600" href="#">
Twitter
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pt-8">
<p class="lg:text-center text-sm text-gray-400">
All rights reserved &copy; Blockworks Foundation 2021
</p>
</div>
</div>
</footer>
</div>
</div>
)
}
export default FooterSection

View File

@ -0,0 +1,19 @@
const HeroSection = () => {
return (
<div class="">
<section class="bg-hero-img bg-no-repeat bg-cover">
<div class="container px-4 mx-auto">
<div class="relative pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48">
<div class="max-w-2xl mb-16 mx-auto text-center">
<h2 class="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
Decentralized margin trading that feels right.
</h2>
</div>
</div>
</div>
</section>
</div>
)
}
export default HeroSection

View File

@ -0,0 +1,32 @@
const HeroSectionLP = () => {
return (
<div class="">
<section class="">
<div class="container px-4 mx-auto">
<div class="relative pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48">
<div class="max-w-2xl mb-16 mx-auto text-center">
<h2 class="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
Join the{' '}
<span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
Mango DAO
</span>{' '}
and help build the ecosystem.
</h2>
<p class="mb-8 text-2xl text-gray-400">
The Mango DAO is an experiment in self governance that aims to
build a completely decentralzied financial ecosystem.
</p>
</div>
{/*
<div class="relative max-w-3xl mx-auto">
<img class="absolute top-0 left-0 mx-auto w-full rounded-xl z-10" src="../img/DepositModal.png" alt=""/>
</div>
*/}
</div>
</div>
</section>
</div>
)
}
export default HeroSectionLP

View File

@ -0,0 +1,184 @@
const LandingContent = () => {
return (
<div class="bg-th-bkg-3 transform -skew-y-3 pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64">
<div class="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
<div class="max-w-2xl mb-16 mx-auto text-center">
<h2 class="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
It is still the early days.
</h2>
<p class="mb-8 text-2xl text-gray-400">
This is the first moment for non-developers to participate in
helping build the Mango protocol by supporting the inception of the
protocols Insurance Fund.
</p>
</div>
{/* Section 1 */}
<div class="flex flex-wrap overflow-hidden mb-36 xl:-mx-4">
<div class="w-full overflow-hidden xl:my-4 xl:px-4 xl:w-1/2">
<h2 class="text-3xl mb-6 leading-tight font-semibold font-heading">
What is Mango?
</h2>
<p class="mb-8 text-gray-400 leading-relaxed">
Mango is a decentralized autonomous organization. Its purpose is
to contribute maximum value for the defi ecosystem and its
developer community to create commercially viable decentralized
trading and lending products for traders.
</p>
<h2 class="text-3xl mb-6 leading-tight font-semibold font-heading">
Why the{' '}
<span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
Insurance fund
</span>
?
</h2>
<p class="mb-8 text-gray-400 leading-relaxed">
Mango protocol is powered by lenders providing their capital for
the community to use for trading and borrowing purposes. The
insurance fund is the last line of defense for protecting our
mango lenders.
</p>
</div>
<div class="w-full overflow-hidden xl:my-4 xl:px-4 xl:w-1/2">
<h2 class="text-3xl mb-6 leading-tight font-semibold font-heading">
What is the{' '}
<span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
$MNGO
</span>{' '}
token?
</h2>
<p class="mb-8 text-gray-400 leading-relaxed">
We believe that substantial rewards to a strong developer
community and liquidity incentives are the essential drivers for
growth and therefore the foundation of the Mango DAO.
</p>
<p class="mb-8 text-gray-400 leading-relaxed">
Mango Governance tokens ($MNGO) will serve as the incentive for
those who can proove their work is useful to the DAO.
</p>
<button
class="inline-flex items-center px-8 py-2 text-lg text-white font-bold bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500 hover:bg-blue-600 rounded-full transition duration-200"
href="#"
>
<span class="pr-4">Check out the whitepaper</span>
<svg
width="9"
height="16"
viewBox="0 0 9 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1.6665L7.8963 7.99984L1 14.3332"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<p class="text-white leading-relaxed py-4">
<span class="text-yellow-300">$MNGO</span> were only provided to
developers who helped to build out the protocol.
</p>
</div>
</div>
{/* Section 2 */}
<div class="max-w-2xl mb-12 mx-auto text-center">
<h2 class="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
How it works.
</h2>
<p class="mb-8 text-2xl text-gray-400">
We take the view that token sales should be simple, transparent and
minimize randomness and luck in the distribution.
</p>
</div>
<section class="">
<div class="grid grid-cols-3 gap-6 mb-6">
<div>
<div class="bg-th-fgd-4 bg-feature-one bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Deposit your USDC contribution.
</h2>
<p class="text-gray-500 text-base">
Users deposit USDC into a vault during the event period to
set their contribution amount.
</p>
</div>
</div>
</div>
</div>
<div class="col-span-2">
<div class="bg-th-fgd-4 bg-feature-two bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
48 hour participation period.
</h2>
<p class="text-gray-500 text-base">
The event will span over a 2 day period split into two
sections,{' '}
<span class="text-th-green italic">Unrestricted</span> and{' '}
<span class="text-th-red italic">Restricted</span>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="col-span-2">
<div class="bg-th-fgd-4 bg-feature-three bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
Why does it work this way?
</h2>
<p class="text-gray-500 text-base mb-4">
Simple mechanisms are easier to build, explain, understand
and are harder to exploit. A transparent mechanism
increases participation because buyers are more confident
there are no hidden tricks that could harm them.
</p>
<p class="text-gray-500 text-base mb-4">
Elements of luck engineered into the mechanism distribute
value randomly to those, who are most willing to do the
arbitrary, worthless tasks to get the free value.
</p>
<p class="text-white font-bold leading-relaxed">
We believe all "excess" value should be captured by token
holders in the DAO.
</p>
</div>
</div>
</div>
</div>
<div>
<div class="bg-th-fgd-4 bg-feature-four bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div class="py-4 px-8 mt-3">
<div class="flex flex-col mb-8">
<h2 class="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
MNGO unlocked and distributed.
</h2>
<p class="text-gray-500 text-base">
At event conclusion $MNGO gets distributed in propotion to
a users USDC contribution.{' '}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
)
}
export default LandingContent

View File

@ -1,22 +0,0 @@
export default function Logo() {
return (
<>
<img
height="40px"
width="40px"
src="/mango.png"
className="inline-block"
/>
<div
style={{
fontWeight: 700,
marginRight: "1em",
marginLeft: 8,
}}
className="hidden md:inline-block text-xl pt-2"
>
Mango Markets
</div>
</>
);
}

9
components/MangoPill.tsx Normal file
View File

@ -0,0 +1,9 @@
const MangoPill = () => {
return (
<div class="inline-flex items-center px-2 py-1 text-lg text-white text-xs uppercase font-bold bg-gradient-to-br from-red-400 via-yellow-300 to-green-500 rounded-full">
<p>Soon</p>
</div>
)
}
export default MangoPill

9
components/MangoSale.tsx Normal file
View File

@ -0,0 +1,9 @@
const MangoSale = () => {
return (
<div class="inline-flex items-center relative -top-4 px-2 py-1 text-lg text-white text-xs uppercase font-bold bg-gradient-to-br from-red-400 via-yellow-300 to-green-500 rounded-full">
<p>Sale</p>
</div>
)
}
export default MangoSale

554
components/NavBarBeta.tsx Normal file
View File

@ -0,0 +1,554 @@
import MangoPill from '../components/MangoPill'
import MangoSale from '../components/MangoSale'
const NavBarBeta = () => {
return (
<div class="">
{/* Main Menu */}
<div class="px-10 py-8 bg-transparent">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div class="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span class="sr-only">Mango</span>
<img class="h-8" src="img/logoMango.png" alt="" width="auto" />
</a>
</div>
<div class="-mr-2 -my-2 md:hidden">
<button
type="button"
class=" rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-300"
aria-expanded="false"
>
<span class="sr-only">Open menu</span>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<nav class="hidden md:flex space-x-10">
<div class="relative">
<button
type="button"
class="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300"
aria-expanded="false"
>
<span>Products</span>
<svg
class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div class="hidden absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-th-bkg-3 px-5 py-6 sm:gap-8 sm:p-8">
<h3 class="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Trading
</h3>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M6 12V15M10 12V15M14 12V15M1 19H19M1 8H19M1 5L10 1L19 5M2 8H18V19H2V8Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Spot Markets
</p>
<p class="mt-1 text-sm text-gray-500">
Trade BTC, ETH, SOL, and SRM, cross collateralized
with up to 5x leverage.
</p>
</div>
</a>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M19 10C19 14.9706 14.9706 19 10 19M19 10C19 5.02944 14.9706 1 10 1M19 10H1M10 19C5.02944 19 1 14.9706 1 10M10 19C11.6569 19 13 14.9706 13 10C13 5.02944 11.6569 1 10 1M10 19C8.34315 19 7 14.9706 7 10C7 5.02944 8.34315 1 10 1M1 10C1 5.02944 5.02944 1 10 1"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Perpetual Futures <MangoPill />
</p>
<p class="mt-1 text-sm text-gray-500">
Cross-collateralized decentralized leveraged
perpetual futures markets.
</p>
</div>
</a>
<h3 class="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Defi
</h3>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M15 5V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V9C1 10.1046 1.89543 11 3 11H5M7 15H17C18.1046 15 19 14.1046 19 13V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Decentralized Lending
</p>
<p class="mt-1 text-sm text-gray-500">
Earn interest on deposit, a take out collateralized
loans against assets
</p>
</div>
</a>
<h3 class="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Infrastructure
</h3>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M16 17H21V15C21 13.3431 19.6569 12 18 12C17.0444 12 16.1931 12.4468 15.6438 13.1429M16 17H6M16 17V15C16 14.3438 15.8736 13.717 15.6438 13.1429M6 17H1V15C1 13.3431 2.34315 12 4 12C4.95561 12 5.80686 12.4468 6.35625 13.1429M6 17V15C6 14.3438 6.12642 13.717 6.35625 13.1429M6.35625 13.1429C7.0935 11.301 8.89482 10 11 10C13.1052 10 14.9065 11.301 15.6438 13.1429M14 4C14 5.65685 12.6569 7 11 7C9.34315 7 8 5.65685 8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4ZM20 7C20 8.10457 19.1046 9 18 9C16.8954 9 16 8.10457 16 7C16 5.89543 16.8954 5 18 5C19.1046 5 20 5.89543 20 7ZM6 7C6 8.10457 5.10457 9 4 9C2.89543 9 2 8.10457 2 7C2 5.89543 2.89543 5 4 5C5.10457 5 6 5.89543 6 7Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Liquidator Program
</p>
<p class="mt-1 text-sm text-gray-500">
Help safegaurd the mango protocol, become a
decentralized liquidator.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a
href="#"
class="text-base font-medium text-gray-500 p-1 px-2 hover:bg-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300 rounded-md"
>
Docs
</a>
<div class="relative">
<button
type="button"
class="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300"
aria-expanded="false"
>
<span>Support</span>
<svg
class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div class="hidden absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-th-bkg-3 px-5 py-6 sm:gap-8 sm:p-8">
<h3 class="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Social
</h3>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
{/* Heroicon name: outline/support */}
<svg
width="35"
height="35"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z"
fill="#4F4C67"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Discord
</p>
<p class="mt-1 text-sm text-gray-500">
Get all of your questions answered in our discrod or
contact us for developer support.
</p>
</div>
</a>
<a
href="#"
class="-m-3 p-3 flex items-start rounded-lg hover:bg-th-fgd-4"
>
<svg
width="25"
height="25"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.78874 23C5.55374 23 2.53817 22.0591 0 20.4356C2.15499 20.5751 5.95807 20.2411 8.32358 17.9848C4.76508 17.8215 3.16026 15.0923 2.95094 13.926C3.25329 14.0426 4.6953 14.1826 5.50934 13.856C1.4159 12.8296 0.787928 9.23732 0.927477 8.14097C1.695 8.67749 2.99745 8.8641 3.50913 8.81744C-0.305207 6.08823 1.06703 1.98276 1.74151 1.09635C4.47882 4.88867 8.5812 7.01857 13.6564 7.13704C13.5607 6.71736 13.5102 6.28042 13.5102 5.83164C13.5102 2.61092 16.1134 0 19.3247 0C21.0025 0 22.5144 0.712754 23.5757 1.85284C24.6969 1.59011 26.3843 0.975068 27.2092 0.443205C26.7934 1.93611 25.4989 3.18149 24.7159 3.64308C24.7224 3.65878 24.7095 3.62731 24.7159 3.64308C25.4037 3.53904 27.2648 3.18137 28 2.68256C27.6364 3.52125 26.264 4.91573 25.1377 5.69642C25.3473 14.9381 18.2765 23 8.78874 23Z"
fill="#4F4C67"
/>
</svg>
<div class="ml-4">
<p class="text-base font-medium text-white">
Twitter
</p>
<p class="mt-1 text-sm text-gray-500">
See what we're up to quicky, and meme with us.
</p>
</div>
</a>
</div>
<div class="px-5 py-5 bg-th-fgd-4 sm:px-8 sm:py-8">
<div>
<h3 class="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Mango Guides
</h3>
<ul class="mt-4 space-y-4">
<li class="text-base truncate">
<a
href="#"
class="font-medium text-white hover:text-gray-700"
>
Setting up a wallet
</a>
</li>
<li class="text-base truncate">
<a
href="#"
class="font-medium text-white hover:text-gray-700"
>
Getting started with Mango Markets
</a>
</li>
</ul>
</div>
<div class="mt-5 text-sm">
<a
href="#"
class="font-medium text-yellow-300 hover:text-yellow-400"
>
{' '}
Learn more about the Mango protocol{' '}
<span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a
href="#"
class="text-base font-medium text-gray-500 p-1 px-2 hover:bg-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300 rounded-md"
>
Mango DAO <MangoSale />
</a>
</nav>
<div class="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<div>
<button
class="inline-flex items-center px-8 py-2 text-lg text-white font-bold bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500
hover:bg-blue-600 rounded-full transition duration-200"
href="#"
>
<span class="pr-4">Start trading</span>
<svg
width="9"
height="16"
viewBox="0 0 9 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1.6665L7.8963 7.99984L1 14.3332"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
{/* Mobile menu */}
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-10 md:hidden">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-th-bkg-3 divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5">
<div class="flex items-center justify-between">
<div>
<img
class="h-8"
src="img/logoMango.png"
alt=""
width="auto"
/>
</div>
<div class="-mr-2">
<button
type="button"
class="bg-th-bkg-3 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-th-bkg-4 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-300"
>
<span class="sr-only">Close menu</span>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div class="mt-6">
<nav class="grid gap-y-8">
<a
href="#"
class="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M6 12V15M10 12V15M14 12V15M1 19H19M1 8H19M1 5L10 1L19 5M2 8H18V19H2V8Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ml-3 text-base font-medium text-white">
Spot Markets
</span>
</a>
<a
href="#"
class="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M19 10C19 14.9706 14.9706 19 10 19M19 10C19 5.02944 14.9706 1 10 1M19 10H1M10 19C5.02944 19 1 14.9706 1 10M10 19C11.6569 19 13 14.9706 13 10C13 5.02944 11.6569 1 10 1M10 19C8.34315 19 7 14.9706 7 10C7 5.02944 8.34315 1 10 1M1 10C1 5.02944 5.02944 1 10 1"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ml-3 text-base font-medium text-white">
Perpetual Futures <MangoPill />
</span>
</a>
<a
href="#"
class="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M15 5V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V9C1 10.1046 1.89543 11 3 11H5M7 15H17C18.1046 15 19 14.1046 19 13V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ml-3 text-base font-medium text-white">
Decentralized Lending
</span>
</a>
<a
href="#"
class="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M16 17H21V15C21 13.3431 19.6569 12 18 12C17.0444 12 16.1931 12.4468 15.6438 13.1429M16 17H6M16 17V15C16 14.3438 15.8736 13.717 15.6438 13.1429M6 17H1V15C1 13.3431 2.34315 12 4 12C4.95561 12 5.80686 12.4468 6.35625 13.1429M6 17V15C6 14.3438 6.12642 13.717 6.35625 13.1429M6.35625 13.1429C7.0935 11.301 8.89482 10 11 10C13.1052 10 14.9065 11.301 15.6438 13.1429M14 4C14 5.65685 12.6569 7 11 7C9.34315 7 8 5.65685 8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4ZM20 7C20 8.10457 19.1046 9 18 9C16.8954 9 16 8.10457 16 7C16 5.89543 16.8954 5 18 5C19.1046 5 20 5.89543 20 7ZM6 7C6 8.10457 5.10457 9 4 9C2.89543 9 2 8.10457 2 7C2 5.89543 2.89543 5 4 5C5.10457 5 6 5.89543 6 7Z"
stroke="#4F4C67"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ml-3 text-base font-medium text-white">
Liquidator Program
</span>
</a>
</nav>
</div>
</div>
<div class="py-6 px-5 space-y-6">
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
<a
href="#"
class="text-base font-medium text-white hover:bg-th-bkg-4"
>
Twitter
</a>
<a
href="#"
class="text-base font-medium text-white hover:bg-th-bkg-4"
>
Explore the docs
</a>
<a
href="#"
class="text-base font-medium text-white hover:bg-th-bkg-4"
>
Discord
</a>
<a
href="#"
class="text-base font-medium text-white hover:bg-th-bkg-4"
>
Mango Guides
</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default NavBarBeta

View File

@ -1,34 +0,0 @@
export const TradeUrl = "https://trade.mango.markets";
export const StatsUrl = `${TradeUrl}/stats`;
export const LearnUrl = "https://docs.mango.markets";
export function Navigation() {
return (
<div className="flex items-center">
<a href="/">
<div className="flex items-center md:mr-8">
<img src="/mango.png" className="inline-block w-8 h-8 sm:w-16 sm:h-16" />
<span className="hidden md:inline-block text-3xl text-white ml-4 font-black">
Mango Markets
</span>
</div>
</a>
<a href={TradeUrl} className="ml-6 sm:ml-14 sm:font-light text-white text-md sm:text-2xl">
Trade
</a>
<a href={StatsUrl} className="ml-8 sm:ml-16 sm:font-light text-white text-md sm:text-2xl">
Stats
</a>
<a href={LearnUrl} className="ml-8 sm:ml-16 sm:font-light text-white text-md sm:text-2xl">
Learn
</a>
<a href={"/careers"} className="ml-8 sm:ml-16 sm:font-light text-white text-md sm:text-2xl">
Careers
</a>
</div>
);
}

113
components/Notification.tsx Normal file
View File

@ -0,0 +1,113 @@
import { useEffect, useState } from 'react'
import {
CheckCircleIcon,
InformationCircleIcon,
XCircleIcon,
} from '@heroicons/react/outline'
import useNotificationStore from '../stores/useNotificationStore'
const NotificationList = () => {
const { notifications, set: setNotificationStore } = useNotificationStore(
(s) => s
)
useEffect(() => {
if (notifications.length > 0) {
const id = setInterval(() => {
setNotificationStore((state) => {
state.notifications = notifications.slice(1, notifications.length)
})
}, 5000)
return () => {
clearInterval(id)
}
}
}, [notifications, setNotificationStore])
const reversedNotifications = [...notifications].reverse()
return (
<div
className={`fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
>
<div className={`flex flex-col w-full`}>
{reversedNotifications.map((n, idx) => (
<Notification
key={`${n.message}${idx}`}
type={n.type}
message={n.message}
description={n.description}
txid={n.txid}
/>
))}
</div>
</div>
)
}
const Notification = ({ type, message, description, txid }) => {
const [showNotification, setShowNotification] = useState(true)
if (!showNotification) return null
return (
<div
className={`max-w-sm w-full bg-th-bkg-3 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
>
<div className={`p-4`}>
<div className={`flex items-center`}>
<div className={`flex-shrink-0`}>
{type === 'success' ? (
<CheckCircleIcon className={`text-th-green h-9 w-9 mr-1`} />
) : null}
{type === 'info' && (
<XCircleIcon className={`text-th-primary h-9 w-9 mr-1`} />
)}
{type === 'error' && (
<InformationCircleIcon className={`text-th-red h-9 w-9 mr-1`} />
)}
</div>
<div className={`ml-2 w-0 flex-1`}>
<div className={`text-lg text-th-fgd-1`}>{message}</div>
{description ? (
<p className={`mt-0.5 text-base text-th-fgd-2`}>{description}</p>
) : null}
{txid ? (
<a
href={'https://explorer.solana.com/tx/' + txid}
className="text-th-primary"
>
View transaction {txid.slice(0, 8)}...
{txid.slice(txid.length - 8)}
</a>
) : null}
</div>
<div className={`ml-4 flex-shrink-0 self-start flex`}>
<button
onClick={() => setShowNotification(false)}
className={`bg-th-bkg-3 rounded-md inline-flex text-fgd-3 hover:text-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-th-primary`}
>
<span className={`sr-only`}>Close</span>
<svg
className={`h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
)
}
export default NotificationList

View File

@ -1,128 +0,0 @@
import { Col, Row, Divider } from "antd";
import { useEffect, useState } from "react";
import styled from "styled-components";
import { IDS, MangoClient } from "@blockworks-foundation/mango-client";
import { PublicKey, Connection } from "@solana/web3.js";
import FloatingElement from "./FloatingElement";
const CLUSTER = "mainnet-beta";
const DEFAULT_MANGO_GROUP = "BTC_ETH_SOL_SRM_USDC";
const icons = {
BTC: "/tokens/btc.svg",
ETH: "/tokens/eth.svg",
SOL: "/tokens/sol.svg",
SRM: "/tokens/srm.svg",
USDC: "/tokens/usdc.svg",
USDT: "/tokens/usdt.svg",
};
const decimals = {
BTC: 2,
ETH: 2,
SOL: 1,
SRM: 0,
USDC: 0,
}
const stubStats = {
depositInterest: 0,
borrowInterest: 0,
totalDeposits: 0,
totalBorrows: 0,
utilization: "0",
};
const useMangoStats = () => {
const [stats, setStats] = useState(Object.keys(icons).map((s) => ({ symbol: s, ...stubStats })));
useEffect(() => {
const getStats = async () => {
const client = new MangoClient();
const connection = new Connection(IDS.cluster_urls[CLUSTER], "singleGossip");
const assets = IDS[CLUSTER].mango_groups?.[DEFAULT_MANGO_GROUP]?.symbols;
const mangoGroupId = IDS[CLUSTER].mango_groups?.[DEFAULT_MANGO_GROUP]?.mango_group_pk;
if (!mangoGroupId) return;
const mangoGroupPk = new PublicKey(mangoGroupId);
const mangoGroup = await client.getMangoGroup(connection, mangoGroupPk);
const latestStats = Object.keys(assets).map((symbol, index) => {
const totalDeposits = mangoGroup.getUiTotalDeposit(index);
const totalBorrows = mangoGroup.getUiTotalBorrow(index);
console.log("assets", symbol, index, totalDeposits, totalBorrows);
return {
time: new Date(),
symbol,
totalDeposits,
totalBorrows,
depositInterest: mangoGroup.getDepositRate(index),
borrowInterest: mangoGroup.getBorrowRate(index),
utilization: totalDeposits > 0.0 ? totalBorrows / totalDeposits : 0.0,
};
});
setStats(latestStats);
};
getStats();
}, []);
return { stats };
};
const Wrapper = styled.div`
height: 100%;
display: flex;
flex-direction: column;
padding: 16px 16px;
.borderNone .ant-select-selector {
border: none !important;
}
`;
const SizeTitle = styled(Row)`
color: #9490a6;
`;
export default function StatsPanel() {
const { stats } = useMangoStats();
return (
<Wrapper>
<Row justify="center">
<Col lg={24} xl={24} xxl={24}>
<FloatingElement>
<React.Fragment>
<Divider style={{ color: "#EEEEEE", margin: "10px 0" }}>Mango Stats</Divider>
<SizeTitle>
<Col span={4}>Asset</Col>
<Col span={4}>Total Deposits</Col>
<Col span={4}>Total Borrows</Col>
<Col span={4}>Deposit Interest</Col>
<Col span={4}>Borrow Interest</Col>
<Col span={4}>Utilization</Col>
</SizeTitle>
{stats.map((stat) => (
<div key={stat.symbol}>
<Divider />
<Row>
<Col span={1}>
<img src={icons[stat.symbol]} alt={stat.symbol} width="14px" />
</Col>
<Col span={3}>{stat.symbol}</Col>
<Col span={4}>{stat.totalDeposits.toFixed(decimals[stat.symbol])}</Col>
<Col span={4}>{stat.totalBorrows.toFixed(decimals[stat.symbol])}</Col>
<Col span={4}>{(100 * stat.depositInterest).toFixed(2)}%</Col>
<Col span={4}>{(100 * stat.borrowInterest).toFixed(2)}%</Col>
<Col span={4}>{(parseFloat(stat.utilization) * 100).toFixed(2)}%</Col>
</Row>
</div>
))}
</React.Fragment>
</FloatingElement>
</Col>
</Row>
</Wrapper>
);
}

116
components/TopBar.tsx Normal file
View File

@ -0,0 +1,116 @@
import { useEffect, useState } from 'react'
import { Menu } from '@headlessui/react'
import styled from '@emotion/styled'
import {
ChevronUpIcon,
ChevronDownIcon,
DuplicateIcon,
LogoutIcon,
} from '@heroicons/react/outline'
import ConnectWalletButton from './ConnectWalletButton'
import WalletIcon from './WalletIcon'
import useWalletStore from '../stores/useWalletStore'
const Code = styled.code`
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
border-radius: 3px;
background: hsla(0, 0%, 58.8%, 0.1);
font-size: 13px;
`
const WALLET_OPTIONS = [
{ name: 'Copy address', icon: <DuplicateIcon /> },
{ name: 'Disconnect', icon: <LogoutIcon /> },
]
const TopBar = () => {
const { connected, current: wallet } = useWalletStore((s) => s)
const [isCopied, setIsCopied] = useState(false)
useEffect(() => {
if (isCopied) {
const timer = setTimeout(() => {
setIsCopied(false)
}, 2000)
return () => clearTimeout(timer)
}
}, [isCopied])
const handleWalletMenu = (option) => {
if (option === 'Copy address') {
const el = document.createElement('textarea')
el.value = wallet.publicKey.toString()
document.body.appendChild(el)
el.select()
document.execCommand('copy')
document.body.removeChild(el)
setIsCopied(true)
} else {
wallet.disconnect()
}
}
return (
<nav className={`bg-th-bkg-2`}>
<div className={`px-4 sm:px-6 lg:px-8`}>
<div className={`flex justify-between h-16`}>
<div className={`flex`}>
<div className={`flex-shrink-0 flex items-center`}>
<img className={`h-8 w-auto`} src="/logo.svg" alt="logo" />
</div>
</div>
<div className="flex">
<div className="flex items-center">
<div className="hidden sm:ml-4 sm:block">
{connected && wallet?.publicKey ? (
<Menu>
{({ open }) => (
<div className="relative">
<Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-th-green hover:border-th-fgd-1 focus:outline-none rounded-md text-th-fgd-4 hover:text-th-fgd-1">
<div className="flex flex-row items-center justify-between">
<div className="flex items-center">
<WalletIcon className="w-5 h-5 mr-2 fill-current text-th-green" />
<Code className="p-1 text-th-fgd-3 font-light">
{isCopied
? 'Copied!'
: wallet.publicKey.toString().substr(0, 5) +
'...' +
wallet.publicKey.toString().substr(-5)}
</Code>
</div>
{open ? (
<ChevronUpIcon className="h-5 w-5" />
) : (
<ChevronDownIcon className="h-5 w-5" />
)}
</div>
</Menu.Button>
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
{WALLET_OPTIONS.map(({ name, icon }) => (
<Menu.Item key={name}>
<button
className="flex flex-row items-center w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal"
onClick={() => handleWalletMenu(name)}
>
<div className="w-5 h-5 mr-2">{icon}</div>
{name}
</button>
</Menu.Item>
))}
</Menu.Items>
</div>
)}
</Menu>
) : (
<ConnectWalletButton />
)}
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default TopBar

25
components/WalletIcon.jsx Normal file
View File

@ -0,0 +1,25 @@
const WalletIcon = ({ className }) => {
return (
<svg
className={className}
width="20"
height="17"
viewBox="0 0 20 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
/>
</svg>
)
}
export default WalletIcon

View File

@ -0,0 +1,64 @@
import { Menu } from '@headlessui/react'
import {
ChevronDownIcon,
ChevronUpIcon,
CheckCircleIcon,
} from '@heroicons/react/outline'
import useWalletStore from '../stores/useWalletStore'
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
import useLocalStorageState from '../hooks/useLocalStorageState'
export default function WalletSelect({ isPrimary = false }) {
const setWalletStore = useWalletStore((s) => s.set)
const [savedProviderUrl] = useLocalStorageState(
'walletProvider',
DEFAULT_PROVIDER.url
)
const handleSelectProvider = (url) => {
setWalletStore((state) => {
state.providerUrl = url
})
}
return (
<Menu>
{({ open }) => (
<>
<Menu.Button
className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
isPrimary
? 'px-3 hover:bg-th-primary'
: 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
} cursor-pointer`}
>
{open ? (
<ChevronUpIcon className="h-5 w-5" />
) : (
<ChevronDownIcon className="h-5 w-5" />
)}
</Menu.Button>
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
<Menu.Item key={name}>
<button
className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
onClick={() => handleSelectProvider(url)}
>
<div className="flex">
<img src={icon} className="w-5 h-5 mr-2" />
{name}
</div>
{savedProviderUrl === url ? (
<CheckCircleIcon className="h-4 w-4 text-th-green" />
) : null}{' '}
</button>
</Menu.Item>
))}
</Menu.Items>
</>
)}
</Menu>
)
}

39
hooks/useInterval.tsx Normal file
View File

@ -0,0 +1,39 @@
import { useState, useRef, useEffect } from 'react'
export function useEffectAfterTimeout(effect, timeout) {
useEffect(() => {
const handle = setTimeout(effect, timeout)
return () => clearTimeout(handle)
})
}
export function useListener(emitter, eventName) {
const [, forceUpdate] = useState(0)
useEffect(() => {
const listener = () => forceUpdate((i) => i + 1)
emitter.on(eventName, listener)
return () => emitter.removeListener(eventName, listener)
}, [emitter, eventName])
}
export default function useInterval(callback, delay) {
const savedCallback = useRef<() => void>()
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback
}, [callback])
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current && savedCallback.current()
}
if (delay !== null) {
const id = setInterval(tick, delay)
return () => {
clearInterval(id)
}
}
}, [delay])
}

View File

@ -0,0 +1,69 @@
import { useMemo, useState, useEffect, useCallback } from 'react'
const localStorageListeners = {}
export function useLocalStorageStringState(
key: string,
defaultState: string | null = null
): [string | null, (newState: string | null) => void] {
const state =
typeof window !== 'undefined'
? localStorage.getItem(key) || defaultState
: defaultState || ''
const [, notify] = useState(key + '\n' + state)
useEffect(() => {
if (!localStorageListeners[key]) {
localStorageListeners[key] = []
}
localStorageListeners[key].push(notify)
return () => {
localStorageListeners[key] = localStorageListeners[key].filter(
(listener) => listener !== notify
)
if (localStorageListeners[key].length === 0) {
delete localStorageListeners[key]
}
}
}, [key])
const setState = useCallback<(newState: string | null) => void>(
(newState) => {
if (!localStorageListeners[key]) {
localStorageListeners[key] = []
}
const changed = state !== newState
if (!changed) {
return
}
if (newState === null) {
localStorage.removeItem(key)
} else {
localStorage.setItem(key, newState)
}
localStorageListeners[key].forEach((listener) =>
listener(key + '\n' + newState)
)
},
[state, key]
)
return [state, setState]
}
export default function useLocalStorageState<T = any>(
key: string,
defaultState: T | null = null
): [T, (newState: T) => void] {
const [stringState, setStringState] = useLocalStorageStringState(
key,
JSON.stringify(defaultState)
)
return [
useMemo(() => stringState && JSON.parse(stringState), [stringState]),
(newState) => setStringState(JSON.stringify(newState)),
]
}

135
hooks/useWallet.tsx Normal file
View File

@ -0,0 +1,135 @@
import { useEffect, useMemo } from 'react'
import Wallet from '@project-serum/sol-wallet-adapter'
import { WalletAdapter } from '../@types/types'
import useWalletStore from '../stores/useWalletStore'
import { notify } from '../utils/notifications'
import {
PhantomWalletAdapter,
SolletExtensionAdapter,
} from '../utils/wallet-adapters'
import useInterval from './useInterval'
import useLocalStorageState from './useLocalStorageState'
const SECONDS = 1000
const ASSET_URL =
'https://cdn.jsdelivr.net/gh/solana-labs/oyster@main/assets/wallets'
export const WALLET_PROVIDERS = [
{
name: 'Sollet.io',
url: 'https://www.sollet.io',
icon: `${ASSET_URL}/sollet.svg`,
},
{
name: 'Sollet Extension',
url: 'https://www.sollet.io/extension',
icon: `${ASSET_URL}/sollet.svg`,
adapter: SolletExtensionAdapter as any,
},
{
name: 'Phantom',
url: 'https://www.phantom.app',
icon: `https://www.phantom.app/img/logo.png`,
adapter: PhantomWalletAdapter,
},
]
export const DEFAULT_PROVIDER = WALLET_PROVIDERS[0]
export default function useWallet() {
const {
connected,
connection: { endpoint },
current: wallet,
providerUrl: selectedProviderUrl,
set: setWalletStore,
actions,
} = useWalletStore((state) => state)
const [savedProviderUrl, setSavedProviderUrl] = useLocalStorageState(
'walletProvider',
DEFAULT_PROVIDER.url
)
const provider = useMemo(
() => WALLET_PROVIDERS.find(({ url }) => url === savedProviderUrl),
[savedProviderUrl]
)
useEffect(() => {
if (selectedProviderUrl) {
setSavedProviderUrl(selectedProviderUrl)
}
}, [selectedProviderUrl])
useEffect(() => {
if (provider) {
const updateWallet = () => {
// hack to also update wallet synchronously in case it disconnects
const wallet = new (provider.adapter || Wallet)(
savedProviderUrl,
endpoint
) as WalletAdapter
setWalletStore((state) => {
state.current = wallet
})
}
if (document.readyState !== 'complete') {
// wait to ensure that browser extensions are loaded
const listener = () => {
updateWallet()
window.removeEventListener('load', listener)
}
window.addEventListener('load', listener)
return () => window.removeEventListener('load', listener)
} else {
updateWallet()
}
}
}, [provider, savedProviderUrl, endpoint])
useEffect(() => {
if (!wallet) return
wallet.on('connect', async () => {
setWalletStore((state) => {
state.connected = true
})
notify({
message: 'Wallet connected',
description:
'Connected to wallet ' +
wallet.publicKey.toString().substr(0, 5) +
'...' +
wallet.publicKey.toString().substr(-5),
})
await actions.fetchWalletTokenAccounts()
await actions.fetchWalletMints()
})
wallet.on('disconnect', () => {
setWalletStore((state) => {
state.connected = false
state.tokenAccounts = []
state.mints = {}
})
notify({
type: 'info',
message: 'Disconnected from wallet',
})
})
return () => {
if (wallet && wallet.connected) {
wallet.disconnect()
}
setWalletStore((state) => {
state.connected = false
})
}
}, [wallet, setWalletStore])
useInterval(async () => {
await actions.fetchWalletTokenAccounts()
await actions.fetchWalletMints()
}, 20 * SECONDS)
return { connected, wallet }
}

17
jest.config.js Normal file
View File

@ -0,0 +1,17 @@
module.exports = {
roots: ['<rootDir>'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
transform: {
'^.+\\.(ts|tsx)$': 'babel-jest',
},
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
moduleNameMapper: {
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
},
}

View File

@ -1,7 +1,7 @@
[build]
command = "npm run build && npm run export"
publish = "out"
command = "npm run build"
publish = "out"
[[plugins]]
package = "@netlify/plugin-nextjs"
package = "@netlify/plugin-nextjs"

View File

@ -1,14 +1,11 @@
/* eslint-disable */
const withAntdLess = require("next-plugin-antd-less");
module.exports = withAntdLess({
// optional
lessVarsFilePath: "./styles/theme.less",
cssLoaderOptions: {},
// Other Config Here...
module.exports = {
target: 'serverless',
webpack(config) {
return config;
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
})
return config
},
});
}

View File

@ -1,36 +1,61 @@
{
"name": "with-typescript",
"name": "with-typescript-eslint-jest",
"author": "@erikdstock",
"license": "MIT",
"version": "1.0.0",
"scripts": {
"dev": "next",
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export",
"type-check": "tsc"
"prepare": "husky install",
"tc": "yarn type-check --watch",
"type-check": "tsc --pretty --noEmit",
"format": "prettier --write .",
"lint": "eslint . --ext ts --ext tsx --ext js --ext jsx",
"test": "jest",
"test-all": "yarn lint && yarn type-check && yarn test"
},
"lint-staged": {
"*.@(ts|tsx|js|jsx)": [
"yarn format"
]
},
"dependencies": {
"@blockworks-foundation/mango-client": "https://github.com/blockworks-foundation/mango-client-ts#5_tokens",
"antd": "^4.12.3",
"autoprefixer": "^10.2.4",
"babel-plugin-import": "^1.13.3",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.3.0",
"@headlessui/react": "^1.0.0",
"@heroicons/react": "^1.0.1",
"@project-serum/sol-wallet-adapter": "^0.2.0",
"@solana/spl-token": "^0.1.3",
"@solana/web3.js": "^1.5.0",
"immer": "^9.0.1",
"next": "latest",
"next-plugin-antd-less": "^0.3.0",
"postcss": "^8.2.6",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"styled-components": "^5.2.1",
"tailwindcss": "^2.0.3"
"next-themes": "^0.0.14",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"zustand": "^3.4.1"
},
"devDependencies": {
"@types/node": "^12.12.21",
"@types/react": "^16.9.16",
"@types/react-dom": "^16.9.4",
"@types/styled-components": "^5.1.7",
"typescript": "4.0",
"webpack": "^4.44.2"
},
"prettier": {
"printWidth": 100
},
"license": "MIT"
"@testing-library/react": "^11.2.5",
"@types/jest": "^26.0.20",
"@types/node": "^14.14.25",
"@types/react": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^4.14.2",
"@typescript-eslint/parser": "^4.14.2",
"babel-jest": "^26.6.3",
"eslint": "^7.19.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^6.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-watch-typeahead": "^0.6.1",
"lint-staged": "^10.0.10",
"postcss": "^8.2.12",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.0.2",
"tailwindcss": "^2.1.2",
"typescript": "^4.1.3"
}
}

View File

@ -1,5 +1,45 @@
import "tailwindcss/tailwind.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
import Head from 'next/head'
import { ThemeProvider } from 'next-themes'
import '../styles/index.css'
import useWallet from '../hooks/useWallet'
function App({ Component, pageProps }) {
useWallet()
const title = 'Mango Markets'
const description =
'Mango Markets - Decentralised, cross-margin trading up to 5x leverage with lightning speed and near-zero fees powered by Serum.'
const keywords =
'Mango Markets, Serum, SRM, Serum DEX, DEFI, Decentralized Finance, Decentralised Finance, Crypto, ERC20, Ethereum, Decentralize, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SerumBTC, SerumUSD, SRM Tokens, SPL Tokens'
return (
<>
<Head>
<title>{title}</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Mango Markets" />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content="/twitter-image.png" />
<link rel="manifest" href="/manifest.json"></link>
</Head>
<ThemeProvider defaultTheme="Mango">
<Component {...pageProps} />
</ThemeProvider>
</>
)
}
export default App

9
pages/api/hello.ts Normal file
View File

@ -0,0 +1,9 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { NextApiRequest, NextApiResponse } from 'next'
const handler = (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ name: 'John Doe' })
}
export default handler

View File

@ -1,159 +0,0 @@
import { Divider, Layout, Row, Col } from "antd";
import Head from "next/head";
import { CSSProperties } from "react";
import ContactIcons from "../components/ContactIcons";
import Logo from "../components/Logo";
import { Navigation } from "../components/Navigation";
const { Header, Footer, Content } = Layout;
export interface ButtonStyle extends CSSProperties {
"-webkit-font-smoothing": string;
}
const CareersPage = () => (
<>
<Head>
<title>Mango Markets</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800"
/>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EVV22TP9JN"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EVV22TP9JN', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<Layout
style={{
backgroundImage: "url(background.svg)",
backgroundRepeat: "no-repeat",
backgroundPosition: "-20px 0",
maxWidth: 1575,
}}
>
<Header style={{ background: "none", padding: 0, marginTop: "5%", marginLeft: "10%" }}>
<Navigation />
</Header>
<Layout style={{ background: "none" }}>
<Content className="mt-6">
<Row align="middle" className="mt-2 sm:mt-16 text-center" wrap={false}>
<div className="mx-auto">
<div className="text-2xl sm:text-7xl font-bold">Join Team Mango</div>
<div className="mt-8 text-sm px-6 sm:text-lg">
We are looking for full-time contributors to join our core team.
</div>
<div className="text-sm sm:text-lg mt-2 px-6">
Please contact us
<a href="https://discord.gg/67jySBhxrg"> on Discord </a> or email us at{" "}
<a href="mailto:hello@blockworks.foundation">hello@blockworks.foundation</a> if you
are interested.
</div>
<div className="flex-shrink text-md sm:text-lg sm:font-bold mt-6 px-2 py-2 bg-primary-light mx-6">
Read our{" "}
<a
href="https://docs.mango.markets/litepaper"
target="_blank"
rel="noopener noreferrer"
>
Litepaper
</a>{" "}
to learn more about the Mango vision.
</div>
</div>
</Row>
<Row align="middle" className="mt-4 sm:mt-6 px-6" wrap={false}>
<div className="mx-auto bg-primary-light px-10">
<div className="divide-solid divide-y divide-primary-lighter">
<div className="flex flex-col py-8">
<div className="flex justify-between font-bold text-xl sm:text-2xl mb-4">
<div>Full Stack Developer</div>
<div className="text-lg">Remote</div>
</div>
<div className="flex flex-col space-y-4 pl-2 sm:pl-5 text-base">
<div>1. Experience with crypto trading platforms</div>
<div>
2. Experience with writing and using open source libraries in Typescript /
Javascript
</div>
<div>
3. Proven ability to optimize code quality and performance of complex React
applications
</div>
<div>4. Understanding of responsive css frameworks. We use Tailwind CSS.</div>
<div>
5. Exceptional speed implementing features across the stack including backend
micro-services serving WebSockets and Rest APIs
</div>
<div>
6. Excited to offer a centralized exchange feel on top of a fully
decentralized platform
</div>
<div>
7. Excellent written and spoken english communication skills
</div>
</div>
</div>
<div className="flex flex-col space-y-2 py-8">
<div className="flex justify-between font-bold text-xl sm:text-2xl mb-4">
<div>Blockchain Developer</div>
<div className="text-lg">Remote</div>
</div>
<div className="flex flex-col space-y-4 pl-2 sm:pl-5 text-base">
<div>1. Experienced user of crypto trading platforms</div>
<div>
2. Proven ability to create readable and tested programs in Rust or other
statically typed languages
</div>
<div>
3. Excited to create a fully decentralized bitmex alternative by bringing the
main drivers of centralized exchange revenue into DeFi
</div>
<div>
4. Understanding of different DeFi concepts and recent attacks against them
(AMMs and flash loans)
</div>
<div>
5. Exceptional attention to detail and creativity in reasoning about security
concerns in dynamic market conditions
</div>
<div>
6. Excellent written and spoken english communication skills
</div>
</div>
</div>
</div>
</div>
</Row>
</Content>
</Layout>
<div className="pr-10 sm:pr-18 md:pr-24">
<Footer style={{ background: "none", marginLeft: "10%", paddingLeft: 0, paddingRight: 0 }}>
<Divider />
<Row align="middle">
<Col xs={24} lg={8}>
<Logo />© 2021 Blockworks Foundation
</Col>
<Col xs={24} lg={8}></Col>
<Col xs={24} lg={8}>
<ContactIcons />
</Col>
</Row>
</Footer>
</div>
</Layout>
</>
);
export default CareersPage;

View File

@ -1,158 +1,19 @@
import { Divider, Layout, Row, Col } from "antd";
import Head from "next/head";
import { CSSProperties } from "react";
import ContactIcons from "../components/ContactIcons";
import Logo from "../components/Logo";
import { Navigation, TradeUrl, LearnUrl } from "../components/Navigation";
import StatsPanel from "../components/StatsPanel";
import HeroSectionLP from '../components/HeroSectionLP'
import LandingContent from '../components/LandingContent'
import FooterSection from '../components/FooterSection'
import NavBarBeta from '../components/NavBarBeta'
const { Header, Footer, Content } = Layout;
export interface ButtonStyle extends CSSProperties {
"-webkit-font-smoothing": string;
const Index = () => {
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<div className="w-screen h-2 bg-gradient-to-r from-red-400 via-yellow-300 to-green-300"></div>
<NavBarBeta />
<HeroSectionLP />
<LandingContent />
<FooterSection />
<div className="w-screen h-2 bg-gradient-to-r from-red-400 via-yellow-300 to-green-300"></div>
</div>
)
}
const IndexPage = () => (
<>
<Head>
<title>Mango Markets</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800"
/>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EVV22TP9JN"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EVV22TP9JN', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<Layout
style={{
backgroundImage: "url(background.svg)",
backgroundRepeat: "no-repeat",
backgroundPosition: "-20px 0",
maxWidth: 1575,
}}
>
<Header style={{ background: "none", padding: 0, marginTop: "5%", marginLeft: "10%" }}>
<Navigation />
</Header>
<Layout style={{ background: "none" }}>
<Content className="mt-6">
<Row
align="middle"
style={{ marginTop: "10%", marginLeft: "10%" }}
className="mt-1 pr-10 sm:pr-18 md:pr-24"
wrap={false}
>
<Col flex={"auto"}>
<div>
<h1
style={{ fontSize: "calc(12px + 2.5vw)" }}
className="text-white leading-tight md:pr-7 font-black mb-1 hidden md:block"
>
<div>Decentralized,</div>
<div className="">cross-margin trading</div>
</h1>
<h1 className="text-white leading-tight md:pr-7 font-black mb-1 text-2xl md:hidden">
<div>Decentralized,</div>
<div className="pr-2">cross-margin trading</div>
</h1>
<p className="pr-8 text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-3xl font-normal sm:font-light mt-4 sm:mt-8 sm:tracking-wide text-light-purple">
Up to 5x leverage · Lightning Speed · Near-zero fees
</p>
<div className="mt-6 sm:mt-12">
<button
className="rounded-lg py-2 px-6 sm:px-10 text-md sm:text-lg md:text-2xl opacity-90 hover:opacity-100 font-semibold"
style={
{
background: "linear-gradient(270deg, #afda06 34.47%, #fdca19 100%)",
"-webkit-font-smoothing": "antialiased",
} as ButtonStyle
}
>
<a href={TradeUrl} className="text-primary-bg hover:text-primary-bg">
Start Trading
</a>
</button>
<button className="ml-4 sm:ml-6 rounded-lg py-1 px-6 sm:px-10 text-md sm:text-lg md:text-2xl opacity-80 hover:opacity-100 bg-transparent border-2 border-primary-green">
<a href={LearnUrl} className="text-primary-green hover:text-primary-green">
Learn More
</a>
</button>
</div>
</div>
</Col>
<Col flex={0}>
<div className="hidden lg:flex">
<StatsPanel />
</div>
</Col>
</Row>
<Row style={{ marginLeft: "10%" }} className="mt-10 sm:mt-32 pr-10 sm:pr-18 md:pr-24">
<Col xs={24} lg={8}>
<div className="mt-2 md:mr-6">
<p className="text-2xl md:text-4xl">Trade</p>
<p style={{ lineHeight: 2, fontSize: 16 }}>
Trade with up to 5x leverage, long or short, with limit orders on Serum DEXs
fully on-chain order book as a maker or taker while earning interest on deposits
and margin positions.
</p>
</div>
</Col>
<Col xs={24} lg={8}>
<div className="mt-2 md:mr-6">
<p className="text-2xl md:text-4xl">Lend</p>
<p
style={{
lineHeight: 2,
fontSize: 16,
}}
>
Earn maximal interest on deposits, protect against inflation, and utilize idle
investments. Always maintain custody of your funds.
</p>
</div>
</Col>
<Col xs={24} lg={8}>
<div className="mt-2 md:mr-6">
<p className="text-2xl md:text-4xl">Fees</p>
<p style={{ lineHeight: 2, fontSize: 16 }}>
No fees on interest. The only fees you will pay are for trading on Serum DEX.
Contribute your SRM into our pool to reduce the fees for everyone. Let's reach the
top Serum fee tier together 🚀
</p>
</div>
</Col>
</Row>
</Content>
</Layout>
<div className="pr-10 sm:pr-18 md:pr-24">
<Footer style={{ background: "none", marginLeft: "10%", paddingLeft: 0, paddingRight: 0 }}>
<Divider />
<Row align="middle">
<Col xs={24} lg={8}>
<Logo />© 2021 Blockworks Foundation
</Col>
<Col xs={24} lg={8}></Col>
<Col xs={24} lg={8}>
<ContactIcons />
</Col>
</Row>
</Footer>
</div>
</Layout>
</>
);
export default IndexPage;
export default Index

17
pages/markets.tsx Normal file
View File

@ -0,0 +1,17 @@
import NavBarBeta from '../components/NavBarBeta'
import HeroSection from '../components/HeroSection'
import FeatureSection from '../components/FeatureSection'
import FooterSection from '../components/FooterSection'
const Index = () => {
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<NavBarBeta />
<HeroSection />
<FeatureSection />
<FooterSection />
</div>
)
}
export default Index

View File

@ -1,48 +0,0 @@
import { Layout } from "antd";
import Head from "next/head";
import { CSSProperties } from "react";
export interface ButtonStyle extends CSSProperties {
"-webkit-font-smoothing": string;
}
const IndexPage = () => (
<>
<Head>
<title>Mango Markets</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lato:400,700"
/>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-EVV22TP9JN"
></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EVV22TP9JN', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<Layout />
<div className="flex h-screen">
<div className="relative m-auto">
<img src="/mango.png" alt="Mango Markets" width={500} height={500} />
<div className="absolute inset-0 flex justify-center items-center">
<p className="text-xl md:text-3xl mb-0 mt-16">Coming Soon</p>
</div>
</div>
</div>
</>
);
export default IndexPage;

View File

@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-preset-env': { stage: 1 },
},
}

View File

@ -1,40 +0,0 @@
<svg width="382" height="461" viewBox="0 0 382 461" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M233.494 309.629C211.088 363.112 165.583 399.39 113.463 404.717C112.93 404.93 112.93 404.93 113.463 404.717C105.835 405.516 98.0462 405.622 90.1509 405.036C151.98 450.157 224.905 457.721 224.905 457.721C240.536 459.319 258.194 460.651 275.905 460.172C282.146 443.871 285.667 425.226 284.654 404.078C282.307 354.962 310.847 329.712 341.682 316.767C325.838 292.316 315.435 263.975 307.38 236.221C283.32 242.667 253.766 261.099 233.494 309.629Z" fill="url(#paint0_linear)"/>
<path d="M284.586 404.077C285.6 425.226 282.079 443.87 275.837 460.171C321.609 458.946 367.861 446.001 380.077 396.3C382.691 385.752 383.011 374.299 378.69 364.337C374.476 354.642 366.367 347.29 359.218 339.513C352.71 332.481 346.895 324.81 341.667 316.766C310.779 329.711 282.239 354.961 284.586 404.077Z" fill="url(#paint1_linear)"/>
<path d="M305.512 229.562C298.471 210.758 292.496 191.953 283.373 174.427C280.333 168.567 276.972 162.868 273.077 157.381C263.848 144.329 253.392 132.077 241.656 121.316C221.384 121.37 200.366 117.8 180.947 107.892C161.369 135.646 139.443 182.471 159.982 236.275C190.336 315.701 128.774 370.783 89.2439 404.397C89.564 404.61 89.8841 404.876 90.1508 405.09C98.0461 405.676 105.835 405.569 113.463 404.77C165.583 399.39 211.088 363.112 233.494 309.682C253.819 261.152 283.373 242.72 307.433 236.328C306.793 233.984 306.153 231.747 305.512 229.562Z" fill="url(#paint2_linear)"/>
<path d="M44.6113 126.421C15.0571 158.703 -0.520211 204.143 0.0132581 248.464C0.33334 274.247 7.1084 298.538 18.3113 320.806C19.965 324.162 21.7788 327.465 23.6459 330.714C85.6884 268.494 63.2827 175.803 44.6113 126.421Z" fill="url(#paint3_linear)"/>
<path d="M160.534 236.585C139.996 182.781 161.921 135.956 181.5 108.202C169.39 102.023 157.92 93.2863 147.678 81.4069C132.794 81.0873 117.643 83.3246 102.76 88.2788C79.6604 95.8965 60.1888 109.321 44.5581 126.367C63.2295 175.749 85.6886 268.494 23.5928 330.714C35.3824 351.276 50.7997 370.028 68.1375 386.542C75.0726 393.201 82.3811 399.22 89.7963 404.707C129.326 371.146 190.889 316.011 160.534 236.585Z" fill="url(#paint4_linear)"/>
<path d="M236.535 50.5196C279.533 67.4597 309.62 72.041 331.439 71.4018C331.866 71.1354 332.079 70.9756 332.079 70.9756C250.779 -67.5284 144.458 41.5169 144.458 41.5169C144.512 41.6234 144.565 41.6767 144.618 41.7832C167.557 37.7346 200.846 36.4561 236.535 50.5196Z" fill="url(#paint5_linear)"/>
<path d="M236.534 50.5195C200.899 36.456 167.557 37.7345 144.618 41.7831C205.753 148.804 321.943 77.4745 331.492 71.4016C309.566 72.0409 279.479 67.4596 236.534 50.5195Z" fill="url(#paint6_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="39.0357" y1="409.547" x2="350.532" y2="333.698" gradientUnits="userSpaceOnUse">
<stop offset="0.2102" stop-color="#E54033"/>
<stop offset="0.8441" stop-color="#FECA1A"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="285.734" y1="388.296" x2="380.336" y2="389.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#FECA1A"/>
<stop offset="0.398" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="67.3051" y1="411.167" x2="263.969" y2="144.545" gradientUnits="userSpaceOnUse">
<stop offset="0.1627" stop-color="#E54033"/>
<stop offset="0.8437" stop-color="#FECA1A"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="36.6435" y1="148.151" x2="28.1323" y2="316.488" gradientUnits="userSpaceOnUse">
<stop stop-color="#FECA1A"/>
<stop offset="0.7596" stop-color="#E54033"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="135.028" y1="101.665" x2="82.5334" y2="301.29" gradientUnits="userSpaceOnUse">
<stop offset="0.1562" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#E54033"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="154.812" y1="5.74332" x2="349.64" y2="77.6619" gradientUnits="userSpaceOnUse">
<stop offset="0.1478" stop-color="#6CBF00"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="329.318" y1="104.121" x2="165.77" y2="47.8659" gradientUnits="userSpaceOnUse">
<stop offset="0.1478" stop-color="#6CBF00"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -1,10 +0,0 @@
<svg width="1028" height="888" viewBox="0 0 1028 888" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M242.66 320.737C23.2826 374.206 -0.109802 443.105 -0.109802 443.105V887.363C-0.109802 887.363 60.8284 684.4 320.306 631.816C747.266 559.477 1008.64 146.769 1027.97 -3.61035H654.483C624.014 96.6426 516.881 253.902 242.66 320.737Z" fill="url(#paint0_linear)" fill-opacity="0.42"/>
<defs>
<linearGradient id="paint0_linear" x1="929.687" y1="-89.6115" x2="-404.071" y2="1022.75" gradientUnits="userSpaceOnUse">
<stop stop-color="#584F81" stop-opacity="0"/>
<stop offset="1" stop-color="#584F81"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 665 B

3
public/borrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 5V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V9C1 10.1046 1.89543 11 3 11H5M7 15H17C18.1046 15 19 14.1046 19 13V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z" stroke="#4F4C67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 522 B

3
public/carrot-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.6665L7.8963 7.99984L1 14.3332" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 227 B

View File

@ -1,4 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.366211 29.5382V10.5999C0.366211 4.9184 4.96552 0.319092 10.647 0.319092H29.4501C35.1316 0.319092 39.7309 4.9184 39.7309 10.5999V29.4029C39.7309 35.0844 35.1316 39.6838 29.4501 39.6838H10.647C4.96552 39.819 0.366211 35.2197 0.366211 29.5382Z" fill="#9490A6"/>
<path d="M29.3148 13.5759C26.3387 11.2762 23.498 11.4115 23.498 11.4115L23.2274 11.6821C26.7446 12.7643 28.5031 14.3875 28.5031 14.3875C26.3387 13.1701 24.1744 12.629 22.1453 12.3584C20.6572 12.2232 19.1692 12.2232 17.9518 12.3584C17.8165 12.3584 17.6812 12.3584 17.5459 12.3584C16.8696 12.4937 14.9757 12.629 12.8114 13.7112C11.9997 13.9817 11.5939 14.2523 11.5939 14.2523C11.5939 14.2523 13.3525 12.629 17.1401 11.5468L16.8696 11.2762C16.8696 11.2762 14.0288 11.2762 11.0528 13.4406C11.0528 13.4406 8.07678 18.8516 8.07678 25.6153C8.07678 25.6153 9.83534 28.5913 14.4346 28.7266C14.4346 28.7266 15.2463 27.7796 15.7874 26.968C13.0819 26.1564 12.135 24.5331 12.135 24.5331C12.135 24.5331 12.4055 24.6683 12.6761 24.9389C12.6761 24.9389 12.6761 24.9389 12.8114 24.9389C12.8114 24.9389 12.9466 24.9389 12.9466 25.0742C13.4877 25.3447 14.0288 25.6153 14.4346 25.7505C15.2463 26.1564 16.3285 26.4269 17.5459 26.6975C19.1692 26.968 20.9278 27.1033 22.9569 26.6975C23.9038 26.5622 24.986 26.2916 26.0682 25.7505C26.7446 25.48 27.5562 25.0742 28.5031 24.5331C28.5031 24.5331 27.4209 26.2916 24.7155 26.968C25.3918 27.7796 26.0682 28.5913 26.0682 28.5913C30.6675 28.456 32.4261 25.48 32.4261 25.48C32.4261 18.9868 29.3148 13.5759 29.3148 13.5759ZM16.1932 23.7214C14.9757 23.7214 14.0288 22.6392 14.0288 21.4218C14.0288 20.2043 14.9757 19.1221 16.1932 19.1221C17.4107 19.1221 18.3576 20.2043 18.3576 21.4218C18.3576 22.6392 17.4107 23.7214 16.1932 23.7214ZM23.9038 23.7214C22.6863 23.7214 21.7394 22.6392 21.7394 21.4218C21.7394 20.2043 22.6863 19.1221 23.9038 19.1221C25.1213 19.1221 26.0682 20.2043 26.0682 21.4218C26.0682 22.6392 25.1213 23.7214 23.9038 23.7214Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,12 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M0.381958 29.5382V10.5999C0.381958 4.9184 4.98127 0.319092 10.6628 0.319092H29.4658C35.1473 0.319092 39.7466 4.9184 39.7466 10.5999V29.403C39.7466 35.0844 35.1473 39.6838 29.4658 39.6838H10.6628C4.98127 39.819 0.381958 35.2197 0.381958 29.5382Z" fill="#9490A6"/>
<path d="M27.572 28.3207H12.6919C10.9333 28.3207 9.44531 26.8327 9.44531 25.0742V15.3345C9.44531 13.5759 10.9333 12.0879 12.6919 12.0879H27.572C29.3306 12.0879 30.8186 13.5759 30.8186 15.3345V25.0742C30.8186 26.968 29.3306 28.3207 27.572 28.3207Z" fill="white"/>
<path d="M20.2673 22.2334C20.132 22.2334 19.9967 22.2334 19.8615 22.0981L11.745 15.8755C11.4745 15.605 11.3392 15.1992 11.6098 14.9286C11.8803 14.6581 12.2861 14.5228 12.5567 14.7933L20.2673 20.7454L27.9779 14.7933C28.2484 14.5228 28.6542 14.6581 28.9248 14.9286C29.1953 15.1992 29.0601 15.605 28.7895 15.8755L20.6731 22.0981C20.5378 22.2334 20.4025 22.2334 20.2673 22.2334Z" fill="#9490A6"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="39.4999" height="39.4999" fill="white" transform="translate(0.381958 0.319092)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,4 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.334717 29.5382V10.5999C0.334717 4.9184 4.93402 0.319092 10.6155 0.319092H29.4186C35.1001 0.319092 39.6994 4.9184 39.6994 10.5999V29.4029C39.6994 35.0844 35.1001 39.6838 29.4186 39.6838H10.6155C4.93402 39.819 0.334717 35.2197 0.334717 29.5382Z" fill="#9490A6"/>
<path d="M26.9836 39.8191C26.8483 39.8191 26.7131 39.8191 26.4425 39.6839C26.3072 39.5486 26.172 39.5486 26.0367 39.2781C26.0367 39.1428 26.0367 38.8722 26.0367 38.6017V32.3791C26.0367 30.7558 25.6309 29.5383 24.684 28.7267C25.6309 28.5914 26.5778 28.4562 27.3894 28.3209C28.2011 28.0503 29.0127 27.7798 29.8244 27.374C30.636 26.9681 31.3124 26.2918 31.8535 25.6154C32.3946 24.939 32.8004 23.9921 33.2062 22.9099C33.612 21.8277 33.7473 20.475 33.7473 18.987C33.7473 16.9579 33.0709 15.1993 31.7182 13.7113C32.3946 12.088 32.2593 10.4647 31.4476 8.43564C30.9065 8.30036 30.2302 8.43564 29.4185 8.70618C28.4716 9.11201 27.66 9.38255 26.9836 9.78837L26.0367 10.6C24.4134 10.1942 22.7901 9.92365 21.0316 9.92365C19.273 9.92365 17.6497 10.1942 16.0264 10.6C15.7559 10.4647 15.3501 10.1942 14.9442 9.92365C14.5384 9.51783 13.8621 9.24728 12.9151 8.84146C11.9682 8.43564 11.1566 8.30036 10.6155 8.57091C9.93911 10.4647 9.80384 12.2233 10.4802 13.7113C9.12747 15.1993 8.4511 16.9579 8.4511 19.1223C8.4511 20.6103 8.58638 21.8277 8.9922 23.0452C9.39802 24.1274 9.80384 25.0743 10.3449 25.7507C10.886 26.427 11.5624 26.9681 12.374 27.5092C13.1857 27.9151 13.9973 28.3209 14.809 28.4562C15.6206 28.7267 16.4323 28.862 17.5144 28.862C16.8381 29.5383 16.4323 30.35 16.297 31.5674C15.8912 31.7027 15.4853 31.838 15.0795 31.9733C14.6737 32.1085 14.1326 32.1085 13.5915 32.1085C13.0504 32.1085 12.5093 31.838 11.8329 31.4322C11.2919 31.0264 10.7508 30.4853 10.3449 29.8089C10.0744 29.2678 9.66857 28.862 9.12747 28.4562C8.58638 28.0503 8.18056 27.9151 7.91001 27.7798L7.36891 27.6445C6.96309 27.6445 6.69254 27.6445 6.55727 27.7798C6.422 27.9151 6.422 27.9151 6.422 28.0503C6.422 28.1856 6.55727 28.3209 6.69254 28.4562C6.82782 28.7267 6.96309 28.7267 7.09837 28.862L7.23364 28.9972C7.63946 29.1325 8.04528 29.5383 8.31583 29.9442C8.72165 30.4853 8.9922 30.8911 9.12747 31.2969L9.39802 31.838C9.66857 32.5144 9.93911 33.0555 10.4802 33.4613C11.1566 33.8671 11.6977 34.1377 12.374 34.2729C13.0504 34.4082 13.5915 34.4082 14.1326 34.4082C14.6737 34.4082 15.2148 34.4082 15.6206 34.2729L16.1617 34.1376C16.1617 34.814 16.1617 35.6257 16.1617 36.8431C16.1617 37.9253 16.1617 38.6017 16.1617 38.6017C16.1617 39.0075 16.0264 39.2781 15.8912 39.4133C15.7559 39.5486 15.4853 39.6839 15.3501 39.6839L26.9836 39.8191ZM8.4511 28.7267C8.31583 28.5914 8.18056 28.5914 8.31583 28.4562C8.31583 28.3209 8.4511 28.3209 8.58638 28.4562C8.72165 28.5914 8.85692 28.5914 8.72165 28.7267C8.72165 28.862 8.58638 28.862 8.4511 28.7267ZM9.53329 29.5383C9.39802 29.6736 9.26275 29.6736 9.12747 29.4031C8.9922 29.2678 8.9922 29.1325 9.12747 28.9972C9.26275 28.862 9.39802 28.862 9.53329 29.1325C9.66857 29.4031 9.66857 29.5383 9.53329 29.5383ZM10.3449 30.7558C10.2097 30.8911 10.0744 30.7558 9.93911 30.6205C9.80384 30.35 9.80384 30.2147 9.93911 30.0794C10.0744 29.9442 10.2097 29.9442 10.3449 30.2147C10.4802 30.4853 10.4802 30.6205 10.3449 30.7558ZM11.4271 31.838C11.2919 31.9733 11.1566 31.9733 10.886 31.7027C10.6155 31.5674 10.6155 31.2969 10.7508 31.1616C10.886 31.0264 11.0213 31.0264 11.2919 31.2969C11.5624 31.5674 11.5624 31.7027 11.4271 31.838ZM12.374 32.6496C12.1035 32.5144 11.9682 32.5144 12.1035 32.2438C12.2388 32.1085 12.374 31.9733 12.6446 32.1085C12.9151 32.2438 13.0504 32.3791 12.9151 32.5144C12.7799 32.6496 12.6446 32.7849 12.374 32.6496ZM14.1326 32.9202C13.8621 32.9202 13.7268 32.9202 13.7268 32.6496C13.7268 32.5144 13.8621 32.3791 14.1326 32.3791C14.4031 32.3791 14.5384 32.3791 14.5384 32.6496C14.5384 32.7849 14.4031 32.9202 14.1326 32.9202ZM15.6206 32.6496C15.3501 32.7849 15.2148 32.6496 15.2148 32.3791C15.2148 32.1085 15.3501 32.1085 15.6206 31.9733C15.8912 31.9733 16.0264 31.9733 16.0264 32.2438C16.0264 32.5144 15.8912 32.6496 15.6206 32.6496Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,4 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.350464 29.5382V10.5999C0.350464 4.9184 4.94977 0.319092 10.6313 0.319092H29.4343C35.1158 0.319092 39.7151 4.9184 39.7151 10.5999V29.4029C39.7151 35.0844 35.1158 39.6838 29.4343 39.6838H10.7665C5.08505 39.819 0.350464 35.2197 0.350464 29.5382Z" fill="#9490A6"/>
<path d="M32.0399 13.8678C31.2828 14.1707 30.3741 14.4736 29.6169 14.625C30.0713 14.625 30.5256 13.8678 30.8284 13.565C31.1313 13.1106 31.4342 12.6563 31.5856 12.0506V11.8991H31.4342C30.5256 12.3535 29.6169 12.8078 28.5569 12.9592C28.4054 12.9592 28.4054 12.9592 28.4054 12.9592C28.254 12.8078 28.254 12.8078 28.1026 12.6563C27.6482 12.3535 27.1939 12.0506 26.7396 11.7477C26.1339 11.5963 25.3767 11.4448 24.6195 11.4448C23.8623 11.4448 23.2565 11.7477 22.6508 12.0506C22.045 12.3535 21.4393 12.8078 20.985 13.4135C20.5306 14.0193 20.2278 14.625 20.0763 15.3822C19.9249 16.1394 19.9249 16.7452 20.0763 17.5024C20.0763 17.6538 20.0763 17.6538 19.9249 17.6538C15.9875 17.048 12.6559 15.6851 9.92998 12.6563C9.77854 12.5049 9.77854 12.5049 9.6271 12.6563C8.41559 14.4736 9.02135 17.1995 10.5357 18.5624C10.6872 18.7139 10.99 18.8653 11.1415 19.1682C10.99 19.1682 10.0814 19.0167 9.17279 18.5624C9.02135 18.5624 9.02135 18.5624 9.02135 18.7139C9.02135 18.8653 9.02135 19.0167 9.02135 19.3196C9.17279 21.1369 10.5357 22.8027 12.2016 23.4084C12.353 23.5599 12.6559 23.5599 12.8073 23.5599C12.353 23.7113 12.0501 23.7113 10.99 23.5599C10.8386 23.5599 10.8386 23.5599 10.8386 23.7113C11.5958 25.9829 13.4131 26.5886 14.776 27.043C14.9274 27.043 15.0789 27.043 15.3817 27.043C14.9274 27.6487 13.4131 28.2545 12.6559 28.4059C11.2929 28.8602 9.92998 29.0117 8.56703 28.8602C8.41559 28.8602 8.26416 28.8602 8.26416 28.8602V29.0117C8.56704 29.1631 8.86991 29.3145 9.17279 29.466C10.0814 29.9203 10.99 30.3746 11.8987 30.526C16.8961 31.889 22.3479 30.8289 26.1339 27.1944C29.0112 24.3171 30.0713 20.3797 30.0713 16.2908C30.0713 16.1394 30.2227 15.988 30.3741 15.988C31.1313 15.3822 31.7371 14.7765 32.3428 14.0193C32.1914 14.1707 32.1914 14.0193 32.0399 13.8678C32.1914 13.8678 32.1914 13.8678 32.0399 13.8678C32.1914 13.8678 32.1914 13.8678 32.0399 13.8678Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/favicon.ico Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 15 KiB

22
public/feature1.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8668 10.8357C13.1764 10.6293 13.5588 10.4448 14 10.302L14 13.698C13.5588 13.5552 13.1764 13.3707 12.8668 13.1643C12.1385 12.6788 12 12.2278 12 12C12 11.7722 12.1385 11.3212 12.8668 10.8357Z" fill="url(#paint0_linear)"/>
<path d="M18 21.698L18 18.302C18.4412 18.4448 18.8237 18.6293 19.1333 18.8357C19.8615 19.3212 20 19.7722 20 20C20 20.2278 19.8615 20.6788 19.1333 21.1643C18.8237 21.3707 18.4413 21.5552 18 21.698Z" fill="url(#paint1_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM18 6C18 4.89543 17.1046 4 16 4C14.8954 4 14 4.89543 14 6V6.18399C12.7568 6.41745 11.607 6.86814 10.648 7.50747C9.20461 8.46971 8 10.0187 8 12C8 13.9813 9.20461 15.5303 10.648 16.4925C11.607 17.1319 12.7568 17.5826 14 17.816L14 21.6985C13.218 21.4446 12.6383 21.0638 12.3133 20.6892C11.5894 19.855 10.3263 19.7655 9.49198 20.4894C8.6577 21.2133 8.56822 22.4765 9.29213 23.3108C10.4171 24.6073 12.1191 25.4617 14 25.8153L14 26C14 27.1045 14.8954 28 16 28C17.1045 28 18 27.1046 18 26L18 25.816C19.2432 25.5826 20.3931 25.1319 21.3521 24.4925C22.7954 23.5303 24 21.9813 24 20C24 18.0187 22.7954 16.4697 21.3521 15.5075C20.3931 14.8681 19.2432 14.4175 18 14.184L18 10.3015C18.782 10.5554 19.3617 10.9362 19.6867 11.3108C20.4106 12.145 21.6738 12.2345 22.5081 11.5106C23.3423 10.7867 23.4318 9.52353 22.7079 8.68925C21.5829 7.39273 19.8809 6.5383 18 6.18472V6Z" fill="url(#paint2_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-15" y1="-31.5" x2="41.5" y2="25.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.536458" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="-15" y1="-31.5" x2="41.5" y2="25.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.536458" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="-15" y1="-31.5" x2="41.5" y2="25.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.536458" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

10
public/feature2.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="26" height="33" viewBox="0 0 26 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4155 0.0849461C16.1886 0.325514 16.7143 1.03326 16.7143 1.83345V11L24.1429 11C24.8353 11 25.4703 11.3804 25.7901 11.9867C26.1099 12.5931 26.0614 13.3247 25.6643 13.8847L12.6643 32.2179C12.1994 32.8734 11.3576 33.1556 10.5845 32.9151C9.81144 32.6745 9.28572 31.9667 9.28572 31.1665L9.28572 22H1.85715C1.16466 22 0.529698 21.6196 0.209902 21.0133C-0.109894 20.4069 -0.0613954 19.6753 0.335717 19.1153L13.3357 0.782112C13.8006 0.126572 14.6424 -0.155622 15.4155 0.0849461Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-23.5" y1="-35.5" x2="26" y2="44.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.5" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 907 B

10
public/feature3.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="29" height="33" viewBox="0 0 29 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.14286 0C1.85482 0 0 1.84683 0 4.125V33L7.25 28.875L14.5 33L21.75 28.875L29 33V4.125C29 1.84683 27.1452 0 24.8571 0H4.14286ZM9.32143 6.1875C7.6054 6.1875 6.21429 7.57262 6.21429 9.28125C6.21429 10.9899 7.6054 12.375 9.32143 12.375C11.0375 12.375 12.4286 10.9899 12.4286 9.28125C12.4286 7.57262 11.0375 6.1875 9.32143 6.1875ZM22.179 6.79159C21.3701 5.98614 20.0585 5.98614 19.2496 6.79159L6.82099 19.1666C6.01205 19.972 6.01205 21.278 6.82099 22.0834C7.62994 22.8889 8.94149 22.8889 9.75043 22.0834L22.179 9.70841C22.988 8.90295 22.988 7.59705 22.179 6.79159ZM19.6786 16.5C17.9625 16.5 16.5714 17.8851 16.5714 19.5938C16.5714 21.3024 17.9625 22.6875 19.6786 22.6875C21.3946 22.6875 22.7857 21.3024 22.7857 19.5938C22.7857 17.8851 21.3946 16.5 19.6786 16.5Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-32.0208" y1="-20.1667" x2="59.8765" y2="42.4076" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.520833" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

10
public/feature4.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 31C24.0604 31 31 24.0604 31 15.5C31 6.93959 24.0604 0 15.5 0C6.93959 0 0 6.93959 0 15.5C0 24.0604 6.93959 31 15.5 31ZM4.51784 11.6781C5.24176 9.59761 6.54018 7.78612 8.22315 6.43358C8.74218 7.22622 9.63808 7.74983 10.6563 7.74983C12.2614 7.74983 13.5625 9.051 13.5625 10.6561V11.6248C13.5625 13.7649 15.2974 15.4998 17.4375 15.4998C19.5776 15.4998 21.3125 13.7649 21.3125 11.6248C21.3125 9.80335 22.5693 8.2754 24.263 7.86081C26.0454 9.90374 27.125 12.5757 27.125 15.4999C27.125 16.1601 27.07 16.8075 26.9642 17.4377H25.1875C23.0473 17.4377 21.3125 19.1726 21.3125 21.3127V25.5697C19.6026 26.5588 17.6172 27.1249 15.4998 27.1249V23.25C15.4998 21.1099 13.7649 19.375 11.6248 19.375C9.48473 19.375 7.74984 17.6401 7.74984 15.5C7.74984 13.579 6.35192 11.9844 4.51784 11.6781Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-29.0625" y1="-7.75" x2="31" y2="31" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.520833" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

10
public/feature5.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 2.90625C15.5 1.30117 16.8012 0 18.4062 0C20.0113 0 21.3125 1.30117 21.3125 2.90625V3.875C21.3125 4.94505 22.1799 5.8125 23.25 5.8125H29.0625C30.1326 5.8125 31 6.67995 31 7.75V13.5625C31 14.6326 30.1326 15.5 29.0625 15.5H28.0938C26.4887 15.5 25.1875 16.8012 25.1875 18.4062C25.1875 20.0113 26.4887 21.3125 28.0938 21.3125H29.0625C30.1326 21.3125 31 22.1799 31 23.25V29.0625C31 30.1326 30.1326 31 29.0625 31H23.25C22.1799 31 21.3125 30.1326 21.3125 29.0625V28.0938C21.3125 26.4887 20.0113 25.1875 18.4062 25.1875C16.8012 25.1875 15.5 26.4887 15.5 28.0938V29.0625C15.5 30.1326 14.6326 31 13.5625 31H7.75C6.67995 31 5.8125 30.1326 5.8125 29.0625V23.25C5.8125 22.1799 4.94505 21.3125 3.875 21.3125H2.90625C1.30117 21.3125 0 20.0113 0 18.4062C0 16.8012 1.30117 15.5 2.90625 15.5H3.875C4.94505 15.5 5.8125 14.6326 5.8125 13.5625V7.75C5.8125 6.67995 6.67995 5.8125 7.75 5.8125H13.5625C14.6326 5.8125 15.5 4.94505 15.5 3.875V2.90625Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-15.5" y1="-5.8125" x2="53.2813" y2="31" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.520833" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

3
public/futures.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 10C19 14.9706 14.9706 19 10 19M19 10C19 5.02944 14.9706 1 10 1M19 10H1M10 19C5.02944 19 1 14.9706 1 10M10 19C11.6569 19 13 14.9706 13 10C13 5.02944 11.6569 1 10 1M10 19C8.34315 19 7 14.9706 7 10C7 5.02944 8.34315 1 10 1M1 10C1 5.02944 5.02944 1 10 1" stroke="#4F4C67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 450 B

1
public/github.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>

After

Width:  |  Height:  |  Size: 814 B

BIN
public/img/CardSmall1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/img/CardSmalllp1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

BIN
public/img/Card_Large1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 KiB

BIN
public/img/Card_Large2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
public/img/Card_Small1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/img/Card_Small2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

BIN
public/img/DepositModal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

BIN
public/img/Group 362.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/img/Hero_BG.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 900 KiB

BIN
public/img/Hero_BG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

BIN
public/img/bgtexture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
public/img/chart.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

BIN
public/img/feature1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

BIN
public/img/feature2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/img/feature3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
public/img/feature4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/img/logoMango.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/img/vaults.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

3
public/lending.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12L11 6M5.50003 6.5H5.51003M10.5 11.5H10.51M15 19V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V19L4.5 17L8 19L11.5 17L15 19ZM6 6.5C6 6.77614 5.77614 7 5.5 7C5.22386 7 5 6.77614 5 6.5C5 6.22386 5.22386 6 5.5 6C5.77614 6 6 6.22386 6 6.5ZM11 11.5C11 11.7761 10.7761 12 10.5 12C10.2239 12 10 11.7761 10 11.5C10 11.2239 10.2239 11 10.5 11C10.7761 11 11 11.2239 11 11.5Z" stroke="#4F4C67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 573 B

3
public/liq.svg Normal file
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 d="M16 17H21V15C21 13.3431 19.6569 12 18 12C17.0444 12 16.1931 12.4468 15.6438 13.1429M16 17H6M16 17V15C16 14.3438 15.8736 13.717 15.6438 13.1429M6 17H1V15C1 13.3431 2.34315 12 4 12C4.95561 12 5.80686 12.4468 6.35625 13.1429M6 17V15C6 14.3438 6.12642 13.717 6.35625 13.1429M6.35625 13.1429C7.0935 11.301 8.89482 10 11 10C13.1052 10 14.9065 11.301 15.6438 13.1429M14 4C14 5.65685 12.6569 7 11 7C9.34315 7 8 5.65685 8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4ZM20 7C20 8.10457 19.1046 9 18 9C16.8954 9 16 8.10457 16 7C16 5.89543 16.8954 5 18 5C19.1046 5 20 5.89543 20 7ZM6 7C6 8.10457 5.10457 9 4 9C2.89543 9 2 8.10457 2 7C2 5.89543 2.89543 5 4 5C5.10457 5 6 5.89543 6 7Z" stroke="#4F4C67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 874 B

51
public/logo.svg Normal file
View File

@ -0,0 +1,51 @@
<svg width="985" height="1006" viewBox="0 0 985 1006" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M472.746 272.289C472.751 272.283 472.755 272.276 472.76 272.27C509.05 290.89 548.76 297.27 586.76 297.16C608.84 317.44 627.21 341.26 644.47 365.72C651.627 375.937 658.082 386.628 663.79 397.72C676.989 423.136 686.696 450.028 696.518 477.237C699.398 485.217 702.289 493.225 705.28 501.23C706.217 504.656 707.196 508.084 708.217 511.514L708.27 511.5C723.44 563.53 745.59 619.11 775.27 665L775.241 665.012C785.058 680.087 796.055 694.361 808.13 707.7C810.506 710.27 812.936 712.816 815.369 715.365L815.37 715.366L815.371 715.367L815.374 715.37C826.742 727.28 838.19 739.274 844.68 754.28C852.76 772.98 852.14 794.49 847.28 814.28C824.35 907.56 734.52 932.07 648.67 934.33L648.711 934.223C616.522 934.864 584.556 932.465 556.21 929.56C556.21 929.56 419.5 915.41 303.62 830.69L299.88 827.91C299.88 827.91 299.88 827.91 299.881 827.909C286.355 817.83 273.451 806.941 261.24 795.3C228.76 764.3 199.86 729.14 177.76 690.54C177.908 690.392 178.055 690.243 178.203 690.095C175.587 685.388 173.079 680.633 170.68 675.83C149.3 633.04 136.27 586.46 135.68 536.95C134.674 453.873 163.095 368.795 217.118 307.113C217.098 307.062 217.079 307.011 217.06 306.96C246.31 274.92 282.87 249.75 326.15 235.42C353.283 226.354 381.768 222.001 410.37 222.55C427.775 242.987 448.954 259.874 472.746 272.289ZM406.153 815.85C425.711 808.711 444.24 799.11 461.518 787.279C444.131 799.029 425.575 808.637 406.153 815.85Z" fill="url(#paint0_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M756.498 204.628C756.512 204.628 756.526 204.628 756.54 204.627L757.72 203.867C605.3 -56.133 406 148.567 406 148.567L406.285 149.068C406.273 149.071 406.262 149.074 406.25 149.077C520.856 350.01 738.664 216.087 756.498 204.628Z" fill="url(#paint1_linear)"/>
<path d="M567.56 652.44C525.56 752.84 444.92 819.32 347.22 829.39C345.12 829.67 318.38 831.78 303.62 830.69C419.5 915.41 556.21 929.56 556.21 929.56C585.48 932.56 618.61 935.02 651.86 934.15C663.57 903.58 670.16 868.58 668.27 828.87C663.88 736.64 717.36 689.29 775.27 665C745.59 619.11 723.44 563.53 708.27 511.5C663.05 523.53 605.62 561.36 567.56 652.44Z" fill="url(#paint2_linear)"/>
<path d="M666.44 828.22C668.34 867.93 660.38 903.76 648.67 934.33C734.52 932.07 824.35 907.56 847.28 814.28C852.14 794.49 852.76 772.98 844.68 754.28C836.8 736.06 821.61 722.28 808.13 707.7C795.519 693.769 784.084 678.818 773.94 663C716.08 687.3 662.05 736 666.44 828.22Z" fill="url(#paint3_linear)"/>
<path d="M705.28 501.23C692.09 465.93 680.86 430.59 663.79 397.72C658.082 386.628 651.627 375.937 644.47 365.72C627.21 341.26 608.84 317.44 586.76 297.16C548.76 297.27 509.05 290.89 472.76 272.27C436 324.41 393.94 412.86 432.44 513.82C489.29 662.92 373.92 764.82 299.88 827.91L303.62 830.69C317.502 831.773 331.455 831.573 345.3 830.09C442.99 820.01 528.3 751.93 570.3 651.54C608.37 560.46 663.75 525.86 708.91 513.82C707.637 509.62 706.427 505.423 705.28 501.23Z" fill="url(#paint4_linear)"/>
<path d="M221.09 302.67C164.49 364.67 134.65 451.86 135.68 536.95C136.27 586.46 149.3 633.04 170.68 675.83C173.887 682.25 177.287 688.583 180.88 694.83C299.87 575.39 256.88 397.42 221.09 302.67Z" fill="url(#paint5_linear)"/>
<path d="M434.44 513.82C395.94 412.82 437.06 324.95 473.77 272.82C449.561 260.357 428.024 243.28 410.37 222.55C381.768 222.001 353.283 226.354 326.15 235.42C282.87 249.75 246.31 274.92 217.06 306.96C252.06 399.63 294.12 573.72 177.76 690.54C199.86 729.14 228.76 764.3 261.24 795.3C274.051 807.513 287.625 818.899 301.88 829.39C375.92 766.33 491.29 662.92 434.44 513.82Z" fill="url(#paint6_linear)"/>
<path d="M578 165.13C658.57 196.92 715 205.53 755.91 204.3L757.09 203.54C604.67 -56.4601 405.37 148.24 405.37 148.24L405.66 148.75C448.65 141.13 511.13 138.76 578 165.13Z" fill="url(#paint7_linear)"/>
<path d="M579 163.33C512.17 137 449.33 138 405.62 148.75C520.23 349.69 738.05 215.75 755.87 204.3C714.93 205.53 659.57 195.12 579 163.33Z" fill="url(#paint8_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="46.5" y1="344.5" x2="978.5" y2="903" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.489583" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="263767" y1="31225.5" x2="205421" y2="-28791.6" gradientUnits="userSpaceOnUse">
<stop offset="0.15" stop-color="#6CBF00"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="207.43" y1="837.73" x2="791.43" y2="695.73" gradientUnits="userSpaceOnUse">
<stop offset="0.21" stop-color="#E54033"/>
<stop offset="0.84" stop-color="#FECA1A"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="667.54" y1="798.34" x2="847.74" y2="799.69" gradientUnits="userSpaceOnUse">
<stop stop-color="#FECA1A"/>
<stop offset="0.4" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="259.65" y1="841.37" x2="629.1" y2="341.2" gradientUnits="userSpaceOnUse">
<stop offset="0.16" stop-color="#E54033"/>
<stop offset="0.84" stop-color="#FECA1A"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="205.85" y1="344.39" x2="189.49" y2="667.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#FECA1A"/>
<stop offset="0.76" stop-color="#E54033"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="386.58" y1="260.5" x2="287.91" y2="635.17" gradientUnits="userSpaceOnUse">
<stop offset="0.16" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#E54033"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="424.8" y1="81.1199" x2="790.13" y2="215.78" gradientUnits="userSpaceOnUse">
<stop offset="0.15" stop-color="#6CBF00"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="263766" y1="31225.2" x2="205420" y2="-28791.9" gradientUnits="userSpaceOnUse">
<stop offset="0.15" stop-color="#6CBF00"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

3
public/markets.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12V15M10 12V15M14 12V15M1 19H19M1 8H19M1 5L10 1L19 5M2 8H18V19H2V8Z" stroke="#4F4C67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 267 B

View File

@ -0,0 +1,3 @@
<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z" fill="#4F4C67"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7273V12.766H16.3581L16.7666 9.66245H13.6347V7.68128C13.6347 6.783 13.888 6.17084 15.2027 6.17084L16.8769 6.17017V3.39423C16.5874 3.35733 15.5935 3.27272 14.4368 3.27272C12.0215 3.27272 10.3679 4.7188 10.3679 7.3739V9.66245H7.63623V12.766H10.3679V20.7273H13.6347Z" fill="#F1F5FB"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7273V12.766H16.3581L16.7666 9.66245H13.6347V7.68128C13.6347 6.783 13.888 6.17084 15.2027 6.17084L16.8769 6.17017V3.39423C16.5874 3.35733 15.5935 3.27272 14.4368 3.27272C12.0215 3.27272 10.3679 4.7188 10.3679 7.3739V9.66245H7.63623V12.766H10.3679V20.7273H13.6347Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>

After

Width:  |  Height:  |  Size: 919 B

View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="#67798E"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>

After

Width:  |  Height:  |  Size: 919 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z" fill="#F1F5FB"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 0C6.26967 0 0 6.19744 0 13.8413C0 19.9568 4.011 25.145 9.57483 26.9755C10.2737 27.1035 10.5 26.6745 10.5 26.31V23.7332C6.60567 24.5706 5.79483 22.0999 5.79483 22.0999C5.15783 20.5001 4.23967 20.0745 4.23967 20.0745C2.96917 19.2152 4.3365 19.2336 4.3365 19.2336C5.74233 19.3305 6.482 20.6604 6.482 20.6604C7.73033 22.7758 9.75683 22.1645 10.556 21.8104C10.6808 20.9165 11.0437 20.3052 11.445 19.9603C8.33583 19.6085 5.06683 18.4216 5.06683 13.1192C5.06683 11.6071 5.614 10.3729 6.50883 9.404C6.36417 9.05451 5.88467 7.64616 6.64533 5.74067C6.64533 5.74067 7.82133 5.36926 10.4965 7.1594C11.613 6.85259 12.81 6.69918 14 6.69341C15.19 6.69918 16.3882 6.85259 17.507 7.1594C20.1798 5.36926 21.3535 5.74067 21.3535 5.74067C22.1153 7.64731 21.6358 9.05566 21.4912 9.404C22.3895 10.3729 22.932 11.6082 22.932 13.1192C22.932 18.4354 19.6572 19.6062 16.5398 19.9488C17.0415 20.3778 17.5 21.2198 17.5 22.5117V26.31C17.5 26.6779 17.724 27.1105 18.4345 26.9744C23.9937 25.1415 28 19.9545 28 13.8413C28 6.19744 21.7315 0 14 0Z" fill="#4F4C67"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60045 2.18182H16.399C19.3871 2.18182 21.8181 4.61282 21.818 7.60075V16.3993C21.818 19.3872 19.3871 21.8182 16.399 21.8182H7.60045C4.61252 21.8182 2.18164 19.3873 2.18164 16.3993V7.60075C2.18164 4.61282 4.61252 2.18182 7.60045 2.18182ZM16.3991 20.076C18.4265 20.076 20.0759 18.4266 20.0759 16.3993H20.0758V7.60075C20.0758 5.57349 18.4263 3.92406 16.399 3.92406H7.60045C5.57319 3.92406 3.92387 5.57349 3.92387 7.60075V16.3993C3.92387 18.4266 5.57319 20.0761 7.60045 20.076H16.3991ZM6.85696 12.0001C6.85696 9.16424 9.16401 6.85715 11.9998 6.85715C14.8356 6.85715 17.1427 9.16424 17.1427 12.0001C17.1427 14.8359 14.8356 17.1429 11.9998 17.1429C9.16401 17.1429 6.85696 14.8359 6.85696 12.0001ZM8.6278 12C8.6278 13.8593 10.1406 15.3719 11.9998 15.3719C13.8591 15.3719 15.3718 13.8593 15.3718 12C15.3718 10.1406 13.8592 8.62791 11.9998 8.62791C10.1404 8.62791 8.6278 10.1406 8.6278 12Z" fill="#F1F5FB"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60045 2.18182H16.399C19.3871 2.18182 21.8181 4.61282 21.818 7.60075V16.3993C21.818 19.3872 19.3871 21.8182 16.399 21.8182H7.60045C4.61252 21.8182 2.18164 19.3873 2.18164 16.3993V7.60075C2.18164 4.61282 4.61252 2.18182 7.60045 2.18182ZM16.3991 20.076C18.4265 20.076 20.0759 18.4266 20.0759 16.3993H20.0758V7.60075C20.0758 5.57349 18.4263 3.92406 16.399 3.92406H7.60045C5.57319 3.92406 3.92387 5.57349 3.92387 7.60075V16.3993C3.92387 18.4266 5.57319 20.0761 7.60045 20.076H16.3991ZM6.85696 12.0001C6.85696 9.16424 9.16401 6.85715 11.9998 6.85715C14.8356 6.85715 17.1427 9.16424 17.1427 12.0001C17.1427 14.8359 14.8356 17.1429 11.9998 17.1429C9.16401 17.1429 6.85696 14.8359 6.85696 12.0001ZM8.6278 12C8.6278 13.8593 10.1406 15.3719 11.9998 15.3719C13.8591 15.3719 15.3718 13.8593 15.3718 12C15.3718 10.1406 13.8592 8.62791 11.9998 8.62791C10.1404 8.62791 8.6278 10.1406 8.6278 12Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57337 3.92405 3.92406 5.57348 3.92406 7.60074V16.3993C3.92406 18.4266 5.57337 20.0761 7.60063 20.0759H16.3993ZM6.85715 12.0001C6.85715 9.16424 9.16419 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16419 17.1429 6.85715 14.8359 6.85715 12.0001ZM8.62799 12C8.62799 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62799 10.1406 8.62799 12Z" fill="#67798E"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57337 3.92405 3.92406 5.57348 3.92406 7.60074V16.3993C3.92406 18.4266 5.57337 20.0761 7.60063 20.0759H16.3993ZM6.85715 12.0001C6.85715 9.16424 9.16419 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16419 17.1429 6.85715 14.8359 6.85715 12.0001ZM8.62799 12C8.62799 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62799 10.1406 8.62799 12Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="#F1F5FB"/>
</svg>

After

Width:  |  Height:  |  Size: 600 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="#67798E"/>
</svg>

After

Width:  |  Height:  |  Size: 600 B

View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8184 6.14597C21.1358 6.44842 20.4034 6.65354 19.6339 6.74512C20.4196 6.2746 21.0211 5.5283 21.3061 4.64175C20.5691 5.07748 19.7556 5.39387 18.8887 5.56539C18.1946 4.82487 17.2072 4.36363 16.112 4.36363C14.011 4.36363 12.3075 6.06718 12.3075 8.16706C12.3075 8.46487 12.3411 8.75575 12.406 9.03391C9.24459 8.87512 6.44128 7.36048 4.56507 5.05894C4.2371 5.61984 4.05053 6.27342 4.05053 6.97109C4.05053 8.29106 4.72268 9.45572 5.74249 10.1371C5.11901 10.1163 4.53262 9.94475 4.01925 9.65966V9.70718C4.01925 11.5498 5.3311 13.0876 7.07056 13.4376C6.75186 13.5234 6.4158 13.5709 6.06813 13.5709C5.82246 13.5709 5.58489 13.5465 5.35195 13.5002C5.83634 15.0125 7.24092 16.1123 8.90507 16.1424C7.60365 17.1622 5.96268 17.7683 4.18034 17.7683C3.87325 17.7683 3.57077 17.7498 3.27295 17.7162C4.9568 18.7974 6.95586 19.4278 9.1044 19.4278C16.1028 19.4278 19.9283 13.6311 19.9283 8.60397L19.9155 8.11145C20.663 7.57833 21.3096 6.90851 21.8184 6.14597Z" fill="#F1F5FB"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8184 6.14597C21.1358 6.44842 20.4034 6.65354 19.6339 6.74512C20.4196 6.2746 21.0211 5.5283 21.3061 4.64175C20.5691 5.07748 19.7556 5.39387 18.8887 5.56539C18.1946 4.82487 17.2072 4.36363 16.112 4.36363C14.011 4.36363 12.3075 6.06718 12.3075 8.16706C12.3075 8.46487 12.3411 8.75575 12.406 9.03391C9.24459 8.87512 6.44128 7.36048 4.56507 5.05894C4.2371 5.61984 4.05053 6.27342 4.05053 6.97109C4.05053 8.29106 4.72268 9.45572 5.74249 10.1371C5.11901 10.1163 4.53262 9.94475 4.01925 9.65966V9.70718C4.01925 11.5498 5.3311 13.0876 7.07056 13.4376C6.75186 13.5234 6.4158 13.5709 6.06813 13.5709C5.82246 13.5709 5.58489 13.5465 5.35195 13.5002C5.83634 15.0125 7.24092 16.1123 8.90507 16.1424C7.60365 17.1622 5.96268 17.7683 4.18034 17.7683C3.87325 17.7683 3.57077 17.7498 3.27295 17.7162C4.9568 18.7974 6.95586 19.4278 9.1044 19.4278C16.1028 19.4278 19.9283 13.6311 19.9283 8.60397L19.9155 8.11145C20.663 7.57833 21.3096 6.90851 21.8184 6.14597Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Some files were not shown because too many files have changed in this diff Show More