aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/.DS_Storebin8196 -> 8196 bytes
-rw-r--r--packages/instant/README.md4
-rw-r--r--packages/instant/package.json7
-rw-r--r--packages/instant/public/external.css4
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx13
-rw-r--r--packages/instant/src/components/instant_heading.tsx19
-rw-r--r--packages/instant/src/components/ui/input.tsx4
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx27
-rw-r--r--packages/instant/src/constants.ts7
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts2
-rw-r--r--packages/instant/src/types.ts19
-rw-r--r--packages/instant/src/util/analytics.ts6
-rw-r--r--packages/instant/src/util/asset.ts4
-rw-r--r--packages/instant/src/util/buy_quote_updater.ts7
-rw-r--r--packages/instant/src/util/env.ts7
-rw-r--r--packages/instant/src/util/error_reporter.ts23
-rw-r--r--packages/instant/src/util/provider_state_factory.ts33
17 files changed, 127 insertions, 59 deletions
diff --git a/packages/instant/.DS_Store b/packages/instant/.DS_Store
index 9a0cceca6..c86c5cbcd 100644
--- a/packages/instant/.DS_Store
+++ b/packages/instant/.DS_Store
Binary files differ
diff --git a/packages/instant/README.md b/packages/instant/README.md
index 2092b45d9..7f6ee7c46 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -1,5 +1,9 @@
## @0x/instant
+## Integration
+
+Looking to integrate 0x Instant into your web application or site? Check out the dedicated [instant documentation](https://0xproject.com/wiki#Get-Started-With-Instant) to get started. The documentation covers instant and related topics in depth. For a more "drag and drop" experience, check out our [configurator tool](https://0xproject.com/instant#configure). For on demand developer support, join our [Discord](https://discordapp.com/invite/d3FTX3M).
+
## Installation
The package is available as a UMD module named `zeroExInstant` at https://instant.0xproject.com/instant.js.
diff --git a/packages/instant/package.json b/packages/instant/package.json
index f1515065e..e3452e3b8 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -10,7 +10,7 @@
"scripts": {
"build": "webpack --mode production",
"build:ci": "yarn build",
- "dev": "webpack-dev-server --mode development",
+ "dev": "dotenv webpack-dev-server -- --mode development",
"lint": "tslint --format stylish --project .",
"test": "jest",
"test:coverage": "jest --coverage",
@@ -24,10 +24,7 @@
},
"config": {
"postpublish": {
- "assets": [
- "packages/instant/umd/instant.js",
- "packages/instant/umd/instant.js.map"
- ]
+ "assets": ["packages/instant/umd/instant.js", "packages/instant/umd/instant.js.map"]
}
},
"repository": {
diff --git a/packages/instant/public/external.css b/packages/instant/public/external.css
index cab11112a..21278577e 100644
--- a/packages/instant/public/external.css
+++ b/packages/instant/public/external.css
@@ -15,6 +15,10 @@ input {
height: 100px;
}
+input::-webkit-input-placeholder {
+ color: #b4b4b4 !important;
+}
+
div {
padding: 3px;
}
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index f7d5a4fe4..cb8a8c797 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,7 +7,6 @@ import { analytics } from '../util/analytics';
import { assetUtils } from '../util/asset';
import { SearchInput } from './search_input';
-
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
@@ -123,10 +122,20 @@ interface TokenSelectorRowIconProps {
token: ERC20Asset;
}
+const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
+ try {
+ return require(`../assets/icons/${symbol}.svg`) as React.StatelessComponent;
+ } catch (e) {
+ // Can't find icon
+ return undefined;
+ }
+};
+
const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
const { token } = props;
const iconUrlIfExists = token.metaData.iconUrl;
- const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
+
+ const TokenIcon = getTokenIcon(token.metaData.symbol);
const displaySymbol = assetUtils.bestNameForAsset(token);
if (!_.isUndefined(iconUrlIfExists)) {
return <img src={iconUrlIfExists} />;
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 117f9dd5f..816cc5c33 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -61,12 +61,19 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
}
private _renderAmountsSection(): React.ReactNode {
- return (
- <Container>
- <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
- <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
- </Container>
- );
+ if (
+ _.isUndefined(this.props.totalEthBaseUnitAmount) &&
+ this.props.quoteRequestState !== AsyncProcessState.Pending
+ ) {
+ return null;
+ } else {
+ return (
+ <Container>
+ <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+ <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
+ </Container>
+ );
+ }
}
private _renderIcon(): React.ReactNode {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 863c970ef..62c70f9e1 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -29,8 +29,8 @@ export const Input =
outline: none;
border: none;
&::placeholder {
- color: ${props => props.theme[props.fontColor || 'white']};
- opacity: 0.5;
+ color: ${props => props.theme[props.fontColor || 'white']} !important;
+ opacity: 0.5 !important;
}
}
`;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index dae9124c6..204115fa9 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,6 +1,4 @@
-import { ObjectMap } from '@0x/types';
import { BigNumber } from '@0x/utils';
-import { Provider } from 'ethereum-types';
import * as _ from 'lodash';
import * as React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
@@ -11,7 +9,7 @@ import { asyncData } from '../redux/async_data';
import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
-import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource, QuoteFetchOrigin } from '../types';
+import { AccountState, Network, QuoteFetchOrigin, ZeroExInstantBaseConfig } from '../types';
import { analytics, disableAnalytics } from '../util/analytics';
import { assetUtils } from '../util/asset';
import { errorFlasher } from '../util/error_flasher';
@@ -21,24 +19,7 @@ import { Heartbeater } from '../util/heartbeater';
import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory';
import { providerStateFactory } from '../util/provider_state_factory';
-export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
- Partial<ZeroExInstantProviderOptionalProps>;
-
-export interface ZeroExInstantProviderRequiredProps {
- orderSource: OrderSource;
-}
-
-export interface ZeroExInstantProviderOptionalProps {
- provider: Provider;
- walletDisplayName: string;
- availableAssetDatas: string[];
- defaultAssetBuyAmount: number;
- defaultSelectedAssetData: string;
- additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
- networkId: Network;
- affiliateInfo: AffiliateInfo;
- shouldDisableAnalyticsTracking: boolean;
-}
+export type ZeroExInstantProviderProps = ZeroExInstantBaseConfig;
export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
private readonly _store: Store;
@@ -57,10 +38,12 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
props.orderSource,
networkId,
props.provider,
+ props.walletDisplayName,
);
// merge the additional additionalAssetMetaDataMap with our default map
const completeAssetMetaDataMap = {
- ...props.additionalAssetMetaDataMap,
+ // Make sure the passed in assetDatas are lower case
+ ..._.mapKeys(props.additionalAssetMetaDataMap || {}, (value, key) => key.toLowerCase()),
...defaultState.assetMetaDataMap,
};
// construct the final state
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 506348092..f83eb4ac7 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -15,6 +15,7 @@ export const GWEI_IN_WEI = new BigNumber(1000000000);
export const ONE_SECOND_MS = 1000;
export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
export const GIT_SHA = process.env.GIT_SHA;
+export const NODE_ENV = process.env.NODE_ENV;
export const NPM_PACKAGE_VERSION = process.env.NPM_PACKAGE_VERSION;
export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
@@ -28,14 +29,12 @@ export const HEAP_ENABLED = process.env.HEAP_ENABLED;
export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
export const PROGRESS_STALL_AT_WIDTH = '95%';
export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
-export const HOST_DOMAINS = [
+export const HOST_DOMAINS_EXTERNAL = [
'0x-instant-staging.s3-website-us-east-1.amazonaws.com',
'0x-instant-dogfood.s3-website-us-east-1.amazonaws.com',
- 'localhost',
- '127.0.0.1',
- '0.0.0.0',
'instant.0xproject.com',
];
+export const HOST_DOMAINS_LOCAL = ['localhost', '127.0.0.1', '0.0.0.0'];
export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN;
export const ROLLBAR_ENABLED = process.env.ROLLBAR_ENABLED;
export const INSTANT_DISCHARGE_TARGET = process.env.INSTANT_DISCHARGE_TARGET as
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index bb68fdd57..f648f0b54 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -58,7 +58,7 @@ const mergeProps = (
...ownProps,
network: connectedState.network,
account: connectedState.providerState.account,
- walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
+ walletDisplayName: connectedState.providerState.displayName,
onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
onInstallWalletClick: () => {
const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 2d73ba29e..1c7490e63 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -102,6 +102,7 @@ export interface AffiliateInfo {
export interface ProviderState {
name: string;
+ displayName: string;
provider: Provider;
assetBuyer: AssetBuyer;
web3Wrapper: Web3Wrapper;
@@ -177,3 +178,21 @@ export enum ProviderType {
Cipher = 'CIPHER',
Fallback = 'FALLBACK',
}
+
+export interface ZeroExInstantRequiredBaseConfig {
+ orderSource: OrderSource;
+}
+
+export interface ZeroExInstantOptionalBaseConfig {
+ provider: Provider;
+ walletDisplayName: string;
+ availableAssetDatas: string[];
+ defaultAssetBuyAmount: number;
+ defaultSelectedAssetData: string;
+ additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
+ networkId: Network;
+ affiliateInfo: AffiliateInfo;
+ shouldDisableAnalyticsTracking: boolean;
+}
+
+export type ZeroExInstantBaseConfig = ZeroExInstantRequiredBaseConfig & Partial<ZeroExInstantOptionalBaseConfig>;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 6da37bedb..e6128f857 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
-import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NPM_PACKAGE_VERSION } from '../constants';
+import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NODE_ENV, NPM_PACKAGE_VERSION } from '../constants';
import {
AffiliateInfo,
Asset,
@@ -106,6 +106,7 @@ export interface AnalyticsEventOptions {
ethAddress?: string;
networkId?: number;
providerName?: string;
+ providerDisplayName?: string;
gitSha?: string;
npmVersion?: string;
instantEnvironment?: string;
@@ -149,6 +150,7 @@ export const analytics = {
embeddedUrl: window.location.href,
networkId: network,
providerName: providerState.name,
+ providerDisplayName: providerState.displayName,
gitSha: GIT_SHA,
npmVersion: NPM_PACKAGE_VERSION,
orderSource: orderSourceName,
@@ -156,7 +158,7 @@ export const analytics = {
affiliateFeePercent,
selectedAssetName: selectedAsset ? selectedAsset.metaData.name : 'none',
selectedAssetData: selectedAsset ? selectedAsset.assetData : 'none',
- instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+ instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`,
};
return eventOptions;
},
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 08f3642e3..13f84ef74 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -26,7 +26,7 @@ export const assetUtils = {
return;
}
return {
- assetData,
+ assetData: assetData.toLowerCase(),
metaData,
};
},
@@ -36,7 +36,7 @@ export const assetUtils = {
network: Network,
): Asset => {
return {
- assetData,
+ assetData: assetData.toLowerCase(),
metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network),
};
},
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index 4229f2735..6191c92e3 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -38,14 +38,11 @@ export const buyQuoteUpdater = {
} catch (error) {
const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error);
- if (_.isUndefined(errorMessage)) {
- // This is an unknown error, report it to rollbar
- errorReporter.report(error);
- }
+ errorReporter.report(error);
+ analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
if (options.dispatchErrors) {
dispatch(actions.setQuoteRequestStateFailure());
- analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again');
}
return;
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index 4a32f9cb1..0fda0cc0e 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -62,4 +62,11 @@ export const envUtil = {
}
return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
},
+ getProviderDisplayName(provider: Provider): string {
+ const providerTypeIfExists = envUtil.getProviderType(provider);
+ if (_.isUndefined(providerTypeIfExists)) {
+ return 'Wallet';
+ }
+ return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
+ },
};
diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts
index b1824eaf9..8d7481684 100644
--- a/packages/instant/src/util/error_reporter.ts
+++ b/packages/instant/src/util/error_reporter.ts
@@ -1,17 +1,34 @@
import { logUtils } from '@0x/utils';
import * as _ from 'lodash';
-import { GIT_SHA, HOST_DOMAINS, INSTANT_DISCHARGE_TARGET, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants';
+import {
+ GIT_SHA,
+ HOST_DOMAINS_EXTERNAL,
+ HOST_DOMAINS_LOCAL,
+ INSTANT_DISCHARGE_TARGET,
+ NODE_ENV,
+ ROLLBAR_CLIENT_TOKEN,
+ ROLLBAR_ENABLED,
+} from '../constants';
// Import version of Rollbar designed for embedded components
// See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component
// tslint:disable-next-line:no-var-requires
const Rollbar = require('rollbar/dist/rollbar.noconflict.umd');
+const getRollbarHostDomains = (): string[] => {
+ if (NODE_ENV === 'development') {
+ return HOST_DOMAINS_EXTERNAL.concat(HOST_DOMAINS_LOCAL);
+ } else {
+ return HOST_DOMAINS_EXTERNAL;
+ }
+};
+
let rollbar: any;
// Configures rollbar and sets up error catching
export const setupRollbar = (): any => {
if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENABLED) {
+ const hostDomains = getRollbarHostDomains();
rollbar = new Rollbar({
accessToken: ROLLBAR_CLIENT_TOKEN,
captureUncaught: true,
@@ -20,7 +37,7 @@ export const setupRollbar = (): any => {
itemsPerMinute: 10,
maxItems: 500,
payload: {
- environment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+ environment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`,
client: {
javascript: {
source_map_enabled: true,
@@ -29,7 +46,7 @@ export const setupRollbar = (): any => {
},
},
},
- hostWhiteList: HOST_DOMAINS,
+ hostWhiteList: hostDomains,
uncaughtErrorLevel: 'error',
ignoredMessages: [
// Errors from the third-party scripts
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 7c788dff2..bd2d6dad5 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -10,27 +10,40 @@ import { assetBuyerFactory } from './asset_buyer_factory';
import { providerFactory } from './provider_factory';
export const providerStateFactory = {
- getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
+ getInitialProviderState: (
+ orderSource: OrderSource,
+ network: Network,
+ provider?: Provider,
+ walletDisplayName?: string,
+ ): ProviderState => {
if (!_.isUndefined(provider)) {
- return providerStateFactory.getInitialProviderStateFromProvider(orderSource, network, provider);
+ return providerStateFactory.getInitialProviderStateFromProvider(
+ orderSource,
+ network,
+ provider,
+ walletDisplayName,
+ );
}
const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists(
orderSource,
network,
+ walletDisplayName,
);
if (providerStateFromWindowIfExits) {
return providerStateFromWindowIfExits;
} else {
- return providerStateFactory.getInitialProviderStateFallback(orderSource, network);
+ return providerStateFactory.getInitialProviderStateFallback(orderSource, network, walletDisplayName);
}
},
getInitialProviderStateFromProvider: (
orderSource: OrderSource,
network: Network,
provider: Provider,
+ walletDisplayName?: string,
): ProviderState => {
const providerState: ProviderState = {
name: envUtil.getProviderName(provider),
+ displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
provider,
web3Wrapper: new Web3Wrapper(provider),
assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -38,11 +51,16 @@ export const providerStateFactory = {
};
return providerState;
},
- getInitialProviderStateFromWindowIfExists: (orderSource: OrderSource, network: Network): Maybe<ProviderState> => {
+ getInitialProviderStateFromWindowIfExists: (
+ orderSource: OrderSource,
+ network: Network,
+ walletDisplayName?: string,
+ ): Maybe<ProviderState> => {
const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
if (!_.isUndefined(injectedProviderIfExists)) {
const providerState: ProviderState = {
name: envUtil.getProviderName(injectedProviderIfExists),
+ displayName: walletDisplayName || envUtil.getProviderDisplayName(injectedProviderIfExists),
provider: injectedProviderIfExists,
web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,10 +71,15 @@ export const providerStateFactory = {
return undefined;
}
},
- getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
+ getInitialProviderStateFallback: (
+ orderSource: OrderSource,
+ network: Network,
+ walletDisplayName?: string,
+ ): ProviderState => {
const provider = providerFactory.getFallbackNoSigningProvider(network);
const providerState: ProviderState = {
name: 'Fallback',
+ displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
provider,
web3Wrapper: new Web3Wrapper(provider),
assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 04:27:49 +0800