From 52ef1f1e96f9ac671db99292bd35e243007e19c9 Mon Sep 17 00:00:00 2001 From: Kevin Mulcrone Date: Sun, 23 Oct 2022 15:12:00 -0600 Subject: [PATCH] refactor(TxDescription): use reducer see lily-technologies/lily-wallet#59 --- apps/electron/src/main.ts | 4 +- .../src/context/AccountMapContext.tsx | 39 ++++++- .../TransactionDescription.tsx | 20 ++-- .../RecentTransactions/TransactionRow.tsx | 38 +------ .../RecentTransactions/TxDetailsSlideover.tsx | 12 +- apps/frontend/src/reducers/accountMap.ts | 24 +++- apps/frontend/src/types/index.d.ts | 6 +- apps/frontend/src/utils/accountMap.ts | 6 +- .../src/OnchainProviders/Electrum.ts | 24 +++- .../src/OnchainProviders/Esplora.ts | 12 +- .../OnchainProviders/OnchainBaseProvider.ts | 13 ++- packages/shared-server/src/sqlite/index.ts | 2 +- .../shared-server/src/utils/accountMap.ts | 106 ++++++++++-------- packages/types/src/index.ts | 2 + 14 files changed, 188 insertions(+), 120 deletions(-) diff --git a/apps/electron/src/main.ts b/apps/electron/src/main.ts index fe9654ef..9e4cfb57 100644 --- a/apps/electron/src/main.ts +++ b/apps/electron/src/main.ts @@ -290,7 +290,9 @@ ipcMain.on('/account-data', async (event, config: OnChainConfig) => { // event.reply("/account-data", accountData); try { - const accountData = await OnchainDataProvider.getAccountData(config); + const userDataPath = app.getPath('userData'); + const db = await dbConnect(userDataPath); + const accountData = await OnchainDataProvider.getAccountData(config, db); event.reply('/account-data', accountData); } catch (e) { console.log(`(${config.id}) /account-data error: `, e); diff --git a/apps/frontend/src/context/AccountMapContext.tsx b/apps/frontend/src/context/AccountMapContext.tsx index 708b8da3..36e0c08d 100644 --- a/apps/frontend/src/context/AccountMapContext.tsx +++ b/apps/frontend/src/context/AccountMapContext.tsx @@ -1,21 +1,34 @@ -import React, { createContext, useReducer, useCallback, useState } from 'react'; +import React, { createContext, useContext, useReducer, useCallback, useState } from 'react'; +import { PlatformContext } from 'src/context'; -import { accountMapReducer, ACCOUNTMAP_UPDATE, ACCOUNTMAP_SET } from 'src/reducers/accountMap'; +import { + accountMapReducer, + ACCOUNTMAP_UPDATE, + ACCOUNTMAP_SET, + ACCOUNT_TRANSACTION_UPDATE_DESCRIPTION +} from 'src/reducers/accountMap'; -import { AccountMap, LilyAccount } from '@lily/types'; +import { AccountMap, LilyAccount, LilyOnchainAccount } from '@lily/types'; export const AccountMapContext = createContext({ setAccountMap: (accountMap: AccountMap) => {}, updateAccountMap: (account: LilyAccount) => {}, setCurrentAccountId: (id: string) => {}, accountMap: {} as AccountMap, - currentAccount: {} as LilyAccount + currentAccount: {} as LilyAccount, + updateTransactionDescription: ( + account: LilyOnchainAccount, + txid: string, + description: string + ) => {} }); export const AccountMapProvider = ({ children }: { children: React.ReactChild }) => { const [accountMap, dispatch] = useReducer(accountMapReducer, {}); const [currentAccountId, setCurrentAccountId] = useState('satoshi'); + const { platform } = useContext(PlatformContext); + const currentAccount = accountMap[currentAccountId!] || { name: 'Loading...', loading: true, @@ -47,12 +60,28 @@ export const AccountMapProvider = ({ children }: { children: React.ReactChild }) [dispatch] ); + const updateTransactionDescription = useCallback( + async (account: LilyOnchainAccount, txid: string, description: string) => { + await platform.addTransactionDescription(txid, description); + dispatch({ + type: ACCOUNT_TRANSACTION_UPDATE_DESCRIPTION, + payload: { + accountId: account.config.id, + txid, + description + } + }); + }, + [dispatch] + ); + const value = { accountMap, updateAccountMap, setAccountMap, currentAccount, - setCurrentAccountId + setCurrentAccountId, + updateTransactionDescription }; return {children}; diff --git a/apps/frontend/src/pages/Vault/RecentTransactions/TransactionDescription.tsx b/apps/frontend/src/pages/Vault/RecentTransactions/TransactionDescription.tsx index c94dc4c9..c3478395 100644 --- a/apps/frontend/src/pages/Vault/RecentTransactions/TransactionDescription.tsx +++ b/apps/frontend/src/pages/Vault/RecentTransactions/TransactionDescription.tsx @@ -1,21 +1,25 @@ -import { useContext, useEffect, useState } from 'react'; +import { useContext, useState } from 'react'; import { PencilIcon, CheckIcon } from '@heroicons/react/outline'; -import { PlatformContext } from 'src/context'; +import { AccountMapContext } from 'src/context'; +import { LilyOnchainAccount, Transaction } from '@lily/types'; interface Props { - txid: string; - description: string; - setDescription: React.Dispatch>; + transaction: Transaction; } -export const TransactionDescription = ({ txid, description, setDescription }: Props) => { +export const TransactionDescription = ({ transaction }: Props) => { + const [description, setDescription] = useState(transaction.description); const [isEditing, setIsEditing] = useState(false); - const { platform } = useContext(PlatformContext); + const { updateTransactionDescription, currentAccount } = useContext(AccountMapContext); const onSave = async () => { - await platform.addTransactionDescription(txid, description); + updateTransactionDescription( + currentAccount as LilyOnchainAccount, + transaction.txid, + description + ); setIsEditing(false); }; diff --git a/apps/frontend/src/pages/Vault/RecentTransactions/TransactionRow.tsx b/apps/frontend/src/pages/Vault/RecentTransactions/TransactionRow.tsx index 15d6f59a..1f20ea51 100644 --- a/apps/frontend/src/pages/Vault/RecentTransactions/TransactionRow.tsx +++ b/apps/frontend/src/pages/Vault/RecentTransactions/TransactionRow.tsx @@ -1,12 +1,10 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useState } from 'react'; import moment from 'moment'; import { ChevronRightIcon } from '@heroicons/react/solid'; import { Unit, SlideOver } from 'src/components'; import { capitalize } from 'src/utils/other'; -import { PlatformContext } from 'src/context'; - import TransactionTypeIcon from './TransactionTypeIcon'; import TxDetailsSlideover from './TxDetailsSlideover'; @@ -18,32 +16,9 @@ interface Props { } const TransactionRow = ({ transaction, flat }: Props) => { - const [description, setDescription] = useState(''); - const { platform } = useContext(PlatformContext); const [modalIsOpen, setModalIsOpen] = useState(false); const [modalContent, setModalContent] = useState(null); - useEffect(() => { - const retrieveDescription = async () => { - const retrievedDescription = await platform.getTransactionDescription(transaction.txid); - if (retrievedDescription) { - setDescription(retrievedDescription.description); - } - }; - retrieveDescription(); - }, [modalIsOpen]); - - useEffect(() => { - setModalContent( - - ); - }, [description]); - const openInModal = (component: JSX.Element) => { setModalIsOpen(true); setModalContent(component); @@ -54,14 +29,7 @@ const TransactionRow = ({ transaction, flat }: Props) => {