package.json

@@ -18,61 +18,61 @@
     "fix": "prettier ./src -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@nanostores/react": "^0.2.0",
-    "@polkadot/extension-base": "^0.43.1",
-    "@polkadot/extension-chains": "0.43.1",
-    "@polkadot/extension-inject": "^0.43.1",
-    "@polkadot/react-identicon": "^2.0.1",
-    "@polkadot/react-qr": "^2.0.1",
+    "@babel/runtime": "^7.19.4",
+    "@nanostores/react": "^0.4.0",
+    "@polkadot/extension-base": "^0.44.6",
+    "@polkadot/extension-chains": "0.44.6",
+    "@polkadot/extension-inject": "^0.44.6",
+    "@polkadot/react-identicon": "^2.9.11",
+    "@polkadot/react-qr": "^2.9.11",
     "lodash.debounce": "^4.0.8",
-    "nanostores": "^0.5.12",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "nanostores": "^0.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@lavamoat/allow-scripts": "^2.0.2",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@lavamoat/allow-scripts": "^2.0.3",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
-    "@types/chrome": "^0.0.181",
+    "@types/chrome": "^0.0.198",
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "autoprefixer": "^10.4.4",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
+    "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
     "buffer": "^6.0.3",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
-    "eslint": "^8.13.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.4.12",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.2",
+    "postcss": "^8.4.18",
+    "postcss-loader": "^7.0.1",
+    "prettier": "^2.7.1",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.7.1",
+    "stylelint": "^14.14.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^7.0.0",
-    "tailwindcss": "^3.0.24",
+    "stylelint-config-recommended": "^9.0.0",
+    "tailwindcss": "^3.1.8",
     "ts-prune": "^0.10.3",
-    "typescript": "^4.6.3",
+    "typescript": "^4.8.4",
     "url-loader": "^4.1.1",
-    "web-ext": "^6.8.0",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
+    "web-ext": "^7.3.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
     "webpack-extension-manifest-plugin": "^0.8.0"
   },
   "resolutions": {

src/messaging/uiActions.ts

@@ -16,8 +16,11 @@ export function forgetAccount(address: string): Promise<boolean> {
   return sendUIMessage('pri(accounts.forget)', { address })
 }
 
-export function approveAuthRequest(id: string): Promise<boolean> {
-  return sendUIMessage('pri(authorize.approve)', { id })
+export function approveAuthRequest(
+  id: string,
+  authorizedAccounts: string[]
+): Promise<boolean> {
+  return sendUIMessage('pri(authorize.approve)', { id, authorizedAccounts })
 }
 
 export function approveMetaRequest(id: string): Promise<boolean> {
@@ -47,8 +50,8 @@ export function createAccountExternal(
   })
 }
 
-export function rejectAuthRequest(id: string): Promise<boolean> {
-  return sendUIMessage('pri(authorize.reject)', { id })
+export function deleteAuthRequest(id: string): Promise<void> {
+  return sendUIMessage('pri(authorize.delete.request)', id)
 }
 
 export function rejectMetaRequest(id: string): Promise<boolean> {

src/stores/accounts.ts

@@ -19,3 +19,6 @@ export const accountNamesByAddressStore = computed(accountsStore, (list) =>
   }, {} as Record<string, string | undefined>)
 )
 export const orderedAccountsStore = computed(accountsStore, orderAccounts)
+export const addressesStore = computed(accountsStore, (accounts) =>
+  accounts.map((a) => a.address)
+)

src/stores/router.ts

@@ -10,7 +10,7 @@ type Page = {
   param: string
 }
 
-export const pageStore = atom<Page>()
+export const pageStore = atom<Page | undefined>()
 
 function parse() {
   const path = getPath()
@@ -30,7 +30,10 @@ type Route = 'auth' | 'meta' | 'sign' | 'import' | 'phishing' | 'accounts'
 
 export const routeStore = computed(
   [pageStore, authRequestsStore, metaRequestsStore, signRequestsStore],
-  ({ path }, authRequests, metaRequests, signRequests) => {
+  (page, authRequests, metaRequests, signRequests) => {
+    if (!page) return
+
+    const { path } = page
     if (exact(path, '') && authRequests?.length > 0) return 'auth'
     if (exact(path, '') && metaRequests?.length > 0) return 'meta'
     if (exact(path, '') && signRequests?.length > 0) return 'sign'

src/ui/requests/AuthorizeRequest.tsx

+import { useStore } from '@nanostores/react'
 import { RequestAuthorizeTab } from '@polkadot/extension-base/background/types'
 import React from 'react'
-import { Actions } from '../components/Actions'
-import { Button } from '../components/Button'
 import {
   approveAuthRequest,
-  rejectAuthRequest,
+  deleteAuthRequest,
 } from '../../messaging/uiActions'
+import { addressesStore } from '../../stores/accounts'
+import { Actions } from '../components/Actions'
+import { Button } from '../components/Button'
 import { H1 } from '../components/H1'
 
 type Props = {
@@ -15,8 +17,11 @@ type Props = {
 }
 
 export const AuthorizeRequest: React.FC<Props> = ({ authId, request, url }) => {
-  const onApprove = () => approveAuthRequest(authId).catch(console.error)
-  const onReject = () => rejectAuthRequest(authId).catch(console.error)
+  const addresses = useStore(addressesStore)
+
+  const onApprove = () =>
+    approveAuthRequest(authId, addresses).catch(console.error)
+  const onCancel = () => deleteAuthRequest(authId).catch(console.error)
 
   return (
     <div>
@@ -36,8 +41,8 @@ export const AuthorizeRequest: React.FC<Props> = ({ authId, request, url }) => {
       </p>
       <Actions>
         <Button onClick={onApprove}>Yes, allow this application access</Button>
-        <Button isSecondary onClick={onReject}>
-          Reject
+        <Button isSecondary onClick={onCancel}>
+          Ask again later
         </Button>
       </Actions>
     </div>

src/ui/security/PhishingDetected.tsx

@@ -4,7 +4,8 @@ import { pageStore } from '../../stores/router'
 import { H1 } from '../components/H1'
 
 export const PhishingDetected = () => {
-  const { param: website } = useStore(pageStore)
+  const page = useStore(pageStore)
+  const { param: website = '' } = page || {}
   const decodedWebsite = decodeURIComponent(website)
 
   return (