Merge pull request #522 from forbole/dev

v0.16.1

components/AssetDistributionChart/Chart.tsx

@@ -36,17 +36,18 @@ const Chart: React.FC<ChartProp> = ({ data: rawData, setPopoverIndex, setAnchorP
   const [activeIndex, setActiveIndex] = React.useState(0)
   const theme: CustomTheme = useTheme()
 
+  const activeData = data[activeIndex] || data[0]
+
   // todo: how to override light mode color of the pie? it shows black when it is activeIndex
 
   const { top, left } = React.useMemo(() => {
-    const midAngle =
-      (((data[activeIndex].startAngle + data[activeIndex].endAngle) / 2) * Math.PI) / 180
-    const radius = (1.27 * Number(data[activeIndex].outerRadius.replace('%', ''))) / 2
+    const midAngle = (((activeData.startAngle + activeData.endAngle) / 2) * Math.PI) / 180
+    const radius = (1.27 * Number(activeData.outerRadius.replace('%', ''))) / 2
     return {
       top: `calc(50% - ${Math.sin(midAngle) * radius}px)`,
       left: `calc(30% + ${Math.cos(midAngle) * radius}px)`,
     }
-  }, [activeIndex, data])
+  }, [activeData])
 
   return (
     <Box position="relative" height={theme.spacing(33.5)} maxWidth={theme.spacing(64)} mx="auto">
@@ -82,11 +83,11 @@ const Chart: React.FC<ChartProp> = ({ data: rawData, setPopoverIndex, setAnchorP
       </ResponsiveContainer>
       <Box className={classes.divider} style={{ top, left }}>
         <Typography className={classes.percentText} variant="h2" gutterBottom>
-          {formatPercentage(data[activeIndex].value, lang)}
+          {formatPercentage(activeData.value, lang)}
         </Typography>
         <Box display="flex" alignItems="center">
-          <Avatar className={classes.avatar} src={data[activeIndex].image} />
-          <Typography>{data[activeIndex].name}</Typography>
+          <Avatar className={classes.avatar} src={activeData.image} />
+          <Typography>{activeData.name}</Typography>
         </Box>
       </Box>
     </Box>

components/AssetDistributionChart/index.tsx

@@ -75,23 +75,25 @@ const AssetDistributionChart: React.FC = () => {
         Object.keys(balancesByValidator).forEach((moniker) => {
           rawData.push({
             name: moniker,
-            value: getTokenAmountBalance(balancesByValidator[moniker].amount),
+            // TODO: uncomment the line below when DSM has value > 0
+            // value: getTokenAmountBalance(balancesByValidator[moniker].amount),
+            value: Object.values(balancesByValidator[moniker].amount)
+              .map((a: any) => a.amount)
+              .reduce((a, b) => a + b, 0),
           })
         })
         const total = rawData.map((d) => d.value).reduce((a, b) => a + b, 0)
         setData(
-          rawData.map((d) => ({
-            name: d.name,
-            image: balancesByValidator[d.name].avatar,
-            value:
-              // eslint-disable-next-line no-nested-ternary
-              total === 0
-                ? 1 / rawData.length
-                : d.value === total
-                ? 1
-                : Math.round(d.value / total),
-            extraData: balancesByValidator[d.name],
-          }))
+          rawData
+            .filter((d) => d.value > 0)
+            .map((d) => ({
+              name: d.name,
+              image: balancesByValidator[d.name].avatar,
+              value:
+                // eslint-disable-next-line no-nested-ternary
+                total === 0 ? 1 / rawData.length : d.value === total ? 1 : d.value / total,
+              extraData: balancesByValidator[d.name],
+            }))
         )
       }
     } catch (err) {

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('')