From f4e0f74a6df7b8ec89308e10757e7adc9929198f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 1 Dec 2018 01:13:15 -0800
Subject: feat(instant): provide a custom wallet display name

---
 packages/instant/src/components/payment_method.tsx           | 12 ++++++------
 packages/instant/src/components/zero_ex_instant_provider.tsx |  2 ++
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'packages/instant/src/components')

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(
-- 
cgit v1.2.3