Merge branch 'main' into releases/mainnet/v1.1.0

threshold-network · Jun 13, 2022 · 68a1c21 · 68a1c21
2 parents 3c13b97 + 887cf2b
commit 68a1c21
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 42 deletions.
diff --git a/.github/workflows/dashboard-ci.yaml b/.github/workflows/dashboard-ci.yaml
@@ -1,6 +1,8 @@
 name: Token Dashboard / CI
 
 on:
+  schedule:
+    - cron: "0 0 * * *"
   push:
     branches:
       - main

diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
@@ -1,17 +1,19 @@
-import { FC } from "react"
+import { FC, ReactElement } from "react"
 import { Icon, Link, LinkProps, useColorModeValue } from "@chakra-ui/react"
 import { FiArrowUpRight } from "react-icons/all"
 
 interface Props {
   href: string
   text: string
   withArrow?: boolean
+  icon?: ReactElement
 }
 
 const ExternalLink: FC<Props & LinkProps> = ({
   text,
   href,
   withArrow,
+  icon,
   ...props
 }) => {
   const defaultColor = useColorModeValue("brand.500", "white")
@@ -26,9 +28,11 @@ const ExternalLink: FC<Props & LinkProps> = ({
       textDecoration="underline"
       {...props}
     >
-      {text}{" "}
-      {withArrow && (
-        <Icon boxSize="12px" as={FiArrowUpRight} color={finalColor} />
+      {text}
+      {withArrow ? (
+        <Icon boxSize="12px" ml="1" as={FiArrowUpRight} color={finalColor} />
+      ) : (
+        icon
       )}
     </Link>
   )

diff --git a/src/components/LinkDetailsListItem/index.tsx b/src/components/LinkDetailsListItem/index.tsx
@@ -0,0 +1,43 @@
+import { FC } from "react"
+import { Box, HStack, ListItem, ListItemProps } from "@chakra-ui/react"
+import { ExternalLinkIcon } from "@chakra-ui/icons"
+import { Body1, Body3 } from "../Typography"
+import ExternalLink from "../ExternalLink"
+import { ExternalHref } from "../../enums"
+
+interface LinkDetailsListItemProps extends ListItemProps {
+  title: string
+  subTitle?: string
+  href: ExternalHref
+  cta?: string
+}
+
+const LinkDetailsListItem: FC<LinkDetailsListItemProps> = ({
+  title,
+  subTitle,
+  href,
+  cta = "Learn more",
+  ...props
+}) => (
+  <ListItem spacing="4" bg="gray.50" p="4" borderRadius="2" {...props}>
+    <HStack>
+      <Box bg="brand.500" borderRadius="8px" w="48px" height="48px" />
+      <Box>
+        <Body1>{title}</Body1>
+        <Body3>{subTitle}</Body3>
+      </Box>
+      <ExternalLink
+        fontSize="14px"
+        lineHeight="20px"
+        fontWeight="600"
+        color="gray.700"
+        ml="auto !important"
+        text={cta}
+        href={href}
+        icon={<ExternalLinkIcon ml="2" w="14px" h="14px" />}
+      />
+    </HStack>
+  </ListItem>
+)
+
+export default LinkDetailsListItem
diff --git a/src/components/TokenBalanceInput/index.tsx b/src/components/TokenBalanceInput/index.tsx
@@ -13,10 +13,13 @@ import {
 } from "@chakra-ui/react"
 import { createIcon } from "@chakra-ui/icons"
 import { formatUnits, parseUnits } from "@ethersproject/units"
+import { Zero } from "@ethersproject/constants"
+import { BigNumber } from "@ethersproject/bignumber"
 import NumberInput, {
   NumberInputValues,
   NumberInputProps,
 } from "../NumberInput"
+import { web3 as web3Constants } from "../../constants"
 
 export interface TokenBalanceInputProps
   extends InputProps,
@@ -59,7 +62,20 @@ const TokenBalanceInput: FC<TokenBalanceInputProps> = ({
   })
 
   const setToMax = () => {
-    _setAmount(formatUnits(max))
+    let remainder = Zero
+    const { decimalScale } = inputProps
+    if (
+      decimalScale &&
+      decimalScale > 0 &&
+      decimalScale < web3Constants.STANDARD_ERC20_DECIMALS
+    ) {
+      remainder = BigNumber.from(max).mod(
+        BigNumber.from(10).pow(
+          web3Constants.STANDARD_ERC20_DECIMALS - decimalScale
+        )
+      )
+    }
+    _setAmount(formatUnits(BigNumber.from(max).sub(remainder)))
     setAmount(valueRef.current)
   }
 

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,2 +1,3 @@
 export * as vendingMachine from "./vendingMachine"
 export * as stakingBonus from "./stakingBonus"
+export * as web3 from "./web3"
diff --git a/src/constants/vendingMachine.ts b/src/constants/vendingMachine.ts
@@ -1,6 +1,6 @@
 import { BigNumber } from "@ethersproject/bignumber"
+import { STANDARD_ERC20_DECIMALS } from "./web3"
 
-const STANDARD_ERC20_DECIMALS = 18
 export const WRAPPED_TOKEN_CONVERSION_PRECISION = 3
 export const FLOATING_POINT_DIVISOR = BigNumber.from(10).pow(
   BigNumber.from(STANDARD_ERC20_DECIMALS - WRAPPED_TOKEN_CONVERSION_PRECISION)

diff --git a/src/constants/web3.ts b/src/constants/web3.ts
@@ -0,0 +1 @@
+export const STANDARD_ERC20_DECIMALS = 18
diff --git a/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx b/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx
@@ -1,23 +1,23 @@
 import { FC, ComponentProps } from "react"
 import { List, ListItem } from "@chakra-ui/react"
 import Card from "../../../components/Card"
-import { Label3 } from "../../../components/Typography"
+import { Label3, Body2 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
 
 export const AboutAddressesCard: FC<ComponentProps<typeof Card>> = (props) => {
   return (
     <Card {...props}>
       <Label3>about the Addresses you need to provide</Label3>
-      <List mt="5" spacing="6">
+      <List mt="5" spacing="5">
         {aboutAddresses.map((action) => (
           <ListItem key={action.sectionName}>
-            <BoxLabel w="fit-content" mb="5">
+            <BoxLabel w="fit-content" mb="4">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
               {action.items.map((item, index) => (
                 <ListItem key={`${action.sectionName}-${index}`}>
-                  {item}
+                  <Body2>{item}</Body2>
                 </ListItem>
               ))}
             </List>

diff --git a/src/pages/Staking/HowItWorks/ProvidersCard.tsx b/src/pages/Staking/HowItWorks/ProvidersCard.tsx
@@ -1,9 +1,9 @@
 import { FC, ComponentProps } from "react"
-import { Box, List, ListItem, HStack } from "@chakra-ui/react"
+import { List } from "@chakra-ui/react"
 import Card from "../../../components/Card"
-import { Body1, Body3, Label3 } from "../../../components/Typography"
+import { Label3 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
-import ExternalLink from "../../../components/ExternalLink"
+import LinkDetailsListItem from "../../../components/LinkDetailsListItem"
 import { ExternalHref } from "../../../enums"
 
 export const ProvidersCard: FC<ComponentProps<typeof Card>> = (props) => {
@@ -30,26 +30,13 @@ type ProviderItem = {
   link: ExternalHref
 }
 
-const ProviderListItem: FC<ProviderItem> = ({ name, email, link }) => (
-  <ListItem as={HStack} spacing="4" bg="gray.50" p="4" borderRadius="2">
-    <Box bg="brand.500" borderRadius="8px" w="48px" height="48px" />
-    <Box>
-      <Body1>{name}</Body1>
-      <Body3>{email}</Body3>
-    </Box>
-    <ExternalLink
-      fontWeight="600"
-      color="gray.700"
-      ml="auto !important"
-      text="Learn more"
-      href={link}
-      withArrow
-    />
-  </ListItem>
-)
-
 const renderProviderListItem = (provider: ProviderItem) => (
-  <ProviderListItem key={provider.name} {...provider} />
+  <LinkDetailsListItem
+    key={provider.name}
+    title={provider.name}
+    subTitle={provider.email}
+    href={provider.link}
+  />
 )
 
 const providers = [

diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx
@@ -1,23 +1,23 @@
 import { FC, ComponentProps } from "react"
 import { List, ListItem } from "@chakra-ui/react"
 import Card from "../../../components/Card"
-import { Label3 } from "../../../components/Typography"
+import { Label3, Body2 } from "../../../components/Typography"
 import BoxLabel from "../../../components/BoxLabel"
 
 export const StakingActionsCard: FC<ComponentProps<typeof Card>> = (props) => {
   return (
-    <Card gridArea="staking-actions">
+    <Card gridArea="staking-actions" {...props}>
       <Label3>staking actions</Label3>
-      <List mt="5" spacing="6">
+      <List mt="5" spacing="5">
         {stakingActions.map((action) => (
           <ListItem key={action.sectionName}>
-            <BoxLabel w="fit-content" mb="5">
+            <BoxLabel w="fit-content" mb="4">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
               {action.items.map((item, index) => (
                 <ListItem key={`${action.sectionName}-${index}}`}>
-                  {item}
+                  <Body2>{item}</Body2>
                 </ListItem>
               ))}
             </List>

diff --git a/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx b/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx
@@ -1,5 +1,5 @@
 import { FC, ComponentProps } from "react"
-import { UnorderedList, ListItem } from "@chakra-ui/react"
+import { UnorderedList, ListItem, useColorModeValue } from "@chakra-ui/react"
 import Card from "../../../components/Card"
 import { Body2, Label3 } from "../../../components/Typography"
 import ViewInBlockExplorer from "../../../components/ViewInBlockExplorer"
@@ -8,6 +8,9 @@ import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 export const ThresholdStakesCard: FC<
   ComponentProps<typeof Card> & { tStakingContractAddress: string }
 > = ({ tStakingContractAddress, ...props }) => {
+  const bulletColor = useColorModeValue("gray.700", "gray.300")
+  const bulletColorStyle = { "::marker": { color: bulletColor } }
+
   return (
     <Card {...props}>
       <Label3>threshold stakes</Label3>
@@ -21,12 +24,16 @@ export const ThresholdStakesCard: FC<
           id={tStakingContractAddress}
           type={ExplorerDataType.ADDRESS}
           text="Threshold Staking Contract"
-        />
+        />{" "}
         supports two types of stakes:
       </Body2>
-      <UnorderedList mt="5">
-        <ListItem>Legacy Stakes (NuCypher and Keep Network stakes)</ListItem>
-        <ListItem>New T Stakes</ListItem>
+      <UnorderedList mt="5" pl="2.5">
+        <ListItem sx={bulletColorStyle}>
+          <Body2>Legacy Stakes (NuCypher and Keep Network stakes)</Body2>
+        </ListItem>
+        <ListItem sx={bulletColorStyle}>
+          <Body2>New T Stakes</Body2>
+        </ListItem>
       </UnorderedList>
     </Card>
   )

diff --git a/src/pages/Staking/HowItWorks/index.tsx b/src/pages/Staking/HowItWorks/index.tsx
@@ -29,6 +29,7 @@ const HowItWorksPage: PageComponent = (props) => {
             "legacy-stakes   new-t-stakes"
             "legacy-stakes   staking-actions"
             "addresses       staking-actions"
+            "addresses       staking-actions"
             "addresses       providers"
           `,
       }}