add account balance of membership

Joystream · Jun 19, 2023 · d89518a · d89518a
1 parent e294b08
commit d89518a
Showing 1 changed file with 61 additions and 26 deletions.
diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberAccounts.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberAccounts.tsx
@@ -6,35 +6,70 @@ import { AccountRow } from '../../../common/components/Modal'
 import { RowGapBlock } from '../../../common/components/page/PageContent'
 import { SidePaneLabel } from '../../../common/components/SidePane'
 import { Member } from '../../types'
+import { TokenValue } from '@/common/components/typography'
+import { isDefined } from '@/common/utils'
+import { useBalance } from '@/accounts/hooks/useBalance'
 
-export const MemberAccounts = ({ member }: { member: Member }) => (
-  <AccountsDisplay gap={16}>
-    <SidePaneLabel text="Root account" />
-    {!!member.rootAccount && (
-      <AccountRow>
-        <UnknownAccountInfo address={member.rootAccount} placeholderName="Root Account" />
-      </AccountRow>
-    )}
-    <SidePaneLabel text="Controller account" />
-    {!!member.controllerAccount && (
-      <AccountRow>
-        <UnknownAccountInfo address={member.controllerAccount} placeholderName="Controller Account" />
-      </AccountRow>
-    )}
+export const MemberAccounts = ({ member }: { member: Member }) => {
+  const rootBalance = useBalance(member.rootAccount);
+  const countrolBalance = useBalance(member.controllerAccount);
 
-    {!!member.boundAccounts.length && (
-      <>
-        <SidePaneLabel text="Bound accounts" />
-        {member.boundAccounts.map((account) => (
-          <AccountRow key={account}>
-            <UnknownAccountInfo address={account} placeholderName="Bound Account" />
-          </AccountRow>
-        ))}
-      </>
-    )}
-  </AccountsDisplay>
-)
+  return (
+    < AccountsDisplay gap={16} >
+      <SidePaneLabel text="Root account" />
+      {!!member.rootAccount && (
+        <AccountMemberRow>
+          <UnknownAccountInfo address={member.rootAccount} placeholderName="Root Account" />
+          <TokenValue value={rootBalance?.total} isLoading={!isDefined(rootBalance?.total)} />
+        </AccountMemberRow>
+      )}
+      <SidePaneLabel text="Controller account" />
+      {
+        !!member.controllerAccount && (
+          <AccountMemberRow>
+            <UnknownAccountInfo address={member.controllerAccount} placeholderName="Controller Account" />
+            <TokenValue value={countrolBalance?.total} isLoading={!isDefined(countrolBalance?.total)} />
+          </AccountMemberRow>
+        )
+      }
+
+      {
+        !!member.boundAccounts.length && (
+          <>
+            <SidePaneLabel text="Bound accounts" />
+            {member.boundAccounts.map((account) => {
+              const bountBalance = useBalance(account);
+              return (
+                <AccountMemberRow key={account}>
+                  <UnknownAccountInfo address={account} placeholderName="Bound Account" />
+                  <TokenValue value={bountBalance?.total} isLoading={!isDefined(bountBalance?.total)} />
+                </AccountMemberRow>
+              )
+            })}
+          </>
+        )
+      }
+    </ AccountsDisplay>
+  )
+}
 
 const AccountsDisplay = styled(RowGapBlock)`
   padding: 24px;
 `
+
+export const AccountMemberRow = styled.div
+  `    display: grid;
+grid-template-columns: 1fr 1fr;
+grid-template-rows: 2fr;
+-webkit-align-items: center;
+-webkit-box-align: center;
+-ms-flex-align: center;
+align-items: center;
+justify-items: center;
+width: 100%;
+min-height: 94px;
+max-height: 94px;
+padding: 8px 13px 8px 14px;
+border: 1px solid #C4CCD6;
+border-radius: 2px;
+background-color: #FFFFFF;`