TW-1148 Update SWR module

jest.config.ts

@@ -15,7 +15,7 @@ const config = {
     '.+\\.tsx$': 'ts-jest'
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  setupFiles: ['dotenv/config', '@serh11p/jest-webextension-mock'],
+  setupFiles: ['dotenv/config', '@temple-wallet/jest-webextension-mock'],
   setupFilesAfterEnv: ['./jest.setup.js']
 };
 

package.json

@@ -45,7 +45,6 @@
     "@redux-devtools/remote": "^0.8.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@rnw-community/shared": "^0.48.0",
-    "@serh11p/jest-webextension-mock": "4.0.0",
     "@svgr/webpack": "6.4.0",
     "@taquito/ledger-signer": "17.0.0",
     "@taquito/local-forging": "17.0.0",
@@ -58,6 +57,7 @@
     "@taquito/tzip16": "17.0.0",
     "@taquito/utils": "17.0.0",
     "@temple-wallet/dapp": "5.0.2",
+    "@temple-wallet/jest-webextension-mock": "^4.1.0",
     "@temple-wallet/wallet-address-validator": "^0.4.3",
     "@tezos-domains/core": "1.26.0",
     "@tezos-domains/taquito-client": "1.26.0",
@@ -94,6 +94,7 @@
     "@typescript-eslint/parser": "^5.43.0",
     "@vespaiach/axios-fetch-adapter": "^0.3.1",
     "assert": "1.5.0",
+    "async-mutex": "^0.4.0",
     "async-retry": "1.3.3",
     "autoprefixer": "10.4.2",
     "axios": "0.26.1",
@@ -175,7 +176,7 @@
     "rxjs": "^7.5.6",
     "scryptsy": "2.1.0",
     "stream-browserify": "3.0.0",
-    "swr": "1.3.0",
+    "swr": "2.2.4",
     "tailwindcss": "2.2.19",
     "terser-webpack-plugin": "5.3.6",
     "three": "^0.151.2",

public/_locales/uk/messages.json

@@ -116,6 +116,9 @@
   "lock": {
     "message": "Заблокувати"
   },
+  "lockUpSettingsDescription": {
+    "message": "Розширення буде заблоковане після 5 хвилин відсутності активності."
+  },
   "importedAccount": {
     "message": "Імпортовані"
   },

src/app/ConfirmPage.tsx

@@ -131,7 +131,7 @@ const ConfirmDAppForm: FC = () => {
     return pageId;
   }, [loc.search]);
 
-  const { data } = useRetryableSWR<TempleDAppPayload>([id], getDAppPayload, {
+  const { data } = useRetryableSWR<TempleDAppPayload, unknown, string>(id, getDAppPayload, {
     suspense: true,
     shouldRetryOnError: false,
     revalidateOnFocus: false,

src/app/a11y/AwaitFonts.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 
 import FontFaceObserver from 'fontfaceobserver';
-import useSWR from 'swr';
+
+import { useTypedSWR } from 'lib/swr';
 
 interface AwaitFontsProps extends PropsWithChildren {
   name: string;
@@ -10,7 +11,7 @@ interface AwaitFontsProps extends PropsWithChildren {
 }
 
 const AwaitFonts: FC<AwaitFontsProps> = ({ name, weights, className, children }) => {
-  useSWR([name, weights, className], awaitFonts, {
+  useTypedSWR([name, weights, className], awaitFonts, {
     suspense: true,
     shouldRetryOnError: false,
     revalidateOnFocus: false,
@@ -22,7 +23,7 @@ const AwaitFonts: FC<AwaitFontsProps> = ({ name, weights, className, children })
 
 export default AwaitFonts;
 
-async function awaitFonts(name: string, weights: number[], className: string) {
+async function awaitFonts([name, weights, className]: [string, number[], string]) {
   try {
     const fonts = weights.map(weight => new FontFaceObserver(name, { weight }));
     await Promise.all(fonts.map(font => font.load()));

src/app/a11y/AwaitI18N.tsx

@@ -1,12 +1,11 @@
 import { FC } from 'react';
 
-import useSWR from 'swr';
-
 import { onInited } from 'lib/i18n';
+import { useTypedSWR } from 'lib/swr';
 import { delay } from 'lib/utils';
 
 const AwaitI18N: FC = () => {
-  useSWR('i18n', awaitI18n, {
+  useTypedSWR('i18n', awaitI18n, {
     suspense: true,
     shouldRetryOnError: false,
     revalidateOnFocus: false,

src/app/pages/AddAsset/AddAsset.tsx

@@ -3,7 +3,7 @@ import React, { FC, ReactNode, useCallback, useEffect, useRef, useMemo } from 'r
 import classNames from 'clsx';
 import { FormContextValues, useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
-import { useSWRConfig } from 'swr';
+import { useSWRConfig, unstable_serialize } from 'swr';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { Alert, FormField, FormSubmitButton, NoSpaceField } from 'app/atoms';
@@ -228,7 +228,7 @@ const Form: FC = () => {
           Repo.toAccountTokenKey(chainId, accountPkh, tokenSlug)
         );
 
-        swrCache.delete(getBalanceSWRKey(tezos, tokenSlug, accountPkh));
+        swrCache.delete(unstable_serialize(getBalanceSWRKey(tezos, tokenSlug, accountPkh)));
 
         formAnalytics.trackSubmitSuccess();
 

src/app/pages/Buy/Crypto/Exolix/steps/InitialStep.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useEffect, useState, useMemo } from 'react';
 
 import classNames from 'clsx';
-import useSWR from 'swr';
 import { useDebounce } from 'use-debounce';
 
 import { FormSubmitButton } from 'app/atoms';
@@ -12,6 +11,7 @@ import WarningComponent from 'app/pages/Buy/Crypto/Exolix/steps/WarningComponent
 import { TopUpInput } from 'app/templates/TopUpInput';
 import { useAssetUSDPrice } from 'lib/fiat-currency';
 import { T } from 'lib/i18n';
+import { useTypedSWR } from 'lib/swr';
 import { useAccount } from 'lib/temple/front';
 
 import { EXOLIX_PRIVICY_LINK, EXOLIX_TERMS_LINK, outputTokensList } from '../config';
@@ -54,7 +54,7 @@ const InitialStep: FC<Props> = ({ exchangeData, setExchangeData, setStep, isErro
 
   const coinToPriceUSD = useAssetUSDPrice(coinTo.slug!);
 
-  const { data: currencies, isValidating: isCurrenciesLoading } = useSWR(['exolix/api/currencies'], getCurrencies);
+  const { data: currencies, isValidating: isCurrenciesLoading } = useTypedSWR(['exolix/api/currencies'], getCurrencies);
 
   const currenciesCount = useCurrenciesCount();
 
@@ -82,13 +82,13 @@ const InitialStep: FC<Props> = ({ exchangeData, setExchangeData, setStep, isErro
     }
   };
 
-  const { data: ratesData } = useSWR(['exolix/api/rate', coinFrom, coinTo, amount], () =>
+  const { data: ratesData } = useTypedSWR(['exolix/api/rate', coinFrom, coinTo, amount], () =>
     queryExchange({
       coinFrom: coinFrom.code,
-      coinFromNetwork: coinFrom.network!.code,
+      coinFromNetwork: coinFrom.network.code,
       amount: amount ?? 0,
       coinTo: coinTo.code,
-      coinToNetwork: coinTo!.network.code
+      coinToNetwork: coinTo.network.code
     })
   );
 
@@ -103,10 +103,10 @@ const InitialStep: FC<Props> = ({ exchangeData, setExchangeData, setStep, isErro
 
       const { toAmount: maxCoinFromAmount } = await queryExchange({
         coinFrom: coinTo.code,
-        coinFromNetwork: coinTo.network!.code,
+        coinFromNetwork: coinTo.network.code,
         amount: maxCoinToAmount,
         coinTo: coinFrom.code,
-        coinToNetwork: coinFrom.network!.code
+        coinToNetwork: coinFrom.network.code
       });
 
       setMaxAmountFetched(maxCoinFromAmount);

src/app/pages/Home/OtherComponents/BakingSection.tsx

@@ -86,7 +86,7 @@ const BakingSection = memo(() => {
   };
 
   const getBakingHistory = useCallback(
-    async (_k: string, accountPkh: string) => {
+    async ([, accountPkh, , chainId]: [string, string, string | nullish, string | nullish]) => {
       if (!isKnownChainId(chainId!)) {
         return [];
       }
@@ -97,7 +97,7 @@ const BakingSection = memo(() => {
         })) || []
       );
     },
-    [chainId]
+    []
   );
   const { data: bakingHistory, isValidating: loadingBakingHistory } = useRetryableSWR(
     ['baking-history', acc.publicKeyHash, myBakerPkh, chainId],

src/app/pages/ImportAccount/ManagedKTForm.tsx

@@ -36,12 +36,11 @@ export const ManagedKTForm: FC = () => {
   const [error, setError] = useState<ReactNode>(null);
 
   const queryKey = useMemo(
-    () =>
-      [
-        'get-accounts-contracts',
-        chainId,
-        ...accounts.filter(({ type }) => type !== TempleAccountType.ManagedKT).map(({ publicKeyHash }) => publicKeyHash)
-      ] as string[],
+    () => [
+      'get-accounts-contracts',
+      chainId!,
+      ...accounts.filter(({ type }) => type !== TempleAccountType.ManagedKT).map(({ publicKeyHash }) => publicKeyHash)
+    ],
     [accounts, chainId]
   );
   const { data: usersContracts = [] } = useRetryableSWR(queryKey, getUsersContracts, {});
@@ -224,7 +223,7 @@ export const ManagedKTForm: FC = () => {
   );
 };
 
-const getUsersContracts = async (_k: string, chainId: string, ...accounts: string[]) => {
+const getUsersContracts = async ([, chainId, ...accounts]: string[]) => {
   if (!isKnownChainId(chainId)) {
     return [];
   }

src/app/pages/ImportAccount/WatchOnlyForm.tsx

@@ -1,12 +1,12 @@
 import React, { FC, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 
 import { useForm, Controller } from 'react-hook-form';
-import useSWR from 'swr';
 
 import { Alert, FormSubmitButton, NoSpaceField } from 'app/atoms';
 import { useFormAnalytics } from 'lib/analytics';
 import { T, t } from 'lib/i18n';
 import { useTempleClient, useTezos, useTezosDomainsClient, validateDelegate } from 'lib/temple/front';
+import { useTezosAddressByDomainName } from 'lib/temple/front/tzdns';
 import { isAddressValid, isKTAddress } from 'lib/temple/helpers';
 import { delay } from 'lib/utils';
 
@@ -32,14 +32,7 @@ export const WatchOnlyForm: FC = () => {
 
   const addressValue = watch('address');
 
-  const domainAddressFactory = useCallback(
-    (_k: string, _checksum: string, address: string) => domainsClient.resolver.resolveNameToAddress(address),
-    [domainsClient]
-  );
-  const { data: resolvedAddress } = useSWR(['tzdns-address', tezos.checksum, addressValue], domainAddressFactory, {
-    shouldRetryOnError: false,
-    revalidateOnFocus: false
-  });
+  const { data: resolvedAddress } = useTezosAddressByDomainName(addressValue);
 
   const finalAddress = useMemo(
     () => (resolvedAddress && resolvedAddress !== null ? resolvedAddress : addressValue),

src/app/pages/Receive/Receive.tsx

@@ -1,8 +1,7 @@
-import React, { FC, memo, useCallback, useEffect } from 'react';
+import React, { FC, memo, useEffect } from 'react';
 
 import classNames from 'clsx';
 import { QRCode } from 'react-qr-svg';
-import useSWR from 'swr';
 
 import { FormField } from 'app/atoms';
 import { ReactComponent as CopyIcon } from 'app/icons/copy.svg';
@@ -13,7 +12,8 @@ import PageLayout from 'app/layouts/PageLayout';
 import ViewsSwitcher, { ViewsSwitcherProps } from 'app/templates/ViewsSwitcher/ViewsSwitcher';
 import { setTestID } from 'lib/analytics';
 import { T, t } from 'lib/i18n';
-import { useAccount, useTezos, useTezosDomainsClient } from 'lib/temple/front';
+import { useAccount, useTezosDomainsClient } from 'lib/temple/front';
+import { useTezosDomainNameByAddress } from 'lib/temple/front/tzdns';
 import { useSafeState } from 'lib/ui/hooks';
 import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 
@@ -35,23 +35,13 @@ const ADDRESS_FIELD_VIEWS = [
 
 const Receive: FC = () => {
   const account = useAccount();
-  const tezos = useTezos();
-  const { resolver: domainsResolver, isSupported } = useTezosDomainsClient();
+  const { isSupported } = useTezosDomainsClient();
   const address = account.publicKeyHash;
 
   const { fieldRef, copy, copied } = useCopyToClipboard();
   const [activeView, setActiveView] = useSafeState(ADDRESS_FIELD_VIEWS[1]);
 
-  const resolveDomainReverseName = useCallback(
-    (_k: string, pkh: string) => domainsResolver.resolveAddressToName(pkh),
-    [domainsResolver]
-  );
-
-  const { data: reverseName } = useSWR(
-    () => ['tzdns-reverse-name', address, tezos.checksum],
-    resolveDomainReverseName,
-    { shouldRetryOnError: false, revalidateOnFocus: false }
-  );
+  const { data: reverseName } = useTezosDomainNameByAddress(address);
 
   useEffect(() => {
     if (!isSupported) {

src/app/templates/AddressChip.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useCallback } from 'react';
 
 import classNames from 'clsx';
-import useSWR from 'swr';
 
 import { Button, HashChip } from 'app/atoms';
 import { ReactComponent as GlobeIcon } from 'app/icons/globe.svg';
 import { ReactComponent as HashIcon } from 'app/icons/hash.svg';
 import { TestIDProps } from 'lib/analytics';
-import { useTezos, useTezosDomainsClient, useStorage } from 'lib/temple/front';
+import { useStorage } from 'lib/temple/front';
+import { useTezosDomainNameByAddress } from 'lib/temple/front/tzdns';
 
 type Props = TestIDProps & {
   pkh: string;
@@ -19,18 +19,7 @@ type Props = TestIDProps & {
 const TZDNS_MODE_ON_STORAGE_KEY = 'domain-displayed';
 
 const AddressChip: FC<Props> = ({ pkh, className, small, modeSwitch, ...rest }) => {
-  const tezos = useTezos();
-  const { resolver: domainsResolver } = useTezosDomainsClient();
-
-  const resolveDomainReverseName = useCallback(
-    (_k: string, pkh: string) => domainsResolver.resolveAddressToName(pkh),
-    [domainsResolver]
-  );
-
-  const { data: tzdnsName } = useSWR(() => ['pkh-tzdns-name', pkh, tezos.checksum], resolveDomainReverseName, {
-    shouldRetryOnError: false,
-    revalidateOnFocus: false
-  });
+  const { data: tzdnsName } = useTezosDomainNameByAddress(pkh);
 
   const [domainDisplayed, setDomainDisplayed] = useStorage(TZDNS_MODE_ON_STORAGE_KEY, false);