Merge pull request #56 from invariant-labs/thank-you-modal

create thank you modal

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>

src/components/Modals/ThankYouModal/ThankYouModal.tsx

@@ -0,0 +1,54 @@
+import { Box, Button, Typography } from '@material-ui/core'
+import useStyles from './style'
+import icons from '@static/icons'
+import { social } from '@static/links'
+
+interface Props {
+  hideModal: () => void
+}
+
+export const ThankYouModal: React.FC<Props> = ({ hideModal }) => {
+  const classes = useStyles()
+
+  return (
+    <>
+      <Box className={classes.background}></Box>
+      <Box className={classes.container}>
+        <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>
+          {/* @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 }}>
+              <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>
+          <Button className={classes.transparentButton} disableRipple onClick={hideModal}>
+            Close
+          </Button>
+        </Box>
+      </Box>
+    </>
+  )
+}

src/components/Modals/ThankYouModal/style.ts

@@ -0,0 +1,94 @@
+import { makeStyles } from '@material-ui/core'
+import { colors, typography } from '@static/theme'
+
+const useStyles = makeStyles(() => ({
+  background: {
+    background: colors.invariant.black,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 51,
+    opacity: 0.7
+  },
+  container: {
+    width: 544,
+    borderRadius: 24,
+    background: colors.invariant.component,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    zIndex: 52
+  },
+  title: {
+    fontSize: 72,
+    lineHeight: '72px',
+    color: colors.invariant.pink,
+    letterSpacing: '-0.12rem'
+  },
+  lowerTitle: {
+    color: colors.white.main,
+    letterSpacing: '-0.06rem',
+    ...typography.heading1
+  },
+  description: {
+    fontSize: 20,
+    lineHeight: '28px',
+    color: colors.invariant.textGrey,
+    letterSpacing: '-0.03rem',
+    fontWeight: 400,
+    textAlign: 'center'
+  },
+  button: {
+    width: 480,
+    height: 40,
+    background: colors.invariant.greenLinearGradient,
+    color: colors.invariant.dark,
+    borderRadius: 12,
+    textTransform: 'none',
+    letterSpacing: '-0.03rem',
+    ...typography.body1,
+
+    '&:hover': {
+      background: colors.invariant.greenLinearGradientOpacity
+    }
+  },
+  transparentButton: {
+    width: 480,
+    backgroundColor: 'transparent',
+    color: colors.invariant.textGrey,
+    borderRadius: 12,
+    textTransform: 'none',
+    letterSpacing: '-0.03rem',
+    textDecoration: 'underline',
+    ...typography.caption2,
+
+    '&:hover': {
+      backgroundColor: 'transparent',
+      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
+  }
+}))
+
+export default useStyles

src/containers/HeaderWrapper/HeaderWrapper.tsx

@@ -4,10 +4,11 @@ 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'
+import { ThankYouModal } from '@components/Modals/ThankYouModal/ThankYouModal'
 
 export const HeaderWrapper: React.FC = () => {
   const dispatch = useDispatch()
@@ -44,31 +45,40 @@ export const HeaderWrapper: React.FC = () => {
     return lastRPC === null ? EclipseNetworks.MAIN : lastRPC
   }, [])
 
+  const isThankYouModalShown = useSelector(thankYouModalShown)
+
+  const hideThankYouModal = () => {
+    dispatch(walletActions.showThankYouModal(false))
+  }
+
   return (
-    <Header
-      address={walletAddress}
-      onNetworkSelect={(network, rpcAddress, rpcName) => {
-        if (network !== currentNetwork || rpcAddress !== currentRpc) {
-          if (network === NetworkType.MAINNET) {
-            localStorage.setItem('INVARIANT_MAINNET_RPC', rpcAddress)
-          }
+    <>
+      {isThankYouModalShown && <ThankYouModal hideModal={hideThankYouModal} />}
+      <Header
+        address={walletAddress}
+        onNetworkSelect={(network, rpcAddress, rpcName) => {
+          if (network !== currentNetwork || rpcAddress !== currentRpc) {
+            if (network === NetworkType.MAINNET) {
+              localStorage.setItem('INVARIANT_MAINNET_RPC', rpcAddress)
+            }
 
-          dispatch(actions.setNetwork({ network, rpcAddress, rpcName }))
-        }
-      }}
-      onConnectWallet={openWalletSelectorModal}
-      landing={location.pathname.substr(1)}
-      walletConnected={walletStatus === Status.Initialized}
-      onFaucet={() => {
-        dispatch(walletActions.airdrop())
-      }}
-      onDisconnectWallet={() => {
-        dispatch(walletActions.disconnect())
-      }}
-      typeOfNetwork={currentNetwork}
-      rpc={currentRpc}
-      defaultMainnetRPC={defaultMainnetRPC}
-    />
+            dispatch(actions.setNetwork({ network, rpcAddress, rpcName }))
+          }
+        }}
+        onConnectWallet={openWalletSelectorModal}
+        landing={location.pathname.substr(1)}
+        walletConnected={walletStatus === Status.Initialized}
+        onFaucet={() => {
+          dispatch(walletActions.airdrop())
+        }}
+        onDisconnectWallet={() => {
+          dispatch(walletActions.disconnect())
+        }}
+        typeOfNetwork={currentNetwork}
+        rpc={currentRpc}
+        defaultMainnetRPC={defaultMainnetRPC}
+      />
+    </>
   )
 }
 

src/static/icons.ts

@@ -30,6 +30,9 @@ import inactiveIcon from './svg/inactive.svg'
 import allIcon from './svg/all.svg'
 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,
@@ -64,7 +67,10 @@ const icons: { [key: string]: string } = {
   inactiveIcon: inactiveIcon,
   allIcon: allIcon,
   closeSmallIcon: closeSmallIcon,
-  docsIcon
+  docsIcon,
+  circleDiscord,
+  circleTelegram,
+  eclipse
 }
 
 export default icons

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',

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 {

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({

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

tsconfig.json

@@ -15,7 +15,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src"]
 }