crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement CFL metrics MVP

Browse Source
This commit is contained in:
fragosti
2019-08-19 16:52:40 -07:00
parent 39deb1a05f
commit 7866d9ccb4
13 changed files with 283 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/package.json
View File

@@ -101,7 +101,7 @@
"@types/lodash": "4.14.104",
"@types/material-ui": "^0.20.0",
"@types/node": "*",
"@types/numeral": "^0.0.22",
"@types/numeral": "^0.0.26",
"@types/query-string": "^5.1.0",
"@types/rc-slider": "^8.6.0",
"@types/react": "^16.7.7",

3
packages/website/ts/components/hero.tsx
View File

@@ -18,6 +18,7 @@ interface Props {
announcement?: AnnouncementProps;
sectionPadding?: string;
showFigureBottomMobile?: boolean;
figureMaxWidth?: string;
}
interface SectionProps {
@@ -163,7 +164,7 @@ export class Hero extends React.Component<Props> {
isCenteredMobile={props.isCenteredMobile}
showFigureBottomMobile={props.showFigureBottomMobile}
>
{props.figure && <Content width="400px">{props.figure}</Content>}
{props.figure && <Content width={props.figureMaxWidth || '400px'}>{props.figure}</Content>}
<Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
{!!props.announcement && <Announcement {...props.announcement} />}

7
packages/website/ts/icons/illustrations/small_0x_logo.svg generated Normal file
View File

@@ -0,0 +1,7 @@
<svg width="57" height="23" viewBox="0 0 57 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M27.244 6.426C28.026 5.38333 29.063 4.862 30.355 4.862C31.647 4.862 32.6783 5.38333 33.449 6.426C34.231 7.45733 34.622 8.99867 34.622 11.05C34.622 13.1013 34.231 14.6427 33.449 15.674C32.6783 16.7053 31.647 17.221 30.355 17.221C29.063 17.221 28.026 16.7053 27.244 15.674C26.4733 14.6427 26.088 13.1013 26.088 11.05C26.088 8.99867 26.4733 7.45733 27.244 6.426ZM27.193 11.05C27.193 12.7047 27.448 13.974 27.958 14.858L32.038 6.409C31.5847 6.035 31.0237 5.848 30.355 5.848C29.3237 5.848 28.536 6.29567 27.992 7.191C27.4593 8.075 27.193 9.36133 27.193 11.05ZM30.355 16.235C31.3863 16.235 32.1683 15.793 32.701 14.909C33.245 14.025 33.517 12.7387 33.517 11.05C33.517 9.39533 33.262 8.13167 32.752 7.259L28.672 15.691C29.1367 16.0537 29.6977 16.235 30.355 16.235ZM42.814 17L40.536 13.243H39.924L37.561 17H36.371L39.125 12.648L36.66 8.5H37.816L39.924 12.053H40.536L42.678 8.5H43.834L41.335 12.597L44.072 17H42.814Z" fill="white"/>
<path d="M4.2009 12.6404L5.75336 11.0341L3.82332 8.4296L1.36592 4.95247C0.497758 6.43408 0 8.15874 0 10C0 13.0502 1.36592 15.7812 3.52018 17.6152L6.63946 15.4108C5.57847 14.7498 4.72377 13.7874 4.2009 12.6404Z" fill="white"/>
<path d="M7.35964 4.2009L8.96592 5.75336L11.5704 3.82332L15.0475 1.36592C13.5659 0.497758 11.8413 0 10 0C6.94978 0 4.21883 1.36592 2.38475 3.52018L4.58924 6.63946C5.25022 5.57847 6.21256 4.72377 7.35964 4.2009Z" fill="white"/>
<path d="M14.2466 8.96592L16.1767 11.5704L18.6341 15.0475C19.5022 13.5659 20 11.8413 20 10C20 6.94978 18.6341 4.21883 16.4798 2.38475L13.3605 4.58924C14.4215 5.25022 15.2762 6.21256 15.7991 7.35964L14.2466 8.96592Z" fill="white"/>
<path d="M17.6152 16.4798L15.4108 13.3605C14.7498 14.4215 13.7874 15.2762 12.6404 15.7991L11.0341 14.2466L8.4296 16.1767L4.95247 18.6341C6.43408 19.5022 8.15874 20 10 20C13.0502 20 15.7812 18.6341 17.6152 16.4798Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
packages/website/ts/icons/illustrations/small_kyber_logo.svg generated Normal file
View File

@@ -0,0 +1,9 @@
<svg width="77" height="23" viewBox="0 0 77 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M24.598 17V4.862H25.72V11.288L32.486 4.862H33.914L30.021 8.687L34.356 17H33.132L29.273 9.656H28.933L25.72 12.682V17H24.598ZM37.8041 20.4H36.7161L38.4671 16.201L34.8631 8.5H36.0191L38.8241 14.501H39.2321L41.7651 8.5H42.8871L37.8041 20.4ZM48.7967 8.279C49.964 8.279 50.8877 8.69833 51.5677 9.537C52.2477 10.3757 52.5877 11.4467 52.5877 12.75C52.5877 14.042 52.242 15.113 51.5507 15.963C50.8707 16.8017 49.9527 17.221 48.7967 17.221C47.584 17.221 46.666 16.83 46.0427 16.048H45.7027V17H44.6657V4.641H45.7367V9.452H46.0767C46.6887 8.67 47.5954 8.279 48.7967 8.279ZM48.6607 16.269C49.5674 16.269 50.27 15.9517 50.7687 15.317C51.2674 14.671 51.5167 13.8153 51.5167 12.75C51.5167 11.6847 51.2674 10.8347 50.7687 10.2C50.27 9.554 49.5674 9.231 48.6607 9.231C47.686 9.231 46.955 9.571 46.4677 10.251C45.9804 10.9197 45.7367 11.7527 45.7367 12.75C45.7367 13.736 45.9804 14.569 46.4677 15.249C46.955 15.929 47.686 16.269 48.6607 16.269ZM62.0655 12.223V12.563H55.4525V12.801C55.4525 13.855 55.7188 14.6993 56.2515 15.334C56.7955 15.9573 57.5208 16.269 58.4275 16.269C59.7308 16.269 60.5298 15.7647 60.8245 14.756H61.8955C61.7481 15.4813 61.3798 16.0763 60.7905 16.541C60.2011 16.9943 59.4135 17.221 58.4275 17.221C57.1581 17.221 56.1665 16.7903 55.4525 15.929C54.7385 15.0677 54.3815 13.974 54.3815 12.648C54.3815 11.3333 54.7385 10.2793 55.4525 9.486C56.1778 8.68133 57.1638 8.279 58.4105 8.279C59.5778 8.279 60.4788 8.66433 61.1135 9.435C61.7481 10.2057 62.0655 11.135 62.0655 12.223ZM58.3765 9.231C57.5605 9.231 56.9031 9.46333 56.4045 9.928C55.9171 10.3927 55.6225 10.9537 55.5205 11.611H60.9605C60.9151 10.9537 60.6658 10.3927 60.2125 9.928C59.7591 9.46333 59.1471 9.231 58.3765 9.231ZM68.893 8.5V9.486H68.247C67.4083 9.486 66.734 9.75233 66.224 10.285C65.7253 10.8177 65.476 11.56 65.476 12.512V17H64.405V8.5H65.442V9.537H65.782C66.36 8.84567 67.2043 8.5 68.315 8.5H68.893Z" fill="#999999"/>
<g opacity="0.7">
<path d="M6.79883 9.99997L14.3925 14.0559C14.6658 14.1977 15 14.0275 15 13.7439V6.25603C15 5.9724 14.6658 5.80223 14.3925 5.94404L6.79883 9.99997Z" fill="#999999"/>
<path d="M14.2582 3.59199L9.25599 0.079222C9.02198 -0.0893906 8.70025 0.023018 8.64172 0.30404L6.79883 8.1445L14.1996 4.21023C14.4629 4.06973 14.4629 3.7606 14.2582 3.59199Z" fill="#999999"/>
<path d="M9.25132 19.9196L14.2438 16.3707C14.4774 16.2017 14.4482 15.8919 14.2146 15.7511L6.79883 11.8359L8.60899 19.7225C8.6674 19.976 9.01774 20.0886 9.25132 19.9196Z" fill="#999999"/>
<path d="M4.57976 9.99219L6.78489 1.68812C6.88663 1.36033 6.41168 1.11449 6.07244 1.33302L0.441014 4.80214C0.169621 4.99336 0 5.26652 0 5.567V14.4174C0 14.7179 0.169621 14.991 0.441014 15.1822L6.07244 18.6787C6.41168 18.8699 6.85272 18.6514 6.78489 18.3236L4.57976 9.99219Z" fill="#999999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

7
packages/website/ts/icons/illustrations/small_uniswap_logo.svg generated Normal file
View File

@@ -0,0 +1,7 @@
<svg width="94" height="23" viewBox="0 0 94 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M36.758 4.862H37.88V12.716C37.88 14.1327 37.4777 15.2377 36.673 16.031C35.8683 16.8243 34.718 17.221 33.222 17.221C31.726 17.221 30.5757 16.8243 29.771 16.031C28.9663 15.2377 28.564 14.1327 28.564 12.716V4.862H29.686V12.733C29.686 13.7983 29.992 14.6427 30.604 15.266C31.216 15.8893 32.0887 16.201 33.222 16.201C34.3553 16.201 35.228 15.8893 35.84 15.266C36.452 14.6427 36.758 13.7983 36.758 12.733V4.862ZM48.2062 17H47.1352V11.781C47.1352 10.081 46.3475 9.231 44.7722 9.231C43.9562 9.231 43.2818 9.537 42.7492 10.149C42.2278 10.761 41.9672 11.492 41.9672 12.342V17H40.8962V8.5H41.9332V9.452H42.2732C42.5112 9.112 42.8682 8.83433 43.3442 8.619C43.8315 8.39233 44.3585 8.279 44.9252 8.279C45.9452 8.279 46.7442 8.57367 47.3222 9.163C47.9115 9.741 48.2062 10.5287 48.2062 11.526V17ZM52.0787 8.5V17H51.0077V8.5H52.0787ZM52.1297 5.984H50.9567V4.641H52.1297V5.984ZM57.9651 17.221C56.8431 17.221 55.9761 16.9943 55.3641 16.541C54.7521 16.0877 54.3894 15.453 54.2761 14.637H55.3301C55.5341 15.725 56.3784 16.269 57.8631 16.269C58.6224 16.269 59.2118 16.133 59.6311 15.861C60.0618 15.5777 60.2771 15.1697 60.2771 14.637C60.2771 14.2063 60.1468 13.8663 59.8861 13.617C59.6254 13.3677 59.1948 13.1977 58.5941 13.107C57.7894 12.9937 57.1151 12.8747 56.5711 12.75C55.2678 12.5007 54.6161 11.8207 54.6161 10.71C54.6161 9.996 54.8938 9.41233 55.4491 8.959C56.0158 8.50567 56.8261 8.279 57.8801 8.279C58.8208 8.279 59.5744 8.49433 60.1411 8.925C60.7078 9.34433 61.0364 9.91667 61.1271 10.642H60.0731C60.0164 10.1887 59.7784 9.843 59.3591 9.605C58.9398 9.35567 58.4241 9.231 57.8121 9.231C57.1434 9.231 56.6221 9.35567 56.2481 9.605C55.8741 9.843 55.6871 10.1773 55.6871 10.608C55.6871 10.9707 55.8004 11.2483 56.0271 11.441C56.2651 11.6337 56.6334 11.781 57.1321 11.883C57.2114 11.8943 57.3474 11.917 57.5401 11.951C57.7328 11.9737 57.8744 11.9963 57.9651 12.019L59.0191 12.189C60.5718 12.4723 61.3481 13.277 61.3481 14.603C61.3481 15.3283 61.0421 15.946 60.4301 16.456C59.8294 16.966 59.0078 17.221 57.9651 17.221ZM66.8759 11.475H68.4739L70.0379 15.946H70.3779L71.4149 8.5H72.4689L71.2789 17H69.4259L67.8109 12.495H67.4709L65.8559 17H64.0029L62.8129 8.5H63.8669L64.9209 15.946H65.2609L66.8759 11.475ZM80.2544 17V16.048H79.9144C79.6424 16.3993 79.2627 16.6827 78.7754 16.898C78.2994 17.1133 77.761 17.221 77.1604 17.221C76.197 17.221 75.4434 16.9547 74.8994 16.422C74.3554 15.8893 74.0834 15.2433 74.0834 14.484C74.0834 13.7133 74.3384 13.056 74.8484 12.512C75.3697 11.968 76.1744 11.696 77.2624 11.696H80.2204V11.169C80.2204 10.591 80.0334 10.1263 79.6594 9.775C79.2854 9.41233 78.7074 9.231 77.9254 9.231C77.234 9.231 76.7014 9.36133 76.3274 9.622C75.9534 9.87133 75.7494 10.2283 75.7154 10.693H74.6444C74.7124 9.93367 75.041 9.34433 75.6304 8.925C76.2197 8.49433 76.9847 8.279 77.9254 8.279C78.9567 8.279 79.7727 8.52833 80.3734 9.027C80.9854 9.52567 81.2914 10.217 81.2914 11.101V17H80.2544ZM77.3134 16.269C78.118 16.269 78.8037 16.0197 79.3704 15.521C79.937 15.011 80.2204 14.3707 80.2204 13.6V12.597H77.5514C76.7807 12.597 76.1857 12.7613 75.7664 13.09C75.3584 13.4073 75.1544 13.8437 75.1544 14.399C75.1544 14.9883 75.347 15.4473 75.7324 15.776C76.129 16.1047 76.656 16.269 77.3134 16.269ZM88.1746 17.221C86.9733 17.221 86.0666 16.83 85.4546 16.048H85.1146V20.4H84.0436V8.5H85.0806V9.452H85.4206C86.044 8.67 86.962 8.279 88.1746 8.279C89.3306 8.279 90.2486 8.704 90.9286 9.554C91.62 10.3927 91.9656 11.458 91.9656 12.75C91.9656 14.0533 91.6256 15.1243 90.9456 15.963C90.2656 16.8017 89.342 17.221 88.1746 17.221ZM88.0386 9.231C87.064 9.231 86.333 9.571 85.8456 10.251C85.3583 10.931 85.1146 11.764 85.1146 12.75C85.1146 13.7473 85.3583 14.586 85.8456 15.266C86.333 15.9347 87.064 16.269 88.0386 16.269C88.9453 16.269 89.648 15.9517 90.1466 15.317C90.6453 14.671 90.8946 13.8153 90.8946 12.75C90.8946 11.6847 90.6453 10.8347 90.1466 10.2C89.648 9.554 88.9453 9.231 88.0386 9.231Z" fill="#999999"/>
<g opacity="0.7">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4096 5.87345C16.0545 6.21157 15.4926 6.19772 15.1545 5.84263L14.2363 4.87815C12.884 3.45765 10.6363 3.40237 9.21583 4.75465L3.0522 10.6224L8.89716 10.7661C9.38728 10.7782 9.77485 11.1853 9.76285 11.6754C9.75079 12.1656 9.34365 12.5532 8.85347 12.5411L0.865962 12.3447C0.375784 12.3327 -0.0117871 11.9255 0.000274037 11.4354L0.196714 3.44784C0.208775 2.95766 0.615853 2.57009 1.10603 2.58215C1.59621 2.59422 1.98378 3.00129 1.97172 3.49147L1.82796 9.33637L7.9916 3.46867C10.1223 1.44027 13.4939 1.5232 15.5223 3.65386L16.4405 4.61835C16.7785 4.97348 16.7648 5.53539 16.4096 5.87345Z" fill="#999999"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.76442 14.1266C3.11951 13.7885 3.68147 13.8023 4.01953 14.1574L4.93773 15.1219C6.29002 16.5424 8.53777 16.5976 9.95821 15.2454L16.1218 9.37765L10.2769 9.2339C9.78676 9.22189 9.39919 8.81476 9.41119 8.32458C9.42325 7.83446 9.83039 7.44683 10.3206 7.45889L18.3081 7.65533C18.7983 7.66739 19.1858 8.07453 19.1738 8.56465L18.9773 16.5522C18.9653 17.0424 18.5582 17.43 18.068 17.4179C17.5778 17.4058 17.1903 16.9987 17.2023 16.5086L17.3461 10.6636L11.1824 16.5314C9.05178 18.5598 5.68015 18.4769 3.65175 16.3462L2.73355 15.3817C2.39549 15.0266 2.40929 14.4646 2.76442 14.1266Z" fill="#999999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

4
packages/website/ts/pages/cfl.tsx
View File

@@ -10,6 +10,7 @@ import { Icon, InlineIconWrap } from 'ts/components/icon';
import { Section } from 'ts/components/newLayout';
import { SiteWrap } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { CFLMetrics } from 'ts/pages/cfl/cfl_metrics';
import { CodeStepper } from 'ts/pages/cfl/code_stepper';
import { constants } from 'ts/utils/constants';
@@ -89,7 +90,8 @@ export class CFL extends React.Component<Props> {
isFullWidth={true}
description="Source liquidity for your DeFi users by filling orders at the best prices."
showFigureBottomMobile={true}
figure={'TODO: LIQUIDITY DATA'}
figure={<CFLMetrics />}
figureMaxWidth="600px"
actions={
<Button href={constants.CFL_DOCS} isInline={true}>
Get Started

152
packages/website/ts/pages/cfl/cfl_metrics.tsx Normal file
View File

@@ -0,0 +1,152 @@
import numeral from 'numeral';
import * as React from 'react';
import styled from 'styled-components';
import { Icon } from 'ts/components/icon';
import { Metrics, MetricValue } from 'ts/pages/cfl/metrics';
import { backendClient } from 'ts/utils/backend_client';
import { CFLMetricsPairData } from 'ts/types';
const CFLMetricsContainer = styled.div`
display: flex;
flex-direction: column;
width: fit-content;
`;
const PairTabsContainer = styled.div`
display: flex;
border: ${props => `1px solid ${props.theme.lightBgColor}`};
padding-right: 5px;
`;
const MetricsContainer = styled.div`
display: flex;
margin-top: 15px;
& div:not(:last-child) {
margin-right: 15px;
}
`;
interface PairTabProps {
isSelected: boolean;
}
const PairTab = styled.label<PairTabProps>`
padding: 15px 40px;
white-space: nowrap;
font-size: 17px;
background-color: ${props => (props.isSelected ? props.theme.lightBgColor : '')};
opacity: ${props => (props.isSelected ? 1 : 0.5)};
cursor: pointer;
margin: 5px 0px 5px 5px;
&:hover {
background-color: ${props => props.theme.lightBgColor};
}
`;
interface CFLMetricsProps {}
interface CFLMetricsState {
cflMetricsData?: CFLMetricsPairData[];
didError: boolean;
selectedIndex: number;
}
export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState> {
public state: CFLMetricsState = {
didError: false,
selectedIndex: 0,
};
public componentDidMount(): void {
// tslint:disable-next-line:no-floating-promises
this._updateCFLMetricsDataAsync();
}
public render(): React.ReactNode {
const { cflMetricsData, selectedIndex } = this.state;
if (!cflMetricsData) {
return null;
}
return (
<CFLMetricsContainer>
<PairTabsContainer>
{cflMetricsData.map((data, index) => {
const symbol = `${data.takerSymbol} / ${data.makerSymbol}`;
return (
<PairTab
key={symbol}
isSelected={selectedIndex === index}
onClick={this._onTabClick.bind(this, index)}
>
{symbol}
</PairTab>
);
})}
</PairTabsContainer>
<MetricsContainer>
<Metrics title="Last price" metrics={[{ value: this._getLastPrice() }]} />
<Metrics title="7 day volume" metrics={[{ value: this._getVolume() }]} />
</MetricsContainer>
<MetricsContainer>
<Metrics title="Slippage across DEXes" metrics={this._getSlippageMetrics()} />
</MetricsContainer>
</CFLMetricsContainer>
);
}
private async _updateCFLMetricsDataAsync(): Promise<void> {
try {
const data = await backendClient.getCFLMetricsAsync();
this.setState({
cflMetricsData: data,
});
} catch (err) {
this.setState({ didError: true });
}
}
private _onTabClick(index: number): void {
this.setState({ selectedIndex: index });
}
private _getSelectedPairData(): CFLMetricsPairData {
return this.state.cflMetricsData[this.state.selectedIndex];
}
private _getLastPrice(): string {
const data = this._getSelectedPairData();
const num = numeral(data.lastTradePrice);
const formattedNum = num.format('0.00');
const currency = data.makerSymbol;
return `${formattedNum} ${currency}`;
}
private _getVolume(): string {
const data = this._getSelectedPairData();
const num = numeral(data.volumeUSD);
return num.format('$0,0');
}
private _getSlippageMetrics(): MetricValue[] {
const data = this._getSelectedPairData();
const zeroExSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Radar Relay',
);
const kyberSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Kyber',
);
const uniswapSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Uniswap',
);
const formatSlippage = (num: string) => numeral(num).format('0.00%');
return [
{
label: <Icon name="small_0x_logo" size="natural" />,
value: formatSlippage(zeroExSlippage.current_period_avg_slippage),
},
{
label: <Icon name="small_kyber_logo" size="natural" />,
value: formatSlippage(kyberSlippage.current_period_avg_slippage),
},
{
label: <Icon name="small_uniswap_logo" size="natural" />,
value: formatSlippage(uniswapSlippage.current_period_avg_slippage),
},
];
}
}

43
packages/website/ts/pages/cfl/metrics.tsx Normal file
View File

@@ -0,0 +1,43 @@
import * as React from 'react';
import styled from 'styled-components';
import { Paragraph } from 'ts/components/text';
const MetricsContainer = styled.div`
padding: 20px;
background-color: ${props => props.theme.darkBgColor};
width: 100%;
`;
const MetricValueContainer = styled.div`
display: flex;
justify-content: space-between;
`;
export interface MetricValue {
label?: React.ReactNode;
value: string;
}
interface MetricsProps {
title: string;
metrics: MetricValue[];
}
export const Metrics: React.FC<MetricsProps> = props => (
<MetricsContainer>
<Paragraph marginBottom="15px" size="small">
{props.title}
</Paragraph>
<MetricValueContainer>
{props.metrics.map((metric, index) => (
<div key={`metric-${index}`}>
{metric.label && <div>{metric.label}</div>}
<Paragraph isNoMargin={true} isMuted={1} size="large" color="white">
{metric.value}
</Paragraph>
</div>
))}
</MetricValueContainer>
</MetricsContainer>
);

17
packages/website/ts/types.ts
View File

@@ -723,6 +723,23 @@ export interface WebsiteBackendJobInfo {
url: string;
}
export interface ExchangeSlippageData {
exchange: string;
current_period_avg_slippage: string;
}
export interface CFLMetricsPairData {
takerSymbol: string;
makerSymbol: string;
tradeAmount: number;
volumeUSD: number;
lastTradePrice: number;
lastTradeTime: string;
exchangeAverageSlippagePercentage: ExchangeSlippageData[];
}
export type WebsiteBackendCFLMetricsData = CFLMetricsPairData[];
export enum BrowserType {
Chrome = 'Chrome',
Firefox = 'Firefox',

5
packages/website/ts/utils/backend_client.ts
View File

@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import {
ArticlesBySection,
WebsiteBackendCFLMetricsData,
WebsiteBackendGasInfo,
WebsiteBackendJobInfo,
WebsiteBackendPriceInfo,
@@ -17,6 +18,7 @@ const PRICES_ENDPOINT = '/prices';
const RELAYERS_ENDPOINT = '/relayers';
const TOKENS_ENDPOINT = '/tokens';
const WIKI_ENDPOINT = '/wiki';
const CFL_METRICS_ENDPOINT = '/cfl-metrics';
const SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT = '/newsletter_subscriber/substack';
export const backendClient = {
@@ -58,4 +60,7 @@ export const backendClient = {
});
return result;
},
async getCFLMetricsAsync(): Promise<WebsiteBackendCFLMetricsData> {
return fetchUtils.requestAsync(utils.getBackendBaseUrl(), CFL_METRICS_ENDPOINT);
},
};

3
packages/website/ts/utils/configs.ts
View File

@@ -7,6 +7,7 @@ export const configs = {
AMOUNT_DISPLAY_PRECSION: 5,
BACKEND_BASE_PROD_URL: 'https://website-api.0x.org',
BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0x.org',
BACKEND_BASE_DEV_URL: 'https://localhost:3001',
GOOGLE_SHEETS_LEAD_FORMS: {
CREDITS: 'https://script.google.com/macros/s/AKfycbyN1lJaSGWg2OIzqT8bou4GiqwCmOVjV2v_fiPO/exec',
} as GoogleSheetLeadUrls,
@@ -17,7 +18,7 @@ export const configs = {
DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
DOMAIN_DOGFOOD: 'dogfood.0x.org',
DOMAINS_DEVELOPMENT: ['0xproject.localhost:3572', 'localhost:3572', '127.0.0.1'],
DOMAINS_DEVELOPMENT: ['0xproject.localhost:3572', 'localhost:3572', '127.0.0.1', '0.0.0.0:3572'],
DOMAIN_PRODUCTION: '0x.org',
DOMAIN_VOTE: 'vote.0x.org',
VOTE_INSTANT_ORDER_SOURCE: 'https://api.radarrelay.com/0x/v2/',

7
packages/website/ts/utils/utils.ts
View File

@@ -330,7 +330,12 @@ export const utils = {
return parsedProviderName;
},
getBackendBaseUrl(): string {
return utils.isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
if (utils.isDogfood()) {
return configs.BACKEND_BASE_STAGING_URL;
} else if (utils.isDevelopment()) {
return configs.BACKEND_BASE_DEV_URL;
}
return configs.BACKEND_BASE_PROD_URL;
},
isDevelopment(): boolean {
return _.includes(configs.DOMAINS_DEVELOPMENT, window.location.host);

34
yarn.lock
View File

@@ -1919,9 +1919,10 @@
version "10.9.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897"
"@types/numeral@^0.0.22":
version "0.0.22"
resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.22.tgz#86bef1f0a2d743afdc2ef3168d45f2905e1a0b93"
"@types/numeral@^0.0.26":
version "0.0.26"
resolved "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.26.tgz#cfab9842ef9349ce714b06722940ca7ebf8a6298"
integrity sha512-DwCsRqeOWopdEsm5KLTxKVKDSDoj+pzZD1vlwu1GQJ6IF3RhjuleYlRwyRH6MJLGaf3v8wFTnC6wo3yYfz0bnA==
"@types/opn@^5.1.0":
version "5.1.0"
@@ -8854,10 +8855,27 @@ got@^6.7.1:
unzip-response "^2.0.1"
url-parse-lax "^1.0.0"
graceful-fs@4.1.15, graceful-fs@^3.0.0, graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@~1.2.0:
graceful-fs@^3.0.0:
version "3.0.12"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.12.tgz#0034947ce9ed695ec8ab0b854bc919e82b1ffaef"
integrity sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==
dependencies:
natives "^1.1.3"
graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
version "4.1.15"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
graceful-fs@^4.2.0:
version "4.2.2"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
graceful-fs@~1.2.0:
version "1.2.3"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
integrity sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=
"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -12489,6 +12507,11 @@ nanomatch@^1.2.9:
snapdragon "^0.8.1"
to-regex "^3.0.1"
natives@^1.1.3:
version "1.1.6"
resolved "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz#a603b4a498ab77173612b9ea1acdec4d980f00bb"
integrity sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -13065,7 +13088,8 @@ number-to-bn@1.7.0:
numeral@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
resolved "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
nwsapi@^2.0.7:
version "2.0.9"