feat: move fungibleTokens to composable

src/composables/fungibleTokens.ts

@@ -0,0 +1,317 @@
+import { watch } from 'vue';
+import camelCaseKeysDeep from 'camelcase-keys-deep';
+import BigNumber from 'bignumber.js';
+import { Encoded, Encoding } from '@aeternity/aepp-sdk';
+import { fetchAllPages, handleUnknownError, toShiftedBigNumber } from '@/utils';
+import type {
+ BigNumberPublic,
+ IDefaultComposableOptions,
+ IToken,
+ ITokenBalanceResponse,
+ ITokenList,
+ ITransaction,
+ TokenPair,
+} from '@/types';
+import { PROTOCOL_AETERNITY, STORAGE_KEYS, TX_DIRECTION } from '@/constants';
+import FungibleTokenFullInterfaceACI from '@/lib/contracts/FungibleTokenFullInterfaceACI.json';
+import AedexV2PairACI from '@/lib/contracts/AedexV2PairACI.json';
+import ZeitTokenACI from '@/lib/contracts/FungibleTokenFullACI.json';
+
+import { aettosToAe, calculateSupplyAmount, categorizeContractCallTxObject } from '@/protocols/aeternity/helpers';
+import { AE_SYMBOL } from '@/protocols/aeternity/config';
+
+import { useAccounts } from './accounts';
+import { useAeSdk } from './aeSdk';
+import { useMiddleware } from './middleware';
+import { useTippingContracts } from './tippingContracts';
+import { createNetworkWatcher } from './networks';
+import { createPollingBasedOnMountedComponents } from './composablesHelpers';
+import { useStorageRef } from './storageRef';
+
+/**
+ * List of all custom tokens available (currently only AE network).
+ * As this list is quite big (hundreds of items) it requires processing optimizations.
+ */
+const availableTokens = useStorageRef<ITokenList>(
+ {},
+ STORAGE_KEYS.fungibleTokenList,
+);
+
+/**
+ * List of tokens (assets) owned by active account with the balance value
+ */
+const tokenBalances = useStorageRef<Record<string, IToken[]>>(
+ {},
+ STORAGE_KEYS.fungibleTokenBalances,
+);
+
+const { onNetworkChange } = createNetworkWatcher();
+const availableTokensPooling = createPollingBasedOnMountedComponents(60000);
+const tokenBalancesPooling = createPollingBasedOnMountedComponents(10000);
+
+export function useFungibleTokens({ store }: IDefaultComposableOptions) {
+ const { getAeSdk } = useAeSdk({ store });
+ const { fetchFromMiddleware } = useMiddleware();
+ const { tippingContractAddresses } = useTippingContracts({ store });
+ const {
+ isLoggedIn,
+ aeAccounts,
+ getLastActiveProtocolAccount,
+ } = useAccounts();
+
+ function getAccountTokenBalances(address?: string): IToken[] {
+ const account = getLastActiveProtocolAccount(PROTOCOL_AETERNITY);
+ return tokenBalances.value[address || account?.address!] || [];
+ }
+
+ async function loadAvailableTokens() {
+ const response: IToken[] = camelCaseKeysDeep(await fetchAllPages(
+ () => fetchFromMiddleware('/v2/aex9?by=name&limit=100&direction=forward'),
+ fetchFromMiddleware,
+ ));
+
+ if (!response.length) {
+ availableTokens.value = {};
+ }
+
+ availableTokens.value = response.reduce((accumulator, token) => {
+ // eslint-disable-next-line no-param-reassign
+ accumulator[token.contractId] = token;
+ return accumulator;
+ }, {} as ITokenList);
+ }
+
+ async function loadTokenBalances() {
+ if (!isLoggedIn.value) {
+ return;
+ }
+ const addresses = aeAccounts.value.map((account) => account.address);
+
+ await Promise.all(addresses.map(async (address) => {
+ try {
+ const tokens: ITokenBalanceResponse[] = camelCaseKeysDeep(await fetchAllPages(
+ () => fetchFromMiddleware(`/v2/aex9/account-balances/${address}?limit=100`),
+ fetchFromMiddleware,
+ ));
+ if (!tokens.length) {
+ return;
+ }
+
+ tokenBalances.value[address] = tokens
+ .filter(({ contractId }) => availableTokens.value[contractId])
+ .map(({ amount, contractId }): IToken => {
+ const availableToken = availableTokens.value[contractId];
+ const balance = toShiftedBigNumber(amount!, -availableToken.decimals);
+ const convertedBalance = Number(balance.toFixed(2));
+
+ return {
+ ...availableToken, // TODO store the balance and amount separately from asset data
+ amount,
+ convertedBalance,
+ };
+ });
+ } catch (error) {
+ handleUnknownError(error);
+ }
+ }));
+ }
+
+ async function createOrChangeAllowance(contractId: string, amount: number | string) {
+ const aeSdk = await getAeSdk();
+ const account = getLastActiveProtocolAccount(PROTOCOL_AETERNITY);
+ const selectedToken = tokenBalances.value?.[account?.address!]
+ ?.find((token) => token?.contractId === contractId);
+
+ const tokenContract = await aeSdk.initializeContract({
+ aci: FungibleTokenFullInterfaceACI,
+ address: selectedToken?.contractId as any,
+ });
+
+ const { decodedResult } = await tokenContract.allowance({
+ from_account: account?.address,
+ for_account: tippingContractAddresses?.value?.tippingV2?.replace('ct_', 'ak_'),
+ });
+
+ const allowanceAmount = (decodedResult !== undefined)
+ ? new BigNumber(decodedResult)
+ .multipliedBy(-1)
+ .plus(toShiftedBigNumber(amount, selectedToken?.decimals!))
+ .toNumber()
+ : toShiftedBigNumber(amount, selectedToken?.decimals!)
+ .toNumber();
+
+ const getContractFunction = (tokenContract.methods as any)[
+ decodedResult !== undefined ? 'change_allowance' : 'create_allowance'
+ ];
+
+ return getContractFunction(
+ tippingContractAddresses.value?.tippingV2?.replace(
+ `${Encoding.ContractAddress}_`,
+ `${Encoding.AccountAddress}_`,
+ ),
+ allowanceAmount,
+ );
+ }
+
+ async function getContractTokenPairs(
+ address: Encoded.ContractAddress,
+ ): Promise<Partial<TokenPair> & Record<string, any>> {
+ try {
+ const aeSdk = await getAeSdk();
+ const account = getLastActiveProtocolAccount(PROTOCOL_AETERNITY);
+ const tokenContract = await aeSdk.initializeContract({
+ aci: AedexV2PairACI,
+ address,
+ });
+
+ const [
+ { decodedResult: balances },
+ { decodedResult: balance },
+ { decodedResult: token0 },
+ { decodedResult: token1 },
+ { decodedResult: reserves },
+ { decodedResult: totalSupply },
+ ] = await Promise.all([
+ tokenContract.balances(),
+ tokenContract.balance(account?.address),
+ tokenContract.token0(),
+ tokenContract.token1(),
+ tokenContract.get_reserves(),
+ tokenContract.total_supply(),
+ ]);
+
+ return {
+ token0: {
+ ...availableTokens.value?.[token0],
+ amount: calculateSupplyAmount(
+ balance,
+ totalSupply,
+ reserves.reserve0,
+ ),
+ },
+ token1: {
+ ...availableTokens.value?.[token1],
+ amount: calculateSupplyAmount(
+ balance,
+ totalSupply,
+ reserves.reserve1,
+ ),
+ },
+ totalSupply,
+ balance,
+ balances,
+ };
+ } catch (error) {
+ return {};
+ }
+ }
+
+ async function transferToken(
+ tokenContractId: Encoded.ContractAddress,
+ toAccount: Encoded.AccountAddress,
+ amount: number,
+ option: {
+ waitMined: boolean,
+ modal: boolean,
+ },
+ ) {
+ const aeSdk = await getAeSdk();
+ const tokenContract = await aeSdk.initializeContract({
+ aci: FungibleTokenFullInterfaceACI,
+ address: tokenContractId,
+ });
+ return tokenContract.transfer(toAccount, amount.toFixed(), option);
+ }
+
+ async function burnTriggerPoS(
+ address: Encoded.ContractAddress,
+ posAddress: string,
+ invoiceId: string,
+ amount: number,
+ option: {
+ waitMined: boolean,
+ modal: boolean,
+ },
+ ) {
+ const aeSdk = await getAeSdk();
+ const tokenContract = await aeSdk.initializeContract({
+ aci: ZeitTokenACI,
+ address,
+ });
+ return tokenContract.burn_trigger_pos(
+ amount.toFixed(),
+ posAddress,
+ invoiceId,
+ option,
+ );
+ }
+
+ function getTxSymbol(transaction?: ITransaction) {
+ if (transaction?.pendingTokenTx) {
+ return availableTokens.value[transaction.tx.contractId]?.symbol;
+ }
+ const contractCallData = transaction?.tx && categorizeContractCallTxObject(transaction);
+ return availableTokens.value[contractCallData?.token!]?.symbol || AE_SYMBOL;
+ }
+
+ function getTxAmountTotal(
+ transaction: ITransaction,
+ direction: string = TX_DIRECTION.sent,
+ ) {
+ const contractCallData = transaction.tx && categorizeContractCallTxObject(transaction);
+ if (contractCallData && availableTokens.value[contractCallData.token!]) {
+ return +toShiftedBigNumber(
+ contractCallData.amount || 0,
+ -availableTokens.value[contractCallData.token!].decimals,
+ );
+ }
+ const isReceived = direction === TX_DIRECTION.received;
+
+ const rawAmount = (
+ transaction.tx?.amount
+ || (transaction.tx?.tx?.tx as any)?.amount
+ || transaction.tx?.nameFee
+ || 0
+ );
+
+ const amount: BigNumberPublic = (typeof rawAmount === 'object')
+ ? rawAmount
+ : new BigNumber(Number(rawAmount));
+
+ return +aettosToAe(amount
+ .plus(isReceived ? 0 : transaction.tx?.fee || 0)
+ .plus(isReceived ? 0 : transaction.tx?.tx?.tx?.fee || 0));
+ }
+
+ onNetworkChange(async (network, oldNetwork) => {
+ const newMiddlewareUrl = network.protocols[PROTOCOL_AETERNITY].middlewareUrl;
+ const oldMiddlewareUrl = oldNetwork?.protocols?.[PROTOCOL_AETERNITY]?.middlewareUrl;
+ if (newMiddlewareUrl !== oldMiddlewareUrl) {
+ await loadAvailableTokens();
+ await loadTokenBalances();
+ }
+ });
+
+ watch(aeAccounts, (val, oldVal) => {
+ if (val !== oldVal) {
+ loadTokenBalances();
+ }
+ });
+
+ availableTokensPooling(() => loadAvailableTokens());
+ tokenBalancesPooling(() => loadTokenBalances());
+
+ return {
+ availableTokens,
+ tokenBalances,
+ burnTriggerPoS,
+ createOrChangeAllowance,
+ getAccountTokenBalances,
+ getContractTokenPairs,
+ getTxSymbol,
+ getTxAmountTotal,
+ transferToken,
+ loadTokenBalances,
+ loadAvailableTokens,
+ };
+}

src/composables/index.ts

@@ -27,6 +27,7 @@ export * from './transactionTokens';
 export * from './transactionList';
 export * from './ui';
 export * from './viewport';
+export * from './fungibleTokens';
 export * from './coinTokensProps';
 export * from './scrollTransactions';
 export * from './languages';

src/composables/latestTransactionList.ts

@@ -15,6 +15,7 @@ import {
 } from '@/utils';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { AE_MDW_TO_NODE_APPROX_DELAY_TIME } from '@/protocols/aeternity/config';
+import { useFungibleTokens } from './fungibleTokens';
 import { useAccounts } from './accounts';
 import { useBalances } from './balances';
 import { useTransactionTx } from './transactionTx';
@@ -40,10 +41,9 @@ export function useLatestTransactionList({ store }: IDefaultComposableOptions) {
  fetchTransactions,
  } = useTransactionList({ store });
 
+ const { tokenBalances } = useFungibleTokens({ store });
  const btcTransactions = ref<ITransaction[]>([]);
 
- const tokens = computed(() => store.state.fungibleTokens.tokens);
-
  const latestTransactions = computed(() => {
  const aeTransactions = Object.entries(transactions.value)
  .map(([
@@ -131,7 +131,7 @@ export function useLatestTransactionList({ store }: IDefaultComposableOptions) {
  );
 
  watch(
- tokens,
+ tokenBalances,
  (oldTokens, newTokens) => {
  if (!isEqual(oldTokens, newTokens)) {
  updateTransactionListData();

src/composables/tokensList.ts

@@ -13,7 +13,9 @@ import type {
 import { AE_CONTRACT_ID } from '@/protocols/aeternity/config';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { PROTOCOL_AETERNITY } from '@/constants';
-import { useCurrencies } from '@/composables/currencies';
+import { useCurrencies } from './currencies';
+import { useFungibleTokens } from './fungibleTokens';
+import { useAccounts } from './accounts';
 import { useMultisigAccounts } from './multisigAccounts';
 import { useBalances } from './balances';
 
@@ -46,21 +48,27 @@ export function useTokensList({
 }: UseTokensListOptions) {
  const { marketData } = useCurrencies();
  const { balance } = useBalances();
+ const { activeAccount } = useAccounts();
  const { activeMultisigAccount } = useMultisigAccounts({ store });
+ const {
+ availableTokens: allAvailableTokens,
+ getAccountTokenBalances,
+ } = useFungibleTokens({ store });
 
  const availableTokens = computed<ITokenList>(() => (
  isMultisig
- ? []
- : (store.state as any).fungibleTokens.availableTokens
+ ? {}
+ : allAvailableTokens.value
  ));
- const tokenBalances = computed<IToken[]>(() => store.getters['fungibleTokens/tokenBalances']);
 
  const aeTokenBalance = computed((): Balance => (
  isMultisig
  ? new BigNumber(activeMultisigAccount.value?.balance || 0)
  : balance.value || new BigNumber(0)
  ));
 
+ const tokenBalances = computed(() => getAccountTokenBalances(activeAccount.value.address));
+
  /**
  * Returns the default aeternity meta information
  */