Refactor allowance types

- Update the AllowanceData and related types to match the refactored event types - Set tsconfig "strict" to true + make required changes - Change some null/undefined return / param types - Remove donate button in 'transaction submitted' toast - Expand regression tests - Move some interfaces to more appropriate places Note: this ended up being a way too large commit, note to self to try to not let that happen again 😅
RevokeCash · Nov 27, 2024 · 8d501b2 · 8d501b2
1 parent d1cf53a
commit 8d501b2
Show file tree

Hide file tree

Showing 164 changed files with 1,104 additions and 986 deletions.
diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/address/[addressOrName]/page.tsx b/app/[locale]/address/[addressOrName]/page.tsx
@@ -1,4 +1,5 @@
 import AllowanceDashboard from 'components/allowances/dashboard/AllowanceDashboard';
+import { isNullish } from 'lib/utils';
 import { getChainName } from 'lib/utils/chains';
 import { shortenAddress } from 'lib/utils/formatting';
 import { getAddressAndDomainName } from 'lib/utils/whois';
@@ -10,19 +11,25 @@ interface Props {
     locale: string;
     addressOrName: string;
   };
+  searchParams: {
+    chainId?: string;
+  };
 }
 
-export const generateMetadata = async ({ params: { locale, addressOrName }, searchParams }): Promise<Metadata> => {
+export const generateMetadata = async ({
+  params: { locale, addressOrName },
+  searchParams,
+}: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   const { address, domainName } = await getAddressAndDomainName(addressOrName);
   const addressDisplay = domainName ?? shortenAddress(address);
 
   const chainName = getChainName(Number(searchParams.chainId || 1));
 
-  const title = !!searchParams.chainId
-    ? t('address.meta.title_chain', { addressDisplay, chainName })
-    : t('address.meta.title', { addressDisplay });
+  const title = isNullish(searchParams.chainId)
+    ? t('address.meta.title', { addressDisplay })
+    : t('address.meta.title_chain', { addressDisplay, chainName });
 
   return {
     title,

diff --git a/app/[locale]/blog/[...slug]/layout.tsx b/app/[locale]/blog/[...slug]/layout.tsx
@@ -22,7 +22,7 @@ const BlogLayout = async ({ params, children }: Props) => {
   unstable_setRequestLocale(params.locale);
 
   const t = await getTranslations({ locale: params.locale });
-  const { meta } = readAndParseContentFile(params.slug, params.locale, 'blog');
+  const { meta } = readAndParseContentFile(params.slug, params.locale, 'blog')!;
   const posts = await getSidebar(params.locale, 'blog');
   const translationUrl = await getTranslationUrl(params.slug, params.locale, 'blog');
 

diff --git a/app/[locale]/blog/[...slug]/page.tsx b/app/[locale]/blog/[...slug]/page.tsx
@@ -20,7 +20,7 @@ export const generateStaticParams = () => {
 };
 
 export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
-  const { meta } = readAndParseContentFile(slug, locale, 'blog');
+  const { meta } = readAndParseContentFile(slug, locale, 'blog')!;
 
   return {
     title: meta.title,
@@ -34,7 +34,7 @@ export const generateMetadata = async ({ params: { locale, slug } }: Props): Pro
 const BlogPostPage: NextPage<Props> = ({ params }) => {
   unstable_setRequestLocale(params.locale);
 
-  const { content } = readAndParseContentFile(params.slug, params.locale, 'blog');
+  const { content } = readAndParseContentFile(params.slug, params.locale, 'blog')!;
 
   return <MarkdownProse content={content} />;
 };

diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/disclaimer/page.tsx b/app/[locale]/disclaimer/page.tsx
@@ -19,7 +19,7 @@ export const metadata = {
 
 const DisclaimerPage: NextPage<Props> = ({ params }) => {
   unstable_setRequestLocale(params.locale);
-  const { content } = readAndParseContentFile('disclaimer', params.locale, 'docs');
+  const { content } = readAndParseContentFile('disclaimer', params.locale, 'docs')!;
 
   return (
     <ContentPageLayout>

diff --git a/app/[locale]/exploits/[slug]/ExploitChecker.tsx b/app/[locale]/exploits/[slug]/ExploitChecker.tsx
@@ -17,7 +17,7 @@ const ExploitCheckerWrapper = ({ exploit }: Props) => {
 
   return (
     <Suspense>
-      <AddressPageContextProvider address={address} initialChainId={chainIds[0]}>
+      <AddressPageContextProvider address={address!} initialChainId={chainIds[0]}>
         <AddressForm onSubmit={setAddress} chainIds={chainIds} />
         <ExploitChecker exploit={exploit} />
       </AddressPageContextProvider>

diff --git a/app/[locale]/exploits/[slug]/page.tsx b/app/[locale]/exploits/[slug]/page.tsx
@@ -28,7 +28,7 @@ export const generateStaticParams = async () => {
   return locales.flatMap((locale) => exploits.map((exploit) => ({ locale, slug: exploit.slug })));
 };
 
-export const generateMetadata = async ({ params: { locale, slug } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
   const { exploit } = await getStaticProps({ locale, slug });
   const t = await getTranslations();
 

diff --git a/app/[locale]/exploits/page.tsx b/app/[locale]/exploits/page.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
   const exploits = await getAllExploits();
   const { totalAmount, earliestYear } = getGlobalExploitStats(exploits);

diff --git a/app/[locale]/extension/page.tsx b/app/[locale]/extension/page.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -40,7 +40,7 @@ export const generateStaticParams = () => {
   return locales.map((locale) => ({ locale }));
 };
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/learn/[...slug]/page.tsx b/app/[locale]/learn/[...slug]/page.tsx
@@ -20,8 +20,8 @@ export const generateStaticParams = () => {
   return locales.flatMap((locale) => slugs.map((slug) => ({ locale, slug })));
 };
 
-export const generateMetadata = async ({ params: { locale, slug } }): Promise<Metadata> => {
-  const { meta } = readAndParseContentFile(slug, locale, 'learn');
+export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
+  const { meta } = readAndParseContentFile(slug, locale, 'learn')!;
 
   return {
     title: meta.title,
@@ -35,7 +35,7 @@ export const generateMetadata = async ({ params: { locale, slug } }): Promise<Me
 const LearnDocumentPage: NextPage<Props> = async ({ params }) => {
   unstable_setRequestLocale(params.locale);
 
-  const { content, meta } = readAndParseContentFile(params.slug, params.locale, 'learn');
+  const { content, meta } = readAndParseContentFile(params.slug, params.locale, 'learn')!;
   const sidebar = await getSidebar(params.locale, 'learn');
   const translationUrl = await getTranslationUrl(params.slug, params.locale, 'learn');
 

diff --git a/app/[locale]/learn/[category]/page.tsx b/app/[locale]/learn/[category]/page.tsx
@@ -23,7 +23,7 @@ export const generateStaticParams = () => {
   return locales.flatMap((locale) => categorySlugs.map((category) => ({ locale, category })));
 };
 
-export const generateMetadata = async ({ params: { locale, category } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale, category } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/learn/faq/page.tsx b/app/[locale]/learn/faq/page.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {
@@ -28,7 +28,7 @@ export const generateMetadata = async ({ params: { locale } }): Promise<Metadata
   };
 };
 
-const FaqPage: NextPage = async ({ params }: Props) => {
+const FaqPage: NextPage<Props> = async ({ params }: Props) => {
   unstable_setRequestLocale(params.locale);
 
   const sidebar = await getSidebar(params.locale, 'learn');

diff --git a/app/[locale]/learn/page.tsx b/app/[locale]/learn/page.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/learn/wallets/add-network/[slug]/AddNetworkChainSelect.tsx b/app/[locale]/learn/wallets/add-network/[slug]/AddNetworkChainSelect.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 // This is a wrapper around ChainSelectHref because we cannot pass the getUrl function as a prop from a server component
 const AddNetworkChainSelect = ({ chainId }: Props) => {
-  const getUrl = useCallback((chainId) => `/learn/wallets/add-network/${getChainSlug(chainId)}`, []);
+  const getUrl = useCallback((chainId: number) => `/learn/wallets/add-network/${getChainSlug(chainId)}`, []);
   return <ChainSelectHref instanceId="add-network-chain-select" selected={chainId} getUrl={getUrl} showNames />;
 };
 

diff --git a/app/[locale]/learn/wallets/add-network/[slug]/AddNetworkForm.tsx b/app/[locale]/learn/wallets/add-network/[slug]/AddNetworkForm.tsx
@@ -20,7 +20,7 @@ const AddNetworkForm = ({ chainId }: Props) => {
           <FormElement label="Network name" content={chainName} />
           <FormElement label="New RPC URL" content={getChainFreeRpcUrl(chainId)} />
           <FormElement label="Chain ID" content={String(chainId)} />
-          <FormElement label="Currency symbol" content={getChainNativeToken(chainId)} />
+          <FormElement label="Currency symbol" content={getChainNativeToken(chainId)!} />
           <FormElement label="Block explorer URL (Optional)" content={getChainExplorerUrl(chainId)} />
         </div>
         <p>{t('learn.add_network.step_2.paragraph_2')}</p>

diff --git a/app/[locale]/learn/wallets/add-network/[slug]/page.tsx b/app/[locale]/learn/wallets/add-network/[slug]/page.tsx
@@ -24,7 +24,7 @@ export const generateStaticParams = () => {
   return locales.flatMap((locale) => slugs.map((slug) => ({ locale, slug })));
 };
 
-export const generateMetadata = async ({ params: { locale, slug } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
   const chainId = getChainIdFromSlug(slug);
   const chainName = getChainName(chainId);

diff --git a/app/[locale]/merchandise/page.tsx b/app/[locale]/merchandise/page.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export const dynamic = 'error';
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/og.jpg/blog/[...slug]/route.tsx b/app/[locale]/og.jpg/blog/[...slug]/route.tsx
@@ -22,7 +22,7 @@ export const generateStaticParams = () => {
 };
 
 export async function GET(req: Request, { params }: Props) {
-  const { meta } = readAndParseContentFile(params.slug, params.locale, 'blog');
+  const { meta } = readAndParseContentFile(params.slug, params.locale, 'blog')!;
 
   const title = meta.overlay ? meta.sidebarTitle : undefined;
   const background = loadDataUrl(`public/assets/images/blog/${params.slug.join('/')}/cover.jpg`, 'image/jpeg');

diff --git a/app/[locale]/og.jpg/learn/[...slug]/route.tsx b/app/[locale]/og.jpg/learn/[...slug]/route.tsx
@@ -22,7 +22,7 @@ export const generateStaticParams = () => {
 };
 
 export async function GET(req: Request, { params }: Props) {
-  const { meta } = readAndParseContentFile(params.slug, params.locale, 'learn');
+  const { meta } = readAndParseContentFile(params.slug, params.locale, 'learn')!;
 
   const title = meta.overlay ? meta.sidebarTitle : undefined;
   const background = loadDataUrl(`public/assets/images/learn/${params.slug.join('/')}/cover.jpg`, 'image/jpeg');

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -20,7 +20,7 @@ const jsonLd = {
   url: 'https://revoke.cash',
 };
 
-export const generateMetadata = async ({ params: { locale } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
 
   return {

diff --git a/app/[locale]/privacy-policy/page.tsx b/app/[locale]/privacy-policy/page.tsx
@@ -19,7 +19,7 @@ export const metadata = {
 
 const PrivacyPolicyPage: NextPage<Props> = ({ params }) => {
   unstable_setRequestLocale(params.locale);
-  const { content } = readAndParseContentFile('privacy-policy', params.locale, 'docs');
+  const { content } = readAndParseContentFile('privacy-policy', params.locale, 'docs')!;
 
   return (
     <ContentPageLayout>

diff --git a/app/[locale]/terms/page.tsx b/app/[locale]/terms/page.tsx
@@ -19,7 +19,7 @@ export const metadata = {
 
 const TermsAndConditionsPage: NextPage<Props> = ({ params }) => {
   unstable_setRequestLocale(params.locale);
-  const { content } = readAndParseContentFile('terms', params.locale, 'docs');
+  const { content } = readAndParseContentFile('terms', params.locale, 'docs')!;
 
   return (
     <ContentPageLayout>

diff --git a/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerChainSelect.tsx b/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerChainSelect.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 // This is a wrapper around ChainSelectHref because we cannot pass the getUrl function as a prop from a server component
 const TokenApprovalCheckerChainSelect = ({ chainId }: Props) => {
-  const getUrl = useCallback((chainId) => `/token-approval-checker/${getChainSlug(chainId)}`, []);
+  const getUrl = useCallback((chainId: number) => `/token-approval-checker/${getChainSlug(chainId)}`, []);
   return <ChainSelectHref instanceId="tac-chain-select" selected={chainId} getUrl={getUrl} showNames />;
 };
 

diff --git a/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx b/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 interface Props {
   chainId: number;
-  placeholder?: string;
+  placeholder: string;
 }
 
 const TokenApprovalCheckerSearchBox: NextPage<Props> = ({ chainId, placeholder }) => {

diff --git a/app/[locale]/token-approval-checker/[slug]/page.tsx b/app/[locale]/token-approval-checker/[slug]/page.tsx
@@ -26,7 +26,7 @@ export const generateStaticParams = () => {
   return locales.flatMap((locale) => slugs.map((slug) => ({ locale, slug })));
 };
 
-export const generateMetadata = async ({ params: { locale, slug } }): Promise<Metadata> => {
+export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
   const t = await getTranslations({ locale });
   const chainId = getChainIdFromSlug(slug);
   const chainName = getChainName(chainId);

diff --git a/app/api/[chainId]/merchandise/generate-code/route.tsx b/app/api/[chainId]/merchandise/generate-code/route.tsx
@@ -65,5 +65,5 @@ export async function POST(req: NextRequest, { params }: Props) {
 
 // generate a random 9 digit code xxx-xxx-xxx
 const generateRandomMerchCode = () => {
-  return Math.random().toString().replace('.', '').slice(6, 15).match(/.{3}/g).join('-');
+  return Math.random().toString().replace('.', '').slice(6, 15).match(/.{3}/g)!.join('-');
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,10 @@
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
+interface Props {
+  children: React.ReactNode;
+}
+
 export const generateMetadata = async (): Promise<Metadata> => {
   const t = await getTranslations({ locale: 'en' });
 
@@ -16,7 +20,7 @@ export const generateMetadata = async (): Promise<Metadata> => {
   };
 };
 
-const RootLayout = ({ children }) => {
+const RootLayout = ({ children }: Props) => {
   return <>{children}</>;
 };
 

diff --git a/components/address/AddressHeader.tsx b/components/address/AddressHeader.tsx
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import ChainSelect from 'components/common/select/ChainSelect';
 import { useAddressPageContext } from 'lib/hooks/page-context/AddressPageContext';
 import { getNativeTokenPrice } from 'lib/price/utils';
+import { isNullish } from 'lib/utils';
 import { usePublicClient } from 'wagmi';
 import AddressDisplay from './AddressDisplay';
 import AddressSocialShareButtons from './AddressSocialShareButtons';
@@ -13,18 +14,18 @@ import AddressNavigation from './navigation/AddressNavigation';
 
 const AddressHeader = () => {
   const { address, domainName, selectedChainId, selectChain } = useAddressPageContext();
-  const publicClient = usePublicClient({ chainId: selectedChainId });
+  const publicClient = usePublicClient({ chainId: selectedChainId })!;
 
   const { data: balance, isLoading: balanceIsLoading } = useQuery({
     queryKey: ['balance', address, publicClient.chain?.id],
-    queryFn: () => publicClient.getBalance({ address }),
-    enabled: !!address && !!publicClient.chain,
+    queryFn: () => publicClient.getBalance({ address: address! }),
+    enabled: !isNullish(address) && !isNullish(publicClient.chain),
   });
 
   const { data: nativeAssetPrice, isLoading: nativeAssetPriceIsLoading } = useQuery({
     queryKey: ['nativeAssetPrice', publicClient.chain.id],
     queryFn: () => getNativeTokenPrice(publicClient.chain.id, publicClient),
-    enabled: !!publicClient,
+    enabled: !isNullish(publicClient),
   });
 
   return (

diff --git a/components/address/BalanceDisplay.tsx b/components/address/BalanceDisplay.tsx
@@ -1,14 +1,15 @@
 import Loader from 'components/common/Loader';
 import { useAddressPageContext } from 'lib/hooks/page-context/AddressPageContext';
+import { Nullable } from 'lib/interfaces';
 import { isNullish } from 'lib/utils';
 import { getChainNativeToken } from 'lib/utils/chains';
 import { formatFiatBalance, formatFixedPointBigInt } from 'lib/utils/formatting';
 import { twMerge } from 'tailwind-merge';
 
 interface Props {
   isLoading: boolean;
-  balance: bigint;
-  price?: number;
+  balance?: bigint;
+  price?: Nullable<number>;
   className?: string;
 }
 
@@ -25,7 +26,7 @@ const BalanceDisplay = ({ isLoading, balance, price, className }: Props) => {
   return (
     <Loader isLoading={isLoading || isNullish(balance)} loadingChildren={placeholder} className="rounded-md">
       <div className={classes}>
-        <span>{formatFixedPointBigInt(balance, 18)}</span>
+        <span>{balance ? formatFixedPointBigInt(balance, 18) : null}</span>
         <span className="font-bold">{nativeToken}</span>
         {fiatBalanceText ? <span>({fiatBalanceText})</span> : null}
       </div>

diff --git a/components/address/navigation/AddressNavigation.tsx b/components/address/navigation/AddressNavigation.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'next/navigation';
 import AddressNavigationTab from './AddressNavigationTab';
 
 const AddressNavigation = () => {
-  const { addressOrName } = useParams();
+  const { addressOrName } = useParams() as { addressOrName: string };
   const t = useTranslations();
 
   const basePath = `/address/${addressOrName}`;