Merge pull request #56 from alephium/minor-fixes

Minor fixes

packages/dapp/src/services/wallet.service.ts

@@ -8,7 +8,7 @@ export const silentConnectWallet = async (
   if (alephium === undefined) {
     return undefined
   }
-  return alephium?.enableIfConnected({ onDisconnected, networkId: 'devnet', chainGroup: 0 })
+  return alephium?.enableIfConnected({ onDisconnected, networkId: 'devnet' })
     .catch((error: any) => {
       console.error(error)
       return undefined
@@ -22,7 +22,7 @@ export const connectWallet = async (
   if (alephium === undefined) {
     return undefined
   }
-  return alephium?.enable({ onDisconnected, networkId: 'devnet', chainGroup: 0 })
+  return alephium?.enable({ onDisconnected, networkId: 'devnet' })
     .catch((error: any) => {
       console.error(error)
       throw undefined

packages/extension/src/background/wallet.ts

@@ -41,7 +41,7 @@ import { BrowserStorage, walletEncrypt, walletOpen } from './utils/walletStore'
 const isDev = process.env.NODE_ENV === "development"
 
 const CURRENT_BACKUP_VERSION = 1
-export const SESSION_DURATION = isDev ? 24 * 60 * 60 : 30 * 60 // 30 mins in prod, 24 hours in dev
+export const SESSION_DURATION = isDev ? 24 * 60 : 30 // 30 mins in prod, 24 hours in dev
 
 export const PROXY_CONTRACT_CLASS_HASHES = [
   "0x25ec026985a3bf9d0cc1fe17326b245dfdc3ff89b8fde106542a3ea56c5a918",
@@ -359,21 +359,23 @@ export class Wallet {
     }
   }
 
+  private sessionTimeoutListener = (alarm: browser.alarms.Alarm) => {
+    if (alarm.name === "session_timeout") {
+      return this.lock()
+    }
+  }
+
   private async setSession(secret: string, password: string) {
     await this.sessionStore.set({ secret, password })
 
-    browser.alarms.onAlarm.addListener(async (alarm) => {
-      if (alarm.name === "session_timeout") {
-        return this.lock()
-      }
-    })
-
-    const alarm = await browser.alarms.get("session_timeout")
-    if (alarm?.name !== "session_timeout") {
-      browser.alarms.create("session_timeout", {
-        delayInMinutes: SESSION_DURATION,
-      })
+    if (!browser.alarms.onAlarm.hasListener(this.sessionTimeoutListener)) {
+      browser.alarms.onAlarm.addListener(this.sessionTimeoutListener)
     }
+
+    await browser.alarms.clear("session_timeout")
+    browser.alarms.create("session_timeout", {
+      delayInMinutes: SESSION_DURATION,
+    })
   }
 
   public async importBackup(backup: string): Promise<void> {

packages/extension/src/shared/addressBook/schema.ts

@@ -12,7 +12,6 @@ export const addressBookContactNoIdSchema: yup.Schema<AddressBookContactNoId> =
       name: yup.string().required("Contact Name is required"),
       networkId: yup.string().required("Contact Network is required"),
       address: addressSchema,
-      keyType: yup.mixed<KeyType>().oneOf(['default', 'bip340-schnorr']).required("Contact Key Type is required")
     })
 
 export const addressBookContactSchema: yup.Schema<AddressBookContact> = yup
@@ -23,5 +22,4 @@ export const addressBookContactSchema: yup.Schema<AddressBookContact> = yup
     name: yup.string().required("Contact Name is required"),
     networkId: yup.string().required("Contact Network is required"),
     address: addressSchema,
-    keyType: yup.mixed<KeyType>().oneOf(['default', 'bip340-schnorr']).required("Contact Key Type is required")
   })

packages/extension/src/shared/addressBook/type.ts

@@ -1,10 +1,7 @@
-import { KeyType } from "@alephium/web3"
-
 export interface AddressBookContactNoId {
   name: string
   networkId: string
   address: string
-  keyType: KeyType
 }
 
 export interface AddressBookContact extends AddressBookContactNoId {

packages/extension/src/shared/network/defaults.ts

@@ -29,4 +29,4 @@ export const defaultNetworks: Network[] = [
 
 export const defaultNetworkIds = defaultNetworks.map(network => network.id)
 
-export const defaultNetwork = defaultNetworks[2]
+export const defaultNetwork = defaultNetworks[0]

packages/extension/src/ui/features/accountTokens/TokenListItem.tsx

@@ -43,7 +43,7 @@ export const TokenListItem: FC<TokenListItemProps> = ({
   const isNoCurrencyVariant = variant === "no-currency"
   return (
     <CustomButtonCell {...rest}>
-      <TokenIcon size={9} url={logoURI} name={name} />
+      <TokenIcon size={8} url={logoURI} name={name} />
       <Flex
         flexGrow={1}
         alignItems="center"
@@ -52,7 +52,7 @@ export const TokenListItem: FC<TokenListItemProps> = ({
         overflow={"hidden"}
       >
         <Flex direction={"column"} overflow="hidden">
-          <H6 overflow="hidden" textOverflow={"ellipsis"}>
+          <H6 overflow="hidden" textOverflow={"ellipsis"} color="gray.100">
             {name === "Ether" ? "Ethereum" : name}
           </H6>
           {!isNoCurrencyVariant && (

packages/extension/src/ui/features/accountTokens/tokens.state.ts

@@ -178,11 +178,12 @@ export const useTokens = (
 
       for (const tokenId of tokenIds) {
         if (allTokens.findIndex((t) => t.id == tokenId) === -1) {
+          const symbol = networkId === 'devnet' ? tokenId.replace(/[^a-zA-Z]/gi, '').slice(0, 4).toUpperCase() : ""
           const token = {
             id: tokenId,
             networkId: networkId,
-            name: tokenId.replace(/[^a-zA-Z]/gi, '').slice(0, 4).toUpperCase(),
-            symbol: "",
+            name: `Dev ${symbol}`,
+            symbol: symbol,
             decimals: 0
           }
 
@@ -203,15 +204,19 @@ export const useTokens = (
     },
   )
 
-  const result = knownTokensInNetwork.filter((network) => network.showAlways)
+  const result = knownTokensInNetwork.filter((network) => network.showAlways).map(t => [t, -1] as [Token, number])
   const userTokens: Token[] = data || []
 
   for (const userToken of userTokens) {
-    if (result.findIndex((t) => t.id == userToken.id) === -1) {
-      const found = knownTokensInNetwork.find((token) => token.id == userToken.id)
-      !!found && result.push(found)
+    if (result.findIndex((t) => t[0].id === userToken.id) === -1) {
+      const foundIndex = knownTokensInNetwork.findIndex((token) => token.id == userToken.id)
+      if (foundIndex !== -1) {
+        result.push([knownTokensInNetwork[foundIndex], foundIndex])
+      } else if (account?.networkId === 'devnet') {
+        result.push([userToken, knownTokensInNetwork.length])
+      }
     }
   }
 
-  return result
+  return result.sort((a, b) => a[1] - b[1]).map(tuple => tuple[0])
 }

packages/extension/src/ui/features/accounts/AccountListItem.tsx

@@ -18,7 +18,7 @@ export interface AccountListItemProps extends CustomButtonCellProps {
   accountName: string
   accountAddress: string
   networkId: string
-  keyType: KeyType
+  keyType?: KeyType
   networkName?: string
   deploying?: boolean
   upgrade?: boolean

packages/extension/src/ui/features/accounts/PrettyAccountAddress.tsx

@@ -12,7 +12,7 @@ import { TokenIcon } from "../accountTokens/TokenIcon"
 import { useAccountMetadata } from "./accountMetadata.state"
 import { getNetworkAccountImageUrl } from "./accounts.service"
 
-const getAccountNameForAddress = (
+export const getAccountNameForAddress = (
   accountAddress: string,
   networkId: string,
   accountNames?: Record<string, Record<string, string>>,
@@ -28,7 +28,7 @@ const getAccountNameForAddress = (
   }
 }
 
-const getContactNameForAddress = (
+export const getContactNameForAddress = (
   accountAddress: string,
   networkId: string,
   contacts?: AddressBookContact[],

packages/extension/src/ui/features/actions/ApproveTransactionScreen.tsx

@@ -117,14 +117,10 @@ export const ApproveTransactionScreen: FC<ApproveTransactionScreenProps> = ({
         transaction={transaction}
       />
 
-      {
-        buildResult && !("error" in buildResult) && (
-          <TransactionsList
-            networkId={networkId}
-            transactionReview={buildResult}
-          />
-        )
-      }
+      <TransactionsList
+        networkId={networkId}
+        transactionReview={buildResult}
+      />
       <AccountNetworkInfo account={selectedAccount} />
     </ConfirmScreen >
   )

packages/extension/src/ui/features/actions/connectDapp/ConnectDappScreen.tsx

@@ -1,4 +1,4 @@
-import { groupOfAddress, KeyType } from "@alephium/web3"
+import { KeyType } from "@alephium/web3"
 import { Flex } from "@chakra-ui/react"
 import { L2 } from "@argent/ui"
 import { FC, useCallback, useMemo, useState } from "react"
@@ -206,6 +206,10 @@ export const ConnectDappScreen: FC<ConnectDappProps> = ({
   ...rest
 }) => {
   let initiallySelectedAccount = useSelectedAccount()
+  if (initiallySelectedAccount && !Wallet.checkAccount(initiallySelectedAccount, networkId, keyType, group)) {
+    initiallySelectedAccount = undefined
+  }
+
   const currentNetwork = useCurrentNetwork()
   const visibleAccounts = useAccountsOnNetwork({
     networkId: networkId || currentNetwork.id,
@@ -217,14 +221,8 @@ export const ConnectDappScreen: FC<ConnectDappProps> = ({
   })
   const foundAccount = visibleAccountsForGroup.length > 0
 
-  if (foundAccount) {
-    if (!initiallySelectedAccount) {
-      initiallySelectedAccount = visibleAccountsForGroup[0]
-    }
-
-    if (group !== undefined && groupOfAddress(initiallySelectedAccount.address) !== group) {
-      initiallySelectedAccount = visibleAccountsForGroup[0]
-    }
+  if (foundAccount && !initiallySelectedAccount) {
+    initiallySelectedAccount = visibleAccountsForGroup[0]
   }
 
   const [connectedAccount, setConnectedAccount] = useState<

packages/extension/src/ui/features/actions/transaction/TransactionActions.tsx

@@ -1,4 +1,4 @@
-import { Destination, prettifyAttoAlphAmount } from "@alephium/web3"
+import { Destination, prettifyAttoAlphAmount, prettifyTokenAmount } from "@alephium/web3"
 import { CopyTooltip, P4 } from "@argent/ui"
 import {
   Accordion,
@@ -11,9 +11,15 @@ import {
 } from "@chakra-ui/react"
 import { FC } from "react"
 import { ReviewTransactionResult } from "../../../../shared/actionQueue/types"
+import { AddressBookContact } from "../../../../shared/addressBook"
+import { Token } from "../../../../shared/token/type"
 
 import { entryPointToHumanReadable } from "../../../../shared/transactions"
+import { useAddressBook } from "../../../services/addressBook"
 import { formatTruncatedAddress, formatLongString } from "../../../services/addresses"
+import { useAccountMetadata } from "../../accounts/accountMetadata.state"
+import { getAccountNameForAddress, getContactNameForAddress } from "../../accounts/PrettyAccountAddress"
+import { useTokensInNetwork } from "../../accountTokens/tokens.state"
 
 export interface TransactionActionRow {
   key: string
@@ -24,19 +30,48 @@ export interface TransactionAction {
   details: TransactionActionRow[]
 }
 
-
-function getTokensFromDestination(destination: Destination): TransactionActionRow[] {
+function getTokensFromDestination(destination: Destination, tokensInNetwork: Token[]): TransactionActionRow[] {
   return [{ key: 'ALPH', value: prettifyAttoAlphAmount(destination.attoAlphAmount) ?? '?' },
-    ...(destination.tokens ?? []).map(token => ({ key: token.id, value: token.amount.toString() }))]
+    ...(destination.tokens ?? []).map(token => {
+      const matchedToken = tokensInNetwork.find(t => t.id === token.id)
+      return matchedToken ? { key: matchedToken.symbol, value: prettifyTokenAmount(token.amount, matchedToken.decimals) ?? '???'}
+        : { key: "?? token", value: token.amount.toString() }
+    })]
+}
+
+function prettifyAddressName(address: string, networkId: string, accountNames: Record<string, Record<string, string>>, contacts: AddressBookContact[]): [string, boolean] {
+  const accountName = getAccountNameForAddress(
+    address,
+    networkId,
+    accountNames,
+  )
+  if (accountName) {
+    return [accountName, true]
+  }
+  const contactName = getContactNameForAddress(
+    address,
+    networkId,
+    contacts
+  )
+  if (contactName) {
+    return [contactName, true]
+  }
+
+  return [address, false]
 }
 
-export function extractActions(transaction: ReviewTransactionResult): TransactionAction[] {
+export function useExtractActions(transaction: ReviewTransactionResult, networkId: string, tokensInNetwork: Token[]): TransactionAction[] {
+  const accountNames = useAccountMetadata((x) => x.accountNames)
+  const { contacts } = useAddressBook()
+  let addressName: string
+  let found: boolean
   switch (transaction.type) {
     case 'TRANSFER':
       return transaction.params.destinations.map((destination) => {
+        [addressName, found] = prettifyAddressName(destination.address, networkId, accountNames, contacts)
         return {
-          header: { key: 'Send', value: formatTruncatedAddress(destination.address) },
-          details: [{ key: 'Recipient', value: destination.address }, ...getTokensFromDestination(destination)]
+          header: { key: 'Send', value: found ? '' : formatTruncatedAddress(destination.address) },
+          details: [{ key: 'Recipient', value: addressName }, ...getTokensFromDestination(destination, tokensInNetwork)]
         }
       })
     case 'DEPLOY_CONTRACT':
@@ -85,13 +120,16 @@ export function extractActions(transaction: ReviewTransactionResult): Transactio
 }
 
 export interface TransactionActionsProps {
+  networkId: string
   transaction: ReviewTransactionResult
 }
 
 export const TransactionActions: FC<TransactionActionsProps> = ({
+  networkId,
   transaction
 }) => {
-  const transactionActions = extractActions(transaction)
+  const tokensInNetwork = useTokensInNetwork(networkId)
+  const transactionActions = useExtractActions(transaction, networkId, tokensInNetwork)
   return (
     <Box borderRadius="xl">
       <Box backgroundColor="neutrals.700" px="3" py="2.5" borderTopRadius="xl">
@@ -125,10 +163,10 @@ export const TransactionActions: FC<TransactionActionsProps> = ({
                     justifyContent="space-between"
                     outline="none"
                     px="3"
-                    pb={txIndex !== transactionActions.length - 1 ? "3" : "3.5"}
+                    pb={txIndex !== transactionActions.length - 1 ? "2" : "2.5"}
                     _expanded={{
                       backgroundColor: "neutrals.700",
-                      pb: "3.5",
+                      pb: "1.5",
                     }}
                     disabled={
                       transactionAction.details.length === 0

packages/extension/src/ui/features/actions/transaction/TransactionsList.tsx

@@ -1,18 +1,12 @@
-import { isArray } from "lodash-es"
-import { FC, useMemo } from "react"
-import { Call } from "starknet"
-import { ReviewTransactionResult, TransactionParams } from "../../../../shared/actionQueue/types"
+import { FC } from "react"
+import { ReviewTransactionResult } from "../../../../shared/actionQueue/types"
 
-import { Token } from "../../../../shared/token/type"
 import {
-  ApiTransactionReviewResponse,
   getDisplayWarnAndReasonForTransactionReview,
-  getTransactionReviewHasSwap,
 } from "../../../../shared/transactionReview.service"
 import { WarningIcon } from "../../../components/Icons/WarningIcon"
 import { TransactionActions } from "./TransactionActions"
 import { TransactionBanner } from "./TransactionBanner"
-import { TransactionsListSwap } from "./TransactionsListSwap"
 
 export interface ITransactionsList {
   networkId: string
@@ -22,6 +16,7 @@ export interface ITransactionsList {
 /** Renders one or more transactions with review if available */
 
 export const TransactionsList: FC<ITransactionsList> = ({
+  networkId,
   transactionReview
 }) => {
   const { warn, reason } =
@@ -35,7 +30,7 @@ export const TransactionsList: FC<ITransactionsList> = ({
           message={reason}
         />
       ) : (
-        <TransactionActions transaction={transactionReview} />
+        <TransactionActions networkId={networkId} transaction={transactionReview} />
       )}
     </>
   )

packages/extension/src/ui/features/settings/AddressbookAddOrEditScreen.tsx

@@ -237,7 +237,7 @@ export const AddressbookAddOrEditScreen: FC<AddressbookAddOrEditProps> = ({
                 minRows={3}
                 maxRows={3}
                 spellCheck={false}
-                onlyAddressHex
+                onlyAddressHex={false}
               />
               {errors.address && (
                 <FormErrorAlt>{errors.address.message}</FormErrorAlt>

packages/extension/src/ui/features/settings/AddressbookSettingsScreen.tsx

@@ -97,7 +97,6 @@ export const AddressbookSettingsScreen: FC = () => {
                     key={contact.id}
                     accountAddress={contact.address}
                     networkId={contact.networkId}
-                    keyType={contact.keyType}
                     accountName={contact.name}
                     networkName={networkName}
                     outlined