feat: add coinbase wallet app logo to wallet prompt

3 files changed, 24 insertions, 7 deletions

diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx
index f5a7be81c..f3c9ccdc2 100644
--- a/packages/instant/src/components/coinbase_wallet_logo.tsx
+++ b/packages/instant/src/components/coinbase_wallet_logo.tsx
@@ -30,3 +30,19 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
 CoinbaseWalletLogo.defaultProps = {
     width: 164,
 };
+
+export interface CoinbaseWalletAppLogoProps {
+    width?: number;
+}
+
+export const CoinbaseWalletAppLogo: React.StatelessComponent<CoinbaseWalletAppLogoProps> = ({ width }) => (
+    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
+            fill="white"
+        />
+    </svg>
+);
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 0f9f3ebfa..02c2b12bf 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme';
 import { Account, AccountState, Network } from '../types';
 import { envUtil } from '../util/env';
 
-import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
+import { CoinbaseWalletAppLogo, CoinbaseWalletLogo } from './coinbase_wallet_logo';
 import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
@@ -77,8 +77,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
     private readonly _renderMainContent = (): React.ReactNode => {
         const { account, network } = this.props;
         const isMobile = envUtil.isMobileOperatingSystem();
-        // TODO: Use Toshi logo
-        const logo = isMobile ? undefined : <MetaMaskLogo width={19} height={18} />;
+        const logo = isMobile ? <CoinbaseWalletAppLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
         switch (account.state) {
             case AccountState.Loading:
                 // Just take up the same amount of space as the other states.
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
index cd0a7828b..bcf66ee81 100644
--- a/packages/instant/src/components/wallet_prompt.tsx
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -23,10 +23,12 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onCl
         boxShadowOnHover={!!onClick}
     >
         <Flex>
-            <Container marginRight="10px">{image}</Container>
-            <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
-                {children}
-            </Text>
+            {image}
+            <Container marginLeft="10px">
+                <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                    {children}
+                </Text>
+            </Container>
         </Flex>
     </Container>
 );