Demo version of the Mango landing page.
* Contains a placeholder for real-time stats
This commit is contained in:
Maximilian Schneider
commit
ed3aaf0240
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"presets": [
|
||||
"next/babel"
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# TypeScript Next.js example
|
||||
|
||||
This is a really simple project that shows the usage of Next.js with TypeScript.
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](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)
|
||||
|
||||
## How to use it?
|
||||
|
||||
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
|
||||
# or
|
||||
yarn create next-app --example with-typescript with-typescript-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.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React, { ReactNode } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Head from 'next/head'
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Layout = ({ children, title = 'This is the default title' }: Props) => (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</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" />
|
||||
</Head>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="/mango.svg" />
|
||||
<a href="/">Mango Markets</a>
|
||||
<a href="/trade">Trade</a>
|
||||
<a href="/stats">Stats</a>
|
||||
<a href="https://www.notion.so/Mango-Markets-8de7c02f243240769b917c6a500d8693">Help</a>
|
||||
<a href="https://medium.com/blockworks-foundation">Blog</a>
|
||||
</nav>
|
||||
</header>
|
||||
{children}
|
||||
<footer>
|
||||
<hr />
|
||||
<span>I'm here to stay (Footer)</span>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export default function Logo() {
|
||||
return (
|
||||
<>
|
||||
<img height="40px" width="40px" src="/mango.png" />
|
||||
<span style={{ fontWeight: '700', marginRight: '1em' }}>
|
||||
Mango Markets
|
||||
</span>
|
||||
</>);
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { Image, Menu, Spacer } from 'antd';
|
||||
import Logo from './Logo';
|
||||
|
||||
export default function Navigation() {
|
||||
return (
|
||||
<>
|
||||
<Menu mode="horizontal" selectedKeys={[]}>
|
||||
<Logo />
|
||||
<Menu.Item key="trade">
|
||||
<a href="/trade">
|
||||
Trade
|
||||
</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="stats">
|
||||
<a href="/stats">
|
||||
Stats
|
||||
</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="help">
|
||||
<a href="/help">
|
||||
Help
|
||||
</a>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
|
||||
/* eslint-disable */
|
||||
const withLess = require("@zeit/next-less");
|
||||
const lessToJS = require("less-vars-to-js");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const themeVariables = lessToJS(
|
||||
fs.readFileSync(path.resolve(__dirname, "./styles/theme.less"), "utf8")
|
||||
);
|
||||
|
||||
module.exports = withLess({
|
||||
lessLoaderOptions: {
|
||||
javascriptEnabled: true,
|
||||
modifyVars: themeVariables,
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
if (isServer) {
|
||||
const antStyles = /antd\/.*?\/style.*?/;
|
||||
const origExternals = [...config.externals];
|
||||
config.externals = [
|
||||
(context, request, callback) => {
|
||||
if (request.match(antStyles)) return callback();
|
||||
if (typeof origExternals[0] === "function") {
|
||||
origExternals[0](context, request, callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
...(typeof origExternals[0] === "function" ? [] : origExternals)
|
||||
];
|
||||
|
||||
config.module.rules.unshift({
|
||||
test: antStyles,
|
||||
use: "null-loader"
|
||||
});
|
||||
}
|
||||
return config;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "with-typescript",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"type-check": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-less": "^1.0.1",
|
||||
"antd": "^4.12.3",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"less": "^4.1.1",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"next": "latest",
|
||||
"null-loader": "^4.0.1",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^12.12.21",
|
||||
"@types/react": "^16.9.16",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"typescript": "4.0",
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import Head from 'next/head'
|
||||
import { Divider, Button, Layout, Space, Row, Col, Image } from 'antd';
|
||||
import Logo from '../components/Logo';
|
||||
import Navigation from '../components/Navigation';
|
||||
|
||||
const { Header, Footer, Sider, Content } = Layout;
|
||||
|
||||
const IndexPage = () => (
|
||||
<>
|
||||
<Head>
|
||||
<title>Mango Margin</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" />
|
||||
</Head>
|
||||
<Layout>
|
||||
<Header style={{ marginTop: "1em" }}>
|
||||
<Navigation />
|
||||
</Header>
|
||||
<Layout>
|
||||
<Content style={{ padding: "2em" }}>
|
||||
<Row align="middle">
|
||||
<Col xs={24} lg={10}>
|
||||
<div style={{ padding: "2em" }}>
|
||||
<p style={{ fontSize: 36 }}>
|
||||
Decentralized, cross-margin trading up to 5x leverage with lightning speed and near-zero fees powered on Serum.
|
||||
</p>
|
||||
<Button type="primary" size="large">
|
||||
Start Trading
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} lg={14}>
|
||||
<div style={{ padding: "2em" }}>
|
||||
|
||||
<img src="/previews/stats.png" />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} lg={8}>
|
||||
<div style={{ padding: "2em" }}>
|
||||
<p style={{ fontSize: 36 }}>
|
||||
Trade
|
||||
</p>
|
||||
<p>
|
||||
Trade up to 5x margin, leveraged or short, with limit orders on Serum DEX’s fully on-chain order book as a maker or taker while earning interest on deposits and positions for extra profit.
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} lg={8}>
|
||||
<div style={{ padding: "2em" }}>
|
||||
|
||||
<p style={{ fontSize: 36 }}>
|
||||
Lend
|
||||
</p>
|
||||
<p style={{ width: 400 }}>
|
||||
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 style={{ padding: "2em" }}>
|
||||
<p style={{ fontSize: 36 }}>
|
||||
Fees
|
||||
</p>
|
||||
<p>
|
||||
No fees on interests. The only fees you will pay are for trading on Serum DEX. Stake your SRM into our pool to reduce the fees for everyone. Let's reach the MegaSerum fee tier together 🚀
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
</Layout>
|
||||
<Footer>
|
||||
<Divider />
|
||||
<Row align="middle">
|
||||
<Logo />
|
||||
© 2021 Blockworks Foundation
|
||||
</Row>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
|
||||
// colors
|
||||
@primary-color: #F2C94C;
|
||||
@success-color: #AFD803;
|
||||
@error-color: #E54033;
|
||||
@text-color: #EEEEEE;
|
||||
@text-color-secondary: #9490A6;
|
||||
@border-color-base: #F0EDFF;
|
||||
@divider-color: #F0EDFF;
|
||||
@btn-primary-color: #141026;
|
||||
@body-background: #141026;
|
||||
@component-background: #141026;
|
||||
@layout-body-background: #141026;
|
||||
@layout-header-background: #141026;
|
||||
|
||||
|
||||
// font
|
||||
@font-family: 'Lato', sans-serif;
|
||||
/*@font-size-base: 21px;*/
|
||||
|
||||
// layout
|
||||
@border-radius-base: 9px;
|
||||
@layout-header-height: 40px;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"alwaysStrict": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"lib": ["dom", "es2017"],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"noEmit": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"target": "esnext"
|
||||
},
|
||||
"exclude": ["node_modules"],
|
||||
"include": ["**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { User } from '../interfaces'
|
||||
|
||||
/** Dummy user data. */
|
||||
export const sampleUserData: User[] = [
|
||||
{ id: 101, name: 'Alice' },
|
||||
{ id: 102, name: 'Bob' },
|
||||
{ id: 103, name: 'Caroline' },
|
||||
{ id: 104, name: 'Dave' },
|
||||
]
|
||||
Loading…
Reference in New Issue