Payouts page (#167)

* Implement payouts page
* Calculate remaining time until payout maturity
* Add a matured payout to chopsticks storage
* Bump node version
* Add tx status
* Change logo and title

---------

Co-authored-by: Lauro Gripa <laurogripa@gmail.com>

Author: kammradt

.nvmrc

@@ -1 +1 @@
-v18.15.0
+v20.12.2

config/kusama.yml.sample

@@ -58,6 +58,7 @@ import-storage:
       - Bids
       - Candidates
       - Members
+      - Payouts
     Bids:
       - who: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY # Alice
         kind:
@@ -102,6 +103,15 @@ import-storage:
     ChallengeRoundCount: 6
     RoundCount: 6
     MemberCount: 2
-    Head: 5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
+    Head: 5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw # Eve
+    Payouts:
+      -
+        -
+          - 5CiPPseXPECbkjWCa6MnjNokrgYjMqmKndv2rSnekmSK2DjL # Ferdie
+        - paid: 0
+          payouts:
+            -
+              - 20000000
+              - 15000000000000
   ParasDisputes:
     $removePrefix: ['disputes'] # those can makes block building super slow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksm-app",
-  "version": "0.2.0",
+  "version": "2.0.1",
   "homepage": "https://KappaSigmaMu.github.io/",
   "types": "src/types.d.ts",
   "dependencies": {
@@ -129,7 +129,7 @@
   },
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js",
-    "chopsticks": "npx @acala-network/chopsticks@latest --config=config/kusama.yml",
+    "chopsticks": "npx @acala-network/chopsticks@1.0.6 --config=config/kusama.yml",
     "cy:open": "cypress open",
     "deploy": "gh-pages -d build",
     "eslint:fix": "eslint \"{src,apps,libs,test}/**/*.{ts,tsx}\" --fix",
@@ -152,5 +152,5 @@
     "not dead",
     "not op_mini all"
   ],
-  "packageManager": "yarn@4.5.2"
+  "packageManager": "yarn@4.5.1"
 }

src/components/Navbar.tsx

@@ -19,7 +19,7 @@ const Navbar = ({
   const [showMenu, setShowMenu] = useState(false)
 
   return (
-    <RBNavbar className="pt-4">
+    <RBNavbar className="pt-3">
       <Container>
         <Nav className="align-items-center align-self-center">
           {showBrandIcon ? <NavbarBrand /> : <BrandPlaceholder />}
@@ -91,7 +91,7 @@ const BrandPlaceholder = () => <div style={{ height: 82, width: 106 }}></div>
 
 const NavbarBrand = () => (
   <RBNavbar.Brand as={LinkWithQuery} to="/">
-    <img width={90} src={KappaSigmaMu} alt="KappaSigmaMu Logo" />
+    <img width={200} src={KappaSigmaMu} alt="KappaSigmaMu Logo" style={{ margin: '-40px' }} />
   </RBNavbar.Brand>
 )
 

src/hooks/useBlockTime.ts

@@ -24,8 +24,8 @@ export function useBlockTime(blocks: number | BN = BN_ONE, apiOverride?: ApiProm
       (a.consts.timestamp?.minimumPeriod.gte(THRESHOLD)
         ? a.consts.timestamp.minimumPeriod.mul(BN_TWO)
         : a.query.parachainSystem
-          ? DEFAULT_TIME.mul(BN_TWO)
-          : DEFAULT_TIME)
+        ? DEFAULT_TIME.mul(BN_TWO)
+        : DEFAULT_TIME)
     const value = blockTime.mul(bnToBn(blocks)).toNumber()
     const time = extractTime(Math.abs(value))
     const { days, hours, minutes, seconds } = time

src/pages/FuturivelPage.tsx

@@ -462,7 +462,13 @@ const FuturivelPage = () => {
           <ActionsContainer>
             <div className="">
               <span>Join the</span>
-              <KappaSigmaMu src={KappaSigmaMuTitle} alt="Kappa Sigma Mu Title" />
+              <KappaSigmaMu
+                className="d-none d-lg-block"
+                src={KappaSigmaMuTitle}
+                alt="Kappa Sigma Mu Title"
+                width={800}
+                style={{ margin: '-140px -180px' }}
+              />
             </div>
             <OutlinedPrimaryLgButton onClick={() => handleButtonClick('/guide')}>
               Cyborg

src/pages/GilbertoGilPage.tsx

@@ -94,7 +94,13 @@ const GilbertoGilPage = () => {
         <CentralizedCol xs={0} lg={8} />
         <CentralizedCol xs={12} lg={4}>
           <h1 className="d-none d-lg-block">Join the</h1>
-          <KappaSigmaMu className="d-none d-lg-block" src={KappaSigmaMuTitle} alt="Kappa Sigma Mu Title" />
+          <KappaSigmaMu
+            className="d-none d-lg-block"
+            src={KappaSigmaMuTitle}
+            alt="Kappa Sigma Mu Title"
+            width={800}
+            style={{ margin: '-140px -180px' }}
+          />
           <ActionsContainer>
             <OutlinedPrimaryLgButton onClick={() => handleButtonClick('/explore/bidders')}>
               Explore

src/pages/LandingPage.tsx

@@ -92,10 +92,16 @@ const LandingPage = () => {
             />
           )}
         </div>
-        <CentralizedCol xs={0} lg={8} />
-        <CentralizedCol xs={12} lg={4}>
+        <CentralizedCol xs={0} lg={7} />
+        <CentralizedCol xs={12} lg={5}>
           <h1 className="d-none d-lg-block">Join the</h1>
-          <KappaSigmaMu className="d-none d-lg-block" src={KappaSigmaMuTitle} alt="Kappa Sigma Mu Title" />
+          <KappaSigmaMu
+            className="d-none d-lg-block"
+            src={KappaSigmaMuTitle}
+            alt="Kappa Sigma Mu Title"
+            width={800}
+            style={{ margin: '-140px -180px' }}
+          />
           <ActionsContainer className="container">
             <OutlinedPrimaryLgButton onClick={() => handleButtonClick('/explore/bidders')}>
               Explore

src/pages/explore/CandidatesPage/components/CandidatesList.tsx

@@ -12,7 +12,6 @@ import { useAccount } from '../../../../account/AccountContext'
 import { AccountIdentity } from '../../../../components/AccountIdentity'
 import { DataHeaderRow, DataRow } from '../../../../components/base'
 import { FormatBalance } from '../../../../components/FormatBalance'
-// import { truncate } from '../../../../helpers/truncate'
 import { Identicon } from '../../components/Identicon'
 import { toastByStatus } from '../../helpers'
 

src/pages/explore/CandidatesPage/components/DropButton.tsx

@@ -54,7 +54,7 @@ export function DropButton({
   if (loading)
     return (
       <div className="mx-2">
-        <LoadingSpinner center={true} small={true} />
+        <LoadingSpinner center={false} small={true} />
       </div>
     )