Deprecating wallet picker (#1039)

* remove coinbase retail option

* Revert "remove coinbase retail option"

This reverts commit a8c5453.

* Revert "Revert "remove coinbase retail option""

This reverts commit 5b593da.

* update icons

* revert appSrc stuff

* cleanup

asdf/packages/wallet-sdk/src/components/ConnectContent/ConnectContent.scss

@@ -199,27 +199,17 @@
     cursor: pointer;
 
     &.light {
-      color: $black;
-
-      &.selected {
-        background: $primary-wash;
-        color: $primary;
-      }
+      background: $primary-wash;
+      color: $primary;
     }
 
     &.dark {
-      color: $white;
-
-      &.selected {
-        background: $primary-wash-dark;
-        color: $primary-dark;
-      }
+      background: $primary-wash-dark;
+      color: $primary-dark;
     }
 
-    &.selected {
-      border-radius: 100px;
-      font-weight: 600;
-    }
+    border-radius: 100px;
+    font-weight: 600;
 
     &-copy-wrapper {
       margin: 0 4px 0 8px;

asdf/packages/wallet-sdk/src/components/ConnectContent/ConnectContent.tsx

@@ -3,17 +3,13 @@
 
 import clsx from 'clsx';
 import { h } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
 
 import { createQrUrl } from '../../util';
 import { LIB_VERSION } from '../../version';
 import { CloseIcon } from '../icons/CloseIcon';
-import coinbaseRound from '../icons/coinbase-round-svg';
 import coinbaseWalletRound from '../icons/coinbase-wallet-round-svg';
 import { QRCodeIcon } from '../icons/QRCodeIcon';
-import coinbaseLogo from '../icons/QRLogoCoinbase';
 import walletLogo from '../icons/QRLogoWallet';
-import { StatusDotIcon } from '../icons/StatusDotIcon';
 import { QRCode } from '../QRCode';
 import { Spinner } from '../Spinner/Spinner';
 import { Theme } from '../types';
@@ -31,31 +27,11 @@ type ConnectContentProps = {
   onCancel: (() => void) | null;
 };
 
-const wallets = {
-  'coinbase-wallet-app': {
-    title: 'Coinbase Wallet app',
-    description: 'Connect with your self-custody wallet',
-    icon: coinbaseWalletRound,
-    steps: CoinbaseWalletSteps,
-  },
-  'coinbase-app': {
-    title: 'Coinbase app',
-    description: 'Connect with your Coinbase account',
-    icon: coinbaseRound,
-    steps: CoinbaseAppSteps,
-  },
-};
-
-type WalletType = keyof typeof wallets;
-
-const makeQrCodeImage = (app: string) => {
-  switch (app) {
-    case 'coinbase-app':
-      return coinbaseLogo;
-    case 'coinbase-wallet-app':
-    default:
-      return walletLogo;
-  }
+const wallet = {
+  title: 'Coinbase Wallet app',
+  description: 'Connect with your self-custody wallet',
+  icon: coinbaseWalletRound,
+  steps: CoinbaseWalletSteps,
 };
 
 const makeIconColor = (theme: Theme) => {
@@ -64,11 +40,6 @@ const makeIconColor = (theme: Theme) => {
 
 export function ConnectContent(props: ConnectContentProps) {
   const { theme } = props;
-  const [selected, setSelected] = useState<WalletType>('coinbase-wallet-app');
-
-  const handleSelect = useCallback((id: WalletType) => {
-    setSelected(id);
-  }, []);
 
   const qrUrl = createQrUrl(
     props.sessionId,
@@ -79,19 +50,14 @@ export function ConnectContent(props: ConnectContentProps) {
     props.chainId
   );
 
-  const wallet = wallets[selected];
-  if (!selected) {
-    return null;
-  }
   const WalletSteps = wallet.steps;
-  const coinbaseApp = selected === 'coinbase-app';
 
   return (
     <div data-testid="connect-content" className={clsx('-cbwsdk-connect-content', theme)}>
       <style>{css}</style>
       <div className="-cbwsdk-connect-content-header">
         <h2 className={clsx('-cbwsdk-connect-content-heading', theme)}>
-          Scan to connect with one of our mobile apps
+          Scan to connect with our mobile app
         </h2>
         {props.onCancel && (
           <button type="button" className={'-cbwsdk-cancel-button'} onClick={props.onCancel}>
@@ -101,27 +67,12 @@ export function ConnectContent(props: ConnectContentProps) {
       </div>
       <div className="-cbwsdk-connect-content-layout">
         <div className="-cbwsdk-connect-content-column-left">
-          <div>
-            {Object.entries(wallets).map(([key, value]) => {
-              return (
-                <ConnectItem
-                  key={key}
-                  title={value.title}
-                  description={value.description}
-                  icon={value.icon}
-                  selected={selected === key}
-                  onClick={() => handleSelect(key as WalletType)}
-                  theme={theme}
-                />
-              );
-            })}
-          </div>
-          {coinbaseApp && (
-            <div className={clsx('-cbwsdk-connect-content-update-app', theme)}>
-              Don’t see a <strong>Scan</strong> option? Update your Coinbase app to the latest
-              version and try again.
-            </div>
-          )}
+          <ConnectItem
+            title={wallet.title}
+            description={wallet.description}
+            icon={wallet.icon}
+            theme={theme}
+          />
         </div>
         <div className="-cbwsdk-connect-content-column-right">
           <div className="-cbwsdk-connect-content-qr-wrapper">
@@ -132,7 +83,7 @@ export function ConnectContent(props: ConnectContentProps) {
               fgColor="#000"
               bgColor="transparent"
               image={{
-                svg: makeQrCodeImage(selected),
+                svg: walletLogo,
                 width: 25,
                 height: 25,
               }}
@@ -160,21 +111,12 @@ type ConnectItemProps = {
   title: string;
   description: string;
   icon: string;
-  selected: boolean;
-  onClick(): void;
   theme: Theme;
 };
 
-export function ConnectItem({
-  title,
-  description,
-  icon,
-  selected,
-  theme,
-  onClick,
-}: ConnectItemProps) {
+export function ConnectItem({ title, description, icon, theme }: ConnectItemProps) {
   return (
-    <div onClick={onClick} className={clsx('-cbwsdk-connect-item', theme, { selected })}>
+    <div className={clsx('-cbwsdk-connect-item', theme)}>
       <div>
         <img src={icon} alt={title} />
       </div>
@@ -211,33 +153,3 @@ export function CoinbaseWalletSteps({ theme }: WalletStepsProps) {
     </ol>
   );
 }
-
-export function CoinbaseAppSteps({ theme }: WalletStepsProps) {
-  return (
-    <ol className="-cbwsdk-wallet-steps">
-      <li className={clsx('-cbwsdk-wallet-steps-item', theme)}>
-        <div className="-cbwsdk-wallet-steps-item-wrapper">Open Coinbase app</div>
-      </li>
-      <li className={clsx('-cbwsdk-wallet-steps-item', theme)}>
-        <div className="-cbwsdk-wallet-steps-item-wrapper">
-          <span>
-            Tap <strong>More</strong>
-          </span>
-          <span
-            className={clsx('-cbwsdk-wallet-steps-pad-left', '-cbwsdk-wallet-steps-icon', theme)}
-          >
-            <StatusDotIcon fill={makeIconColor(theme)} />
-          </span>
-          <span className="-cbwsdk-wallet-steps-pad-left">
-            then <strong>Scan</strong>
-          </span>
-          <span
-            className={clsx('-cbwsdk-wallet-steps-pad-left', '-cbwsdk-wallet-steps-icon', theme)}
-          >
-            <QRCodeIcon fill={makeIconColor(theme)} />
-          </span>
-        </div>
-      </li>
-    </ol>
-  );
-}

asdf/packages/wallet-sdk/src/components/Snackbar/Snackbar.test.tsx

@@ -26,7 +26,6 @@ describe('Snackbar', () => {
     test('@presentItem', async () => {
       snackbar.presentItem({
         message: 'Confirm on phone',
-        appSrc: 'coinbase-wallet',
         menuItems: [
           {
             isRed: true,

asdf/packages/wallet-sdk/src/components/Snackbar/Snackbar.tsx

@@ -7,18 +7,9 @@ import { useEffect, useState } from 'preact/hooks';
 
 import css from './Snackbar-css';
 
+const cblogo = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuNDkyIDEwLjQxOWE4LjkzIDguOTMgMCAwMTguOTMtOC45M2gxMS4xNjNhOC45MyA4LjkzIDAgMDE4LjkzIDguOTN2MTEuMTYzYTguOTMgOC45MyAwIDAxLTguOTMgOC45M0gxMC40MjJhOC45MyA4LjkzIDAgMDEtOC45My04LjkzVjEwLjQxOXoiIGZpbGw9IiMxNjUyRjAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjQxOSAwSDIxLjU4QzI3LjMzNSAwIDMyIDQuNjY1IDMyIDEwLjQxOVYyMS41OEMzMiAyNy4zMzUgMjcuMzM1IDMyIDIxLjU4MSAzMkgxMC40MkM0LjY2NSAzMiAwIDI3LjMzNSAwIDIxLjU4MVYxMC40MkMwIDQuNjY1IDQuNjY1IDAgMTAuNDE5IDB6bTAgMS40ODhhOC45MyA4LjkzIDAgMDAtOC45MyA4LjkzdjExLjE2M2E4LjkzIDguOTMgMCAwMDguOTMgOC45M0gyMS41OGE4LjkzIDguOTMgMCAwMDguOTMtOC45M1YxMC40MmE4LjkzIDguOTMgMCAwMC04LjkzLTguOTNIMTAuNDJ6IiBmaWxsPSIjZmZmIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS45OTggMjYuMDQ5Yy01LjU0OSAwLTEwLjA0Ny00LjQ5OC0xMC4wNDctMTAuMDQ3IDAtNS41NDggNC40OTgtMTAuMDQ2IDEwLjA0Ny0xMC4wNDYgNS41NDggMCAxMC4wNDYgNC40OTggMTAuMDQ2IDEwLjA0NiAwIDUuNTQ5LTQuNDk4IDEwLjA0Ny0xMC4wNDYgMTAuMDQ3eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMi43NjIgMTQuMjU0YzAtLjgyMi42NjctMS40ODkgMS40ODktMS40ODloMy40OTdjLjgyMiAwIDEuNDg4LjY2NiAxLjQ4OCAxLjQ4OXYzLjQ5N2MwIC44MjItLjY2NiAxLjQ4OC0xLjQ4OCAxLjQ4OGgtMy40OTdhMS40ODggMS40ODggMCAwMS0xLjQ4OS0xLjQ4OHYtMy40OTh6IiBmaWxsPSIjMTY1MkYwIi8+PC9zdmc+`;
 const gearIcon = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDYuNzV2LTEuNWwtMS43Mi0uNTdjLS4wOC0uMjctLjE5LS41Mi0uMzItLjc3bC44MS0xLjYyLTEuMDYtMS4wNi0xLjYyLjgxYy0uMjQtLjEzLS41LS4yNC0uNzctLjMyTDYuNzUgMGgtMS41bC0uNTcgMS43MmMtLjI3LjA4LS41My4xOS0uNzcuMzJsLTEuNjItLjgxLTEuMDYgMS4wNi44MSAxLjYyYy0uMTMuMjQtLjI0LjUtLjMyLjc3TDAgNS4yNXYxLjVsMS43Mi41N2MuMDguMjcuMTkuNTMuMzIuNzdsLS44MSAxLjYyIDEuMDYgMS4wNiAxLjYyLS44MWMuMjQuMTMuNS4yMy43Ny4zMkw1LjI1IDEyaDEuNWwuNTctMS43MmMuMjctLjA4LjUyLS4xOS43Ny0uMzJsMS42Mi44MSAxLjA2LTEuMDYtLjgxLTEuNjJjLjEzLS4yNC4yMy0uNS4zMi0uNzdMMTIgNi43NXpNNiA4LjVhMi41IDIuNSAwIDAxMC01IDIuNSAyLjUgMCAwMTAgNXoiIGZpbGw9IiMwNTBGMTkiLz48L3N2Zz4=`;
 
-function makeSnackbarIcon(appSrc?: string | null) {
-  switch (appSrc) {
-    case 'coinbase-app':
-      return `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjY3NCAxOC44NThjLTIuMDQ1IDAtMy42NDgtMS43MjItMy42NDgtMy44NDVzMS42NTktMy44NDUgMy42NDgtMy44NDVjMS44MjQgMCAzLjMxNyAxLjM3NyAzLjU5MyAzLjIxNGgzLjcwM2MtLjMzMS0zLjk2LTMuNDgyLTcuMDU5LTcuMjk2LTcuMDU5LTQuMDM0IDAtNy4zNSAzLjQ0My03LjM1IDcuNjkgMCA0LjI0NiAzLjI2IDcuNjkgNy4zNSA3LjY5IDMuODcgMCA2Ljk2NS0zLjEgNy4yOTYtNy4wNTloLTMuNzAzYy0uMjc2IDEuODM2LTEuNzY5IDMuMjE0LTMuNTkzIDMuMjE0WiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0wIDEwLjY3OGMwLTMuNzExIDAtNS41OTYuNzQyLTcuMDIzQTYuNTMyIDYuNTMyIDAgMCAxIDMuNjU1Ljc0MkM1LjA4MiAwIDYuOTY3IDAgMTAuNjc4IDBoNy45MzhjMy43MTEgMCA1LjU5NiAwIDcuMDIzLjc0MmE2LjUzMSA2LjUzMSAwIDAgMSAyLjkxMyAyLjkxM2MuNzQyIDEuNDI3Ljc0MiAzLjMxMi43NDIgNy4wMjN2Ny45MzhjMCAzLjcxMSAwIDUuNTk2LS43NDIgNy4wMjNhNi41MzEgNi41MzEgMCAwIDEtMi45MTMgMi45MTNjLTEuNDI3Ljc0Mi0zLjMxMi43NDItNy4wMjMuNzQyaC03LjkzOGMtMy43MTEgMC01LjU5NiAwLTcuMDIzLS43NDJhNi41MzEgNi41MzEgMCAwIDEtMi45MTMtMi45MTNDMCAyNC4yMTIgMCAyMi4zODQgMCAxOC42MTZ2LTcuOTM4WiIgZmlsbD0iIzAwNTJGRiIvPjxwYXRoIGQ9Ik0xNC42ODQgMTkuNzczYy0yLjcyNyAwLTQuODY0LTIuMjk1LTQuODY0LTUuMTI2IDAtMi44MzEgMi4yMS01LjEyNyA0Ljg2NC01LjEyNyAyLjQzMiAwIDQuNDIyIDEuODM3IDQuNzkgNC4yODVoNC45MzhjLS40NDItNS4yOC00LjY0My05LjQxMS05LjcyOC05LjQxMS01LjM4IDAtOS44MDIgNC41OS05LjgwMiAxMC4yNTMgMCA1LjY2MiA0LjM0OCAxMC4yNTMgOS44MDIgMTAuMjUzIDUuMTU5IDAgOS4yODYtNC4xMzIgOS43MjgtOS40MTFoLTQuOTM4Yy0uMzY4IDIuNDQ4LTIuMzU4IDQuMjg0LTQuNzkgNC4yODRaIiBmaWxsPSIjZmZmIi8+PC9zdmc+`;
-    case 'coinbase-wallet-app':
-    default:
-      return `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuNDkyIDEwLjQxOWE4LjkzIDguOTMgMCAwMTguOTMtOC45M2gxMS4xNjNhOC45MyA4LjkzIDAgMDE4LjkzIDguOTN2MTEuMTYzYTguOTMgOC45MyAwIDAxLTguOTMgOC45M0gxMC40MjJhOC45MyA4LjkzIDAgMDEtOC45My04LjkzVjEwLjQxOXoiIGZpbGw9IiMxNjUyRjAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjQxOSAwSDIxLjU4QzI3LjMzNSAwIDMyIDQuNjY1IDMyIDEwLjQxOVYyMS41OEMzMiAyNy4zMzUgMjcuMzM1IDMyIDIxLjU4MSAzMkgxMC40MkM0LjY2NSAzMiAwIDI3LjMzNSAwIDIxLjU4MVYxMC40MkMwIDQuNjY1IDQuNjY1IDAgMTAuNDE5IDB6bTAgMS40ODhhOC45MyA4LjkzIDAgMDAtOC45MyA4LjkzdjExLjE2M2E4LjkzIDguOTMgMCAwMDguOTMgOC45M0gyMS41OGE4LjkzIDguOTMgMCAwMDguOTMtOC45M1YxMC40MmE4LjkzIDguOTMgMCAwMC04LjkzLTguOTNIMTAuNDJ6IiBmaWxsPSIjZmZmIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS45OTggMjYuMDQ5Yy01LjU0OSAwLTEwLjA0Ny00LjQ5OC0xMC4wNDctMTAuMDQ3IDAtNS41NDggNC40OTgtMTAuMDQ2IDEwLjA0Ny0xMC4wNDYgNS41NDggMCAxMC4wNDYgNC40OTggMTAuMDQ2IDEwLjA0NiAwIDUuNTQ5LTQuNDk4IDEwLjA0Ny0xMC4wNDYgMTAuMDQ3eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMi43NjIgMTQuMjU0YzAtLjgyMi42NjctMS40ODkgMS40ODktMS40ODloMy40OTdjLjgyMiAwIDEuNDg4LjY2NiAxLjQ4OCAxLjQ4OXYzLjQ5N2MwIC44MjItLjY2NiAxLjQ4OC0xLjQ4OCAxLjQ4OGgtMy40OTdhMS40ODggMS40ODggMCAwMS0xLjQ4OS0xLjQ4OHYtMy40OTh6IiBmaWxsPSIjMTY1MkYwIi8+PC9zdmc+`;
-  }
-}
-
 export interface SnackbarOptions {
   darkMode: boolean;
 }
@@ -27,7 +18,6 @@ export interface SnackbarInstanceProps {
   message?: string;
   menuItems?: SnackbarMenuItem[];
   autoExpand?: boolean;
-  appSrc?: string | null;
 }
 
 export interface SnackbarMenuItem {
@@ -107,7 +97,6 @@ export const SnackbarInstance: FunctionComponent<SnackbarInstanceProps> = ({
   autoExpand,
   message,
   menuItems,
-  appSrc,
 }) => {
   const [hidden, setHidden] = useState(true);
   const [expanded, setExpanded] = useState(autoExpand ?? false);
@@ -140,7 +129,7 @@ export const SnackbarInstance: FunctionComponent<SnackbarInstanceProps> = ({
       )}
     >
       <div class="-cbwsdk-snackbar-instance-header" onClick={toggleExpanded}>
-        <img src={makeSnackbarIcon(appSrc)} class="-cbwsdk-snackbar-instance-header-cblogo" />
+        <img src={cblogo} class="-cbwsdk-snackbar-instance-header-cblogo" />{' '}
         <div class="-cbwsdk-snackbar-instance-header-message">{message}</div>
         <div class="-gear-container">
           {!expanded && (

asdf/packages/wallet-sdk/src/components/icons/QRCodeIcon.tsx

@@ -2,16 +2,11 @@ import { h } from 'preact';
 
 export function QRCodeIcon(props: h.JSX.SVGAttributes<SVGSVGElement>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M8.2271 1.77124L7.0271 1.77124V2.97124H8.2271V1.77124Z" />
-      <path d="M5.44922 0.199219L5.44922 4.54922L9.79922 4.54922V0.199219L5.44922 0.199219ZM8.89922 3.64922L6.34922 3.64922L6.34922 1.09922L8.89922 1.09922V3.64922Z" />
-      <path d="M2.97124 1.77124L1.77124 1.77124L1.77124 2.97124H2.97124V1.77124Z" />
-      <path d="M0.199219 4.54922L4.54922 4.54922L4.54922 0.199219L0.199219 0.199219L0.199219 4.54922ZM1.09922 1.09922L3.64922 1.09922L3.64922 3.64922L1.09922 3.64922L1.09922 1.09922Z" />
-      <path d="M2.97124 7.0271H1.77124L1.77124 8.2271H2.97124V7.0271Z" />
-      <path d="M0.199219 9.79922H4.54922L4.54922 5.44922L0.199219 5.44922L0.199219 9.79922ZM1.09922 6.34922L3.64922 6.34922L3.64922 8.89922H1.09922L1.09922 6.34922Z" />
-      <path d="M8.89922 7.39912H7.99922V5.40112H5.44922L5.44922 9.79912H6.34922L6.34922 6.30112H7.09922V8.29912H9.79922V5.40112H8.89922V7.39912Z" />
-      <path d="M7.99912 8.89917H7.09912V9.79917H7.99912V8.89917Z" />
-      <path d="M9.79917 8.89917H8.89917V9.79917H9.79917V8.89917Z" />
+    <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3 3V8.99939L5 8.99996V5H9V3H3Z" />
+      <path d="M15 21L21 21V15.0006L19 15V19L15 19V21Z" />
+      <path d="M21 9H19V5H15.0006L15 3H21V9Z" />
+      <path d="M3 15V21H8.99939L8.99996 19H5L5 15H3Z" />
     </svg>
   );
 }

asdf/packages/wallet-sdk/src/provider/MobileRelayUI.ts

@@ -155,8 +155,6 @@ export class MobileRelayUI implements WalletUI {
 
   setStandalone?(_status: boolean) {} // no-op
 
-  setAppSrc(_src: string) {} // no-op
-
   setConnectDisabled(_: boolean) {} // no-op
 
   inlineAccountsResponse(): boolean {

asdf/packages/wallet-sdk/src/provider/WalletLinkRelayUI.test.ts

@@ -41,7 +41,6 @@ describe('WalletLinkRelayUI', () => {
 
     expect(snackbarMock).toHaveBeenCalledWith({
       message: 'Confirm on phone',
-      appSrc: null,
       menuItems: [
         {
           isRed: true,
@@ -81,7 +80,6 @@ describe('WalletLinkRelayUI', () => {
     expect(snackbarMock).toHaveBeenCalledWith({
       autoExpand: true,
       message: 'Connection lost',
-      appSrc: null,
       menuItems: [
         {
           isRed: false,