Fix transaction submitted toast

RevokeCash · May 1, 2024 · 8b25a2f · 8b25a2f
1 parent f6c7377
commit 8b25a2f
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 150 deletions.
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -7,8 +7,10 @@ import HolyLoader from 'holy-loader';
 import { QueryProvider } from 'lib/hooks/QueryProvider';
 import { EthereumProvider } from 'lib/hooks/ethereum/EthereumProvider';
 import { ColorThemeProvider } from 'lib/hooks/useColorTheme';
+import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { locales } from 'lib/i18n/config';
 import { Metadata } from 'next';
+import { useMessages } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import 'react-toastify/dist/ReactToastify.css';
@@ -53,27 +55,31 @@ export const generateMetadata = async ({ params: { locale } }): Promise<Metadata
 const MainLayout = ({ children, params }: Props) => {
   unstable_setRequestLocale(params.locale);
 
+  const messages = useMessages();
+
   return (
     <html lang={params.locale}>
       <head>
         <Analytics />
       </head>
       <body>
-        <QueryProvider>
-          <EthereumProvider>
-            <ColorThemeProvider>
-              <div className="flex flex-col mx-auto min-h-screen">
-                <Header />
-                <main className="w-full grow">{children}</main>
-                <div className="flex flex-col justify-end">
-                  <Footer />
+        <NextIntlClientProvider messages={{ common: messages.common }}>
+          <QueryProvider>
+            <EthereumProvider>
+              <ColorThemeProvider>
+                <div className="flex flex-col mx-auto min-h-screen">
+                  <Header />
+                  <main className="w-full grow">{children}</main>
+                  <div className="flex flex-col justify-end">
+                    <Footer />
+                  </div>
                 </div>
-              </div>
-              <HolyLoader color="#000" height={2} />
-              <ToastifyConfig />
-            </ColorThemeProvider>
-          </EthereumProvider>
-        </QueryProvider>
+                <HolyLoader color="#000" height={2} />
+                <ToastifyConfig />
+              </ColorThemeProvider>
+            </EthereumProvider>
+          </QueryProvider>
+        </NextIntlClientProvider>
         <SpeedInsights sampleRate={0.1} />
       </body>
     </html>

diff --git a/app/[locale]/learn/wallets/add-network/[slug]/page.tsx b/app/[locale]/learn/wallets/add-network/[slug]/page.tsx
@@ -63,9 +63,7 @@ const AddNewChainPage: NextPage<Props> = async ({ params }) => {
         <div className="flex flex-col sm:flex-row items-center gap-2 my-4">
           <p className="m-0">{t('learn.add_network.select_network')}</p>
           <div className="not-prose shrink-0">
-            <NextIntlClientProvider messages={{ common: messages.common }}>
-              <AddNetworkChainSelect chainId={chainId} />
-            </NextIntlClientProvider>
+            <AddNetworkChainSelect chainId={chainId} />
           </div>
         </div>
         <ChainDescription chainId={chainId} headingElement="h2" />

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
@@ -2,9 +2,8 @@ import { GlobeEuropeAfricaIcon, QuestionMarkCircleIcon } from '@heroicons/react/
 import ContentPageLayout from 'app/layouts/ContentPageLayout';
 import Href from 'components/common/Href';
 import NotFoundLink from 'components/common/NotFoundLink';
-import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { NextPage } from 'next';
-import { useMessages, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import NotFoundLinkMyApprovals from './NotFoundLinkMyApprovals';
 
 interface Props {
@@ -18,7 +17,6 @@ const NotFoundPage: NextPage<Props> = ({ params }) => {
   // unstable_setRequestLocale(params.locale);
 
   const t = useTranslations();
-  const messages = useMessages();
 
   return (
     <ContentPageLayout>
@@ -45,9 +43,7 @@ const NotFoundPage: NextPage<Props> = ({ params }) => {
               description={t('common.errors.404.suggested_pages.extension.description')}
               icon={<GlobeEuropeAfricaIcon className="h-6 w-6" />}
             />
-            <NextIntlClientProvider messages={{ common: messages.common }}>
-              <NotFoundLinkMyApprovals />
-            </NextIntlClientProvider>
+            <NotFoundLinkMyApprovals />
           </div>
           <p>
             <Href href="/" className="font-medium" underline="none">

diff --git a/app/[locale]/token-approval-checker/[slug]/page.tsx b/app/[locale]/token-approval-checker/[slug]/page.tsx
@@ -2,7 +2,6 @@ import ChainDescription from 'components/common/ChainDescription';
 import ChainLogo from 'components/common/ChainLogo';
 import Href from 'components/common/Href';
 import Prose from 'components/common/Prose';
-import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { locales } from 'lib/i18n/config';
 import { SUPPORTED_CHAINS, getChainIdFromSlug, getChainName, getChainSlug } from 'lib/utils/chains';
 import { Metadata, NextPage } from 'next';
@@ -58,9 +57,7 @@ const TokenApprovalCheckerPage: NextPage<Props> = ({ params }) => {
         <div className="flex flex-col sm:flex-row items-center gap-2 my-4">
           <p className="m-0">{t('token_approval_checker.different_chain')}:</p>
           <div className="not-prose shrink-0">
-            <NextIntlClientProvider messages={{ common: messages.common }}>
-              <TokenApprovalCheckerChainSelect chainId={chainId} />
-            </NextIntlClientProvider>
+            <TokenApprovalCheckerChainSelect chainId={chainId} />
           </div>
         </div>
       </div>

diff --git a/...ts/common/transaction-submitted-toast.tsx → ...ents/common/TransactionSubmittedToast.tsx b/...ts/common/transaction-submitted-toast.tsx → ...ents/common/TransactionSubmittedToast.tsx
@@ -1,20 +1,23 @@
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 import DonateButton from 'components/common/DonateButton';
 import { getChainExplorerUrl } from 'lib/utils/chains';
-import { getTranslations } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
 import type { MutableRefObject, ReactText } from 'react';
 import { toast } from 'react-toastify';
 import Href from './Href';
 
-export const displayTransactionSubmittedToast = (
-  chainId: number,
-  transactionHash: string,
-  ref: MutableRefObject<ReactText>,
-  t: Awaited<ReturnType<typeof getTranslations<string>>>,
-) => {
+interface Props {
+  chainId: number;
+  transactionHash: string;
+  ref: MutableRefObject<ReactText>;
+}
+
+const TransactionSubmittedToast = ({ chainId, transactionHash, ref }: Props) => {
+  const t = useTranslations();
+
   const explorerUrl = getChainExplorerUrl(chainId);
 
-  const toastContent = (
+  return (
     <div className="flex flex-col justify-center items-center gap-2">
       <div className="flex gap-1">
         <div>{t('common.toasts.transaction_submitted')}</div>
@@ -27,8 +30,19 @@ export const displayTransactionSubmittedToast = (
       </div>
     </div>
   );
+};
 
-  ref.current = toast.info(toastContent, {
-    closeOnClick: false,
-  });
+export default TransactionSubmittedToast;
+
+export const displayTransactionSubmittedToast = (
+  chainId: number,
+  transactionHash: string,
+  ref: MutableRefObject<ReactText>,
+) => {
+  ref.current = toast.info(
+    <TransactionSubmittedToast chainId={chainId} transactionHash={transactionHash} ref={ref} />,
+    {
+      closeOnClick: false,
+    },
+  );
 };
diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
@@ -2,7 +2,6 @@ import Divider from 'components/common/Divider';
 import Href from 'components/common/Href';
 import ColorThemeSelect from 'components/footer/ColorThemeSelect';
 import { DISCORD_URL, GITHUB_URL, TWITTER_URL } from 'lib/constants';
-import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { useMessages, useTranslations } from 'next-intl';
 import { ReactNode } from 'react';
 import LanguageSelect from './LanguageSelect';
@@ -12,81 +11,79 @@ const Footer = () => {
   const messages = useMessages();
 
   return (
-    <NextIntlClientProvider messages={{ common: messages.common }}>
-      <footer className="bg-black dark:bg-zinc-900 mt-24" aria-labelledby="footer-heading">
-        <h2 id="footer-heading" className="sr-only">
-          Footer
-        </h2>
+    <footer className="bg-black dark:bg-zinc-900 mt-24" aria-labelledby="footer-heading">
+      <h2 id="footer-heading" className="sr-only">
+        Footer
+      </h2>
 
-        <div className="mx-auto max-w-7xl px-8">
-          <div className="my-16 grid grid-cols-2 gap-8 xl:col-span-2">
-            <div className="md:grid md:grid-cols-2 md:gap-8">
-              <FooterSection heading={t('common.footer.product')}>
-                <FooterLink href="/token-approval-checker/ethereum" router>
-                  {t('common.footer.token_approval_checker')}
-                </FooterLink>
-                <FooterLink href="/extension" router>
-                  {t('common.footer.extension')}
-                </FooterLink>
-                <FooterLink href="/exploits" router>
-                  {t('common.footer.exploit_checker')}
-                </FooterLink>
-              </FooterSection>
-              <FooterSection heading={t('common.footer.learn')}>
-                <FooterLink href="/learn" router>
-                  {t('common.footer.knowledgebase')}
-                </FooterLink>
-                <FooterLink href="/learn/approvals/what-are-token-approvals" router>
-                  {t('common.footer.what_are_token_approvals')}
-                </FooterLink>
-                <FooterLink href="/learn/faq" router>
-                  {t('common.footer.faq')}
-                </FooterLink>
-              </FooterSection>
-            </div>
-            <div className="md:grid md:grid-cols-2 md:gap-8">
-              <FooterSection heading={t('common.footer.company')}>
-                <FooterLink href="/blog" router>
-                  {t('common.footer.blog')}
-                </FooterLink>
-                <FooterLink href="/about" router>
-                  {t('common.footer.about')}
-                </FooterLink>
-                <FooterLink href="https://github.com/RevokeCash/brand-assets" external>
-                  {t('common.footer.brand_assets')}
-                </FooterLink>
-              </FooterSection>
-              <FooterSection heading={t('common.footer.community')}>
-                <FooterLink href={TWITTER_URL} external>
-                  Twitter
-                </FooterLink>
-                <FooterLink href={DISCORD_URL} external>
-                  Discord
-                </FooterLink>
-                <FooterLink href={GITHUB_URL} external>
-                  GitHub
-                </FooterLink>
-              </FooterSection>
-            </div>
+      <div className="mx-auto max-w-7xl px-8">
+        <div className="my-16 grid grid-cols-2 gap-8 xl:col-span-2">
+          <div className="md:grid md:grid-cols-2 md:gap-8">
+            <FooterSection heading={t('common.footer.product')}>
+              <FooterLink href="/token-approval-checker/ethereum" router>
+                {t('common.footer.token_approval_checker')}
+              </FooterLink>
+              <FooterLink href="/extension" router>
+                {t('common.footer.extension')}
+              </FooterLink>
+              <FooterLink href="/exploits" router>
+                {t('common.footer.exploit_checker')}
+              </FooterLink>
+            </FooterSection>
+            <FooterSection heading={t('common.footer.learn')}>
+              <FooterLink href="/learn" router>
+                {t('common.footer.knowledgebase')}
+              </FooterLink>
+              <FooterLink href="/learn/approvals/what-are-token-approvals" router>
+                {t('common.footer.what_are_token_approvals')}
+              </FooterLink>
+              <FooterLink href="/learn/faq" router>
+                {t('common.footer.faq')}
+              </FooterLink>
+            </FooterSection>
           </div>
-          <Divider className="my-16 border-zinc-900 dark:border-zinc-800" />
-          <div className="my-16 flex flex-col md:flex-row items-center gap-4 justify-between">
-            <div className="flex flex-col gap-px text-center md:text-left">
-              <p className="leading-5 text-zinc-100 dark:text-zinc-100">&copy; 2023 Revoke.cash</p>
-              <ul className="flex justify-center md:justify-start items-center gap-1">
-                <FooterLink href="/privacy-policy">{t('common.footer.privacy')}</FooterLink>
-                <span className="text-zinc-400 dark:text-zinc-400 visited:text-zinc-400">•</span>
-                <FooterLink href="/terms">{t('common.footer.terms')}</FooterLink>
-              </ul>
-            </div>
-            <div className="flex gap-2 shrink-0">
-              <LanguageSelect />
-              <ColorThemeSelect />
-            </div>
+          <div className="md:grid md:grid-cols-2 md:gap-8">
+            <FooterSection heading={t('common.footer.company')}>
+              <FooterLink href="/blog" router>
+                {t('common.footer.blog')}
+              </FooterLink>
+              <FooterLink href="/about" router>
+                {t('common.footer.about')}
+              </FooterLink>
+              <FooterLink href="https://github.com/RevokeCash/brand-assets" external>
+                {t('common.footer.brand_assets')}
+              </FooterLink>
+            </FooterSection>
+            <FooterSection heading={t('common.footer.community')}>
+              <FooterLink href={TWITTER_URL} external>
+                Twitter
+              </FooterLink>
+              <FooterLink href={DISCORD_URL} external>
+                Discord
+              </FooterLink>
+              <FooterLink href={GITHUB_URL} external>
+                GitHub
+              </FooterLink>
+            </FooterSection>
           </div>
         </div>
-      </footer>
-    </NextIntlClientProvider>
+        <Divider className="my-16 border-zinc-900 dark:border-zinc-800" />
+        <div className="my-16 flex flex-col md:flex-row items-center gap-4 justify-between">
+          <div className="flex flex-col gap-px text-center md:text-left">
+            <p className="leading-5 text-zinc-100 dark:text-zinc-100">&copy; 2023 Revoke.cash</p>
+            <ul className="flex justify-center md:justify-start items-center gap-1">
+              <FooterLink href="/privacy-policy">{t('common.footer.privacy')}</FooterLink>
+              <span className="text-zinc-400 dark:text-zinc-400 visited:text-zinc-400">•</span>
+              <FooterLink href="/terms">{t('common.footer.terms')}</FooterLink>
+            </ul>
+          </div>
+          <div className="flex gap-2 shrink-0">
+            <LanguageSelect />
+            <ColorThemeSelect />
+          </div>
+        </div>
+      </div>
+    </footer>
   );
 };