crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(instant): provide a custom wallet display name

Browse Source
This commit is contained in:
Brandon Millman 2018-12-01 01:13:15 -08:00
parent 502e9c7be4
commit f4e0f74a6d
6 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/instant/public/index.html
View File

@ -175,6 +175,7 @@
defaultSelectedAssetData: queryParams.getQueryParamValue('defaultSelectedAssetData'),
affiliateInfo: affiliateInfoOverride,
shouldDisablePushToHistory: !!queryParams.getQueryParamValue('shouldDisablePushToHistory'),
walletDisplayName: queryParams.getQueryParamValue('walletDisplayName') || undefined,
};
return renderOptionsOverrides;
};

12
packages/instant/src/components/payment_method.tsx
View File

@ -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:

2
packages/instant/src/components/zero_ex_instant_provider.tsx
View File

@ -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(

4
packages/instant/src/containers/connected_account_payment_method.ts
View File

@ -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();

3
packages/instant/src/index.umd.ts
View File

@ -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);
}

1
packages/instant/src/redux/reducer.ts
View File

@ -49,6 +49,7 @@ interface OptionalState {
latestBuyQuote: BuyQuote;
latestErrorMessage: string;
affiliateInfo: AffiliateInfo;
walletDisplayName: string;
}
export type State = DefaultState & PropsDerivedState & Partial<OptionalState>;