Skip to content

Commit

Permalink
refactor(wallet-ui)!: remove Solo wallet support
Browse files Browse the repository at this point in the history
  • Loading branch information
@turadg
turadg committed Sep 4, 2022
1 parent fedf049 commit d952e56
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 215 deletions.
223 changes: 29 additions & 194 deletions packages/wallet/ui/src/components/ConnectionSettingsDialog.jsx
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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());

Expand All @@ -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(
Expand Down Expand Up @@ -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,
}))
Expand Down Expand Up @@ -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,
Expand All @@ -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,
}));
Expand All @@ -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
Expand All @@ -387,9 +224,7 @@ const ConnectionSettingsDialog = ({
config.smartConnectionMethod !== SmartConnectionMethod.KEPLR)
}
>
{currentTab === Tabs.SMART
? 'Connect Smart Wallet'
: 'Connect Solo Wallet'}
Connect
</Button>
</DialogActions>
</Dialog>
Expand Down
17 changes: 9 additions & 8 deletions packages/wallet/ui/src/contexts/Provider.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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');
Expand All @@ -188,6 +189,7 @@ const Provider = ({ children }) => {
}),
]);
setKeplrConnection({
// @ts-expect-error state typed as null
address: accounts[0]?.address,
signers: { interactiveSigner, backgroundSigner },
});
Expand Down Expand Up @@ -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];
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit d952e56

Please sign in to comment.