From 5b97ca0f04f132008b53a020fc754c3821839327 Mon Sep 17 00:00:00 2001 From: KillariDev Date: Fri, 13 Dec 2024 12:00:23 +0200 Subject: [PATCH] add rename to website access and fix renaming --- app/ts/AddressBook.tsx | 21 ++- app/ts/components/App.tsx | 85 +++++++----- app/ts/components/pages/AddNewAddress.tsx | 17 ++- .../components/pages/ConfirmTransaction.tsx | 23 +--- app/ts/components/pages/Home.tsx | 4 +- app/ts/components/pages/InterceptorAccess.tsx | 36 +++-- .../pages/InterceptorAccessList.tsx | 12 +- app/ts/components/pages/WebsiteAccess.tsx | 128 ++++++++++++------ app/ts/types/user-interface-types.ts | 10 +- app/ts/types/websiteAccessTypes.ts | 1 - 10 files changed, 192 insertions(+), 145 deletions(-) diff --git a/app/ts/AddressBook.tsx b/app/ts/AddressBook.tsx index 8ff582c9..f52cb2e9 100644 --- a/app/ts/AddressBook.tsx +++ b/app/ts/AddressBook.tsx @@ -11,12 +11,12 @@ import { AddressBookEntries, AddressBookEntry } from './types/addressBookTypes.j import { ModifyAddressWindowState } from './types/visualizer-types.js' import { XMarkIcon } from './components/subcomponents/icons.js' import { DynamicScroller } from './components/subcomponents/DynamicScroller.js' -import { useComputed, useSignal, useSignalEffect } from '@preact/signals' +import { Signal, useComputed, useSignal, useSignalEffect } from '@preact/signals' import { ChainEntry, RpcEntries } from './types/rpc.js' import { ChainSelector } from './components/subcomponents/ChainSelector.js' type Modals = { page: 'noModal' } - | { page: 'addNewAddress', state: ModifyAddressWindowState } + | { page: 'addNewAddress', state: Signal } | { page: 'confirmaddressBookEntryToBeRemoved', addressBookEntry: AddressBookEntry } const filterDefs = { @@ -183,7 +183,6 @@ export function AddressBook() { const rpcEntries = useSignal([]) const viewFilter = useSignal({ activeFilter: 'My Active Addresses', searchString: '', chain: undefined }) const modalState = useSignal({ page: 'noModal' }) - const modifyAddressSignal = useComputed(() => modalState.value.page === 'addNewAddress' ? modalState.value.state : undefined) function sendQuery() { const filterValue = viewFilter.value if (filterValue.chain === undefined) return @@ -265,7 +264,7 @@ export function AddressBook() { } } - modalState.value = { page: 'addNewAddress', state: { + modalState.value = { page: 'addNewAddress', state: new Signal({ windowStateId: 'AddressBookAdd', errorState: undefined, incompleteAddressBookEntry: { @@ -283,12 +282,12 @@ export function AddressBook() { declarativeNetRequestBlockMode: undefined, chainId: activeChain.peek()?.chainId || 1n, } - } } + }) } return } function renameAddressCallBack(entry: AddressBookEntry) { - modalState.value = { page: 'addNewAddress', state: { + modalState.value = { page: 'addNewAddress', state: new Signal({ windowStateId: 'AddressBookRename', errorState: undefined, incompleteAddressBookEntry: { @@ -304,7 +303,7 @@ export function AddressBook() { address: checksummedAddress(entry.address), chainId: entry.chainId || 1n, } - } } + }) } return } @@ -367,17 +366,13 @@ export function AddressBook() {
- { modifyAddressSignal.value !== undefined ? + { modalState.value.page === 'addNewAddress' ? { modalState.value = { page: 'noModal' } } } activeAddress = { undefined } rpcEntries = { rpcEntries } - modifyStateCallBack = { (newState: ModifyAddressWindowState) => { - if (modalState.value.page !== 'addNewAddress') return - modalState.value = { page: modalState.value.page, state: newState } - } } /> : <> } { modalState.value.page === 'confirmaddressBookEntryToBeRemoved' ? diff --git a/app/ts/components/App.tsx b/app/ts/components/App.tsx index bf340264..d720072c 100644 --- a/app/ts/components/App.tsx +++ b/app/ts/components/App.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'preact/hooks' import { defaultActiveAddresses } from '../background/settings.js' -import { SimulatedAndVisualizedTransaction, SimulationAndVisualisationResults, SimulationState, TokenPriceEstimate, SimulationUpdatingState, SimulationResultState, NamedTokenId, ModifyAddressWindowState } from '../types/visualizer-types.js' +import { SimulatedAndVisualizedTransaction, SimulationAndVisualisationResults, SimulationState, TokenPriceEstimate, SimulationUpdatingState, SimulationResultState, NamedTokenId, ModifyAddressWindowState, EditEnsNamedHashWindowState } from '../types/visualizer-types.js' import { ChangeActiveAddress } from './pages/ChangeActiveAddress.js' import { Home } from './pages/Home.js' import { RpcConnectionStatus, TabIconDetails, TabState } from '../types/user-interface-types.js' @@ -18,7 +18,6 @@ import { EthereumAddress, EthereumBytes32 } from '../types/wire-types.js' import { checksummedAddress } from '../utils/bigint.js' import { AddressBookEntry, AddressBookEntries } from '../types/addressBookTypes.js' import { WebsiteAccessArray } from '../types/websiteAccessTypes.js' -import { Page } from '../types/exportedSettingsTypes.js' import { VisualizedPersonalSignRequest } from '../types/personal-message-definitions.js' import { RpcEntries, RpcEntry, RpcNetwork } from '../types/rpc.js' import { ErrorComponent, UnexpectedError } from './subcomponents/Error.js' @@ -27,7 +26,7 @@ import { SomeTimeAgo } from './subcomponents/SomeTimeAgo.js' import { noNewBlockForOverTwoMins } from '../background/iconHandler.js' import { humanReadableDate } from './ui-utils.js' import { EditEnsLabelHash } from './pages/EditEnsLabelHash.js' -import { ReadonlySignal, Signal, useComputed, useSignal } from '@preact/signals' +import { Signal, useSignal } from '@preact/signals' type ProviderErrorsParam = { tabState: TabState | undefined @@ -62,8 +61,13 @@ export function NetworkErrors({ rpcConnectionStatus } : NetworkErrorParams) { } +type Page = { page: 'Home' | 'ChangeActiveAddress' | 'AccessList' | 'Settings' | 'Unknown' } + | { page: 'EditEnsNamedHash', state: EditEnsNamedHashWindowState } + | { page: 'ModifyAddress' | 'AddNewAddress', state: Signal } + | { page: 'ChangeActiveAddress' } + export function App() { - const appPage = useSignal({ page: 'Home' }) + const appPage = useSignal({ page: 'Unknown' }) const [makeMeRich, setMakeMeRich] = useState(false) const [activeAddresses, setActiveAddresses] = useState(defaultActiveAddresses) const [activeSimulationAddress, setActiveSimulationAddress] = useState(undefined) @@ -176,7 +180,13 @@ export function App() { }) } const updateHomePageSettings = (settings: Settings, updateQuery: boolean) => { - if (updateQuery) appPage.value = settings.openedPage + if (updateQuery && appPage.value.page === 'Unknown') { + if (settings.openedPage.page === 'AddNewAddress' || settings.openedPage.page === 'ModifyAddress') { + appPage.value = { ...settings.openedPage, state: new Signal(settings.openedPage.state) } + } else { + appPage.value = settings.openedPage + } + } setSimulationMode(settings.simulationMode) rpcNetwork.value = settings.activeRpcNetwork setActiveSimulationAddress(settings.activeSimulationAddress) @@ -217,13 +227,20 @@ export function App() { useEffect(() => { sendPopupMessageToBackgroundPage({ method: 'popup_refreshHomeData' }) }, []) - function setAndSaveAppPage(page: Page) { - appPage.value = page - sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: page }) + function goHome() { + const newPage = { page: 'Home' } as const + appPage.value = newPage + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) + } + + function changeActiveAddress() { + const newPage = { page: 'ChangeActiveAddress' } as const + appPage.value = newPage + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) } async function addressPaste(address: string) { - if (appPage.value.page === 'AddNewAddress') return + if (appPage.value !== undefined && appPage.value.page === 'AddNewAddress') return const trimmed = address.trim() if (!ethers.isAddress(trimmed)) return @@ -236,7 +253,7 @@ export function App() { // address not found, let's promt user to create it const addressString = ethers.getAddress(trimmed) - setAndSaveAppPage({ page: 'AddNewAddress', state: { + const newPage = { page: 'AddNewAddress', state: { windowStateId: 'appAddressPaste', errorState: undefined, incompleteAddressBookEntry: { @@ -254,11 +271,13 @@ export function App() { declarativeNetRequestBlockMode: undefined, chainId: rpcConnectionStatus.peek()?.rpcNetwork.chainId || 1n, } - } }) + } } as const + appPage.value = { page: 'AddNewAddress', state: new Signal(newPage.state) } + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) } function renameAddressCallBack(entry: AddressBookEntry) { - setAndSaveAppPage({ page: 'ModifyAddress', state: { + const newPage = { page: 'ModifyAddress', state: { windowStateId: 'appRename', errorState: undefined, incompleteAddressBookEntry: { @@ -274,11 +293,13 @@ export function App() { ...entry, address: checksummedAddress(entry.address), } - } }) + } } as const + appPage.value = { page: 'ModifyAddress', state: new Signal(newPage.state) } + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) } function addNewAddress() { - setAndSaveAppPage({ page: 'AddNewAddress', state: { + const newPage = { page: 'AddNewAddress', state: { windowStateId: 'appNewAddress', errorState: undefined, incompleteAddressBookEntry: { @@ -295,12 +316,16 @@ export function App() { useAsActiveAddress: true, declarativeNetRequestBlockMode: undefined, chainId: rpcConnectionStatus.peek()?.rpcNetwork.chainId || 1n, - } - } }) + }} + } as const + appPage.value = { page: 'AddNewAddress', state: new Signal(newPage.state) } + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) } function editEnsNamedHashCallBack(type: 'nameHash' | 'labelHash', nameHash: EthereumBytes32, name: string | undefined) { - setAndSaveAppPage({ page: 'EditEnsNamedHash', state: { type, nameHash, name } }) + const newPage = { page: 'EditEnsNamedHash', state: { type, nameHash, name } } as const + appPage.value = newPage + sendPopupMessageToBackgroundPage({ method: 'popup_changePage', data: newPage }) } async function openWebsiteAccess() { @@ -319,13 +344,11 @@ export function App() { setUnexpectedError(undefined) await sendPopupMessageToBackgroundPage({ method: 'popup_clearUnexpectedError' }) } - const modifyAddressSignal: ReadonlySignal = useComputed(() => appPage.value.page === 'AddNewAddress' || appPage.value.page === 'ModifyAddress' ? appPage.value.state : undefined) - return (
- -
+ +
{ !isSettingsLoaded ? <> : <>
) } -const AddressAccessList = ({ websiteAccess }: { websiteAccess: Signal }) => { +const AddressAccessList = ({ websiteAccess, renameAddressCallBack }: { websiteAccess: Signal, renameAddressCallBack: RenameAddressCallBack }) => { const access = websiteAccess.value const website = useComputed(() => websiteAccess.value.website) @@ -318,13 +376,13 @@ const AddressAccessList = ({ websiteAccess }: { websiteAccess: Signal

Configure website access to these address(es).

- { access.addressAccess.map(addressAcces => ) } + { access.addressAccess.map(addressAcces => ) }
) } -const AddressAccessCard = ({ website, addressAccess }: { website: Signal, addressAccess: WebsiteAddressAccess }) => { +const AddressAccessCard = ({ website, addressAccess, renameAddressCallBack }: { website: Signal, addressAccess: WebsiteAddressAccess, renameAddressCallBack: RenameAddressCallBack }) => { const { addressAccessMetadata } = useWebsiteAccess() const setAddressAccess = (event: Event) => { @@ -332,11 +390,6 @@ const AddressAccessCard = ({ website, addressAccess }: { website: Signal { - console.log('new address', newAddress) - // TODO: Implement address editing https://github.com/DarkFlorist/TheInterceptor/issues/1131 - } - const addressBookEntry = useOptionalComputed(() => addressAccessMetadata.value.find(entry => entry.address === addressAccess.address)) if (addressBookEntry.deepValue === undefined) return <> @@ -372,7 +425,6 @@ const RemoveAddressConfirmation = ({ website, addressBookEntry }: { addressBookE Cancel Confirm
- ) diff --git a/app/ts/types/user-interface-types.ts b/app/ts/types/user-interface-types.ts index f5dd40ff..cbe791ef 100644 --- a/app/ts/types/user-interface-types.ts +++ b/app/ts/types/user-interface-types.ts @@ -5,7 +5,6 @@ import { SimulatedAndVisualizedTransaction, SimulationAndVisualisationResults, S import { IdentifiedSwapWithMetadata } from '../components/simulationExplaining/SwapTransactions.js' import { InterceptedRequest, WebsiteSocket } from '../utils/requests.js' import { AddressBookEntries, AddressBookEntry } from './addressBookTypes.js' -import { Page } from './exportedSettingsTypes.js' import { PopupOrTabId, Website, WebsiteAccessArray } from './websiteAccessTypes.js' import { SignerName } from './signerTypes.js' import { ICON_ACCESS_DENIED, ICON_ACCESS_DENIED_WITH_SHIELD, ICON_ACTIVE, ICON_ACTIVE_WITH_SHIELD, ICON_INTERCEPTOR_DISABLED, ICON_NOT_ACTIVE, ICON_NOT_ACTIVE_WITH_SHIELD, ICON_SIGNING, ICON_SIGNING_NOT_SUPPORTED, ICON_SIGNING_NOT_SUPPORTED_WITH_SHIELD, ICON_SIGNING_WITH_SHIELD, ICON_SIMULATING, ICON_SIMULATING_WITH_SHIELD } from '../utils/constants.js' @@ -13,10 +12,10 @@ import { CodeMessageError, RpcEntries, RpcEntry, RpcNetwork } from './rpc.js' import { TransactionOrMessageIdentifier } from './interceptor-messages.js' import { EditEnsNamedHashCallBack } from '../components/subcomponents/ens.js' import { EnrichedEthereumEventWithMetadata } from './EnrichedEthereumData.js' -import { ReadonlySignal, Signal } from '@preact/signals' +import { Signal } from '@preact/signals' export type InterceptorAccessListParams = { - setAndSaveAppPage: (page: Page) => void, + goHome: () => void, setWebsiteAccess: Dispatch>, websiteAccess: WebsiteAccessArray | undefined, websiteAccessAddressMetadata: AddressBookEntries, @@ -26,14 +25,13 @@ export type InterceptorAccessListParams = { export type AddAddressParam = { close: () => void setActiveAddressAndInformAboutIt: ((address: bigint | 'signer') => Promise) | undefined - modifyAddressWindowState: ReadonlySignal - modifyStateCallBack: (newState: ModifyAddressWindowState) => void + modifyAddressWindowState: Signal activeAddress: bigint | undefined rpcEntries: Signal } export type HomeParams = { - setAndSaveAppPage: (page: Page) => void, + changeActiveAddress: () => void, makeMeRich: boolean, activeAddresses: AddressBookEntries, tabState: TabState | undefined, diff --git a/app/ts/types/websiteAccessTypes.ts b/app/ts/types/websiteAccessTypes.ts index 17e308b6..9d104ac9 100644 --- a/app/ts/types/websiteAccessTypes.ts +++ b/app/ts/types/websiteAccessTypes.ts @@ -24,7 +24,6 @@ export const WebsiteAccess = funtypes.Intersect( access: funtypes.Boolean, interceptorDisabled: funtypes.Boolean, declarativeNetRequestBlockMode: funtypes.Union(funtypes.Literal('block-all'), funtypes.Literal('disabled')) - }) )