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'), defaultSelectedAssetData: queryParams.getQueryParamValue('defaultSelectedAssetData'),
affiliateInfo: affiliateInfoOverride, affiliateInfo: affiliateInfoOverride,
shouldDisablePushToHistory: !!queryParams.getQueryParamValue('shouldDisablePushToHistory'), shouldDisablePushToHistory: !!queryParams.getQueryParamValue('shouldDisablePushToHistory'),
walletDisplayName: queryParams.getQueryParamValue('walletDisplayName') || undefined,
}; };
return renderOptionsOverrides; return renderOptionsOverrides;
}; };

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

@ -18,7 +18,7 @@ import { WalletPrompt } from './wallet_prompt';
export interface PaymentMethodProps { export interface PaymentMethodProps {
account: Account; account: Account;
network: Network; network: Network;
walletName: string; walletDisplayName: string;
onInstallWalletClick: () => void; onInstallWalletClick: () => void;
onUnlockWalletClick: () => void; onUnlockWalletClick: () => void;
} }
@ -62,11 +62,11 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
if (account.state === AccountState.Ready || account.state === AccountState.Locked) { if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red; const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
return ( return (
<Flex> <Flex align="center">
<Circle diameter={8} color={circleColor} /> <Circle diameter={8} color={circleColor} />
<Container marginLeft="3px"> <Container marginLeft="5px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px"> <Text fontColor={ColorOption.darkGrey} fontSize="12px" lineHeight="30px">
{this.props.walletName} {this.props.walletDisplayName}
</Text> </Text>
</Container> </Container>
</Flex> </Flex>
@ -91,7 +91,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
image={<Icon width={13} icon="lock" color={ColorOption.black} />} image={<Icon width={13} icon="lock" color={ColorOption.black} />}
{...colors} {...colors}
> >
Please Unlock {this.props.walletName} Please Unlock {this.props.walletDisplayName}
</WalletPrompt> </WalletPrompt>
); );
case AccountState.None: 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 { export interface ZeroExInstantProviderOptionalProps {
provider: Provider; provider: Provider;
walletDisplayName: string;
availableAssetDatas: string[]; availableAssetDatas: string[];
defaultAssetBuyAmount: number; defaultAssetBuyAmount: number;
defaultSelectedAssetData: string; defaultSelectedAssetData: string;
@ -66,6 +67,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
...defaultState, ...defaultState,
providerState, providerState,
network: networkId, network: networkId,
walletDisplayName: props.walletDisplayName,
selectedAsset: _.isUndefined(props.defaultSelectedAssetData) selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
? undefined ? undefined
: assetUtils.createAssetFromAssetDataOrThrow( : assetUtils.createAssetFromAssetDataOrThrow(

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

@ -20,6 +20,7 @@ export interface ConnectedAccountPaymentMethodProps {}
interface ConnectedState { interface ConnectedState {
network: Network; network: Network;
providerState: ProviderState; providerState: ProviderState;
walletDisplayName?: string;
} }
interface ConnectedDispatch { interface ConnectedDispatch {
@ -34,6 +35,7 @@ type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
network: state.network, network: state.network,
providerState: state.providerState, providerState: state.providerState,
walletDisplayName: state.walletDisplayName,
}); });
const mapDispatchToProps = ( const mapDispatchToProps = (
@ -56,7 +58,7 @@ const mergeProps = (
...ownProps, ...ownProps,
network: connectedState.network, network: connectedState.network,
account: connectedState.providerState.account, account: connectedState.providerState.account,
walletName: connectedState.providerState.name, walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState), onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
onInstallWalletClick: () => { onInstallWalletClick: () => {
const isMobile = envUtil.isMobileOperatingSystem(); 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)) { if (!_.isUndefined(config.provider)) {
assert.isWeb3Provider('provider', config.provider); assert.isWeb3Provider('provider', config.provider);
} }
if (!_.isUndefined(config.walletDisplayName)) {
assert.isString('walletDisplayName', config.walletDisplayName);
}
if (!_.isUndefined(config.shouldDisablePushToHistory)) { if (!_.isUndefined(config.shouldDisablePushToHistory)) {
assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory); assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory);
} }

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

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