From d952e561e7a6d7396af088a7977d20d8d8ef42f0 Mon Sep 17 00:00:00 2001
From: Turadg Aleahmad <turadg@agoric.com>
Date: Sun, 4 Sep 2022 09:30:24 -0700
Subject: [PATCH] refactor(wallet-ui)!: remove Solo wallet support

---
 .../components/ConnectionSettingsDialog.jsx   | 223 +++---------------
 packages/wallet/ui/src/contexts/Provider.jsx  |  17 +-
 packages/wallet/ui/src/util/connections.js    |  13 -
 3 files changed, 38 insertions(+), 215 deletions(-)

diff --git a/packages/wallet/ui/src/components/ConnectionSettingsDialog.jsx b/packages/wallet/ui/src/components/ConnectionSettingsDialog.jsx
index 149a1454bc7..d584f556e2f 100644
--- a/packages/wallet/ui/src/components/ConnectionSettingsDialog.jsx
+++ b/packages/wallet/ui/src/components/ConnectionSettingsDialog.jsx
@@ -1,30 +1,23 @@
-import { useMemo, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { makeStyles } from '@mui/styles';
 import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import Box from '@mui/material/Box';
-import TabList from '@mui/lab/TabList';
-import Tab from '@mui/material/Tab';
-import TabContext from '@mui/lab/TabContext';
-import TabPanel from '@mui/lab/TabPanel';
+import DialogTitle from '@mui/material/DialogTitle';
 import FormControl from '@mui/material/FormControl';
-import DialogActions from '@mui/material/DialogActions';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import { makeStyles } from '@mui/styles';
+import { useMemo, useState } from 'react';
+import { v4 as uuid } from 'uuid';
 import { deepEquals } from '../util/DeepEquals';
 
 import { withApplicationContext } from '../contexts/Application';
-import {
-  ConnectionConfigType,
-  SmartConnectionMethod,
-} from '../util/connections';
-import { maybeSave, maybeLoad } from '../util/storage';
+import { SmartConnectionMethod } from '../util/connections';
+import { maybeSave } from '../util/storage';
 
 const useStyles = makeStyles(_ => ({
   centeredText: {
@@ -39,11 +32,6 @@ const Errors = {
   SMART_CONNECTION_METHOD_UNSPECIFIED: 'smart wallet connection unspecified',
 };
 
-const Tabs = {
-  SMART: 'smart',
-  SOLO: 'solo',
-};
-
 const ErrorLabel = ({ children }) => {
   return (
     <Box
@@ -61,44 +49,6 @@ const ErrorLabel = ({ children }) => {
   );
 };
 
-const getAccessToken = () => {
-  // Fetch the access token from the window's URL.
-  const accessTokenParams = `?${window.location.hash.slice(1)}`;
-  let accessToken = new URLSearchParams(accessTokenParams).get('accessToken');
-
-  try {
-    if (accessToken) {
-      // Store the access token for later use.
-      maybeSave('accessToken', accessToken);
-    } else {
-      // Try reviving it from localStorage.
-      accessToken = maybeLoad('accessToken');
-    }
-  } catch (e) {
-    console.log('Error fetching accessToken', e);
-  }
-
-  // Now that we've captured it, clear out the access token from the URL bar.
-  window.location.hash = '';
-
-  window.addEventListener('hashchange', _ev => {
-    // See if we should update the access token params.
-    const atp = `?${window.location.hash.slice(1)}`;
-    const at = new URLSearchParams(atp).get('accessToken');
-
-    if (at) {
-      // We have new params, so replace them.
-      accessToken = at;
-      maybeSave('accessToken', accessToken);
-    }
-
-    // Keep it clear.
-    window.location.hash = '';
-  });
-
-  return accessToken;
-};
-
 const ConnectionSettingsDialog = ({
   onClose,
   open,
@@ -110,42 +60,9 @@ const ConnectionSettingsDialog = ({
   tryKeplrConnect,
 }) => {
   const classes = useStyles();
-  const smartConnectionHrefs = allConnectionConfigs
-    .filter(({ type }) => type === ConnectionConfigType.SMART)
-    .map(({ href }) => href);
-
-  const soloConnectionHrefs = allConnectionConfigs
-    .filter(({ type }) => type === ConnectionConfigType.SOLO)
-    .map(({ href }) => href);
-
-  const [smartWalletConfig, setSmartWalletConfig] = useState(
-    connectionConfig?.type === ConnectionConfigType.SMART
-      ? connectionConfig
-      : {
-          type: ConnectionConfigType.SMART,
-          href: smartConnectionHrefs[0],
-          smartConnectionMethod: SmartConnectionMethod.KEPLR,
-        },
-  );
-
-  const [soloWalletConfig, setSoloWalletConfig] = useState(
-    connectionConfig?.type === ConnectionConfigType.SOLO
-      ? connectionConfig
-      : {
-          type: ConnectionConfigType.SOLO,
-          href: soloConnectionHrefs[0],
-          accessToken: getAccessToken(),
-        },
-  );
-
-  const [currentTab, setCurrentTab] = useState(
-    connectionConfig && connectionConfig.type === ConnectionConfigType.SOLO
-      ? Tabs.SOLO
-      : Tabs.SMART,
-  );
+  const smartConnectionHrefs = allConnectionConfigs.map(({ href }) => href);
 
-  const config =
-    currentTab === Tabs.SMART ? smartWalletConfig : soloWalletConfig;
+  const [config, setConfig] = useState(connectionConfig);
 
   const [selectInputId] = useState(uuid());
 
@@ -158,20 +75,14 @@ const ConnectionSettingsDialog = ({
     errors.add(Errors.INVALID_URL);
   }
 
-  if (config.type === ConnectionConfigType.SMART) {
-    if (
-      config.smartConnectionMethod === SmartConnectionMethod.READ_ONLY &&
-      !config.publicAddress
-    ) {
-      errors.add(Errors.INVALID_ADDRESS);
-    }
-    if (config.smartConnectionMethod === undefined) {
-      errors.add(Errors.SMART_CONNECTION_METHOD_UNSPECIFIED);
-    }
+  if (
+    config.smartConnectionMethod === SmartConnectionMethod.READ_ONLY &&
+    !config.publicAddress
+  ) {
+    errors.add(Errors.INVALID_ADDRESS);
   }
-
-  if (config.type === ConnectionConfigType.SOLO && !config.accessToken) {
-    errors.add(Errors.INVALID_ACCESS_TOKEN);
+  if (config.smartConnectionMethod === undefined) {
+    errors.add(Errors.SMART_CONNECTION_METHOD_UNSPECIFIED);
   }
 
   const hasChanges = useMemo(
@@ -208,19 +119,15 @@ const ConnectionSettingsDialog = ({
     onClose();
   };
 
-  const handleTabChange = (_ev, value) => {
-    setCurrentTab(value);
-  };
-
   const smartWalletConfigForm = (
     <>
       <Autocomplete
-        value={smartWalletConfig?.href}
+        value={config?.href}
         id="connection"
         options={smartConnectionHrefs}
         sx={{ width: 360, mt: 2 }}
         onChange={(_, newValue) =>
-          setSmartWalletConfig(swConfig => ({
+          setConfig(swConfig => ({
             ...swConfig,
             href: newValue,
           }))
@@ -248,12 +155,12 @@ const ConnectionSettingsDialog = ({
       <FormControl sx={{ mt: 2 }}>
         <InputLabel id={selectInputId}>Connection Method</InputLabel>
         <Select
-          value={smartWalletConfig.smartConnectionMethod}
+          value={config.smartConnectionMethod}
           labelId={selectInputId}
           label="Connection Method"
           onChange={e => {
             const smartConnectionMethod = e.target.value;
-            setSmartWalletConfig(swConfig => ({
+            setConfig(swConfig => ({
               ...swConfig,
               smartConnectionMethod,
               publicAddress: undefined,
@@ -272,18 +179,17 @@ const ConnectionSettingsDialog = ({
             ? 'Select a connection method'
             : ''}
         </ErrorLabel>
-        {smartWalletConfig.smartConnectionMethod ===
-          SmartConnectionMethod.READ_ONLY && (
+        {config.smartConnectionMethod === SmartConnectionMethod.READ_ONLY && (
           <>
             <TextField
               sx={{ width: 360, mt: 2 }}
               label="Public Address"
               error={errors.has(Errors.INVALID_ADDRESS)}
               autoComplete="off"
-              value={smartWalletConfig.publicAddress ?? ''}
+              value={config.publicAddress ?? ''}
               onChange={e => {
                 const publicAddress = e.target.value;
-                setSmartWalletConfig(swConfig => ({
+                setConfig(swConfig => ({
                   ...swConfig,
                   publicAddress,
                 }));
@@ -300,81 +206,12 @@ const ConnectionSettingsDialog = ({
     </>
   );
 
-  const soloWalletConfigForm = (
-    <>
-      <Autocomplete
-        value={soloWalletConfig?.href}
-        id="connection"
-        options={soloConnectionHrefs}
-        sx={{ width: 360, mt: 2 }}
-        onChange={(_, newValue) =>
-          setSoloWalletConfig(swConfig => ({
-            ...swConfig,
-            href: newValue,
-          }))
-        }
-        filterOptions={(options, params) => {
-          const { inputValue } = params;
-          const isExisting = options.some(option => inputValue === option);
-          if (inputValue && !isExisting) {
-            options.unshift(inputValue);
-          }
-          return options;
-        }}
-        renderOption={(props, option) => <li {...props}>{option}</li>}
-        selectOnFocus
-        clearOnBlur
-        handleHomeEndKeys
-        freeSolo
-        renderInput={params => (
-          <TextField {...params} label="Solo Wallet URL" />
-        )}
-      />
-      <ErrorLabel>
-        {errors.has(Errors.INVALID_URL) ? 'Enter a valid URL' : ''}
-      </ErrorLabel>
-      <TextField
-        sx={{ mt: 2, width: 360 }}
-        label="Access Token"
-        autoComplete="off"
-        value={soloWalletConfig.accessToken}
-        onChange={e => {
-          const accessToken = e.target.value;
-          setSoloWalletConfig(swConfig => ({
-            ...swConfig,
-            accessToken,
-          }));
-        }}
-      />
-      <ErrorLabel>
-        {errors.has(Errors.INVALID_ACCESS_TOKEN)
-          ? 'Enter an access token (agoric open --no-browser)'
-          : ''}
-      </ErrorLabel>
-    </>
-  );
-
   return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle className={classes.centeredText}>
         Connection Settings
       </DialogTitle>
-      <DialogContent sx={{ width: 472 }}>
-        <TabContext value={currentTab}>
-          <Box sx={{ borderBottom: 1, borderColor: '#eaecef' }}>
-            <TabList
-              variant="fullWidth"
-              onChange={handleTabChange}
-              aria-label="connection type"
-            >
-              <Tab label="Smart Wallet" value={Tabs.SMART} />
-              <Tab label="Solo Wallet" value={Tabs.SOLO} />
-            </TabList>
-          </Box>
-          <TabPanel value={Tabs.SMART}>{smartWalletConfigForm}</TabPanel>
-          <TabPanel value={Tabs.SOLO}>{soloWalletConfigForm}</TabPanel>
-        </TabContext>
-      </DialogContent>
+      <DialogContent>{smartWalletConfigForm}</DialogContent>
       <DialogActions>
         <Button color="cancel" onClick={onClose}>
           Cancel
@@ -387,9 +224,7 @@ const ConnectionSettingsDialog = ({
               config.smartConnectionMethod !== SmartConnectionMethod.KEPLR)
           }
         >
-          {currentTab === Tabs.SMART
-            ? 'Connect Smart Wallet'
-            : 'Connect Solo Wallet'}
+          Connect
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/packages/wallet/ui/src/contexts/Provider.jsx b/packages/wallet/ui/src/contexts/Provider.jsx
index 5d50d3a57bb..47cce6a017a 100644
--- a/packages/wallet/ui/src/contexts/Provider.jsx
+++ b/packages/wallet/ui/src/contexts/Provider.jsx
@@ -1,14 +1,13 @@
+// @ts-check
 /* eslint-disable react/display-name */
 import { observeIterator } from '@agoric/notifier';
 import { E } from '@endo/far';
-import { useEffect, useState, useReducer } from 'react';
+import React, { useEffect, useState, useReducer } from 'react';
 import { SigningStargateClient } from '@cosmjs/stargate';
 import { Random } from '@cosmjs/crypto';
-
 import { ApplicationContext, ConnectionStatus } from './Application';
 
 import {
-  ConnectionConfigType,
   DEFAULT_CONNECTION_CONFIGS,
   SmartConnectionMethod,
 } from '../util/connections';
@@ -134,6 +133,7 @@ const Provider = ({ children }) => {
   const [backendErrorHandler, setBackendErrorHandler] = useState(null);
   const [previewEnabled, setPreviewEnabled] = useState(false);
   // expose for development
+  // @ts-expect-error window keys
   window.setPreviewEnabled = setPreviewEnabled;
 
   const RESTORED_CONNECTION_CONFIGS = [...DEFAULT_CONNECTION_CONFIGS];
@@ -162,6 +162,7 @@ const Provider = ({ children }) => {
    * NOTE: relies on ambient window.fetch, window.keplr, Random.getBytes
    */
   const tryKeplrConnect = async () => {
+    // @ts-expect-error window keys
     const { keplr, fetch } = window;
     assert(fetch, 'Missing window.fetch');
     assert(keplr, 'Missing window.keplr');
@@ -188,6 +189,7 @@ const Provider = ({ children }) => {
       }),
     ]);
     setKeplrConnection({
+      // @ts-expect-error state typed as null
       address: accounts[0]?.address,
       signers: { interactiveSigner, backgroundSigner },
     });
@@ -273,6 +275,7 @@ const Provider = ({ children }) => {
         throw e;
       }
     };
+    // @ts-expect-error backend may be null
     setSchemaActions(E.get(backend).actions);
     for (const [prop, setter] of backendSetters.entries()) {
       const iterator = E.get(backend)[prop];
@@ -287,6 +290,7 @@ const Provider = ({ children }) => {
       }).catch(rethrowIfNotCancelled);
     }
 
+    // @ts-expect-error backend may be null
     const issuerSuggestionsNotifier = E.get(backend).issuerSuggestions;
     observeIterator(issuerSuggestionsNotifier, {
       fail: rethrowIfNotCancelled,
@@ -350,14 +354,11 @@ const Provider = ({ children }) => {
         return;
       }
       const WalletConnection = mod.default;
+      // @ts-expect-error state typed as null
       setConnectionComponent(<WalletConnection />);
       attempts = 0;
     };
-    if (connectionConfig.type === ConnectionConfigType.SMART) {
-      importer = () => import('../components/SmartWalletConnection');
-    } else {
-      importer = () => import('../components/WalletConnection');
-    }
+    importer = () => import('../components/SmartWalletConnection');
     connect().catch(retry);
     return () => {
       outdated = true;
diff --git a/packages/wallet/ui/src/util/connections.js b/packages/wallet/ui/src/util/connections.js
index 6bf11e4b738..6cfaa66d5fd 100644
--- a/packages/wallet/ui/src/util/connections.js
+++ b/packages/wallet/ui/src/util/connections.js
@@ -1,11 +1,6 @@
 // @ts-check
 /* global process */
 
-export const ConnectionConfigType = {
-  SOLO: 'solo',
-  SMART: 'smart',
-};
-
 export const SmartConnectionMethod = {
   READ_ONLY: 'readOnly',
   KEPLR: 'keplr',
@@ -13,27 +8,19 @@ export const SmartConnectionMethod = {
 
 const DEFAULT_CONNECTION_CONFIGS = [
   {
-    type: ConnectionConfigType.SMART,
     href: 'http://localhost:8000/wallet/network-config',
   },
   {
-    type: ConnectionConfigType.SMART,
     href: 'https://devnet.agoric.net/network-config',
   },
   {
-    type: ConnectionConfigType.SMART,
     href: 'https://testnet.agoric.net/network-config',
   },
-  {
-    type: ConnectionConfigType.SOLO,
-    href: 'http://localhost:8000',
-  },
 ];
 
 // TODO: Make mainnet unconditional.
 if (process.env.NODE_ENV === 'development') {
   DEFAULT_CONNECTION_CONFIGS.push({
-    type: ConnectionConfigType.SMART,
     href: 'https://main.agoric.net/network-config',
   });
 }