show holdings when no DAO (#2139)

* show holdings when no DAO, refactor/improve layout * fix test * fix test
daostack · Sep 22, 2020 · 541ef7e · 541ef7e
1 parent 55f9862
commit 541ef7e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 77 deletions.
diff --git a/src/components/Account/AccountBalances.tsx b/src/components/Account/AccountBalances.tsx
@@ -15,41 +15,41 @@ interface IExternalProps {
   address: Address;
 }
 
-type IProps = IExternalProps & ISubscriptionProps<[IMemberState, BN|null, BN|null]>
+type IProps = IExternalProps & ISubscriptionProps<[Address, IMemberState, BN|null, BN|null]>
 
 class AccountBalances extends React.Component<IProps, null> {
 
   public render(): RenderOutput {
     const { dao, data } = this.props;
 
-    if (!data) {
-      return null;
-    }
-
-    const [currentAccountState, ethBalance, genBalance] = data;
+    const [currentAccountAddress, currentAccountState, ethBalance, genBalance] = data;
 
     return (
       <div className={css.balances}>
-        <h2>Reputation</h2>
-        { dao ?
-          <div className={css.daoBalance}>
-            <b>{dao.name}</b>
-            <Reputation daoName={dao.name} totalReputation={dao.reputationTotalSupply} reputation={currentAccountState.reputation} hideTooltip/>
-          </div>
-          :
-          <div className={css.noReputation}>
-              No Reputation
-          </div>
+        { (dao && currentAccountState) ?
+          <div className={css.repBalance}>
+            <div className={css.heading}>Reputation</div>
+            <div className={css.rep}>
+              <div>{dao.name}</div>
+              <div className={css.underline}></div>
+              <div><Reputation daoName={dao.name} totalReputation={dao.reputationTotalSupply} reputation={currentAccountState.reputation} hideTooltip /></div>
+            </div>
+          </div> : dao ?
+            <div className={css.noReputation}>
+            No Reputation
+            </div> : ""
         }
-        <div className={css.userBalance}>
-          <h2>Holdings</h2>
-          <div>
-            <AccountBalance tokenSymbol={baseTokenName()} balance={ethBalance} accountAddress={currentAccountState.address} />
-          </div>
-          <div>
-            <AccountBalance tokenSymbol={genName()} balance={genBalance} accountAddress={currentAccountState.address} />
+        { currentAccountAddress ?
+          <div className={css.userBalance}>
+            <div className={css.heading}>Holdings</div>
+            <div>
+              <AccountBalance tokenSymbol={baseTokenName()} balance={ethBalance} accountAddress={currentAccountAddress} />
+            </div>
+            <div>
+              <AccountBalance tokenSymbol={genName()} balance={genBalance} accountAddress={currentAccountAddress} />
+            </div>
           </div>
-        </div>
+          : "" }
       </div>
     );
   }
@@ -65,14 +65,11 @@ export default withSubscription({
   },
 
   createObservable: ({ dao, address }: IExternalProps) => {
-    if (!dao) {
-      return of(null);
-    }
-    const daoState = dao;
     const arc = getArc();
 
     return combineLatest(
-      address && daoState.dao.member(address).state( { subscribe: true }) || of(null),
+      address,
+      (address && dao && dao.dao.member(address).state( { subscribe: true })) || of(null),
       ethBalance(address).pipe(ethErrorHandler()),
       arc.GENToken().balanceOf(address).pipe(ethErrorHandler()),
     );

diff --git a/src/components/Account/AccountProfilePage.tsx b/src/components/Account/AccountProfilePage.tsx
@@ -284,7 +284,7 @@ class AccountProfilePage extends React.Component<IProps, IState> {
                     }
                     <div className={css.otherInfoContainer}>
                       <div className={css.tokens}>
-                        {accountInfo
+                        {(accountInfo && dao)
                           ? <div><strong>Rep. Score</strong><br /><Reputation reputation={accountInfo.reputation} totalReputation={dao.reputationTotalSupply} daoName={dao.name} /> </div>
                           : ""}
                         <div><strong>{genName()}:</strong><br /><span>{formatTokens(genBalance)}</span></div>

diff --git a/src/layouts/App.scss b/src/layouts/App.scss
@@ -294,14 +294,24 @@ body {
 
       .balances {
         text-align: left;
-        padding: 25px;
-        border-bottom: 1px solid rgba(229, 235, 242, 1);
-
-        h2 {
-          font-size: 13px;
-          color: rgba(0, 29, 53, 1);
-          margin: 0;
-          margin-bottom: 3px;
+        padding-left: 25px;
+        padding-right: 25px;
+        padding-top: 20px;
+        border-bottom: 1px solid $accent-6;
+        font-size: 11px;
+        color: $body-color;
+        font-weight: normal;
+        font-family: "Open Sans";
+
+        .userBalance,
+        .repBalance {
+          .heading {
+            font-size: 13px;
+            color: $black;
+            margin: 0;
+            margin-bottom: 3px;
+            font-weight: bold;
+          }
         }
 
         .noReputation {
@@ -310,44 +320,25 @@ body {
         }
 
         .userBalance {
-          padding-top: 20px;
-
-          div {
-            font-size: 11px;
-            color: rgba(78, 97, 118, 1);
-            font-weight: normal;
-            font-family: "Open Sans";
-          }
+          padding-bottom: 20px;
         }
 
-        .daoBalance {
-          margin-bottom: 3px;
+        .repBalance {
           font-size: 12px;
-          border-bottom: 1px dashed rgba(191, 203, 213, 1);
-
-          b,
-          span {
-            background-color: rgba(252, 253, 255, 1);
-            position: relative;
-            top: 2px;
-            font-weight: normal;
-            font-family: "Open Sans";
-          }
-
-          b {
-            display: inline-block;
-            padding-right: 5px;
-          }
+          margin-bottom: 20px;
+          background-color: rgba(252, 253, 255, 1);
+          font-weight: normal;
+          font-family: "Open Sans";
 
-          span {
-            float: right;
-          }
+          .rep {
+            display: flex;
 
-          label {
-            display: block;
-            font-size: 9px;
-            margin-bottom: 10px;
-            opacity: 0.7;
+            .underline {
+              flex-grow: 2;
+              border-bottom: 1px dashed $gray-2;
+              margin-left: 4px;
+              margin-right: 4px;
+            }
           }
         }
       }

diff --git a/test/integration/profile.ts b/test/integration/profile.ts
@@ -12,6 +12,12 @@ describe("Profile page", () => {
     daoAddress = addresses.dao.Avatar.toLowerCase();
   });
 
+  it("should also work without a DAO address", async () => {
+    await browser.url(`http://127.0.0.1:3000/profile/${userAddress}`);
+    const profileContainer = await $("*[data-test-id=\"profile-container\"]");
+    await profileContainer.waitForExist();
+  });
+
   it("should exist and be editable", async () => {
     await browser.url(`http://127.0.0.1:3000/profile/${userAddress}?daoAvatarAddress=${daoAddress}`);
 
@@ -30,10 +36,4 @@ describe("Profile page", () => {
     const submitButton = await $("*[type=\"submit\"]");
     await submitButton.click();
   });
-
-  it("should also work without a DAO address", async () => {
-    await browser.url(`http://127.0.0.1:3000/profile/${userAddress}`);
-    const profileContainer = await $("*[data-test-id=\"profile-container\"]");
-    await profileContainer.waitForExist();
-  });
 });