add alpha popup message

components/AlphaModal.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import Modal from './Modal'
+import Button from './Button'
+import useLocalStorageState from '../hooks/useLocalStorageState'
+
+const WithdrawModal = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose?: (x) => void
+}) => {
+  const [, setAlphaAccepted] = useLocalStorageState('mangoAlphaAccepted', false)
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.Header>
+        <div
+          className={`text-th-fgd-2 flex-grow text-center flex items-center justify-center`}
+        >
+          <span className="text-2xl">Mango Markets UI V2</span>
+        </div>
+      </Modal.Header>
+      <div className={`pb-4 px-6 text-th-fgd-3`}>
+        <div className={`mt-3 sm:mt-5 text-lg font-light`}>
+          This is an unaudited alpha release of Mango Markets. The software is
+          provided &apos;AS IS&apos; without warranty of any kind.
+        </div>
+        <div className={`mt-4 sm:mt-5 flex justify-end`}>
+          <Button onClick={() => setAlphaAccepted(true)}>
+            <div className={`flex items-center`}>Accept</div>
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(WithdrawModal)

pages/index.tsx

@@ -4,8 +4,11 @@ import TradePageGrid from '../components/TradePageGrid'
 import MarketSelect from '../components/MarketSelect'
 import useHydrateStore from '../hooks/useHydrateStore'
 import useWallet from '../hooks/useWallet'
+import AlphaModal from '../components/AlphaModal'
+import useLocalStorageState from '../hooks/useLocalStorageState'
 
 const Index = () => {
+  const [alphaAccepted] = useLocalStorageState('mangoAlphaAccepted', false)
   useHydrateStore()
   useWallet()
 
@@ -17,6 +20,9 @@ const Index = () => {
         <TradePageGrid />
       </div>
       <Notifications />
+      {!alphaAccepted && (
+        <AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
+      )}
     </div>
   )
 }