add remaining functionality to thank you modal

invariant-labs · Sep 5, 2024 · cca65f8 · cca65f8
1 parent caef90d
commit cca65f8
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 43 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -69,7 +69,7 @@ export const Footer = () => {
           title='Twitter'
           placement='top'
           TransitionComponent={FooterTransition}>
-          <a href={social.twitter} className={classes.footerLink} target='_blank'>
+          <a href={social.x} className={classes.footerLink} target='_blank'>
             <img className={classes.icon} src={icons.TwitterIcon} alt={'twitter icon'} />
           </a>
         </Tooltip>

diff --git a/src/components/Modals/ThankYouModal/ThankYouModal.tsx b/src/components/Modals/ThankYouModal/ThankYouModal.tsx
@@ -1,39 +1,53 @@
 import { Box, Button, Typography } from '@material-ui/core'
 import useStyles from './style'
 import icons from '@static/icons'
+import { social } from '@static/links'
 
-export const ThankYouModal: React.FC = () => {
+interface Props {
+  hideModal: () => void
+}
+
+export const ThankYouModal: React.FC<Props> = ({ hideModal }) => {
   const classes = useStyles()
 
   return (
     <>
       <Box className={classes.background}></Box>
       <Box className={classes.container}>
-        {/* @ts-expect-error */}
-        <Box display='flex' flexDirection='column' alignItems='center' sx={{ gap: 16 }}>
-          <Typography className={classes.title}>Thank you</Typography>
-          <Typography className={classes.lowerTitle}>
-            for using Invariant Faucet on Eclipse!
+        <Box className={classes.gradient}>
+          <img className={classes.eclipseIcon} src={icons.eclipse} alt='Eclipse icon' />
+          {/* @ts-expect-error */}
+          <Box display='flex' flexDirection='column' alignItems='center' sx={{ gap: 16 }}>
+            <Typography className={classes.title}>Thank you</Typography>
+            <Typography className={classes.lowerTitle}>
+              for using Invariant Faucet on Eclipse!
+            </Typography>
+          </Box>
+          <Typography className={classes.description}>
+            We are building much more on Eclipse right now! 👀 <br />
+            To stay updated, follow us on our social media.
           </Typography>
-        </Box>
-        <Typography className={classes.description}>
-          We are building much more on Eclipse right now! 👀 <br />
-          To stay updated, follow us on our social media.
-        </Typography>
-        {/* @ts-expect-error */}
-        <Box display='flex' flexDirection='column' alignItems='center' sx={{ gap: 16 }}>
-          <Typography className={classes.lowerTitle}>Join us here!</Typography>
           {/* @ts-expect-error */}
-          <Box display='flex' sx={{ gap: 24 }}>
-            <img src={icons.circleDiscord} alt='Discord in circle icon' />
-            <img src={icons.circleTelegram} alt='Telegram in circle icon' />
+          <Box display='flex' flexDirection='column' alignItems='center' sx={{ gap: 16 }}>
+            <Typography className={classes.lowerTitle}>Join us here!</Typography>
+            {/* @ts-expect-error */}
+            <Box display='flex' sx={{ gap: 24 }}>
+              <a href={social.discord} target='_blank'>
+                <img src={icons.circleDiscord} alt='Discord in circle icon' />
+              </a>
+              <a href={social.telegram} target='_blank'>
+                <img src={icons.circleTelegram} alt='Telegram in circle icon' />
+              </a>
+            </Box>
+            <Typography className={classes.description}>and don't forget to</Typography>
+            <Button className={classes.button} onClick={() => window.open(social.x, '_blank')}>
+              Follow us on X!
+            </Button>
           </Box>
-          <Typography className={classes.description}>and don't forget to</Typography>
-          <Button className={classes.button}>Follow us on X!</Button>
+          <Button className={classes.transparentButton} disableRipple onClick={hideModal}>
+            Close
+          </Button>
         </Box>
-        <Button className={classes.transparentButton} disableRipple>
-          Close
-        </Button>
       </Box>
     </>
   )

diff --git a/src/components/Modals/ThankYouModal/style.ts b/src/components/Modals/ThankYouModal/style.ts
@@ -13,14 +13,9 @@ const useStyles = makeStyles(() => ({
     opacity: 0.7
   },
   container: {
-    width: 480,
-    padding: 32,
+    width: 544,
     borderRadius: 24,
     background: colors.invariant.component,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: 32,
     position: 'absolute',
     top: '50%',
     left: '50%',
@@ -75,6 +70,24 @@ const useStyles = makeStyles(() => ({
       textDecoration: 'underline',
       color: colors.white.main
     }
+  },
+  eclipseIcon: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    zIndex: -1,
+    opacity: 0.1
+  },
+  gradient: {
+    borderRadius: 24,
+    padding: 32,
+    background:
+      'radial-gradient(circle at top, rgba(239, 132, 245, 0.25), rgba(239, 132, 245, 0)), radial-gradient(circle at bottom, rgba(46, 224, 154, 0.25), rgba(46, 224, 154, 0))',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 32
   }
 }))
 

diff --git a/src/containers/HeaderWrapper/HeaderWrapper.tsx b/src/containers/HeaderWrapper/HeaderWrapper.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
 import { NetworkType, EclipseNetworks } from '@consts/static'
 import { actions as walletActions, Status } from '@reducers/solanaWallet'
-import { address, status } from '@selectors/solanaWallet'
+import { address, status, thankYouModalShown } from '@selectors/solanaWallet'
 import { actions } from '@reducers/solanaConnection'
 import { network, rpcAddress } from '@selectors/solanaConnection'
 import { nightlyConnectAdapter, openWalletSelectorModal } from '@web3/selector'
@@ -45,9 +45,15 @@ export const HeaderWrapper: React.FC = () => {
     return lastRPC === null ? EclipseNetworks.MAIN : lastRPC
   }, [])
 
+  const isThankYouModalShown = useSelector(thankYouModalShown)
+
+  const hideThankYouModal = () => {
+    dispatch(walletActions.showThankYouModal(false))
+  }
+
   return (
     <>
-      <ThankYouModal />
+      {isThankYouModalShown && <ThankYouModal hideModal={hideThankYouModal} />}
       <Header
         address={walletAddress}
         onNetworkSelect={(network, rpcAddress, rpcName) => {

diff --git a/src/static/icons.ts b/src/static/icons.ts
@@ -32,6 +32,7 @@ import docsIcon from './svg/docsCircle.svg'
 import closeSmallIcon from './svg/closeSmall.svg'
 import circleDiscord from './svg/circle-discord.svg'
 import circleTelegram from './svg/circle-telegram.svg'
+import eclipse from './svg/eclipse.svg'
 
 const icons: { [key: string]: string } = {
   USDT: USDIcon,
@@ -68,7 +69,8 @@ const icons: { [key: string]: string } = {
   closeSmallIcon: closeSmallIcon,
   docsIcon,
   circleDiscord,
-  circleTelegram
+  circleTelegram,
+  eclipse
 }
 
 export default icons
diff --git a/src/static/links.ts b/src/static/links.ts
@@ -1,5 +1,5 @@
 export const social = {
-  twitter: 'https://twitter.com/invariant_labs',
+  x: 'https://twitter.com/invariant_labs',
   github: 'https://github.com/invariant-labs',
   discord: 'https://discord.gg/w6hTeWTJvG',
   telegram: 'https://t.me/+-C9-e6L08AY4YWI0',

diff --git a/src/static/svg/eclipse.svg b/src/static/svg/eclipse.svg
diff --git a/src/store/reducers/solanaWallet.ts b/src/store/reducers/solanaWallet.ts
@@ -36,14 +36,16 @@ export interface ISolanaWallet {
   balance: BN
   accounts: { [key in string]: ITokenAccount }
   balanceLoading: boolean
+  thankYouModalShown: boolean
 }
 
 export const defaultState: ISolanaWallet = {
   status: Status.Uninitialized,
   address: DEFAULT_PUBLICKEY,
   balance: new BN(0),
   accounts: {},
-  balanceLoading: false
+  balanceLoading: false,
+  thankYouModalShown: false
 }
 
 export const solanaWalletSliceName = 'solanaWallet'
@@ -94,7 +96,11 @@ const solanaWalletSlice = createSlice({
     rescanTokens() {},
     airdrop() {},
     connect() {},
-    disconnect() {}
+    disconnect() {},
+    showThankYouModal(state, action: PayloadAction<boolean>) {
+      state.thankYouModalShown = action.payload
+      return state
+    }
   }
 })
 interface IsetTokenBalance {

diff --git a/src/store/sagas/wallet.ts b/src/store/sagas/wallet.ts
@@ -149,6 +149,8 @@ export function* handleAirdrop(): Generator {
     return
   }
 
+  yield* put(actions.showThankYouModal(true))
+
   const loaderKey = createLoaderKey()
   yield put(
     snackbarsActions.add({

diff --git a/src/store/selectors/solanaWallet.ts b/src/store/selectors/solanaWallet.ts
@@ -13,13 +13,15 @@ import {
 
 const store = (s: AnyProps) => s[solanaWalletSliceName] as ISolanaWallet
 
-export const { address, balance, accounts, status, balanceLoading } = keySelectors(store, [
-  'address',
-  'balance',
-  'accounts',
-  'status',
-  'balanceLoading'
-])
+export const { address, balance, accounts, status, balanceLoading, thankYouModalShown } =
+  keySelectors(store, [
+    'address',
+    'balance',
+    'accounts',
+    'status',
+    'balanceLoading',
+    'thankYouModalShown'
+  ])
 
 export const tokenBalance = (tokenAddress: PublicKey) =>
   createSelector(accounts, tokensAccounts => {
@@ -132,6 +134,7 @@ export const solanaWalletSelectors = {
   accounts,
   status,
   tokenAccount,
-  balanceLoading
+  balanceLoading,
+  thankYouModalShown
 }
 export default solanaWalletSelectors