aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-12-04 01:56:10 +0800
committerGitHub <noreply@github.com>2018-12-04 01:56:10 +0800
commit57986c0e1e4f3fb79a78d13f09e5b55efa3b8547 (patch)
tree7f5822e9eddb66658fd3cfde5b00961ad0ce9de5
parent5a16e78b545a2698be5cd2c3a4f89b7c2fed49b0 (diff)
parentf4e0f74a6df7b8ec89308e10757e7adc9929198f (diff)
downloaddexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar.gz
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar.bz2
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar.lz
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar.xz
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.tar.zst
dexon-sol-tools-57986c0e1e4f3fb79a78d13f09e5b55efa3b8547.zip
Merge pull request #1366 from 0xProject/feature/instant/provider-name
[instant] provide a custom wallet display name option
-rw-r--r--packages/instant/public/index.html1
-rw-r--r--packages/instant/src/components/payment_method.tsx12
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx2
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts4
-rw-r--r--packages/instant/src/index.umd.ts3
-rw-r--r--packages/instant/src/redux/reducer.ts1
6 files changed, 16 insertions, 7 deletions
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index df39994ef..d10618c58 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -175,6 +175,7 @@
defaultSelectedAssetData: queryParams.getQueryParamValue('defaultSelectedAssetData'),
affiliateInfo: affiliateInfoOverride,
shouldDisablePushToHistory: !!queryParams.getQueryParamValue('shouldDisablePushToHistory'),
+ walletDisplayName: queryParams.getQueryParamValue('walletDisplayName') || undefined,
};
return renderOptionsOverrides;
};
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index c23b43267..4efe5b28e 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -18,7 +18,7 @@ import { WalletPrompt } from './wallet_prompt';
export interface PaymentMethodProps {
account: Account;
network: Network;
- walletName: string;
+ walletDisplayName: string;
onInstallWalletClick: () => void;
onUnlockWalletClick: () => void;
}
@@ -62,11 +62,11 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
return (
- <Flex>
+ <Flex align="center">
<Circle diameter={8} color={circleColor} />
- <Container marginLeft="3px">
- <Text fontColor={ColorOption.darkGrey} fontSize="12px">
- {this.props.walletName}
+ <Container marginLeft="5px">
+ <Text fontColor={ColorOption.darkGrey} fontSize="12px" lineHeight="30px">
+ {this.props.walletDisplayName}
</Text>
</Container>
</Flex>
@@ -91,7 +91,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
image={<Icon width={13} icon="lock" color={ColorOption.black} />}
{...colors}
>
- Please Unlock {this.props.walletName}
+ Please Unlock {this.props.walletDisplayName}
</WalletPrompt>
);
case AccountState.None:
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index a4a03bbf4..b544b86ff 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -29,6 +29,7 @@ export interface ZeroExInstantProviderRequiredProps {
export interface ZeroExInstantProviderOptionalProps {
provider: Provider;
+ walletDisplayName: string;
availableAssetDatas: string[];
defaultAssetBuyAmount: number;
defaultSelectedAssetData: string;
@@ -66,6 +67,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
...defaultState,
providerState,
network: networkId,
+ walletDisplayName: props.walletDisplayName,
selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
? undefined
: assetUtils.createAssetFromAssetDataOrThrow(
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index e9327a288..bb68fdd57 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -20,6 +20,7 @@ export interface ConnectedAccountPaymentMethodProps {}
interface ConnectedState {
network: Network;
providerState: ProviderState;
+ walletDisplayName?: string;
}
interface ConnectedDispatch {
@@ -34,6 +35,7 @@ type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
network: state.network,
providerState: state.providerState,
+ walletDisplayName: state.walletDisplayName,
});
const mapDispatchToProps = (
@@ -56,7 +58,7 @@ const mergeProps = (
...ownProps,
network: connectedState.network,
account: connectedState.providerState.account,
- walletName: connectedState.providerState.name,
+ walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
onInstallWalletClick: () => {
const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 7391e2844..b92fa3a7c 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -39,6 +39,9 @@ const validateInstantRenderConfig = (config: ZeroExInstantConfig, selector: stri
if (!_.isUndefined(config.provider)) {
assert.isWeb3Provider('provider', config.provider);
}
+ if (!_.isUndefined(config.walletDisplayName)) {
+ assert.isString('walletDisplayName', config.walletDisplayName);
+ }
if (!_.isUndefined(config.shouldDisablePushToHistory)) {
assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory);
}
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dfc2b89f3..a9a407b7d 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -49,6 +49,7 @@ interface OptionalState {
latestBuyQuote: BuyQuote;
latestErrorMessage: string;
affiliateInfo: AffiliateInfo;
+ walletDisplayName: string;
}
export type State = DefaultState & PropsDerivedState & Partial<OptionalState>;