feat(unlock-app): add testnet deprecation warning for Mumbai and Goer…

…li (#13450)

unlock-app/src/components/content/certification/CertificationForm.tsx

@@ -19,6 +19,7 @@ import { SelectCurrencyModal } from '~/components/interface/locks/Create/modals/
 import { CryptoIcon } from '@unlock-protocol/crypto-icon'
 import { useImageUpload } from '~/hooks/useImageUpload'
 import { BalanceWarning } from '~/components/interface/locks/Create/elements/BalanceWarning'
+import { NetworkWarning } from '~/components/interface/locks/Create/elements/NetworkWarning'
 import { getAccountTokenBalance } from '~/hooks/useAccount'
 import { Web3Service } from '@unlock-protocol/unlock-js'
 import { useQuery } from '@tanstack/react-query'
@@ -269,6 +270,7 @@ export const CertificationForm = ({ onSubmit }: FormProps) => {
                 defaultValue={network}
                 description={<NetworkDescription />}
               />
+              <NetworkWarning network={details.network} />
               <div className="mb-4">
                 {noBalance && (
                   <BalanceWarning

unlock-app/src/components/content/event/Form.tsx

@@ -21,6 +21,7 @@ import { networkDescription } from '~/components/interface/locks/Create/elements
 import { useQuery } from '@tanstack/react-query'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 import { BalanceWarning } from '~/components/interface/locks/Create/elements/BalanceWarning'
+import { NetworkWarning } from '~/components/interface/locks/Create/elements/NetworkWarning'
 import { SelectCurrencyModal } from '~/components/interface/locks/Create/modals/SelectCurrencyModal'
 import { UNLIMITED_KEYS_DURATION } from '~/constants'
 import { CryptoIcon } from '@unlock-protocol/crypto-icon'
@@ -264,6 +265,7 @@ export const Form = ({ onSubmit }: FormProps) => {
                     </p>
                   }
                 />
+                <NetworkWarning network={details.network} />
                 <div className="mb-4">
                   {noBalance && (
                     <BalanceWarning

unlock-app/src/components/interface/locks/Create/elements/NetworkWarning.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useConfig } from '~/utils/withConfig'
+import { WarningBar } from './BalanceWarning'
+
+interface NetworkWarningProps {
+  additionalText?: string
+  date: Date
+}
+
+const NETWORK_MAPPING_MAPPING: Record<number, NetworkWarningProps> = {
+  5: {
+    date: new Date('30 Apr 2024'),
+  },
+  80001: {
+    date: new Date('30 Apr 2024'),
+  },
+}
+
+export const NetworkWarning = ({
+  network,
+}: {
+  network: number | undefined
+}) => {
+  const config = useConfig()
+  if (!network) return null
+  console.log(network)
+  if (!NETWORK_MAPPING_MAPPING[network!]) return
+  const { date } = NETWORK_MAPPING_MAPPING[network!]
+  console.log(date)
+  const networkName = config.networks[network!].name
+
+  return (
+    <WarningBar>
+      <span>
+        {networkName} is getting deprecated on{' '}
+        {date.toLocaleString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })}
+        .
+      </span>
+    </WarningBar>
+  )
+}

unlock-app/src/components/interface/locks/Manage/index.tsx

@@ -8,6 +8,7 @@ import { Members } from './elements/Members'
 import { TotalBar } from './elements/TotalBar'
 import { BsArrowLeft as ArrowBackIcon } from 'react-icons/bs'
 import { AirdropKeysDrawer } from '~/components/interface/members/airdrop/AirdropDrawer'
+import { NetworkWarning } from '~/components/interface/locks/Create/elements/NetworkWarning'
 import { useMutation } from '@tanstack/react-query'
 import {
   ApprovalStatus,
@@ -455,6 +456,7 @@ export const ManageLockPage = () => {
           <div className="pt-9">
             <div className="flex flex-col gap-3 mb-7">
               <TopActionBar lockAddress={lockAddress} network={lockNetwork!} />
+              <NetworkWarning network={lockNetwork!} />
               {showNotManagerBanner && <NotManagerBanner />}
             </div>
             <div className="flex flex-col lg:grid lg:grid-cols-12 gap-14">