aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/README.md6
-rw-r--r--packages/instant/package.json27
-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/zero_ex_instant_provider.tsx1
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts2
-rw-r--r--packages/instant/src/types.ts1
-rw-r--r--packages/instant/src/util/analytics.ts2
-rw-r--r--packages/instant/src/util/env.ts7
-rw-r--r--packages/instant/src/util/provider_state_factory.ts33
10 files changed, 85 insertions, 26 deletions
diff --git a/packages/instant/README.md b/packages/instant/README.md
index 2092b45d9..32abf76e0 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -1,5 +1,11 @@
## @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).
+
+Check out a live sample integration [here](https://www.rexrelay.com/instant).
+
## 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 9303276b4..7a519f460 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -1,6 +1,6 @@
{
"name": "@0x/instant",
- "version": "1.0.2",
+ "version": "1.0.3",
"engines": {
"node": ">=6.12"
},
@@ -24,7 +24,10 @@
},
"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": {
@@ -38,18 +41,18 @@
},
"homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
"dependencies": {
- "@0x/assert": "^1.0.18",
- "@0x/asset-buyer": "^3.0.2",
- "@0x/json-schemas": "^2.1.2",
- "@0x/order-utils": "^3.0.4",
- "@0x/subproviders": "^2.1.6",
- "@0x/types": "^1.3.0",
- "@0x/typescript-typings": "^3.0.4",
- "@0x/utils": "^2.0.6",
- "@0x/web3-wrapper": "^3.1.6",
+ "@0x/assert": "^1.0.19",
+ "@0x/asset-buyer": "^3.0.3",
+ "@0x/json-schemas": "^2.1.3",
+ "@0x/order-utils": "^3.0.6",
+ "@0x/subproviders": "^2.1.7",
+ "@0x/types": "^1.4.0",
+ "@0x/typescript-typings": "^3.0.5",
+ "@0x/utils": "^2.0.7",
+ "@0x/web3-wrapper": "^3.2.0",
"bowser": "^1.9.4",
"copy-to-clipboard": "^3.0.8",
- "ethereum-types": "^1.1.2",
+ "ethereum-types": "^1.1.3",
"lodash": "^4.17.5",
"polished": "^2.2.0",
"react": "^16.5.2",
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/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 7ae27de23..204115fa9 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -38,6 +38,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
props.orderSource,
networkId,
props.provider,
+ props.walletDisplayName,
);
// merge the additional additionalAssetMetaDataMap with our default map
const completeAssetMetaDataMap = {
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 e65961e95..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;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 6da52db16..e6128f857 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -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,
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/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-07-22 05:26:00 +0800