add twitter banner

src/containers/HeaderWrapper/HeaderWrapper.tsx

@@ -8,6 +8,9 @@ import { Status, actions as walletActions } from '@reducers/solanaWallet'
 import { WalletType } from '@web3/wallet'
 import { network } from '@selectors/solanaConnection'
 import { DEFAULT_PUBLICKEY } from '@consts/static'
+import { typography } from '@static/theme'
+import useStyles from './style'
+import { Typography } from '@material-ui/core'
 
 export const HeaderWrapper: React.FC = () => {
   const dispatch = useDispatch()
@@ -16,6 +19,7 @@ export const HeaderWrapper: React.FC = () => {
   const currentNetwork = useSelector(network)
   const location = useLocation()
   const [typeOfWallet, setTypeOfWallet] = useState<WalletType>(WalletType.PHANTOM)
+  const classes = useStyles()
 
   useEffect(() => {
     let enumWallet = WalletType.PHANTOM
@@ -68,28 +72,42 @@ export const HeaderWrapper: React.FC = () => {
   }, [])
 
   return (
-    <Header
-      address={walletAddress}
-      onNetworkSelect={chosen => {
-        dispatch(actions.setNetwork(chosen))
-      }}
-      onWalletSelect={chosen => {
-        if (walletAddress.equals(DEFAULT_PUBLICKEY)) {
-          setTypeOfWallet(chosen)
-        }
-        dispatch(walletActions.connect(chosen))
-      }}
-      landing={location.pathname.substr(1)}
-      walletConnected={walletStatus === Status.Initialized}
-      onFaucet={() => {
-        dispatch(walletActions.airdrop())
-      }}
-      onDisconnectWallet={() => {
-        dispatch(walletActions.disconnect())
-      }}
-      typeOfNetwork={currentNetwork}
-      typeOfWallet={typeOfWallet}
-    />
+    <div>
+      <div className={classes.banner}>
+        <Typography style={{ ...typography.subtitle2 }}>
+          Check out our Twitter{' '}
+          <a
+            href='https://twitter.com/synthetify/status/1651947991094161410'
+            target='_blank'
+            className={classes.tweet}>
+            thread
+          </a>{' '}
+          about status of application.
+        </Typography>
+      </div>
+      <Header
+        address={walletAddress}
+        onNetworkSelect={chosen => {
+          dispatch(actions.setNetwork(chosen))
+        }}
+        onWalletSelect={chosen => {
+          if (walletAddress.equals(DEFAULT_PUBLICKEY)) {
+            setTypeOfWallet(chosen)
+          }
+          dispatch(walletActions.connect(chosen))
+        }}
+        landing={location.pathname.substr(1)}
+        walletConnected={walletStatus === Status.Initialized}
+        onFaucet={() => {
+          dispatch(walletActions.airdrop())
+        }}
+        onDisconnectWallet={() => {
+          dispatch(walletActions.disconnect())
+        }}
+        typeOfNetwork={currentNetwork}
+        typeOfWallet={typeOfWallet}
+      />
+    </div>
   )
 }
 

src/containers/HeaderWrapper/style.ts

@@ -0,0 +1,33 @@
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
+import { colors, typography } from '@static/theme'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    banner: {
+      backgroundColor: '#1DA1F2',
+      height: '40px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      color: '#FBFBFB',
+      ...typography.subtitle2,
+      padding: '8px',
+      [theme.breakpoints.down('xs')]: {
+        flexDirection: 'column',
+        height: 'auto'
+      }
+    },
+    textWithIcon: {
+      ...typography.subtitle1,
+      display: 'flex',
+
+      alignItems: 'center'
+    },
+    tweet: {
+      textDecoration: 'none',
+      color: colors.gray.dark
+    }
+  })
+)
+export default useStyles