Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add rename to website access and fix renaming #1229

Merged
merged 2 commits into from
Dec 13, 2024
Merged

add rename to website access and fix renaming #1229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b97ca0
add rename to website access and fix renaming
KillariDev Dec 13, 2024
90dfd69
Merge branch 'main' into add-rename-to-website-access-and-fix-renaming
KillariDev Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 8 additions & 13 deletions app/ts/AddressBook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<ModifyAddressWindowState> }
| { page: 'confirmaddressBookEntryToBeRemoved', addressBookEntry: AddressBookEntry }

const filterDefs = {
Expand Down Expand Up @@ -183,7 +183,6 @@ export function AddressBook() {
const rpcEntries = useSignal<RpcEntries>([])
const viewFilter = useSignal<ViewFilter>({ activeFilter: 'My Active Addresses', searchString: '', chain: undefined })
const modalState = useSignal<Modals>({ page: 'noModal' })
const modifyAddressSignal = useComputed(() => modalState.value.page === 'addNewAddress' ? modalState.value.state : undefined)
function sendQuery() {
const filterValue = viewFilter.value
if (filterValue.chain === undefined) return
Expand Down Expand Up @@ -265,7 +264,7 @@ export function AddressBook() {
}
}

modalState.value = { page: 'addNewAddress', state: {
modalState.value = { page: 'addNewAddress', state: new Signal({
windowStateId: 'AddressBookAdd',
errorState: undefined,
incompleteAddressBookEntry: {
Expand All @@ -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: {
Expand All @@ -304,7 +303,7 @@ export function AddressBook() {
address: checksummedAddress(entry.address),
chainId: entry.chainId || 1n,
}
} }
}) }
return
}

Expand Down Expand Up @@ -367,17 +366,13 @@ export function AddressBook() {
</div>

<div class = { `modal ${ modalState.value.page !== 'noModal' ? 'is-active' : '' }` }>
{ modifyAddressSignal.value !== undefined ?
{ modalState.value.page === 'addNewAddress' ?
<AddNewAddress
setActiveAddressAndInformAboutIt = { undefined }
modifyAddressWindowState = { modifyAddressSignal }
modifyAddressWindowState = { modalState.value.state }
close = { () => { 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' ?
Expand Down
85 changes: 52 additions & 33 deletions app/ts/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -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<ModifyAddressWindowState> }
| { page: 'ChangeActiveAddress' }

export function App() {
const appPage = useSignal<Page>({ page: 'Home' })
const appPage = useSignal<Page>({ page: 'Unknown' })
const [makeMeRich, setMakeMeRich] = useState(false)
const [activeAddresses, setActiveAddresses] = useState<AddressBookEntries>(defaultActiveAddresses)
const [activeSimulationAddress, setActiveSimulationAddress] = useState<bigint | undefined>(undefined)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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() {
Expand All @@ -319,13 +344,11 @@ export function App() {
setUnexpectedError(undefined)
await sendPopupMessageToBackgroundPage({ method: 'popup_clearUnexpectedError' })
}
const modifyAddressSignal: ReadonlySignal<ModifyAddressWindowState | undefined> = useComputed(() => appPage.value.page === 'AddNewAddress' || appPage.value.page === 'ModifyAddress' ? appPage.value.state : undefined)

return (
<main>
<Hint>
<PasteCatcher enabled = { appPage.value.page === 'Home' } onPaste = { addressPaste } />
<div style = { `background-color: var(--bg-color); width: 520px; height: 600px; ${ appPage.value.page !== 'Home' ? 'overflow: hidden;' : 'overflow-y: auto; overflow-x: hidden' }` }>
<PasteCatcher enabled = { appPage.value.page === 'Unknown' || appPage.value.page === 'Home' } onPaste = { addressPaste } />
<div style = { `background-color: var(--bg-color); width: 520px; height: 600px; ${ appPage.value.page !== 'Unknown' && appPage.value.page !== 'Home' ? 'overflow: hidden;' : 'overflow-y: auto; overflow-x: hidden' }` }>
{ !isSettingsLoaded ? <></> : <>
<nav class = 'navbar window-header' role = 'navigation' aria-label = 'main navigation'>
<div class = 'navbar-brand'>
Expand Down Expand Up @@ -353,7 +376,7 @@ export function App() {
useSignersAddressAsActiveAddress = { useSignersAddressAsActiveAddress }
activeSigningAddress = { activeSigningAddress }
activeSimulationAddress = { activeSimulationAddress }
setAndSaveAppPage = { setAndSaveAppPage }
changeActiveAddress = { changeActiveAddress }
makeMeRich = { makeMeRich }
activeAddresses = { activeAddresses }
simulationMode = { simulationMode }
Expand All @@ -369,16 +392,16 @@ export function App() {
interceptorDisabled = { interceptorDisabled }
/>

<div class = { `modal ${ appPage.value.page !== 'Home' ? 'is-active' : ''}` }>
<div class = { `modal ${ appPage.value.page !== 'Home' && appPage.value.page !== 'Unknown' ? 'is-active' : ''}` }>
{ appPage.value.page === 'EditEnsNamedHash' ?
<EditEnsLabelHash
close = { () => setAndSaveAppPage({ page: 'Home' }) }
close = { goHome }
editEnsNamedHashWindowState = { appPage.value.state }
/>
: <></> }
{ appPage.value.page === 'AccessList' ?
<InterceptorAccessList
setAndSaveAppPage = { setAndSaveAppPage }
goHome = { goHome }
setWebsiteAccess = { setWebsiteAccess }
websiteAccess = { websiteAccess }
websiteAccessAddressMetadata = { websiteAccessAddressMetadata }
Expand All @@ -389,24 +412,20 @@ export function App() {
<ChangeActiveAddress
setActiveAddressAndInformAboutIt = { setActiveAddressAndInformAboutIt }
signerAccounts = { tabState?.signerAccounts ?? [] }
close = { () => setAndSaveAppPage({ page: 'Home' }) }
close = { goHome }
activeAddresses = { activeAddresses }
signerName = { tabState?.signerName ?? 'NoSignerDetected' }
renameAddressCallBack = { renameAddressCallBack }
addNewAddress = { addNewAddress }
/>
: <></> }
{ modifyAddressSignal.value !== undefined ?
{ appPage.value.page === 'AddNewAddress' || appPage.value.page === 'ModifyAddress' ?
<AddNewAddress
setActiveAddressAndInformAboutIt = { setActiveAddressAndInformAboutIt }
modifyAddressWindowState = { modifyAddressSignal }
close = { () => setAndSaveAppPage({ page: 'Home' }) }
modifyAddressWindowState = { appPage.value.state }
close = { goHome }
activeAddress = { simulationMode ? activeSimulationAddress : activeSigningAddress }
rpcEntries = { rpcEntries }
modifyStateCallBack = { (newState: ModifyAddressWindowState) => {
if (appPage.value.page !== 'AddNewAddress' && appPage.value.page !== 'ModifyAddress') return
appPage.value = { page: appPage.value.page, state: newState }
} }
/>
: <></> }
</div>
Expand Down
17 changes: 8 additions & 9 deletions app/ts/components/pages/AddNewAddress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ethers } from 'ethers'
import { useEffect, useState } from 'preact/hooks'
import { AddAddressParam } from '../../types/user-interface-types.js'
import { ErrorCheckBox, Notice } from '../subcomponents/Error.js'
import { checksummedAddress, stringToAddress, stringifyJSONWithBigInts } from '../../utils/bigint.js'
import { checksummedAddress, stringToAddress } from '../../utils/bigint.js'
import { sendPopupMessageToBackgroundPage } from '../../background/backgroundUtils.js'
import { AddressIcon } from '../subcomponents/address.js'
import { assertUnreachable, modifyObject } from '../../utils/typescript.js'
Expand Down Expand Up @@ -190,23 +190,24 @@ export function AddNewAddress(param: AddAddressParam) {
if (!maybeParsed.success) return // not a message we are interested in
const parsed = maybeParsed.value
if (parsed.method === 'popup_fetchAbiAndNameFromBlockExplorerReply') {
setCanFetchFromEtherScan(true)
if (param.modifyAddressWindowState.value === undefined || parsed.data.windowStateId !== param.modifyAddressWindowState.value.windowStateId) return
setCanFetchFromEtherScan(true)
if (!parsed.data.success) {
modifyState(modifyObject(param.modifyAddressWindowState.value, { errorState: { blockEditing: false, message: parsed.data.error } }))
param.modifyAddressWindowState.value = modifyObject(param.modifyAddressWindowState.value, { errorState: { blockEditing: false, message: parsed.data.error } })
return
}
if (param.modifyAddressWindowState.value.errorState !== undefined) return
modifyState(modifyObject(param.modifyAddressWindowState.value, { incompleteAddressBookEntry: modifyObject(param.modifyAddressWindowState.value.incompleteAddressBookEntry, { abi: parsed.data.abi, name: param.modifyAddressWindowState.value.incompleteAddressBookEntry.name === undefined ? parsed.data.contractName : param.modifyAddressWindowState.value.incompleteAddressBookEntry.name }) } ))
param.modifyAddressWindowState.value = modifyObject(param.modifyAddressWindowState.value, { incompleteAddressBookEntry: modifyObject(param.modifyAddressWindowState.value.incompleteAddressBookEntry, { abi: parsed.data.abi, name: param.modifyAddressWindowState.value.incompleteAddressBookEntry.name === undefined ? parsed.data.contractName : param.modifyAddressWindowState.value.incompleteAddressBookEntry.name }) } )
return
}
if (parsed.method === 'popup_addOrModifyAddressWindowStateInformation') {
if (param.modifyAddressWindowState.value === undefined) return
if (parsed.data.windowStateId !== param.modifyAddressWindowState.value.windowStateId) return
if (parsed.data.identifiedAddress !== undefined && parsed.data.identifiedAddress.type === 'ERC20' && param.modifyAddressWindowState.value.incompleteAddressBookEntry.type === 'ERC20') {
modifyState(modifyObject(param.modifyAddressWindowState.value, { incompleteAddressBookEntry: { ...param.modifyAddressWindowState.value.incompleteAddressBookEntry, decimals: parsed.data.identifiedAddress.decimals }, errorState: parsed.data.errorState }))
param.modifyAddressWindowState.value = modifyObject(param.modifyAddressWindowState.value, { incompleteAddressBookEntry: { ...param.modifyAddressWindowState.value.incompleteAddressBookEntry, decimals: parsed.data.identifiedAddress.decimals }, errorState: parsed.data.errorState })
} else {
param.modifyAddressWindowState.value = modifyObject(param.modifyAddressWindowState.value, { errorState: parsed.data.errorState })
}
modifyState(modifyObject(param.modifyAddressWindowState.value, { errorState: parsed.data.errorState }))
}
}
browser.runtime.onMessage.addListener(popupMessageListener)
Expand Down Expand Up @@ -300,8 +301,7 @@ export function AddNewAddress(param: AddAddressParam) {

async function modifyState(newState: ModifyAddressWindowState) {
if (newState === undefined) return
if (stringifyJSONWithBigInts(newState) === stringifyJSONWithBigInts(param.modifyAddressWindowState)) return
param.modifyStateCallBack(newState)
param.modifyAddressWindowState.value = newState
try {
await sendPopupMessageToBackgroundPage({ method: 'popup_changeAddOrModifyAddressWindowState', data: { windowStateId: newState.windowStateId, newState } })
} catch(e) {
Expand Down Expand Up @@ -387,7 +387,6 @@ export function AddNewAddress(param: AddAddressParam) {
}
const incompleteAddressBookEntry = useComputed(() => param.modifyAddressWindowState.value?.incompleteAddressBookEntry )
if (incompleteAddressBookEntry.value === undefined) return <></>

return ( <>
<div class = 'modal-background'> </div>
<div class = 'modal-card'>
Expand Down
Loading
Loading