aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-02 02:04:56 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-02 02:04:56 +0800
commit3a7f26f6200bd3796a5207f62c0bdd18858db0e1 (patch)
treecbe7fc033e26e809659d7bb6ec30dbc1c75c0db7 /packages/website
parent484fd68495bf921c57a09b413d978b028f0c80e8 (diff)
downloaddexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar.gz
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar.bz2
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar.lz
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar.xz
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.tar.zst
dexon-sol-tools-3a7f26f6200bd3796a5207f62c0bdd18858db0e1.zip
Have basic newsletter subscribe form working
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/forms/subscribe_form.tsx68
-rw-r--r--packages/website/ts/components/token_balances.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx2
-rw-r--r--packages/website/ts/utils/backend_client.ts8
-rw-r--r--packages/website/ts/utils/fetch_utils.ts12
-rw-r--r--packages/website/ts/utils/utils.ts3
6 files changed, 93 insertions, 2 deletions
diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
new file mode 100644
index 000000000..8bb0f4fc7
--- /dev/null
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -0,0 +1,68 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import RaisedButton from 'material-ui/RaisedButton';
+import { backendClient } from 'ts/utils/backend_client';
+
+export interface SubscribeFormProps {}
+
+export enum SubscribeFormStatus {
+ None,
+ Error,
+ Success,
+ Loading,
+}
+
+export interface SubscribeFormState {
+ emailText: string;
+ status: SubscribeFormStatus;
+}
+
+export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
+ public state = {
+ emailText: '',
+ status: SubscribeFormStatus.None,
+ };
+ public render(): React.ReactNode {
+ return (
+ <div>
+ Subscribe to our newsletter for 0x relayer and dApp updates
+ <div>
+ <input value={this.state.emailText} onChange={this._handleEmailInputChange.bind(this)} />
+ <RaisedButton
+ labelStyle={{
+ textTransform: 'none',
+ fontSize: 15,
+ fontWeight: 400,
+ }}
+ buttonStyle={{
+ borderRadius: 6,
+ }}
+ style={{
+ boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)',
+ borderRadius: 6,
+ height: 48,
+ width: 120,
+ }}
+ labelColor="white"
+ backgroundColor="#252525"
+ onClick={this._handleSubscribeClickAsync.bind(this)}
+ label="Subscribe"
+ />
+ </div>
+ </div>
+ );
+ }
+ private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+ this.setState({ emailText: event.target.value });
+ }
+ private async _handleSubscribeClickAsync(): Promise<void> {
+ this._setStatus(SubscribeFormStatus.Loading);
+ const success = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
+ const status = success ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
+ this._setStatus(status);
+ }
+ private _setStatus(status: SubscribeFormStatus): void {
+ this.setState({ status });
+ }
+}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index f5a51dabb..022968941 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -77,11 +77,11 @@ interface TokenBalancesProps {
interface TokenBalancesState {
errorType: BalanceErrs;
+ trackedTokenStateByAddress: TokenStateByAddress;
isBalanceSpinnerVisible: boolean;
isZRXSpinnerVisible: boolean;
isTokenPickerOpen: boolean;
isAddingToken: boolean;
- trackedTokenStateByAddress: TokenStateByAddress;
}
export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 02ecfa117..016c62a30 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
import DocumentTitle = require('react-document-title');
import { Link } from 'react-router-dom';
import { Footer } from 'ts/components/footer';
+import { SubscribeForm } from 'ts/components/forms/subscribe_form';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
@@ -298,6 +299,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</a>
</div>
</div>
+ <SubscribeForm />
</div>
</div>
</div>
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index c440b1604..fb7c21c59 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -8,6 +8,7 @@ const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
const PRICES_ENDPOINT = '/prices';
const RELAYERS_ENDPOINT = '/relayers';
const WIKI_ENDPOINT = '/wiki';
+const SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT = '/newsletter_subscriber/substack';
export const backendClient = {
async getGasInfoAsync(): Promise<WebsiteBackendGasInfo> {
@@ -33,4 +34,11 @@ export const backendClient = {
const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), WIKI_ENDPOINT);
return result;
},
+ async subscribeToNewsletterAsync(email: string): Promise<boolean> {
+ const result = await fetchUtils.postAsync(utils.getBackendBaseUrl(), SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT, {
+ email,
+ referrer: window.location.href,
+ });
+ return result.status === 200;
+ },
};
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts
index d2e902db5..e65ac64e1 100644
--- a/packages/website/ts/utils/fetch_utils.ts
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -20,6 +20,18 @@ export const fetchUtils = {
const result = await response.json();
return result;
},
+
+ async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
+ const url = `${baseUrl}${path}`;
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ });
+ return response;
+ },
};
function queryStringFromQueryParams(queryParams?: object): string {
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index b9d962b75..10381845b 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -306,7 +306,8 @@ export const utils = {
return parsedProviderName;
},
getBackendBaseUrl(): string {
- return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
+ return 'http://localhost:3000';
+ // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
},
isDevelopment(): boolean {
return configs.ENVIRONMENT === Environments.DEVELOPMENT;