airdrop flow

components/Banner/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Card, CardMedia, alpha, useTheme } from '@material-ui/core'
+import { Box, Card, CardMedia, alpha, useTheme } from '@material-ui/core'
 import Carousel from 'react-material-ui-carousel'
 import useStyles from './style'
 
@@ -23,14 +23,17 @@ const Banner: React.FC = () => {
         }}
         activeIndicatorIconButtonProps={{
           style: {
-            color: theme.palette.primary.main,
+            backgroundColor: theme.palette.primary.main,
+            margin: theme.spacing(0.5, 0.5, 0),
           },
         }}
         indicatorIconButtonProps={{
           style: {
-            color: alpha(theme.palette.primary.main, 0.6),
+            backgroundColor: alpha(theme.palette.primary.main, 0.6),
+            margin: theme.spacing(0.5, 0.5, 0),
           },
         }}
+        IndicatorIcon={<Box p={0.5} borderRadius="50%" />}
       >
         {banners.map((banner) => (
           <Link href="/dsm-airdrop" key={banner}>

components/ConnectChainDialog/index.tsx

@@ -38,6 +38,7 @@ interface ConnectChainDialogProps {
   onClose(event?: unknown, reason?: string): void
   connections: ChainConnection[]
   account: Account
+  shouldConnect?: boolean
 }
 
 interface Content {
@@ -51,6 +52,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
   onClose,
   connections,
   account,
+  shouldConnect,
 }) => {
   const { t } = useTranslation('common')
   const classes = useStyles()
@@ -59,7 +61,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
   const sendTransaction = useSendTransaction()
   const { password } = useWalletsContext()
   const [stage, setStage, toPrevStage, isPrevStageAvailable] = useStateHistory<Stage>(
-    Stage.StartStage
+    shouldConnect ? Stage.SelectChainStage : Stage.StartStage
   )
 
   const [mnemonic, setMnemonic] = React.useState('')
@@ -80,9 +82,9 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
       setChain('')
       setLedgerApp('')
       setError('')
-      setStage(Stage.StartStage, true)
+      setStage(shouldConnect ? Stage.SelectChainStage : Stage.StartStage, true)
     }
-  }, [open])
+  }, [open, shouldConnect])
 
   React.useEffect(() => {
     setError('')