Fix/4379 member acount balance (Joystream#4450)

* start dev * add account balance of membership * fix lint error * test * fixed finish * finish fixed * update fix error * update * update
mkbeefcake · Nov 20, 2023 · 5e0385d · 5e0385d
1 parent 022aadd
commit 5e0385d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 deletions.
diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberAccount.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberAccount.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { useBalance } from '@/accounts/hooks/useBalance'
+import { AccountRow } from '@/common/components/Modal'
+import { TokenValue } from '@/common/components/typography'
+import { isDefined } from '@/common/utils'
+
+import { UnknownAccountInfo } from '../../../accounts/components/UnknownAccountInfo'
+
+type Props = {
+  account: string
+  name: string
+}
+
+export const MemberAccount = ({ account, name }: Props) => {
+  const balance = useBalance(account)
+  return (
+    <div>
+      {!!account && (
+        <AccountMemberRow>
+          <UnknownAccountInfo address={account} placeholderName={name} />
+          <TokenValue value={balance?.total} isLoading={!isDefined(balance?.total)} />
+        </AccountMemberRow>
+      )}
+    </div>
+  )
+}
+
+export const AccountMemberRow = styled(AccountRow)`
+  grid-template-rows: 2fr;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  justify-items: end;
+  padding: 8px 14px 8px 14px;
+`
diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberAccounts.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberAccounts.tsx
@@ -1,39 +1,31 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { UnknownAccountInfo } from '../../../accounts/components/UnknownAccountInfo'
-import { AccountRow } from '../../../common/components/Modal'
 import { RowGapBlock } from '../../../common/components/page/PageContent'
 import { SidePaneLabel } from '../../../common/components/SidePane'
 import { Member } from '../../types'
 
-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>
-    )}
+import { MemberAccount } from './MemberAccount'
 
-    {!!member.boundAccounts.length && (
-      <>
-        <SidePaneLabel text="Bound accounts" />
-        {member.boundAccounts.map((account) => (
-          <AccountRow key={account}>
-            <UnknownAccountInfo address={account} placeholderName="Bound Account" />
-          </AccountRow>
-        ))}
-      </>
-    )}
-  </AccountsDisplay>
-)
+export const MemberAccounts = ({ member }: { member: Member }) => {
+  return (
+    <AccountsDisplay gap={16}>
+      <SidePaneLabel text="Root account" />
+      {!!member.rootAccount && <MemberAccount account={member.rootAccount} name="Root Account" />}
+      <SidePaneLabel text="Controller account" />
+      {!!member.controllerAccount && <MemberAccount account={member.controllerAccount} name="Controller Account" />}
+
+      {!!(member.boundAccounts.length !== 0) && (
+        <>
+          <SidePaneLabel text="Bound accounts" />
+          {member.boundAccounts.map((account) => {
+            return <MemberAccount account={account} name="Bound Account" />
+          })}
+        </>
+      )}
+    </AccountsDisplay>
+  )
+}
 
 const AccountsDisplay = styled(RowGapBlock)`
   padding: 24px;