From ae1555f80bb8c448485d7ed642c0b6b4a013a54d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Renaud?= <clement+git@clementrenaud.com>
Date: Tue, 12 Mar 2024 15:08:23 +0100
Subject: [PATCH 1/2] add warning on creation pages

---
 .../certification/CertificationForm.tsx       |  2 +
 .../src/components/content/event/Form.tsx     |  2 +
 .../locks/Create/elements/NetworkWarning.tsx  | 45 +++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 unlock-app/src/components/interface/locks/Create/elements/NetworkWarning.tsx

diff --git a/unlock-app/src/components/content/certification/CertificationForm.tsx b/unlock-app/src/components/content/certification/CertificationForm.tsx
index a30fc847042..b1c0dd9c85c 100644
--- a/unlock-app/src/components/content/certification/CertificationForm.tsx
+++ b/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
diff --git a/unlock-app/src/components/content/event/Form.tsx b/unlock-app/src/components/content/event/Form.tsx
index c52bc32f1c3..dedacef488e 100644
--- a/unlock-app/src/components/content/event/Form.tsx
+++ b/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
diff --git a/unlock-app/src/components/interface/locks/Create/elements/NetworkWarning.tsx b/unlock-app/src/components/interface/locks/Create/elements/NetworkWarning.tsx
new file mode 100644
index 00000000000..16274ef050e
--- /dev/null
+++ b/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>
+  )
+}

From 28d2574a2ef01e6ff6f67204b552b5533a294a52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Renaud?= <clement+git@clementrenaud.com>
Date: Tue, 12 Mar 2024 15:15:41 +0100
Subject: [PATCH 2/2] add notice top manage lock page

---
 unlock-app/src/components/interface/locks/Manage/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/unlock-app/src/components/interface/locks/Manage/index.tsx b/unlock-app/src/components/interface/locks/Manage/index.tsx
index 40adc177728..f5b9723bbed 100644
--- a/unlock-app/src/components/interface/locks/Manage/index.tsx
+++ b/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">