diff --git a/system-contract-dapp-playground/.prettierrc b/system-contract-dapp-playground/.prettierrc index c9bb61d56..63407c780 100644 --- a/system-contract-dapp-playground/.prettierrc +++ b/system-contract-dapp-playground/.prettierrc @@ -3,5 +3,5 @@ "tabWidth": 2, "semi": true, "singleQuote": true, - "printWidth": 100 + "printWidth": 110 } diff --git a/system-contract-dapp-playground/src/api/localStorage/index.ts b/system-contract-dapp-playground/src/api/localStorage/index.ts index a12bef982..610363a12 100644 --- a/system-contract-dapp-playground/src/api/localStorage/index.ts +++ b/system-contract-dapp-playground/src/api/localStorage/index.ts @@ -18,6 +18,8 @@ * */ +import { OFFCIAL_NETWORK_NAME } from '@/utils/common/constants'; + /** * @dev get balances from LocalStorage * @@ -30,10 +32,7 @@ export const getBalancesFromLocalStorage = () => { const storageBalances = localStorage.getItem('hedera_erc20_balances'); if (storageBalances) { return { - storageBalances: new Map(Object.entries(JSON.parse(storageBalances))) as Map< - string, - number - >, + storageBalances: new Map(Object.entries(JSON.parse(storageBalances))) as Map, }; } else { return { storageBalances: new Map() }; @@ -64,3 +63,22 @@ export const getArrayTypedValuesFromLocalStorage = (key: string) => { return { err }; } }; + +/** + * @dev clear all HEDERA transaction results cached in localStorage + */ +export const clearTransactionCache = () => { + // loop through localStorage items + if (localStorage) { + for (let i = 0; i < localStorage.length; i++) { + // get key + const key = localStorage.key(i); + + // remove items that have keys start with HEDERA + if (key?.startsWith(OFFCIAL_NETWORK_NAME)) { + localStorage.removeItem(key); + i--; + } + } + } +}; diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/AssociateHederaToken.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/AssociateHederaToken.tsx index a17d03a29..a251d7c15 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/AssociateHederaToken.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/AssociateHederaToken.tsx @@ -29,6 +29,7 @@ import { handleAPIErrors } from '../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../shared/states/commonStates'; import { useToastSuccessful } from '../../shared/hooks/useToastSuccessful'; import { usePaginatedTxResults } from '../../shared/hooks/usePaginatedTxResults'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import TokenAddressesInputForm from '../../shared/components/TokenAddressesInputForm'; import { TransactionResultTable } from '../../shared/components/TransactionResultTable'; import { associateHederaTokensToAccounts } from '@/api/hedera/tokenCreateCustom-interactions'; @@ -46,16 +47,15 @@ const AssociateHederaToken = ({ baseContract }: PageProps) => { // general states const toaster = useToast(); const [isLoading, setIsLoading] = useState(false); + const initialParamValues = { associatingAddress: '' }; const [isSuccessful, setIsSuccessful] = useState(false); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-CREATE.ASSOCIATE-TOKEN-RESULTS'; - const [transactionResults, setTransactionResults] = useState([]); - const initialParamValues = { - associatingAddress: '', - }; const [paramValues, setParamValues] = useState(initialParamValues); + const [transactionResults, setTransactionResults] = useState([]); const initialTokenAddressesValues = { fieldKey: generatedRandomUniqueKey(9), fieldValue: '' }; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-CREATE']['ASSOCIATE-TOKEN']; const [hederaTokenAddresses, setHederaTokenAddresses] = useState< { fieldKey: string; fieldValue: string }[] >([initialTokenAddressesValues]); @@ -68,13 +68,10 @@ const AssociateHederaToken = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string, fieldKey?: string) => { @@ -102,9 +99,7 @@ const AssociateHederaToken = ({ baseContract }: PageProps) => { break; case 'REMOVE': if (hederaTokenAddresses.length > 1) { - setHederaTokenAddresses((prev) => - prev.filter((field) => field.fieldKey !== removingFieldKey) - ); + setHederaTokenAddresses((prev) => prev.filter((field) => field.fieldKey !== removingFieldKey)); } } }; @@ -199,15 +194,9 @@ const AssociateHederaToken = ({ baseContract }: PageProps) => { paramType={(htsTokenAssociateParamFields as any)['associatingAddress'].inputType} paramSize={(htsTokenAssociateParamFields as any)['associatingAddress'].inputSize} explanation={(htsTokenAssociateParamFields as any)['associatingAddress'].explanation} - paramClassName={ - (htsTokenAssociateParamFields as any)['associatingAddress'].inputClassname - } - paramPlaceholder={ - (htsTokenAssociateParamFields as any)['associatingAddress'].inputPlaceholder - } - paramFocusColor={ - (htsTokenAssociateParamFields as any)['associatingAddress'].inputFocusBorderColor - } + paramClassName={(htsTokenAssociateParamFields as any)['associatingAddress'].inputClassname} + paramPlaceholder={(htsTokenAssociateParamFields as any)['associatingAddress'].inputPlaceholder} + paramFocusColor={(htsTokenAssociateParamFields as any)['associatingAddress'].inputFocusBorderColor} /> {/* Token addresses */} diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/FungibleTokenCreate.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/FungibleTokenCreate.tsx index 77fd1410c..221bea89d 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/FungibleTokenCreate.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/FungibleTokenCreate.tsx @@ -26,6 +26,7 @@ import { CommonErrorToast } from '@/components/toast/CommonToast'; import { handleAPIErrors } from '../../shared/methods/handleAPIErrors'; import { useToastSuccessful } from '../../shared/hooks/useToastSuccessful'; import { usePaginatedTxResults } from '../../shared/hooks/usePaginatedTxResults'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { SharedSigningKeysComponent } from '../../shared/components/SigningKeysForm'; import { createHederaFungibleToken } from '@/api/hedera/tokenCreateCustom-interactions'; import { TransactionResultTable } from '../../shared/components/TransactionResultTable'; @@ -62,7 +63,8 @@ const FungibleTokenCreate = ({ baseContract }: PageProps) => { const [isDefaultFreeze, setIsDefaultFreeze] = useState(false); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-CREATE.FUNGIBLE-TOKEN-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-CREATE']['FUNGIBLE-TOKEN']; const [transactionResults, setTransactionResults] = useState([]); const tokenCreateFields = { info: ['name', 'symbol', 'memo'], @@ -97,13 +99,10 @@ const FungibleTokenCreate = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -309,12 +308,8 @@ const FungibleTokenCreate = ({ baseContract }: PageProps) => { paramSize={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputSize} explanation={(htsTokenCreateParamFields as any)['feeTokenAddress'].explanation} paramClassName={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputClassname} - paramPlaceholder={ - (htsTokenCreateParamFields as any)['feeTokenAddress'].inputPlaceholder - } - paramFocusColor={ - (htsTokenCreateParamFields as any)['feeTokenAddress'].inputFocusBorderColor - } + paramPlaceholder={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputPlaceholder} + paramFocusColor={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputFocusBorderColor} /> )} diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/GrantTokenKYC.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/GrantTokenKYC.tsx index 3faaa7b52..6efe037db 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/GrantTokenKYC.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/GrantTokenKYC.tsx @@ -28,6 +28,7 @@ import { handleAPIErrors } from '../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../shared/states/commonStates'; import { useToastSuccessful } from '../../shared/hooks/useToastSuccessful'; import { usePaginatedTxResults } from '../../shared/hooks/usePaginatedTxResults'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { grantTokenKYCToAccount } from '@/api/hedera/tokenCreateCustom-interactions'; import { TransactionResultTable } from '../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../shared/methods/handleSanitizeFormInputs'; @@ -48,7 +49,7 @@ const GrantTokenKYC = ({ baseContract }: PageProps) => { const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const grantKYCFields = ['hederaTokenAddress', 'grantingKYCAccountAddress']; - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-CREATE.TOKEN-KYC-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-CREATE']['TOKEN-KYC']; const [transactionResults, setTransactionResults] = useState([]); const initialParamValues = { hederaTokenAddress: '', @@ -64,13 +65,10 @@ const GrantTokenKYC = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/MintHederaToken.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/MintHederaToken.tsx index 83974424b..e855de7b3 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/MintHederaToken.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/MintHederaToken.tsx @@ -30,6 +30,7 @@ import { TRANSACTION_PAGE_SIZE } from '../../shared/states/commonStates'; import MetadataInputForm from '../../shared/components/MetadataInputForm'; import { useToastSuccessful } from '../../shared/hooks/useToastSuccessful'; import { usePaginatedTxResults } from '../../shared/hooks/usePaginatedTxResults'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { TransactionResultTable } from '../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../shared/methods/handleSanitizeFormInputs'; import { useUpdateTransactionResultsToLocalStorage } from '../../shared/hooks/useUpdateLocalStorage'; @@ -40,10 +41,7 @@ import { SharedFormInputField, SharedExecuteButton, } from '../../shared/components/ParamInputForm'; -import { - mintHederaToken, - mintHederaTokenToAddress, -} from '@/api/hedera/tokenCreateCustom-interactions'; +import { mintHederaToken, mintHederaTokenToAddress } from '@/api/hedera/tokenCreateCustom-interactions'; interface PageProps { baseContract: Contract; @@ -59,7 +57,7 @@ const MintHederaToken = ({ baseContract }: PageProps) => { const [APIMethods, setAPIMethods] = useState('FUNGIBLE'); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-CREATE.MINT-TOKEN-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-CREATE']['MINT-TOKEN']; const [transactionResults, setTransactionResults] = useState([]); const [metadata, setMetadata] = useState<{ metaKey: string; metaValue: string }[]>([]); const tokenMintFields = useMemo(() => { @@ -95,13 +93,10 @@ const MintHederaToken = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); /** @dev declare a paginatedTransactionResults */ - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string, metaKey?: string) => { diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/NonFungibleTokenCreate.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/NonFungibleTokenCreate.tsx index 9a54029f6..bafc01854 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/NonFungibleTokenCreate.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-create-custom/methods/NonFungibleTokenCreate.tsx @@ -26,6 +26,7 @@ import { CommonErrorToast } from '@/components/toast/CommonToast'; import { handleAPIErrors } from '../../shared/methods/handleAPIErrors'; import { useToastSuccessful } from '../../shared/hooks/useToastSuccessful'; import { usePaginatedTxResults } from '../../shared/hooks/usePaginatedTxResults'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { SharedSigningKeysComponent } from '../../shared/components/SigningKeysForm'; import { TransactionResultTable } from '../../shared/components/TransactionResultTable'; import { createHederaNonFungibleToken } from '@/api/hedera/tokenCreateCustom-interactions'; @@ -62,7 +63,8 @@ const NonFungibleTokenCreate = ({ baseContract }: PageProps) => { const HEDERA_NETWORK = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-CREATE.NON-FUNGIBLE-TOKEN-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-CREATE']['NON-FUNGIBLE-TOKEN']; const tokenCreateFields = { info: ['name', 'symbol', 'memo', 'maxSupply', 'treasury'], feeTokenAddress: 'feeTokenAddress', @@ -91,13 +93,10 @@ const NonFungibleTokenCreate = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -239,12 +238,8 @@ const NonFungibleTokenCreate = ({ baseContract }: PageProps) => { paramSize={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputSize} explanation={(htsTokenCreateParamFields as any)['feeTokenAddress'].explanation} paramClassName={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputClassname} - paramPlaceholder={ - (htsTokenCreateParamFields as any)['feeTokenAddress'].inputPlaceholder - } - paramFocusColor={ - (htsTokenCreateParamFields as any)['feeTokenAddress'].inputFocusBorderColor - } + paramPlaceholder={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputPlaceholder} + paramFocusColor={(htsTokenCreateParamFields as any)['feeTokenAddress'].inputFocusBorderColor} /> )} diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenDelete/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenDelete/index.tsx index 1b5e126f7..320afd473 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenDelete/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenDelete/index.tsx @@ -28,16 +28,14 @@ import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; import { manageTokenDeduction } from '@/api/hedera/tokenManagement-interactions'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSanitizeFormInputs'; import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; import { htsTokenDeductionParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; -import { - SharedFormInputField, - SharedExecuteButtonWithFee, -} from '../../../shared/components/ParamInputForm'; +import { SharedFormInputField, SharedExecuteButtonWithFee } from '../../../shared/components/ParamInputForm'; interface PageProps { baseContract: Contract; @@ -51,7 +49,7 @@ const ManageTokenDelete = ({ baseContract }: PageProps) => { const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-DELETE-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-DELETE']; const initialParamValues = { feeValue: '', hederaTokenAddress: '', @@ -65,13 +63,10 @@ const ManageTokenDelete = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { setParamValues((prev: any) => ({ ...prev, [param]: e.target.value })); @@ -162,15 +157,9 @@ const ManageTokenDelete = ({ baseContract }: PageProps) => { paramType={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputType} paramSize={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputSize} explanation={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].explanation} - paramClassName={ - (htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputClassname - } - paramPlaceholder={ - (htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputPlaceholder - } - paramFocusColor={ - (htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputFocusBorderColor - } + paramClassName={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputClassname} + paramPlaceholder={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputPlaceholder} + paramFocusColor={(htsTokenDeductionParamFields as any)['hederaTokenAddress'].inputFocusBorderColor} />
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/index.tsx index 5b98f7be7..696be6d1b 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/index.tsx @@ -53,6 +53,7 @@ import { IHederaTokenServiceExpiry, IHederaTokenServiceHederaToken, } from '@/types/contract-interactions/HTS'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; interface PageProps { baseContract: Contract; @@ -68,7 +69,7 @@ const ManageTokenInfo = ({ baseContract }: PageProps) => { const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [APIMethods, setAPIMethods] = useState('UPDATE_INFO'); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-INFO-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-INFO']; const [transactionResults, setTransactionResults] = useState([]); const APIButtonTitles: { API: API_NAMES; apiSwitchTitle: string; executeTitle: string }[] = [ { @@ -152,13 +153,10 @@ const ManageTokenInfo = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -298,8 +296,8 @@ const ManageTokenInfo = ({ baseContract }: PageProps) => {
{/* notice component */}

- *important: Should you choose not to update - certain fields, kindly populate the token's current values. + *important: Should you choose not to update certain + fields, kindly populate the token's current values.

{/* API methods */} @@ -327,15 +325,9 @@ const ManageTokenInfo = ({ baseContract }: PageProps) => { paramType={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputType} paramSize={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputSize} explanation={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].explanation} - paramClassName={ - (htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputClassname - } - paramPlaceholder={ - (htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputPlaceholder - } - paramFocusColor={ - (htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputFocusBorderColor - } + paramClassName={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputClassname} + paramPlaceholder={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputPlaceholder} + paramFocusColor={(htsUpdateTokenInfoParamFields as any)['hederaTokenAddress'].inputFocusBorderColor} /> {/* UPDATE_INFO form */} diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenPermission/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenPermission/index.tsx index 7a38282e7..383e7ccee 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenPermission/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenPermission/index.tsx @@ -28,17 +28,18 @@ import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; import { manageTokenPermission } from '@/api/hedera/tokenManagement-interactions'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSanitizeFormInputs'; import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; +import { htsTokenPermissionParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; import { SharedExecuteButtonWithFee, SharedFormButton, SharedFormInputField, } from '../../../shared/components/ParamInputForm'; -import { htsTokenPermissionParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; interface PageProps { baseContract: Contract; @@ -56,7 +57,8 @@ const ManageTokenPermission = ({ baseContract }: PageProps) => { const tokenCommonFields = ['hederaTokenAddress', 'targetApprovedAddress']; const [APIMethods, setAPIMethods] = useState('APPROVED_FUNGIBLE'); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-PERMISSION-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-PERMISSION']; const initialParamValues = { feeValue: '', serialNumber: '', @@ -89,13 +91,10 @@ const ManageTokenPermission = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -219,9 +218,7 @@ const ManageTokenPermission = ({ baseContract }: PageProps) => { explanation={(htsTokenPermissionParamFields as any)[param].explanation} paramClassName={(htsTokenPermissionParamFields as any)[param].inputClassname} paramPlaceholder={(htsTokenPermissionParamFields as any)[param].inputPlaceholder} - paramFocusColor={ - (htsTokenPermissionParamFields as any)[param].inputFocusBorderColor - } + paramFocusColor={(htsTokenPermissionParamFields as any)[param].inputFocusBorderColor} />
); @@ -238,12 +235,8 @@ const ManageTokenPermission = ({ baseContract }: PageProps) => { paramType={(htsTokenPermissionParamFields as any)['amountToApprove'].inputType} paramSize={(htsTokenPermissionParamFields as any)['amountToApprove'].inputSize} explanation={(htsTokenPermissionParamFields as any)['amountToApprove'].explanation} - paramClassName={ - (htsTokenPermissionParamFields as any)['amountToApprove'].inputClassname - } - paramPlaceholder={ - (htsTokenPermissionParamFields as any)['amountToApprove'].inputPlaceholder - } + paramClassName={(htsTokenPermissionParamFields as any)['amountToApprove'].inputClassname} + paramPlaceholder={(htsTokenPermissionParamFields as any)['amountToApprove'].inputPlaceholder} paramFocusColor={ (htsTokenPermissionParamFields as any)['amountToApprove'].inputFocusBorderColor } @@ -263,12 +256,8 @@ const ManageTokenPermission = ({ baseContract }: PageProps) => { paramSize={(htsTokenPermissionParamFields as any)['serialNumber'].inputSize} explanation={(htsTokenPermissionParamFields as any)['serialNumber'].explanation} paramClassName={(htsTokenPermissionParamFields as any)['serialNumber'].inputClassname} - paramPlaceholder={ - (htsTokenPermissionParamFields as any)['serialNumber'].inputPlaceholder - } - paramFocusColor={ - (htsTokenPermissionParamFields as any)['serialNumber'].inputFocusBorderColor - } + paramPlaceholder={(htsTokenPermissionParamFields as any)['serialNumber'].inputPlaceholder} + paramFocusColor={(htsTokenPermissionParamFields as any)['serialNumber'].inputFocusBorderColor} /> )} diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenRelation/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenRelation/index.tsx index a41a4bfd5..3aa9d3091 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenRelation/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenRelation/index.tsx @@ -24,7 +24,7 @@ import { useToast } from '@chakra-ui/react'; import { useEffect, useMemo, useState } from 'react'; import { CommonErrorToast } from '@/components/toast/CommonToast'; import { generatedRandomUniqueKey } from '@/utils/common/helpers'; -import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants'; +import { HEDERA_BRANDING_COLORS, HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { TransactionResult } from '@/types/contract-interactions/HTS'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; @@ -59,7 +59,8 @@ const ManageTokenRelation = ({ baseContract }: PageProps) => { const [APIMethods, setAPIMethods] = useState('REVOKE_KYC'); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-RELATION-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-RELATION']; const [isFreezeLoading, setIsFreezeLoading] = useState({ freezeLoading: false, unfreezeLoading: false, @@ -115,9 +116,7 @@ const ManageTokenRelation = ({ baseContract }: PageProps) => { break; case 'REMOVE': if (hederaTokenAddresses.length > 1) { - setHederaTokenAddresses((prev) => - prev.filter((field) => field.fieldKey !== removingFieldKey) - ); + setHederaTokenAddresses((prev) => prev.filter((field) => field.fieldKey !== removingFieldKey)); } } }; @@ -130,13 +129,10 @@ const ManageTokenRelation = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string, fieldKey?: string) => { diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenStatus/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenStatus/index.tsx index 5c90e7285..9f665e61c 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenStatus/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenStatus/index.tsx @@ -26,17 +26,15 @@ import { CommonErrorToast } from '@/components/toast/CommonToast'; import { TransactionResult } from '@/types/contract-interactions/HTS'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; -import { manageTokenStatus } from '@/api/hedera/tokenManagement-interactions'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; +import { manageTokenStatus } from '@/api/hedera/tokenManagement-interactions'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; -import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; -import { - SharedExecuteButton, - SharedFormInputField, -} from '../../../shared/components/ParamInputForm'; import { htsTokenStatusParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; +import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; +import { SharedExecuteButton, SharedFormInputField } from '../../../shared/components/ParamInputForm'; interface PageProps { baseContract: Contract; @@ -53,7 +51,7 @@ const ManageTokenStatus = ({ baseContract }: PageProps) => { const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-STATUS-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-STATUS']; const [isLoading, setIsLoading] = useState({ pauseLoading: false, unpauseLoading: false, @@ -77,13 +75,10 @@ const ManageTokenStatus = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -175,12 +170,8 @@ const ManageTokenStatus = ({ baseContract }: PageProps) => { paramSize={(htsTokenStatusParamFields as any)['hederaTokenAddress'].inputSize} explanation={(htsTokenStatusParamFields as any)['hederaTokenAddress'].explanation} paramClassName={(htsTokenStatusParamFields as any)['hederaTokenAddress'].inputClassname} - paramPlaceholder={ - (htsTokenStatusParamFields as any)['hederaTokenAddress'].inputPlaceholder - } - paramFocusColor={ - (htsTokenStatusParamFields as any)['hederaTokenAddress'].inputFocusBorderColor - } + paramPlaceholder={(htsTokenStatusParamFields as any)['hederaTokenAddress'].inputPlaceholder} + paramFocusColor={(htsTokenStatusParamFields as any)['hederaTokenAddress'].inputFocusBorderColor} /> {/* Execute button */} @@ -190,9 +181,7 @@ const ManageTokenStatus = ({ baseContract }: PageProps) => { return (
handleUpdateTokenStatus(APIButton.API)} buttonTitle={APIButton.executeTitle} /> diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenSupplyReduction/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenSupplyReduction/index.tsx index dd9ddb9a4..90255c448 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenSupplyReduction/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenSupplyReduction/index.tsx @@ -28,17 +28,18 @@ import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; import { manageTokenDeduction } from '@/api/hedera/tokenManagement-interactions'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSanitizeFormInputs'; import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; +import { htsTokenDeductionParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; import { SharedFormButton, SharedFormInputField, SharedExecuteButtonWithFee, } from '../../../shared/components/ParamInputForm'; -import { htsTokenDeductionParamFields } from '@/utils/contract-interactions/HTS/token-management/constant'; interface PageProps { baseContract: Contract; @@ -55,7 +56,8 @@ const ManageTokenDeduction = ({ baseContract }: PageProps) => { const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [APIMethods, setAPIMethods] = useState('WIPE_FUNGIBLE'); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-MANAGEMENT.TOKEN-REDUCTION-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-MANAGE']['TOKEN-REDUCTION']; const initialParamValues = { amount: '', feeValue: '', @@ -96,13 +98,10 @@ const ManageTokenDeduction = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { setParamValues((prev: any) => ({ ...prev, [param]: e.target.value })); diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/querySpecificToken/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/querySpecificToken/index.tsx index 204593711..116fa56c3 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/querySpecificToken/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/querySpecificToken/index.tsx @@ -21,7 +21,6 @@ import Cookies from 'js-cookie'; import { useState, useEffect } from 'react'; import { Contract, isAddress } from 'ethers'; -import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants'; import { CommonErrorToast } from '@/components/toast/CommonToast'; import { Select, useDisclosure, useToast } from '@chakra-ui/react'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; @@ -39,6 +38,7 @@ import { SharedFormButton, SharedFormInputField, } from '../../../shared/components/ParamInputForm'; +import { HEDERA_BRANDING_COLORS, HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; interface PageProps { baseContract: Contract; @@ -75,11 +75,10 @@ const QueryTokenSpecificInfomation = ({ baseContract }: PageProps) => { const [tokenAddressFromTxResult, setTokenAddressFromTxResult] = useState(''); const [APIMethods, setAPIMethods] = useState('DEFAULT_FREEZE_STATUS'); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-QUERY.TOKEN-SPECIFIC-INFO-RESULTS'; - const [APIMethodsFromTxResult, setAPIMethodsFromTxResult] = - useState('DEFAULT_FREEZE_STATUS'); - const [keyTypeFromTxResult, setKeyTypeFromTxResult] = - useState('ADMIN'); + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-QUERY']['TOKEN-SPECIFIC-INFO']; + const [APIMethodsFromTxResult, setAPIMethodsFromTxResult] = useState('DEFAULT_FREEZE_STATUS'); + const [keyTypeFromTxResult, setKeyTypeFromTxResult] = useState('ADMIN'); const initialParamValues = { hederaTokenAddress: '', }; @@ -135,13 +134,10 @@ const QueryTokenSpecificInfomation = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -269,12 +265,8 @@ const QueryTokenSpecificInfomation = ({ baseContract }: PageProps) => { paramType={(htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputType} paramSize={(htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputSize} explanation={(htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].explanation} - paramClassName={ - (htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputClassname - } - paramPlaceholder={ - (htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputPlaceholder - } + paramClassName={(htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputClassname} + paramPlaceholder={(htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputPlaceholder} paramFocusColor={ (htsQueryTokenInfoParamFields as any)['hederaTokenAddress'].inputFocusBorderColor } diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenGeneralInfo/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenGeneralInfo/index.tsx index da789f662..67f6ec913 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenGeneralInfo/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenGeneralInfo/index.tsx @@ -26,6 +26,7 @@ import { CommonErrorToast } from '@/components/toast/CommonToast'; import { TransactionResult } from '@/types/contract-interactions/HTS'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { queryTokenGeneralInfomation } from '@/api/hedera/tokenQuery-interactions'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import TokenGeneralInfoModal from '../../../shared/components/TokenGeneralInfoModal'; @@ -61,7 +62,8 @@ const QueryTokenGeneralInfomation = ({ baseContract }: PageProps) => { const [tokenInfoFromTxResult, setTokenInfoFromTxResult] = useState(); const [tokenAddressFromTxResult, setTokenAddressFromTxResult] = useState(''); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-QUERY.TOKEN-GENERAL-INFO-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-QUERY']['TOKEN-GENERAL-INFO']; const [APIMethodsFromTxResult, setAPIMethodsFromTxResult] = useState('TOKEN'); const initialParamValues = { serialNumber: '', @@ -109,13 +111,10 @@ const QueryTokenGeneralInfomation = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenPermission/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenPermission/index.tsx index b94ad3398..63033a603 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenPermission/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenPermission/index.tsx @@ -26,6 +26,7 @@ import { CommonErrorToast } from '@/components/toast/CommonToast'; import { TransactionResult } from '@/types/contract-interactions/HTS'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { queryTokenPermissionInformation } from '@/api/hedera/tokenQuery-interactions'; import TokenPermissionInfoModal from '../../../shared/components/TokenPermissionInfoModal'; @@ -60,8 +61,9 @@ const QueryTokenPermissionInfomation = ({ baseContract }: PageProps) => { const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [tokenInfoFromTxResult, setTokenInfoFromTxResult] = useState(); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-QUERY.TOKEN-PERMISSION-INFO-RESULTS'; const [APIMethodsFromTxResult, setAPIMethodsFromTxResult] = useState('ALLOWANCE'); + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-QUERY']['TOKEN-PERMISSION']; const initialParamValues = { hederaTokenAddress: '', ownerAddress: '', @@ -113,13 +115,10 @@ const QueryTokenPermissionInfomation = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -228,10 +227,7 @@ const QueryTokenPermissionInfomation = ({ baseContract }: PageProps) => { {/* hederaTokenAddress & targetApprovedAddress */} {tokenCommonFields.map((param) => { return ( -
+
{ paramSize={(htsQueryTokenPermissionParamFields as any)[param].inputSize} explanation={(htsQueryTokenPermissionParamFields as any)[param].explanation} paramClassName={(htsQueryTokenPermissionParamFields as any)[param].inputClassname} - paramPlaceholder={ - (htsQueryTokenPermissionParamFields as any)[param].inputPlaceholder - } - paramFocusColor={ - (htsQueryTokenPermissionParamFields as any)[param].inputFocusBorderColor - } + paramPlaceholder={(htsQueryTokenPermissionParamFields as any)[param].inputPlaceholder} + paramFocusColor={(htsQueryTokenPermissionParamFields as any)[param].inputFocusBorderColor} />
); diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenStatus/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenStatus/index.tsx index dc4bd4711..24b94e7a2 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenStatus/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenStatus/index.tsx @@ -27,6 +27,7 @@ import { TransactionResult } from '@/types/contract-interactions/HTS'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { queryTokenStatusInformation } from '@/api/hedera/tokenQuery-interactions'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; @@ -34,10 +35,7 @@ import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSa import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; import { htsQueryTokenStatusParamFields } from '@/utils/contract-interactions/HTS/token-query/constant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; -import { - SharedExecuteButton, - SharedFormInputField, -} from '../../../shared/components/ParamInputForm'; +import { SharedExecuteButton, SharedFormInputField } from '../../../shared/components/ParamInputForm'; interface PageProps { baseContract: Contract; @@ -53,7 +51,8 @@ const QueryTokenStatusInfomation = ({ baseContract }: PageProps) => { const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-QUERY.TOKEN-STATUS-INFO-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-QUERY']['TOKEN-STATUS-INFO']; const initialParamValues = { hederaTokenAddress: '', accountAddress: '', @@ -91,13 +90,10 @@ const QueryTokenStatusInfomation = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { @@ -208,9 +204,7 @@ const QueryTokenStatusInfomation = ({ baseContract }: PageProps) => { explanation={(htsQueryTokenStatusParamFields as any)[param].explanation} paramClassName={(htsQueryTokenStatusParamFields as any)[param].inputClassname} paramPlaceholder={(htsQueryTokenStatusParamFields as any)[param].inputPlaceholder} - paramFocusColor={ - (htsQueryTokenStatusParamFields as any)[param].inputFocusBorderColor - } + paramFocusColor={(htsQueryTokenStatusParamFields as any)[param].inputFocusBorderColor} />
); @@ -222,9 +216,7 @@ const QueryTokenStatusInfomation = ({ baseContract }: PageProps) => { return (
handleQueryTokenStatusInfo(APIButton.API)} buttonTitle={APIButton.executeTitle} /> diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx index 334b15e42..0a0d769c2 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx @@ -35,12 +35,10 @@ import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../sha import { HEDERA_BRANDING_COLORS, HEDERA_CHAKRA_INPUT_BOX_SIZES, + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS, HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME, } from '@/utils/common/constants'; -import { - SharedExecuteButton, - SharedFormInputField, -} from '../../../shared/components/ParamInputForm'; +import { SharedExecuteButton, SharedFormInputField } from '../../../shared/components/ParamInputForm'; interface PageProps { baseContract: Contract; @@ -55,7 +53,7 @@ const QueryTokenValidity = ({ baseContract }: PageProps) => { const [paramValues, setParamValues] = useState(initialParamValues); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-QUERY.TOKEN-VALIDITY-RESULTS'; + const transactionResultStorageKey = HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-QUERY']['TOKEN-VALIDITY']; const [transactionResults, setTransactionResults] = useState([]); /** @dev retrieve token creation results from localStorage to maintain data on re-renders */ @@ -66,13 +64,10 @@ const QueryTokenValidity = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferCrypto/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferCrypto/index.tsx index 9628e89f7..b865ad22b 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferCrypto/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferCrypto/index.tsx @@ -28,6 +28,7 @@ import { transferCrypto } from '@/api/hedera/tokenTransfer-interactions'; import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { SharedExecuteButtonWithFee } from '../../../shared/components/ParamInputForm'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; @@ -43,10 +44,7 @@ import { TokenTransferParam, generateInitialTokenTransferParamValues, } from './helpers/generateInitialValues'; -import { - prepareCryptoTransferList, - prepareTokenTransferList, -} from './helpers/prepareCryptoTransferValues'; +import { prepareCryptoTransferList, prepareTokenTransferList } from './helpers/prepareCryptoTransferValues'; interface PageProps { baseContract: Contract; @@ -60,15 +58,12 @@ const CryptoTransfer = ({ baseContract }: PageProps) => { const [isSuccessful, setIsSuccessful] = useState(false); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-TRANSFER.CRYPTO-TRANSFER'; const contractCaller = JSON.parse(Cookies.get('_connectedAccounts') as string)[0]; const [transactionResults, setTransactionResults] = useState([]); - const [tokenTransferParamValues, setTokenTransferParamValues] = useState( - [] - ); - const [cryptoTransferParamValues, setCryptoTransferParamValues] = useState( - [] - ); + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-TRANSFER']['CRYPTO-TRANSFER']; + const [tokenTransferParamValues, setTokenTransferParamValues] = useState([]); + const [cryptoTransferParamValues, setCryptoTransferParamValues] = useState([]); /** @dev retrieve token creation results from localStorage to maintain data on re-renders */ useEffect(() => { @@ -78,13 +73,10 @@ const CryptoTransfer = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change for tokenTransferParamValue */ const handleTokenTransferInputOnChange = ( @@ -104,23 +96,23 @@ const CryptoTransfer = ({ baseContract }: PageProps) => { setTokenTransferParamValues((prev) => prev.map((masterParam) => { if (masterParam.fieldKey === masterFieldKey) { - (masterParam.fieldValue as any)[transfersType] = (masterParam.fieldValue as any)[ - transfersType - ].map((transfer: any) => { - if (transfer.fieldKey === fieldKey) { - const value = e.target.value; - if (param === 'isApprovalA' || param === 'isApprovalB') { - if (value === '') { - (transfer.fieldValue as any)[param] = false; + (masterParam.fieldValue as any)[transfersType] = (masterParam.fieldValue as any)[transfersType].map( + (transfer: any) => { + if (transfer.fieldKey === fieldKey) { + const value = e.target.value; + if (param === 'isApprovalA' || param === 'isApprovalB') { + if (value === '') { + (transfer.fieldValue as any)[param] = false; + } else { + (transfer.fieldValue as any)[param] = JSON.parse(value); + } } else { - (transfer.fieldValue as any)[param] = JSON.parse(value); + (transfer.fieldValue as any)[param] = e.target.value; } - } else { - (transfer.fieldValue as any)[param] = e.target.value; } + return transfer; } - return transfer; - }); + ); } return masterParam; }) @@ -187,16 +179,14 @@ const CryptoTransfer = ({ baseContract }: PageProps) => { break; case 'REMOVE': if (transferType === 'CRYPTO') { - setFieldKey((prev: any) => - prev.filter((field: any) => field.fieldKey !== removingFieldKey) - ); + setFieldKey((prev: any) => prev.filter((field: any) => field.fieldKey !== removingFieldKey)); } else { setTokenTransferParamValues((prev) => prev.map((masterParam) => { if (masterParam.fieldKey === masterFieldKey) { - (masterParam.fieldValue as any)[transferListType!] = ( - masterParam.fieldValue as any - )[transferListType!].filter((field: any) => field.fieldKey !== removingFieldKey); + (masterParam.fieldValue as any)[transferListType!] = (masterParam.fieldValue as any)[ + transferListType! + ].filter((field: any) => field.fieldKey !== removingFieldKey); } return masterParam; }) @@ -208,18 +198,13 @@ const CryptoTransfer = ({ baseContract }: PageProps) => { /** * @dev handle modify master token transfer record */ - const handleModifyMasterTokenTransferRecords = ( - type: 'ADD' | 'REMOVE', - removingFieldKey?: string - ) => { + const handleModifyMasterTokenTransferRecords = (type: 'ADD' | 'REMOVE', removingFieldKey?: string) => { switch (type) { case 'ADD': setTokenTransferParamValues((prev) => [...prev, generateInitialTokenTransferParamValues()]); break; case 'REMOVE': - setTokenTransferParamValues((prev) => - prev.filter((field) => field.fieldKey !== removingFieldKey) - ); + setTokenTransferParamValues((prev) => prev.filter((field) => field.fieldKey !== removingFieldKey)); break; } }; diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx index 9086ef8f9..7007d3451 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx @@ -33,10 +33,7 @@ import { SmartContractExecutionResult, TransactionResult } from '@/types/contrac import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; import { htsMultiTokensTransferParamFields } from '@/utils/contract-interactions/HTS/token-transfer/paramFieldConstant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; -import { - transferFungibleTokens, - transferNonFungibleTokens, -} from '@/api/hedera/tokenTransfer-interactions'; +import { transferFungibleTokens, transferNonFungibleTokens } from '@/api/hedera/tokenTransfer-interactions'; import { FungibleParamValue, NonFungibleParamValue, @@ -49,6 +46,7 @@ import { SharedExecuteButtonWithFee, } from '../../../shared/components/ParamInputForm'; import TransferRecordForm from './TransferRecordForm'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; interface PageProps { baseContract: Contract; @@ -69,7 +67,8 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { const [currentTransactionPage, setCurrentTransactionPage] = useState(1); const contractCaller = JSON.parse(Cookies.get('_connectedAccounts') as string)[0]; const [transactionResults, setTransactionResults] = useState([]); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-TRANSFER.MULTIPLE-TOKENS-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-TRANSFER']['MULTIPLE-TOKENS']; const tokenCommonFields = useMemo(() => { if (APIMethods === 'FUNGIBLE') { return ['hederaTokenAddress', 'accountIDs', 'amounts']; @@ -93,9 +92,7 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { }, ]; - const [fungibleParamValues, setFungibleParamValues] = useState([ - generateInitialFungibleParamValue(), - ]); + const [fungibleParamValues, setFungibleParamValues] = useState([generateInitialFungibleParamValue()]); const [nonFungibleParamValues, setNonFungibleParamValues] = useState([ generateInitialNonFungibleParamValue(), ]); @@ -108,13 +105,10 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle modifying transfer records */ const handleModifyTransferRecords = ( @@ -130,9 +124,7 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { break; case 'REMOVE': if (paramValues!.length > 1) { - setParamValues((prev: any) => - prev.filter((field: any) => field.fieldKey !== removingFieldKey) - ); + setParamValues((prev: any) => prev.filter((field: any) => field.fieldKey !== removingFieldKey)); } } }; @@ -165,9 +157,7 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { const { hederaTokenAddress, feeValue } = commonParamValues; // extract fungibleParamsAccountIDs && fungibleParamsAmmounts array - const fungibleParamsAccountIDs = fungibleParamValues.map( - (prev) => prev.fieldValue.receiverAddress - ); + const fungibleParamsAccountIDs = fungibleParamValues.map((prev) => prev.fieldValue.receiverAddress); fungibleParamsAccountIDs.unshift(contractCaller); // add contractCaller to the beginning of the list let amountTotal = 0; @@ -178,12 +168,8 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { fungibleParamsAmmounts.unshift(amountTotal * -1); // add the negative total amount to the beginning of the list // extract nonFungibleParamsSenders, nonFungibleParamsReceivers && nonFungibleParamsSerialNumbers array - const nonFungibleParamsSenders = nonFungibleParamValues.map( - (prev) => prev.fieldValue.senderAddress - ); - const nonFungibleParamsReceivers = nonFungibleParamValues.map( - (prev) => prev.fieldValue.receiverAddress - ); + const nonFungibleParamsSenders = nonFungibleParamValues.map((prev) => prev.fieldValue.senderAddress); + const nonFungibleParamsReceivers = nonFungibleParamValues.map((prev) => prev.fieldValue.receiverAddress); const nonFungibleParamsSerialNumbers = nonFungibleParamValues.map((prev) => Number(prev.fieldValue.serialNumber) ); @@ -309,12 +295,8 @@ const TransferMultipleTokens = ({ baseContract }: PageProps) => { paramType={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputType} paramSize={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputSize} explanation={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].explanation} - paramClassName={ - (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputClassname - } - paramPlaceholder={ - (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputPlaceholder - } + paramClassName={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputClassname} + paramPlaceholder={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputPlaceholder} paramFocusColor={ (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputFocusBorderColor } diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx index 731e88591..8d187d010 100644 --- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx +++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx @@ -28,16 +28,14 @@ import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors'; import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates'; import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful'; import { transferSingleToken } from '@/api/hedera/tokenTransfer-interactions'; +import { HEDERA_TRANSACTION_RESULT_STORAGE_KEYS } from '@/utils/common/constants'; import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults'; import { TransactionResultTable } from '../../../shared/components/TransactionResultTable'; import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSanitizeFormInputs'; import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage'; import { htsTokenTransferParamFields } from '@/utils/contract-interactions/HTS/token-transfer/paramFieldConstant'; import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage'; -import { - SharedExecuteButton, - SharedFormInputField, -} from '../../../shared/components/ParamInputForm'; +import { SharedExecuteButton, SharedFormInputField } from '../../../shared/components/ParamInputForm'; interface PageProps { baseContract: Contract; @@ -51,15 +49,10 @@ const TransferSingleToken = ({ baseContract }: PageProps) => { const [isSuccessful, setIsSuccessful] = useState(false); const hederaNetwork = JSON.parse(Cookies.get('_network') as string); const [currentTransactionPage, setCurrentTransactionPage] = useState(1); - const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-TRANSFER.SINGLE-TOKEN-RESULTS'; + const transactionResultStorageKey = + HEDERA_TRANSACTION_RESULT_STORAGE_KEYS['TOKEN-TRANSFER']['SINGLE-TOKEN']; const [transactionResults, setTransactionResults] = useState([]); - const tokenInfoFields = [ - 'hederaTokenAddress', - 'senderAddress', - 'receiverAddress', - 'quantity', - 'feeValue', - ]; + const tokenInfoFields = ['hederaTokenAddress', 'senderAddress', 'receiverAddress', 'quantity', 'feeValue']; const [isLoading, setIsLoading] = useState({ NFT: false, FUNGIBLE: false, @@ -89,13 +82,10 @@ const TransferSingleToken = ({ baseContract }: PageProps) => { setCurrentTransactionPage, setTransactionResults ); - }, [toaster]); + }, [toaster, transactionResultStorageKey]); // declare a paginatedTransactionResults - const paginatedTransactionResults = usePaginatedTxResults( - currentTransactionPage, - transactionResults - ); + const paginatedTransactionResults = usePaginatedTxResults(currentTransactionPage, transactionResults); /** @dev handle form inputs on change */ const handleInputOnChange = (e: any, param: string) => { diff --git a/system-contract-dapp-playground/src/components/navbar/index.tsx b/system-contract-dapp-playground/src/components/navbar/index.tsx index dd770210d..f71b7df11 100644 --- a/system-contract-dapp-playground/src/components/navbar/index.tsx +++ b/system-contract-dapp-playground/src/components/navbar/index.tsx @@ -26,9 +26,9 @@ import { motion } from 'framer-motion'; import WalletPopup from '../wallet-popup'; import { useToast } from '@chakra-ui/react'; import { useEffect, useState } from 'react'; +import { NetworkName } from '@/types/common'; import { usePathname } from 'next/navigation'; import { BsChevronDown } from 'react-icons/bs'; -import { NetworkName } from '@/types/common'; import { CommonErrorToast } from '../toast/CommonToast'; import { isProtectedRoute } from '@/utils/common/helpers'; import { loadAccountInfoFromCookies } from '@/api/cookies'; @@ -168,12 +168,7 @@ const Navbar = () => { {isConnected &&
} {didWalletPop && ( - + )} ); diff --git a/system-contract-dapp-playground/src/components/wallet-popup/index.tsx b/system-contract-dapp-playground/src/components/wallet-popup/index.tsx index 8b837a28b..2e69a5c87 100644 --- a/system-contract-dapp-playground/src/components/wallet-popup/index.tsx +++ b/system-contract-dapp-playground/src/components/wallet-popup/index.tsx @@ -23,30 +23,40 @@ import Image from 'next/image'; import { ethers } from 'ethers'; import { clearCookies } from '@/api/cookies'; import { NetworkName } from '@/types/common'; -import { HASHSCAN_BASE_URL } from '@/utils/common/constants'; import { BiCopy, BiCheckDouble } from 'react-icons/bi'; -import { SkeletonText, useToast } from '@chakra-ui/react'; +import { HASHSCAN_BASE_URL } from '@/utils/common/constants'; import { getBalance, getWalletProvider } from '@/api/wallet'; import { getHederaNativeIDFromEvmAddress } from '@/api/mirror-node'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { CommonErrorToast, NoWalletToast } from '../toast/CommonToast'; +import { SkeletonText, useDisclosure, useToast } from '@chakra-ui/react'; import { BsChevronDown, BsFillQuestionOctagonFill } from 'react-icons/bs'; +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, +} from '@chakra-ui/react'; +import { clearTransactionCache } from '@/api/localStorage'; interface PageProps { - isOpen: boolean; network: NetworkName; userAddress: string; setIsOpen: Dispatch>; } -const WalletPopup = ({ isOpen, setIsOpen, userAddress, network }: PageProps) => { +const WalletPopup = ({ setIsOpen, userAddress, network }: PageProps) => { const toaster = useToast(); const [isCopied, setIsCopied] = useState({ accountId: false, evmAddress: false, }); - const [hederaAccountId, setHederaAccountId] = useState(); + const { isOpen, onOpen, onClose } = useDisclosure(); const [accountBalance, setAccountBalance] = useState(); + const [hederaAccountId, setHederaAccountId] = useState(); const { walletProvider, err: walletProviderErr } = getWalletProvider(); /** @@ -118,9 +128,15 @@ const WalletPopup = ({ isOpen, setIsOpen, userAddress, network }: PageProps) => * @dev disconnect user */ const handleDisconnect = async () => { - // clear Cookies + // close modal + onClose(); + + // clear Cookies cache await clearCookies(); + // clear localStorage cache + clearTransactionCache(); + // redirect user to landing page setIsOpen(false); window.location.reload(); @@ -251,15 +267,48 @@ const WalletPopup = ({ isOpen, setIsOpen, userAddress, network }: PageProps) => {/* Disconnect */}
-
{ + onOpen(); + }} className="flex flex-col items-center py-1 px-4 bg-button text-white w-full border-[1px] border-white/50 hover:bg-transparent justify-center rounded-xl cursor-pointer" > {''}

Disconnect

-
+ + + + + + Sure to disconnect? + + + {/* break line */} +
+ + +

+ By completing this action, all the transactions you have made during this + session will be permanently erased from the DApp's cache, but they will + still be accessible through HashScan or other explorer solutions. +

+ + + + + + +
diff --git a/system-contract-dapp-playground/src/utils/common/constants.ts b/system-contract-dapp-playground/src/utils/common/constants.ts index c0d839bcd..7c474be1e 100644 --- a/system-contract-dapp-playground/src/utils/common/constants.ts +++ b/system-contract-dapp-playground/src/utils/common/constants.ts @@ -39,6 +39,9 @@ export const HEDERA_OFFICIAL_HIPS_URL = 'https://hips.hedera.com/'; /** @notice hashcan baseURL */ export const HASHSCAN_BASE_URL = 'https://hashscan.io'; +/** @notice Hedera network */ +export const OFFCIAL_NETWORK_NAME = 'HEDERA'; + /** @notice information about Hedera social media */ export const HEDERA_SOCIAL_MEDIA = [ { @@ -187,13 +190,7 @@ export const HEDERA_SMART_CONTRACTS_ASSETS = { contractABI: TokenCreateCustomContract.abi, contractBytecode: TokenCreateCustomContract.bytecode, githubUrl: `${HEDERA_SMART_CONTRACT_OFFICIAL_GITHUB_URL}/blob/main/contracts/hts-precompile/examples/token-create/TokenCreateCustom.sol`, - methods: [ - 'fungibleTokenCreate', - 'non-fungibleTokenCreate', - 'mint', - 'tokenAssociation', - 'grantKYC', - ], + methods: ['fungibleTokenCreate', 'non-fungibleTokenCreate', 'mint', 'tokenAssociation', 'grantKYC'], }, { name: 'TokenManagementContract' as ContractName, @@ -319,3 +316,39 @@ export const HEDERA_SHARED_PARAM_INPUT_FIELDS = { inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple, inputClassname: HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME, }; + +/** + * @notice a shared object stores all transaction result storage keys + */ +const prepareTransactionResultStorageKey = (contractKey: string, methodKey: string, resultKey: string) => { + return `HEDERA.${contractKey}.${methodKey}.${resultKey}-RESULTS`; +}; +export const HEDERA_TRANSACTION_RESULT_STORAGE_KEYS = { + 'TOKEN-CREATE': { + 'TOKEN-KYC': prepareTransactionResultStorageKey('HTS', 'TOKEN-CREATE', 'TOKEN-KYC'), + 'MINT-TOKEN': prepareTransactionResultStorageKey('HTS', 'TOKEN-CREATE', 'MINT-TOKEN'), + 'FUNGIBLE-TOKEN': prepareTransactionResultStorageKey('HTS', 'TOKEN-CREATE', 'FUNGIBLE-TOKEN'), + 'ASSOCIATE-TOKEN': prepareTransactionResultStorageKey('HTS', 'TOKEN-CREATE', 'ASSOCIATE-TOKEN'), + 'NON-FUNGIBLE-TOKEN': prepareTransactionResultStorageKey('HTS', 'TOKEN-CREATE', 'NON-FUNGIBLE-TOKEN'), + }, + 'TOKEN-MANAGE': { + 'TOKEN-INFO': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-INFO'), + 'TOKEN-STATUS': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-STATUS'), + 'TOKEN-DELETE': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-DELETE'), + 'TOKEN-RELATION': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-RELATION'), + 'TOKEN-REDUCTION': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-REDUCTION'), + 'TOKEN-PERMISSION': prepareTransactionResultStorageKey('HTS', 'TOKEN-MANAGE', 'TOKEN-PERMISSION'), + }, + 'TOKEN-QUERY': { + 'TOKEN-VALIDITY': prepareTransactionResultStorageKey('HTS', 'TOKEN-QUERY', 'TOKEN-VALIDITY'), + 'TOKEN-PERMISSION': prepareTransactionResultStorageKey('HTS', 'TOKEN-QUERY', 'TOKEN-PERMISSION'), + 'TOKEN-STATUS-INFO': prepareTransactionResultStorageKey('HTS', 'TOKEN-QUERY', 'TOKEN-STATUS-INFO'), + 'TOKEN-GENERAL-INFO': prepareTransactionResultStorageKey('HTS', 'TOKEN-QUERY', 'TOKEN-GENERAL-INFO'), + 'TOKEN-SPECIFIC-INFO': prepareTransactionResultStorageKey('HTS', 'TOKEN-QUERY', 'TOKEN-SPECIFIC-INFO'), + }, + 'TOKEN-TRANSFER': { + 'SINGLE-TOKEN': prepareTransactionResultStorageKey('HTS', 'TOKEN-TRANSFER', 'SINGLE-TOKEN'), + 'CRYPTO-TRANSFER': prepareTransactionResultStorageKey('HTS', 'TOKEN-TRANSFER', 'CRYPTO-TRANSFER'), + 'MULTIPLE-TOKENS': prepareTransactionResultStorageKey('HTS', 'TOKEN-TRANSFER', 'MULTIPLE-TOKENS'), + }, +}; diff --git a/system-contract-dapp-playground/src/utils/common/helpers.ts b/system-contract-dapp-playground/src/utils/common/helpers.ts index 5b7f03858..19bce1fb1 100644 --- a/system-contract-dapp-playground/src/utils/common/helpers.ts +++ b/system-contract-dapp-playground/src/utils/common/helpers.ts @@ -104,3 +104,20 @@ export const generatedRandomUniqueKey = (byteLength: number) => { const randomKey = ethers.hexlify(randomBytes); return randomKey; }; + +/** + * @dev prepare transaction result storage key + * + * @param methodKey: string + * + * @param resultKey: string + * + * @return string + */ +export const prepareTransactionResultStorageKey = ( + contractKey: string, + methodKey: string, + resultKey: string +) => { + return `HEDERA.${contractKey}.${methodKey}.${resultKey}-RESULTS`; +};