Feat/wallet improvements

assets/locales/en-US.json

@@ -31,7 +31,7 @@
   "TRY_AGAIN": "Try Again",
   "COPY_TO_CLIPBOARD_MESSAGE": "Text copied to clipboard",
   "INVALID_PASSWORD": "Invalid password.",
-  "INVALID_USERNAME": "Invalid username.",
+  "INVALID_USERNAME": "Account on selected network does not exist.",
   "GENERAL_ERROR_MESSAGE": "Couldn't complete request at the moment.",
   "USERNAME_NOT_AVAILABLE": "Username is not available",
   "CANNOT_CHECK_USERNAME": "Cannot check username. Network currently unavailable",
@@ -103,8 +103,9 @@
   "CLEAR_ACTIVITY_DATA_CONFIRMATION": "Do you really want to clear all your wallet data?",
   "SELECT": "Select",
   "SELECT_ADDRESS": "Choose address to send to",
+  "SELECT_ADDRESS_TOKEN": "Choose address to send {tokenName} to",
   "PROCEED": "Proceed",
-  "SENDING_TO": "Sednding to",
+  "SENDING_TO": "Sending to",
   "ENABLE_WALLET_LOCK": "Enable wallet lock",
   "MINUTES": "Minutes",
   "LOCK_INTERVAL": "Lock interval",
@@ -113,5 +114,18 @@
   "IMPORT_TOKEN": "Import Token",
   "IMPORT_TOKEN_INSTRUCTIONS": "Enter contract address to import token",
   "IMPORT_TOKEN_SUCCESS": "Token is successfully imported",
-  "NOT_ENOUGH_BALANCE": "Your current balance is too low for this transaction"
+  "NOT_ENOUGH_BALANCE": "Your current balance is too low for this transaction",
+  "NETWORK_UNAVAILABLE_ERROR": "Network RPC is not reachable.",
+  "ERROR_DESCRIPTION": "Error description",
+  "BLOCK_EXPLORER_URL_LABEL": "Block Explorer URL (Optional)",
+  "TRANSACTION_DETAILS": "Transaction Details",
+  "RECIPIENT": "Recipient",
+  "GAS_CONST": "Gas Cost",
+  "TRANSCTION_HASH": "Transaction hash",
+  "DATA": "Data",
+  "TIME": "Time",
+  "DIALOG_DAPP_ACCOUNT_INFO": "dApp with ID {dappId} asks to access your account information (address and ENS name).\nDo you allow access to your account information?",
+  "ACCOUNT_INFORMATION_ACCESS": "Account Information Access",
+  "TOKEN_IMPORT_ERROR": "Couldn't get token data.",
+  "TRANSACTION_ERROR": "The transaction failed. Click here to see the details."
 }

library/src/constants/api-actions.enum.ts

@@ -3,5 +3,6 @@ export enum ApiActions {
   SIGNER_SIGN_MESSAGE = 'signer.signMessage',
   SEND_TRANSACTION = 'send-transaction',
   GET_USER_BALANCE = 'get-user-balance',
+  GET_USER_INFO = 'get-user-info',
   ECHO = 'echo',
 }

library/src/model/account-info.ts

@@ -0,0 +1,4 @@
+export interface AccountInfo {
+  address: string
+  ensName?: string
+}

library/src/wallet.ts

@@ -1,9 +1,19 @@
 import { ApiActions } from './constants/api-actions.enum'
 import { BlossomMessages } from './messages/blossom-messages'
+import { AccountInfo } from './model/account-info'
 
 export class Wallet {
   constructor(private messages: BlossomMessages) {}
 
+  /**
+   * Returns user's account information, like account address and
+   * ENS name (if available).
+   * @returns AccountInfo object
+   */
+  public getAccountInfo(): Promise<AccountInfo> {
+    return this.messages.sendMessage(ApiActions.GET_USER_INFO)
+  }
+
   /**
    * Returns account balance of current user in wei
    * @returns current balance in wei

src/constants/background-actions.enum.ts

@@ -9,6 +9,7 @@ enum BackgroundAction {
   GENERATE_WALLET = 'generate-wallet',
   OPEN_AUTH_PAGE = 'open-auth-page',
   GET_CURRENT_USER = 'get-current-user',
+  GET_USER_INFO = 'get-user-info',
   GET_LOCAL_ACCOUNTS = 'get-local-accounts',
   GET_BALANCE = 'get-balance',
   GET_USER_BALANCE = 'get-user-balance',

src/constants/dapp-actions.enum.ts

@@ -5,6 +5,7 @@ export const DAPP_ACTIONS: string[] = [
   BackgroundAction.SIGNER_SIGN_MESSAGE,
   BackgroundAction.SEND_TRANSACTION,
   BackgroundAction.GET_USER_BALANCE,
+  BackgroundAction.GET_USER_INFO,
   BackgroundAction.ECHO,
 ]
 
@@ -13,5 +14,6 @@ export const E2E_ACTIONS: string[] = [
   BackgroundAction.SIGNER_SIGN_MESSAGE,
   BackgroundAction.SEND_TRANSACTION,
   BackgroundAction.GET_USER_BALANCE,
+  BackgroundAction.GET_USER_INFO,
   BackgroundAction.ECHO,
 ]

src/constants/networks.ts

@@ -15,10 +15,12 @@ export const networks: Network[] = [
     ...extractNetworkConfig(Environments.SEPOLIA),
     label: 'Sepolia',
     custom: false,
+    blockExplorerUrl: 'https://sepolia.etherscan.io/tx/',
   },
   {
     ...extractNetworkConfig(Environments.GOERLI),
     label: 'Görli',
     custom: false,
+    blockExplorerUrl: 'https://goerli.etherscan.io/tx/',
   },
 ]

src/constants/whitelisted-dapps.ts

@@ -13,3 +13,7 @@ export const whitelistedDapps: Array<{ url: string; dappId: string }> = [
   { url: 'https://fairdrive.dev.fairdatasociety.org/apps/slidezz', dappId: 'slidezz-dev' },
   { url: 'https://fairdrive.fairdatasociety.org/apps/slidezz', dappId: 'slidezz' },
 ]
+
+if (process.env.ENVIRONMENT === 'development') {
+  whitelistedDapps.push({ url: 'http://localhost:3000', dappId: 'fairdrive-local' })
+}

src/listeners/message-listeners/account.listener.ts

@@ -19,7 +19,6 @@ import {
   TokenCheckRequest,
   TokenRequest,
   TokenTransferRequest,
-  Transaction,
 } from '../../model/internal-messages.model'
 import { SessionFdpStorageProvider } from '../../services/fdp-storage/session-fdp-storage.provider'
 import { Dialog } from '../../services/dialog.service'
@@ -42,7 +41,7 @@ const wallet = new WalletService()
 const fdpStorageProvider = new SessionFdpStorageProvider()
 
 function saveTransaction(
-  transaction: Transaction | InternalTransaction,
+  transaction: InternalTransaction,
   transactionContent: providers.TransactionReceipt,
   accountName: string,
   networkLabel: string,
@@ -60,6 +59,7 @@ function saveTransaction(
         data: transaction.data,
         gas: transactionContent.gasUsed.toString(),
         gasPrice: transactionContent.effectiveGasPrice.toString(),
+        hash: transactionContent.transactionHash,
       },
       token,
     },
@@ -253,7 +253,12 @@ export async function getTokenBalance({ token: { address }, rpcUrl }: TokenReque
   return balance.toString()
 }
 
-export async function transferTokens({ token, to, value, rpcUrl }: TokenTransferRequest): Promise<void> {
+export async function transferTokens({
+  token,
+  to,
+  value,
+  rpcUrl,
+}: TokenTransferRequest): Promise<providers.TransactionReceipt> {
   const [{ ensUserName, localUserName }, fdp] = await Promise.all([
     session.load(),
     fdpStorageProvider.getService(),
@@ -272,6 +277,8 @@ export async function transferTokens({ token, to, value, rpcUrl }: TokenTransfer
     networks.find(({ rpc }) => rpc === rpcUrl).label,
     token,
   )
+
+  return receipt
 }
 
 const messageHandler = createMessageHandler([

src/listeners/message-listeners/auth.listener.ts

@@ -15,6 +15,7 @@ import {
   LoginData,
   RegisterData,
   RegisterResponse,
+  UserInfo,
   UsernameCheckData,
   UserResponse,
 } from '../../model/internal-messages.model'
@@ -24,9 +25,13 @@ import { SessionService } from '../../services/session.service'
 import { Storage } from '../../services/storage/storage.service'
 import { openTab } from '../../utils/tabs'
 import { createMessageHandler } from './message-handler'
+import { getDappId } from './listener.utils'
+import { Dialog } from '../../services/dialog.service'
+import { errorMessages } from '../../constants/errors'
 
 let fdpStorageProvider = new SessionlessFdpStorageProvider()
 const storage = new Storage()
+const dialogs = new Dialog()
 const session = new SessionService()
 const account = new AccountService()
 
@@ -182,6 +187,29 @@ export function logout(): Promise<void> {
   return session.close()
 }
 
+export async function getUserInfo(data, sender: chrome.runtime.MessageSender): Promise<UserInfo> {
+  const [sessionData, dappId] = await Promise.all([session.load(), getDappId(sender)])
+
+  const dapp = await storage.getDappBySession(dappId, sessionData)
+
+  if (!dapp.accountInfoAccess) {
+    const confirmed = await dialogs.ask('DIALOG_DAPP_ACCOUNT_INFO', { dappId })
+
+    if (!confirmed) {
+      throw new Error(errorMessages.ACCESS_DENIED)
+    }
+
+    await storage.updateDappBySession(dappId, { accountInfoAccess: true }, sessionData)
+  }
+
+  const { ensUserName: ensName, address } = sessionData
+
+  return {
+    ensName,
+    address,
+  }
+}
+
 const messageHandler = createMessageHandler([
   {
     action: BackgroundAction.LOGIN,
@@ -229,6 +257,10 @@ const messageHandler = createMessageHandler([
     action: BackgroundAction.LOGOUT,
     handler: logout,
   },
+  {
+    action: BackgroundAction.GET_USER_INFO,
+    handler: getUserInfo,
+  },
 ])
 
 export default messageHandler

src/messaging/content-api.messaging.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from 'ethers'
+import { BigNumber, providers } from 'ethers'
 import BackgroundAction from '../constants/background-actions.enum'
 import { Address, BigNumberString, DappId } from '../model/general.types'
 import {
@@ -86,8 +86,11 @@ export async function getTokenBalance(token: Token, rpcUrl: string): Promise<Big
   return BigNumber.from(balance)
 }
 
-export function sendTransaction(transaction: InternalTransaction): Promise<void> {
-  return sendMessage<InternalTransaction, void>(BackgroundAction.SEND_TRANSACTION_INTERNAL, transaction)
+export function sendTransaction(transaction: InternalTransaction): Promise<providers.TransactionReceipt> {
+  return sendMessage<InternalTransaction, providers.TransactionReceipt>(
+    BackgroundAction.SEND_TRANSACTION_INTERNAL,
+    transaction,
+  )
 }
 
 export async function estimateGasPrice(transaction: InternalTransaction): Promise<BigNumber> {
@@ -108,8 +111,13 @@ export async function estimateTokenGasPrice(tokenTransferRequest: TokenTransferR
   return BigNumber.from(price)
 }
 
-export function transferTokens(tokenTransferRequest: TokenTransferRequest): Promise<void> {
-  return sendMessage<TokenTransferRequest, void>(BackgroundAction.TRANSFER_TOKENS, tokenTransferRequest)
+export function transferTokens(
+  tokenTransferRequest: TokenTransferRequest,
+): Promise<providers.TransactionReceipt> {
+  return sendMessage<TokenTransferRequest, providers.TransactionReceipt>(
+    BackgroundAction.TRANSFER_TOKENS,
+    tokenTransferRequest,
+  )
 }
 
 export function getWalletTransactions(networkLabel: string): Promise<Transactions> {

src/model/internal-messages.model.ts

@@ -120,3 +120,8 @@ export interface TokenTransferRequest extends TokenRequest {
   to: string
   value: string
 }
+
+export interface UserInfo {
+  address: Address
+  ensName?: string
+}

src/model/storage/dapps.model.ts

@@ -16,6 +16,7 @@ export interface PodPermission {
 export interface Dapp {
   podPermissions: Record<string, PodPermission>
   fullStorageAccess: boolean
+  accountInfoAccess: boolean
   dappId: DappId
 }
 

src/model/storage/network.model.ts

@@ -7,4 +7,5 @@ export interface Network {
   fdsRegistrar?: Address
   publicResolver?: Address
   custom: boolean
+  blockExplorerUrl?: string
 }

src/model/storage/wallet.model.ts

@@ -1,4 +1,4 @@
-import { Address, BigNumberString, HexStringVariate } from '../general.types'
+import { Address, BigNumberString, HexString, HexStringVariate } from '../general.types'
 
 export type TransactionDirection = 'sent' | 'received'
 
@@ -13,6 +13,7 @@ export interface Transaction {
     gas: BigNumberString
     gasPrice: BigNumberString
     data?: HexStringVariate
+    hash: HexString<64>
   }
   token?: Token
 }

src/services/storage/storage-factories.ts

@@ -41,6 +41,7 @@ export function dappFactory(dappId: DappId): Dapp {
   return {
     podPermissions: {},
     fullStorageAccess: false,
+    accountInfoAccess: false,
     dappId,
   }
 }

src/ui/common/components/clipboard-button/clipboard-button.component.tsx

@@ -5,9 +5,10 @@ import ContentCopy from '@mui/icons-material/ContentCopy'
 
 export interface ClipboardButtonProps {
   text: string
+  size?: 'large' | 'medium' | 'small'
 }
 
-const ClipboardButton = ({ text }: ClipboardButtonProps) => {
+const ClipboardButton = ({ text, size }: ClipboardButtonProps) => {
   const [open, setOpen] = useState<boolean>(false)
   const [closeTimeoutHandle, setCloseTimeoutHandle] = useState<NodeJS.Timeout>(null)
 
@@ -34,7 +35,7 @@ const ClipboardButton = ({ text }: ClipboardButtonProps) => {
 
   return (
     <>
-      <IconButton size="large" onClick={onClick} data-testid="copy-btn">
+      <IconButton onClick={onClick} size={size || 'medium'} data-testid="copy-btn">
         <ContentCopy />
       </IconButton>
       <Snackbar

src/ui/common/components/error-message/error-message.component.tsx

@@ -3,9 +3,10 @@ import { Typography } from '@mui/material'
 
 export interface ErrorMessageProps {
   children: React.ReactNode
+  onClick?: React.MouseEventHandler<HTMLSpanElement>
 }
 
-const ErrorMessage = ({ children }: ErrorMessageProps) => {
+const ErrorMessage = ({ children, onClick }: ErrorMessageProps) => {
   return (
     <Typography
       variant="body1"
@@ -14,7 +15,9 @@ const ErrorMessage = ({ children }: ErrorMessageProps) => {
       sx={{
         color: (theme) => theme.palette.error.main,
         marginTop: '20px',
+        cursor: onClick ? 'pointer' : 'auto',
       }}
+      onClick={onClick}
     >
       {children}
     </Typography>

src/ui/common/components/error-modal/error-modal.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import intl from 'react-intl-universal'
+import { IconButton, Modal, Typography } from '@mui/material'
+import { Box } from '@mui/system'
+import Close from '@mui/icons-material/Close'
+
+export interface ErrorModalProps {
+  open: boolean
+  onClose: () => void
+  error: string
+}
+
+const ErrorModal = ({ open, onClose, error }: ErrorModalProps) => {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 'min(90%, 400px)',
+        backgroundColor: '#fff !important',
+        boxShadow: 24,
+        p: 4,
+      }}
+      components={{
+        Backdrop: null,
+      }}
+    >
+      <Box sx={{ height: '80%' }}>
+        <Typography variant="h6" component="h2">
+          {intl.get('ERROR_DESCRIPTION')}
+        </Typography>
+        <IconButton onClick={onClose} sx={{ position: 'absolute', top: 5, right: 5 }}>
+          <Close />
+        </IconButton>
+        <Typography color="error" sx={{ mt: 2, height: '100%', overflow: 'auto' }}>
+          {error}
+        </Typography>
+      </Box>
+    </Modal>
+  )
+}
+
+export default ErrorModal