aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/.dogfood.discharge.json2
-rw-r--r--packages/instant/.production.discharge.json13
-rw-r--r--packages/instant/.staging.discharge.json2
-rw-r--r--packages/instant/README.md50
-rw-r--r--packages/instant/package.json13
-rw-r--r--packages/instant/src/components/instant_heading.tsx11
-rw-r--r--packages/instant/src/components/payment_method.tsx5
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/containers/latest_error.tsx8
-rw-r--r--packages/instant/src/index.umd.ts4
-rw-r--r--packages/instant/tsconfig.json8
-rw-r--r--packages/instant/webpack.config.js3
12 files changed, 64 insertions, 57 deletions
diff --git a/packages/instant/.dogfood.discharge.json b/packages/instant/.dogfood.discharge.json
index ca36b3861..85a48044b 100644
--- a/packages/instant/.dogfood.discharge.json
+++ b/packages/instant/.dogfood.discharge.json
@@ -1,6 +1,6 @@
{
"domain": "0x-instant-dogfood",
- "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod",
+ "build_command": "WEBPACK_OUTPUT_PATH=public yarn build",
"upload_directory": "public",
"index_key": "index.html",
"error_key": "index.html",
diff --git a/packages/instant/.production.discharge.json b/packages/instant/.production.discharge.json
new file mode 100644
index 000000000..447fa1756
--- /dev/null
+++ b/packages/instant/.production.discharge.json
@@ -0,0 +1,13 @@
+{
+ "domain": "instant.0xproject.com",
+ "build_command": "yarn build",
+ "upload_directory": "umd",
+ "index_key": "instant.js",
+ "error_key": "404.html",
+ "trailing_slashes": true,
+ "cache": 3600,
+ "aws_profile": "default",
+ "aws_region": "us-east-1",
+ "cdn": true,
+ "dns_configured": true
+}
diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json
index c917a650b..93fd94f40 100644
--- a/packages/instant/.staging.discharge.json
+++ b/packages/instant/.staging.discharge.json
@@ -1,6 +1,6 @@
{
"domain": "0x-instant-staging",
- "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod",
+ "build_command": "WEBPACK_OUTPUT_PATH=public yarn build",
"upload_directory": "public",
"index_key": "index.html",
"error_key": "index.html",
diff --git a/packages/instant/README.md b/packages/instant/README.md
index b83a10508..45a871124 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -2,39 +2,11 @@
## Installation
-```bash
-yarn add @0x/instant
-```
-
-**Import**
-
-**CommonJS module**
-
-```typescript
-import { ZeroExInstant } from '@0x/instant';
-```
-
-or
-
-```javascript
-var ZeroExInstant = require('@0x/instant').ZeroExInstant;
-```
-
-If your project is in [TypeScript](https://www.typescriptlang.org/), add the following to your `tsconfig.json`:
-
-```json
-"compilerOptions": {
- "typeRoots": ["node_modules/@0x/typescript-typings/types", "node_modules/@types"],
-}
-```
-
-**UMD Module**
-
-The package is also available as a UMD module named `zeroExInstant`.
+The package is available as a UMD module named `zeroExInstant` at https://instant.0xproject.com/instant.js.
```html
<head>
- <script type="text/javascript" src="[zeroExInstantUMDPath]" charset="utf-8"></script>
+ <script type="text/javascript" src="https://instant.0xproject.com/instant.js" charset="utf-8"></script>
</head>
<body>
<div id="zeroExInstantContainer"></div>
@@ -48,23 +20,31 @@ The package is also available as a UMD module named `zeroExInstant`.
## Deploying
-You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com for easy sharing.
+You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com/instant.js for easy sharing.
-To build and deploy the site run
+To build and deploy the bundle run
```
yarn deploy_dogfood
```
-We also have a staging bucket that is to be updated less frequently can be used to share instant externally: http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/
+We also have a staging bucket that is to be updated less frequently can be used to share a beta version of instant externally: http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/instant.js
-To build and deploy to this bucket, run
+To build and deploy to this bundle, run
```
yarn deploy_staging
```
-**NOTE: On deploying the site, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.**
+Finally, we have our live production bundle that is only meant to be updated with stable, polished releases: https://instant.0xproject.com/instant.js
+
+To build and deploy to this bundle, run
+
+```
+yarn deploy_production
+```
+
+**NOTE: On deploying the site to staging and dogfood, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.**
## Contributing
diff --git a/packages/instant/package.json b/packages/instant/package.json
index c75e2408d..4f6e6d5a4 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -6,15 +6,11 @@
},
"private": true,
"description": "0x Instant React Component",
- "main": "lib/index.js",
- "types": "lib/index.d.ts",
+ "main": "umd/instant.js",
+ "private": true,
"scripts": {
- "build": "yarn build:all",
- "build:all": "run-p build:umd:prod build:commonjs",
- "build:umd:prod": "webpack --mode production",
- "build:commonjs": "tsc -b",
+ "build": "webpack --mode production",
"build:ci": "yarn build",
- "watch_without_deps": "tsc -w",
"dev": "webpack-dev-server --mode development",
"lint": "tslint --format stylish --project .",
"test": "jest",
@@ -24,6 +20,7 @@
"clean": "shx rm -rf lib coverage scripts",
"deploy_dogfood": "discharge deploy -c .dogfood.discharge.json",
"deploy_staging": "discharge deploy -c .staging.discharge.json",
+ "deploy_production": "discharge deploy -c .production.discharge.json",
"manual:postpublish": "yarn build; node ./scripts/postpublish.js"
},
"config": {
@@ -99,6 +96,6 @@
"webpack-dev-server": "^3.1.9"
},
"publishConfig": {
- "access": "public"
+ "access": "private"
}
}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index ace577824..808c6dc7f 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -107,7 +107,14 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderEthAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} fontWeight={500}>
+ <Text
+ fontSize="16px"
+ textAlign="right"
+ width="100%"
+ fontColor={ColorOption.white}
+ fontWeight={500}
+ noWrap={true}
+ >
{format.ethBaseUnitAmount(
this.props.totalEthBaseUnitAmount,
4,
@@ -119,7 +126,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderDollarAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white}>
+ <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} noWrap={true}>
{format.ethBaseUnitAmountInUsd(
this.props.totalEthBaseUnitAmount,
this.props.ethUsdPrice,
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index ebcd62f35..c23b43267 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -26,7 +26,7 @@ export interface PaymentMethodProps {
export class PaymentMethod extends React.Component<PaymentMethodProps> {
public render(): React.ReactNode {
return (
- <Container padding="20px" width="100%">
+ <Container padding="20px" width="100%" height="133px">
<Container marginBottom="12px">
<Flex justify="space-between">
<Text
@@ -83,8 +83,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
const colors = { primaryColor, secondaryColor };
switch (account.state) {
case AccountState.Loading:
- // Just take up the same amount of space as the other states.
- return <Container height="52px" />;
+ return null;
case AccountState.Locked:
return (
<WalletPrompt
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a015ab5bc..e7d909d92 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,6 +29,7 @@ export interface ContainerProps {
backgroundColor?: ColorOption;
rawBackgroundColor?: string;
hasBoxShadow?: boolean;
+ isHidden?: boolean;
zIndex?: number;
whiteSpace?: string;
opacity?: number;
@@ -81,6 +82,7 @@ export const Container =
${props => props.width && stylesForMedia<string>('width', props.width)}
${props => props.height && stylesForMedia<string>('height', props.height)}
${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)}
+ ${props => (props.isHidden ? 'visibility: hidden;' : '')}
background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
&:hover {
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index b7cfdb504..0d4349124 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { SlidingError } from '../components/sliding_error';
+import { Container } from '../components/ui/container';
import { Overlay } from '../components/ui/overlay';
import { Action } from '../redux/actions';
import { State } from '../redux/reducer';
@@ -23,7 +24,12 @@ export interface LatestErrorComponentProps {
export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
if (!props.latestErrorMessage) {
- return <div />;
+ // Render a hidden SlidingError such that instant does not move when a real error is rendered.
+ return (
+ <Container isHidden={true}>
+ <SlidingError animationState="slidIn" icon="😢" message="" />
+ </Container>
+ );
}
return (
<React.Fragment>
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 667daf441..449453b56 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -112,3 +112,7 @@ export const render = (config: ZeroExInstantConfig, selector: string = DEFAULT_Z
};
window.onpopstate = onPopStateHandler;
};
+
+// Write version info to the exported object for debugging
+export const GIT_SHA = process.env.GIT_SHA;
+export const NPM_VERSION = process.env.NPM_PACKAGE_VERSION;
diff --git a/packages/instant/tsconfig.json b/packages/instant/tsconfig.json
index 14b0ad8f7..2b3c11c9f 100644
--- a/packages/instant/tsconfig.json
+++ b/packages/instant/tsconfig.json
@@ -5,8 +5,10 @@
"rootDir": "src",
"jsx": "react",
"noImplicitAny": true,
- "allowSyntheticDefaultImports": true
+ "allowSyntheticDefaultImports": true,
+ "declaration": false,
+ "declarationMap": false,
+ "composite": false
},
- "include": ["./src/**/*"],
- "exclude": ["./src/index.umd.ts"]
+ "include": ["./src/**/*"]
}
diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js
index 41276809c..2a517bb59 100644
--- a/packages/instant/webpack.config.js
+++ b/packages/instant/webpack.config.js
@@ -3,9 +3,6 @@ const ip = require('ip');
const path = require('path');
const webpack = require('webpack');
-// The common js bundle (not this one) is built using tsc.
-// The umd bundle (this one) has a different entrypoint.
-
const GIT_SHA = childProcess
.execSync('git rev-parse HEAD')
.toString()
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-27 18:51:12 +0800