From 74ea7dd3aae833251e051250ae17d74e711fe890 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 13 Oct 2021 17:44:09 +0300
Subject: [PATCH] Display multiple vesting schedules (#6282)

* Display multiple vesting schedules

* Bump API
---
 package.json                                  |  12 +-
 packages/page-accounts/package.json           |   2 +-
 packages/page-contracts/package.json          |   2 +-
 packages/react-api/package.json               |   2 +-
 packages/react-components/src/AddressInfo.tsx | 110 +++++++++++-------
 packages/test-support/package.json            |   2 +-
 yarn.lock                                     | 108 ++++++++---------
 7 files changed, 130 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index fa71887ee5..2c392dc772 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,15 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^6.3.2-11",
-    "@polkadot/api-contract": "^6.3.2-11",
+    "@polkadot/api": "^6.3.2-12",
+    "@polkadot/api-contract": "^6.3.2-12",
     "@polkadot/hw-ledger": "^7.4.1",
     "@polkadot/keyring": "^7.4.1",
     "@polkadot/networks": "^7.4.1",
-    "@polkadot/phishing": "^0.6.347",
-    "@polkadot/types": "^6.3.2-11",
-    "@polkadot/types-known": "^6.3.2-11",
-    "@polkadot/types-support": "^6.3.2-11",
+    "@polkadot/phishing": "^0.6.350",
+    "@polkadot/types": "^6.3.2-12",
+    "@polkadot/types-known": "^6.3.2-12",
+    "@polkadot/types-support": "^6.3.2-12",
     "@polkadot/util": "^7.4.1",
     "@polkadot/util-crypto": "^7.4.1",
     "@polkadot/wasm-crypto": "^4.2.1",
diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json
index b2692a3a68..4ec1bef50d 100644
--- a/packages/page-accounts/package.json
+++ b/packages/page-accounts/package.json
@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@polkadot/phishing": "^0.6.347",
+    "@polkadot/phishing": "^0.6.350",
     "@polkadot/react-components": "^0.96.2-66",
     "@polkadot/vanitygen": "^0.47.2",
     "detect-browser": "^5.2.1",
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index 4127d41d45..c56f6656b3 100644
--- a/packages/page-contracts/package.json
+++ b/packages/page-contracts/package.json
@@ -6,6 +6,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@polkadot/api-contract": "^6.3.2-11"
+    "@polkadot/api-contract": "^6.3.2-12"
   }
 }
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 9c69f593a9..06cf73ea46 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@polkadot/api": "^6.3.2-11",
+    "@polkadot/api": "^6.3.2-12",
     "@polkadot/extension-compat-metamask": "^0.40.4-0",
     "@polkadot/extension-dapp": "^0.40.4-0",
     "@substrate/connect": "^0.4.1",
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 07362c8ff7..410d3bfb49 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -224,6 +224,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
 
 function createBalanceItems (formatIndex: number, lookup: Record<string, string>, t: TFunction, { address, balanceDisplay, balancesAll, bestNumber, democracyLocks, isAllLocked, otherBonded, ownBonded, stakingInfo, votingOf, withBalanceToggle, withLabel }: { address: string; balanceDisplay: BalanceActiveType; balancesAll?: DeriveBalancesAll | DeriveBalancesAccountData; bestNumber: BlockNumber; democracyLocks?: DeriveDemocracyLock[]; isAllLocked: boolean; otherBonded: BN[]; ownBonded: BN; stakingInfo?: DeriveStakingAccount; votingOf?: Voting; withBalanceToggle: boolean, withLabel: boolean }): React.ReactNode {
   const allItems: React.ReactNode[] = [];
+  const deriveBalances = balancesAll as DeriveBalancesAll;
 
   !withBalanceToggle && balancesAll && balanceDisplay.total && allItems.push(
     <React.Fragment key={0}>
@@ -236,58 +237,71 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
       />
     </React.Fragment>
   );
-  balancesAll && balanceDisplay.available && (balancesAll as DeriveBalancesAll).availableBalance && allItems.push(
+  balancesAll && balanceDisplay.available && deriveBalances.availableBalance && allItems.push(
     <React.Fragment key={1}>
       <Label label={t<string>('transferrable')} />
       <FormatBalance
         className='result'
         formatIndex={formatIndex}
         labelPost={<IconVoid />}
-        value={(balancesAll as DeriveBalancesAll).availableBalance}
+        value={deriveBalances.availableBalance}
       />
     </React.Fragment>
   );
-  balanceDisplay.vested && (balancesAll as DeriveBalancesAll)?.isVesting && allItems.push(
-    <React.Fragment key={2}>
-      <Label label={t<string>('vested')} />
-      <FormatBalance
-        className='result'
-        formatIndex={formatIndex}
-        labelPost={
-          <Icon
-            icon='info-circle'
-            tooltip={`${address}-vested-trigger`}
-          />
-        }
-        value={(balancesAll as DeriveBalancesAll).vestedBalance}
-      >
-        <Tooltip
-          text={
-            <>
-              <div>
-                {formatBalance((balancesAll as DeriveBalancesAll).vestedClaimable, { forceUnit: '-' })}
-                <div className='faded'>{t('available to be unlocked')}</div>
-              </div>
-              {bestNumber.lt((balancesAll as DeriveBalancesAll).vestingEndBlock) && (
-                <>
-                  <div>
-                    <BlockToTime value={(balancesAll as DeriveBalancesAll).vestingEndBlock.sub(bestNumber)} />
-                    <div className='faded'>{t('until block')} {formatNumber((balancesAll as DeriveBalancesAll).vestingEndBlock)}</div>
-                  </div>
-                  <div>
-                    {formatBalance((balancesAll as DeriveBalancesAll).vestingPerBlock)}
-                    <div className='faded'>{t('per block')}</div>
-                  </div>
-                </>
-              )}
-            </>
+
+  if (balanceDisplay.vested && deriveBalances?.isVesting) {
+    const allVesting = deriveBalances.vesting.filter(({ endBlock }) => bestNumber.lt(endBlock));
+
+    allItems.push(
+      <React.Fragment key={2}>
+        <Label label={t<string>('vested')} />
+        <FormatBalance
+          className='result'
+          formatIndex={formatIndex}
+          labelPost={
+            <Icon
+              icon='info-circle'
+              tooltip={`${address}-vested-trigger`}
+            />
           }
-          trigger={`${address}-vested-trigger`}
-        />
-      </FormatBalance>
-    </React.Fragment>
-  );
-  balanceDisplay.locked && balancesAll && (isAllLocked || (balancesAll as DeriveBalancesAll).lockedBalance?.gtn(0)) && allItems.push(
+          value={deriveBalances.vestedBalance}
+        >
+          <Tooltip
+            text={
+              <>
+                <div>
+                  {formatBalance(deriveBalances.vestedClaimable, { forceUnit: '-' })}
+                  <div className='faded'>{t('available to be unlocked')}</div>
+                </div>
+                {allVesting.map(({ endBlock, locked, perBlock, vested }, index) => (
+                  <div
+                    className='inner'
+                    key={`item:${index}`}
+                  >
+                    <div>
+                      {formatBalance(vested, { forceUnit: '-' })}
+                      <div className='faded'>{t('of {{locked}} vested', { replace: { locked: formatBalance(locked, { forceUnit: '-' }) } })}</div>
+                    </div>
+                    <div>
+                      <BlockToTime value={endBlock.sub(bestNumber)} />
+                      <div className='faded'>{t('until block')} {formatNumber(endBlock)}</div>
+                    </div>
+                    <div>
+                      {formatBalance(perBlock)}
+                      <div className='faded'>{t('per block')}</div>
+                    </div>
+                  </div>
+                ))}
+              </>
+            }
+            trigger={`${address}-vested-trigger`}
+          />
+        </FormatBalance>
+      </React.Fragment>
+    );
+  }
+
+  balanceDisplay.locked && balancesAll && (isAllLocked || deriveBalances.lockedBalance?.gtn(0)) && allItems.push(
     <React.Fragment key={3}>
       <Label label={t<string>('locked')} />
       <FormatBalance
@@ -299,10 +313,10 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
             tooltip={`${address}-locks-trigger`}
           />
         }
-        value={isAllLocked ? 'all' : (balancesAll as DeriveBalancesAll).lockedBalance}
+        value={isAllLocked ? 'all' : deriveBalances.lockedBalance}
       >
         <Tooltip
-          text={(balancesAll as DeriveBalancesAll).lockedBreakdown.map(({ amount, id, reasons }, index): React.ReactNode => (
+          text={deriveBalances.lockedBreakdown.map(({ amount, id, reasons }, index): React.ReactNode => (
             <div key={index}>
               {amount?.isMax()
                 ? t<string>('everything')
@@ -531,6 +545,14 @@ export default withMulti(
         row-gap: 0.5rem;
         opacity: 1;
 
+        div.inner {
+          margin-top: 0.25rem;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+
         label {
           grid-column: 1;
           padding-right: 0.5rem;
diff --git a/packages/test-support/package.json b/packages/test-support/package.json
index c25d446077..63cf071023 100644
--- a/packages/test-support/package.json
+++ b/packages/test-support/package.json
@@ -9,7 +9,7 @@
     "testcontainers": "^7.20.2"
   },
   "devDependencies": {
-    "@polkadot/types-support": "^6.3.2-11",
+    "@polkadot/types-support": "^6.3.2-12",
     "@testing-library/jest-dom": "^5.14.1",
     "tsconfig-paths": "^3.11.0"
   }
diff --git a/yarn.lock b/yarn.lock
index 3d35fcfbdf..8ebf3af23d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2500,50 +2500,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/api-contract@npm:6.3.2-11"
+"@polkadot/api-contract@npm:^6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/api-contract@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api": 6.3.2-11
-    "@polkadot/types": 6.3.2-11
+    "@polkadot/api": 6.3.2-12
+    "@polkadot/types": 6.3.2-12
     "@polkadot/util": ^7.4.1
     rxjs: ^7.4.0
-  checksum: 23954657296c50679e709fb4e425ff52d8c4fc260a93159cafc7a780a3721329cd2e9cb46ec329f974f5a760c0e116c602b7779d3e69102f6642ac5576f3b205
+  checksum: 06a44f92daf04a948307e2b221ad85c465b6c5a6b61ff73b3775ed6f6cc34936e1d8ec3592bdde8e0a992eacd0395ffc62a9da97a4e0c09e0edb26c84e6a96a8
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/api-derive@npm:6.3.2-11"
+"@polkadot/api-derive@npm:6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/api-derive@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api": 6.3.2-11
-    "@polkadot/rpc-core": 6.3.2-11
-    "@polkadot/types": 6.3.2-11
+    "@polkadot/api": 6.3.2-12
+    "@polkadot/rpc-core": 6.3.2-12
+    "@polkadot/types": 6.3.2-12
     "@polkadot/util": ^7.4.1
     "@polkadot/util-crypto": ^7.4.1
     rxjs: ^7.4.0
-  checksum: 125a5bef34813d889f03d1c86fa49a2b9f8358c07d981ff8537d600dd3bb38bad54d660703892e2e5833c95a3ae204227f94364e76ed96d91f6c4704191d7489
+  checksum: dfa1dcd4f05402e93020f89c4c580e6830c8a25c92d1b750ea76bba57e950e055d03fbbdfe66ebef4fcfed5ef8288c488b0a64f0898ed7c0a754b4d81620365f
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/api@npm:6.3.2-11"
+"@polkadot/api@npm:^6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/api@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api-derive": 6.3.2-11
+    "@polkadot/api-derive": 6.3.2-12
     "@polkadot/keyring": ^7.4.1
-    "@polkadot/rpc-core": 6.3.2-11
-    "@polkadot/rpc-provider": 6.3.2-11
-    "@polkadot/types": 6.3.2-11
-    "@polkadot/types-known": 6.3.2-11
+    "@polkadot/rpc-core": 6.3.2-12
+    "@polkadot/rpc-provider": 6.3.2-12
+    "@polkadot/types": 6.3.2-12
+    "@polkadot/types-known": 6.3.2-12
     "@polkadot/util": ^7.4.1
     "@polkadot/util-crypto": ^7.4.1
     eventemitter3: ^4.0.7
     rxjs: ^7.4.0
-  checksum: 4660d1e6e8178d54dcef9ab428ea00876e95bb8a5035b4ced84754ee0b8c280f9c37d68b79c9e776ee2fa80687363b25b4f6b8c7f2e444a36c300511884bdd85
+  checksum: 7fd8e11151c207cda083064108c9ce9f07a91b91d9f7bf22bfc872883668e1251e3cbff57eb26959c6317a8d4c5475651b1c609b597ef5cacd1c7d20708ae18c
   languageName: node
   linkType: hard
 
@@ -2552,7 +2552,7 @@ __metadata:
   resolution: "@polkadot/app-accounts@workspace:packages/page-accounts"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/phishing": ^0.6.347
+    "@polkadot/phishing": ^0.6.350
     "@polkadot/react-components": ^0.96.2-66
     "@polkadot/test-support": 0.96.2-66
     "@polkadot/vanitygen": ^0.47.2
@@ -2616,7 +2616,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api-contract": ^6.3.2-11
+    "@polkadot/api-contract": ^6.3.2-12
   languageName: unknown
   linkType: soft
 
@@ -3093,15 +3093,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/phishing@npm:^0.6.347":
-  version: 0.6.347
-  resolution: "@polkadot/phishing@npm:0.6.347"
+"@polkadot/phishing@npm:^0.6.350":
+  version: 0.6.350
+  resolution: "@polkadot/phishing@npm:0.6.350"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/util": ^7.4.1
     "@polkadot/util-crypto": ^7.4.1
     "@polkadot/x-fetch": ^7.4.1
-  checksum: e84f9524f1e54c95e99b65c277222b9e82605b37bb71b7b716084238275b0a8978cf828b21195572eb81350b322c9fac0e80e318c40c2397d7d6c463cd45e985
+  checksum: f57978939306fcfc8c747eb50caf5dfb5033a3680f79ca878abaabfd8dff7708ce66dbea328696201a28f52526ff7d45d47f56527a931588cbc58c2b3342e53f
   languageName: node
   linkType: hard
 
@@ -3110,7 +3110,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/api": ^6.3.2-11
+    "@polkadot/api": ^6.3.2-12
     "@polkadot/extension-compat-metamask": ^0.40.4-0
     "@polkadot/extension-dapp": ^0.40.4-0
     "@substrate/connect": ^0.4.1
@@ -3243,32 +3243,32 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/rpc-core@npm:6.3.2-11"
+"@polkadot/rpc-core@npm:6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/rpc-core@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/rpc-provider": 6.3.2-11
-    "@polkadot/types": 6.3.2-11
+    "@polkadot/rpc-provider": 6.3.2-12
+    "@polkadot/types": 6.3.2-12
     "@polkadot/util": ^7.4.1
     rxjs: ^7.4.0
-  checksum: 5463da39a1a09c9bcda110de8ee3852f9be286f87a5ae38338c5efb67b271e06ee2a30acab77eb88d7e16f371a1b1a6f6d592a20b2edda0bed10b1159c58dc86
+  checksum: 76aad5873e9d576456967639591e04ff8444d455bd884b5f9949b476f6bed652f4c98a4627336105612d18df7a8afab1193d5e4c4a3a8fc49c878668793ad4d5
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/rpc-provider@npm:6.3.2-11"
+"@polkadot/rpc-provider@npm:6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/rpc-provider@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
-    "@polkadot/types": 6.3.2-11
+    "@polkadot/types": 6.3.2-12
     "@polkadot/util": ^7.4.1
     "@polkadot/util-crypto": ^7.4.1
     "@polkadot/x-fetch": ^7.4.1
     "@polkadot/x-global": ^7.4.1
     "@polkadot/x-ws": ^7.4.1
     eventemitter3: ^4.0.7
-  checksum: 042054675c9bfdfcd3d4466020ef37703d61d23d632d6da7030fb9fee918072ef5e5224f45dafe31c0818e742b6781f087225d740acc99a237c8f50738cc813f
+  checksum: c62e044f7e511d6ab310e4764d745e0e7c0f5659502d659f2a2402c5afdfcba24f6b3d42f9813b9e684650054149b9ac2e1e37993d4e053094b8f2c53c658550
   languageName: node
   linkType: hard
 
@@ -3292,7 +3292,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@polkadot/test-support@workspace:packages/test-support"
   dependencies:
-    "@polkadot/types-support": ^6.3.2-11
+    "@polkadot/types-support": ^6.3.2-12
     "@testing-library/jest-dom": ^5.14.1
     "@testing-library/react": ^12.1.2
     testcontainers: ^7.20.2
@@ -3309,37 +3309,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:^6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/types-known@npm:6.3.2-11"
+"@polkadot/types-known@npm:^6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/types-known@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/networks": ^7.4.1
-    "@polkadot/types": 6.3.2-11
+    "@polkadot/types": 6.3.2-12
     "@polkadot/util": ^7.4.1
-  checksum: 6cbcb0681a520c0d82750b0c9db1dff21a9effb8ff6ec23ae328e43e65867e68f899f1c4ddc733948f9e1c1900abc148feb19e20aba63c5916680fe54dcc79af
+  checksum: bf934a8d8d0c38aaf9d1032d0580c5d7284011ff7e82544f8d70829824257a71d990a54b6ca460125d95bbf04f9f2044e7a3b9c72220c487a6d76e49e291fb8f
   languageName: node
   linkType: hard
 
-"@polkadot/types-support@npm:^6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/types-support@npm:6.3.2-11"
+"@polkadot/types-support@npm:^6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/types-support@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/util": ^7.4.1
-  checksum: 798c50b625f56eb738b0f5fcdb567ce16555e96fcb1bb02720ac0c8c1b2e4ca71202863fd055098a20670b4d7a02b98ae6cba7238026ec72f67be61b974f3eae
+  checksum: 7bc7ec9a258e73871f5b26626d7fa307e03ba2d7ada9a646a5af1aaf1dc9a413b062db1523d2e02a8048d65f5531aa9f09edc5e3cc318f4c07f908350f7d4362
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^6.3.2-11":
-  version: 6.3.2-11
-  resolution: "@polkadot/types@npm:6.3.2-11"
+"@polkadot/types@npm:^6.3.2-12":
+  version: 6.3.2-12
+  resolution: "@polkadot/types@npm:6.3.2-12"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@polkadot/util": ^7.4.1
     "@polkadot/util-crypto": ^7.4.1
     rxjs: ^7.4.0
-  checksum: e28b9fabb50701986820ff13db1b42b4d0469f0d7fb3d375fb1f2534c61125d0715f94df7374d8233f43bff9fdbe153bf8147fb365b36a11f77804543f27ef9e
+  checksum: 9cce2473c113189d6ea2c699a67a66240376a284491b930c004ee54dbfb2e456ce5259c1f12d1add79da31787b85e7aab942cac81b64e575ee5faf9c706f8979
   languageName: node
   linkType: hard