blockworks-foundation
/
mango-web
mirror of https://github.com/blockworks-foundation/mango-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added tailwind and reconfigured antd install so that we can fix responsive styling

This commit is contained in:
Tyler Shipe 2021-03-03 13:22:34 -05:00
parent b03d07c2f8
commit 0d01206f97
12 changed files with 421 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/ContactIcons.tsx
View File

@ -1,25 +1,21 @@
import { Space } from 'antd';
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>
<>
<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="mailto:hello@blockworks.foundation">
<img height="40px" width="40px" src="/contact/email.svg" />
</a>
<a href="https://github.com/blockworks-foundation">
<img height="40px" width="40px" src="/contact/github.svg" />
</a>
</Space>
</>);
};
<a href="https://twitter.com/mangomarkets">
<img height="40px" width="40px" src="/contact/twitter.svg" />
</a>
<a href="mailto:hello@blockworks.foundation">
<img height="40px" width="40px" src="/contact/email.svg" />
</a>
</Space>
</>
);
}

16
components/Logo.tsx
View File

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

10
components/StatsPanel.jsx
View File

@ -84,7 +84,7 @@ export default function StatsPanel() {
const { stats } = useMangoStats();
return (
<Wrapper>
<Wrapper className="hidden md:inline-block">
<Row justify="center">
<Col lg={24} xl={24} xxl={24}>
<FloatingElement style={{ paddingBottom: 32 }}>
@ -112,8 +112,12 @@ export default function StatsPanel() {
<Col span={3}>{stat.symbol}</Col>
<Col span={4}>{stat.totalDeposits.toFixed(2 - i)}</Col>
<Col span={4}>{stat.totalBorrows.toFixed(2 - i)}</Col>
<Col span={4}>{(100*stat.depositInterest).toFixed(2)}%</Col>
<Col span={4}>{(100*stat.borrowInterest).toFixed(2)}%</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>

76
next.config.js
View File

@ -1,7 +1,5 @@
/* eslint-disable */
const withLess = require("@zeit/next-less");
const withAntdLess = require("next-plugin-antd-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
@ -10,33 +8,51 @@ 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)
];
// module.exports = withCSS({
// cssModules: true,
// cssLoaderOptions: {
// importLoaders: 1,
// localIdentName: "[local]___[hash:base64:5]",
// },
// ...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"
});
}
// config.module.rules.unshift({
// test: antStyles,
// use: "null-loader",
// });
// }
// return config;
// },
// });
module.exports = withAntdLess({
// optional
lessVarsFilePath: "./styles/theme.less",
cssLoaderOptions: {},
// Other Config Here...
webpack(config) {
return config;
}
},
});

9
package.json
View File

@ -10,16 +10,17 @@
},
"dependencies": {
"@blockworks-foundation/mango-client": "^0.1.2",
"@zeit/next-less": "^1.0.1",
"antd": "^4.12.3",
"autoprefixer": "^10.2.4",
"babel-plugin-import": "^1.13.3",
"less": "^4.1.1",
"less-vars-to-js": "^1.3.0",
"next": "latest",
"next-plugin-antd-less": "^0.3.0",
"null-loader": "^4.0.1",
"postcss": "^8.2.6",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"styled-components": "^5.2.1"
"styled-components": "^5.2.1",
"tailwindcss": "^2.0.3"
},
"devDependencies": {
"@types/node": "^12.12.21",

5
pages/_app.tsx Normal file
View File

@ -0,0 +1,5 @@
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} />;
}

19
pages/index.tsx
View File

@ -50,12 +50,12 @@ const IndexPage = () => (
<Header style={{ background: "none", marginBottom: "0" }}>
<Navigation />
</Header>
<Layout style={{ background: "none" }}>
<Layout style={{ background: "none" }} className="p-6">
<Content style={{ padding: "2em" }}>
<Row align="middle">
<Col xs={24} lg={10}>
<div style={{ padding: "2em" }}>
<p style={{ fontSize: 36, lineHeight: 1.5 }}>
<div>
<p className="text-2xl md:text-4xl md:leading-normal md:pr-7">
Decentralized, cross-margined 5x leveraged trading with
lightning speed and near-zero fees powered on Serum.
</p>
@ -63,6 +63,7 @@ const IndexPage = () => (
type="primary"
size="large"
disabled
className="mb-4"
style={
{
padding: "0px 60px 0px 60px",
@ -85,7 +86,7 @@ const IndexPage = () => (
</Row>
<Row>
<Col xs={24} lg={8}>
<div style={{ padding: "0em 2em", marginTop: "2em" }}>
<div className="mt-2 md:mr-6">
<p style={{ fontSize: 36 }}>Trade</p>
<p style={{ lineHeight: 2, fontSize: 16 }}>
Trade with up to 5x leverage, long or short, with limit orders
@ -95,7 +96,7 @@ const IndexPage = () => (
</div>
</Col>
<Col xs={24} lg={8}>
<div style={{ padding: "0em 2em", marginTop: "2em" }}>
<div className="mt-2 md:mr-6">
<p style={{ fontSize: 36 }}>Lend</p>
<p
style={{
@ -110,13 +111,13 @@ const IndexPage = () => (
</div>
</Col>
<Col xs={24} lg={8}>
<div style={{ padding: "0em 2em", marginTop: "2em" }}>
<div className="mt-2 md:mr-6">
<p style={{ fontSize: 36 }}>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 🚀
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>

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

1
styles/global.css Normal file
View File

@ -0,0 +1 @@

10
styles/theme.less
View File

@ -1,9 +1,9 @@
// colors
@primary-color: #F2C94C;
@success-color: #AFD803;
@error-color: #E54033;
@text-color: #EEEEEE;
@text-color-secondary: #9490A6;
@primary-color: #f2c94c;
@success-color: #afd803;
@error-color: #e54033;
@text-color: #eeeeee;
@text-color-secondary: #9490a6;
@border-color-base: #584f81;
@divider-color: #584f81;
@btn-primary-color: #141026;

11
tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

602
yarn.lock
View File

File diff suppressed because it is too large Load Diff