More small improvements

src/atoms/input/DaoInput.jsx

@@ -19,7 +19,7 @@ export default function DaoInput({
     onChange(type === 'file' ? e.target.files?.[0] : e.target.value)
 
   return (
-    <div className={`${styles.container} ${className || ''}`}>
+    <div className={`${styles.container} ${className ?? ''}`}>
       <label>
         <p>{label}</p>
         <input

src/atoms/link/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { CIDToURL } from '@utils/index'
 import { walletPreview } from '@utils/string'
 import { TOKENS } from '@constants'

src/data/api.ts

@@ -4,6 +4,7 @@ import {
   CLAIMED_DAO_TOKENS_BIGMAP_ID,
 } from '@constants'
 import axios from 'axios'
+
 export const BaseTokenFieldsFragment = `
 fragment baseTokenFields on tokens {
   artifact_uri
@@ -281,6 +282,7 @@ interface TzktMetadata {
 interface TzktData {
   data?: TzktMetadata
 }
+
 /**
  * Get User Metadata
  */

src/data/swr.js

@@ -88,7 +88,17 @@ export function useDaoRepresentatives(daoStorage) {
     getTzktData
   )
 
-  return [data?.representatives, mutate]
+  const representatives = data?.representatives
+    ? Object.fromEntries(
+        Object.entries(data.representatives).sort(([, com1], [, com2]) => {
+          if (com1 < com2) return -1
+          if (com1 > com2) return 1
+          return 0
+        })
+      )
+    : undefined
+
+  return [representatives, mutate]
 }
 
 export function useDaoUserVotes(address, daoStorage) {

src/pages/dao/claim.jsx

@@ -15,12 +15,13 @@ export const Claim = () => {
   return (
     <Page title="Claim DAO tokens" large>
       <div className={styles.container}>
+        <div className={styles.headline}>
+          <h1>Welcome to the TEIA tokens claim page!</h1>
+          <p>Here you can claim your Teia DAO tokens.</p>
+          <DAOIcon />
+        </div>
+
         <section className={styles.section}>
-          <div className={styles.headline}>
-            <h1>Welcome to the TEIA tokens claim page!</h1>
-            <p>Here you can claim your Teia DAO tokens.</p>
-            <DAOIcon />
-          </div>
           <p>
             By owning TEIA tokens, you are part of the Teia DAO LLC and eligible
             to put forward and vote on DAO proposals for Teia. Teia DAO tokens,
@@ -72,6 +73,7 @@ export const Claim = () => {
               <b>Confirm you have read the disclaimer</b> by checking the box at
               the bottom of this page to get access to the claim button.
             </li>
+
             <li counter="4">
               <b>Click on the "Claim TEIA tokens" button</b> at the bottom of
               this page to initiate the token claim process and confirm the
@@ -176,6 +178,7 @@ export const Claim = () => {
           </ol>
 
           <br />
+
           <Checkbox
             alt={`click to ${
               acceptLegalDisclaimer ? 'decline' : 'accept'
@@ -195,6 +198,7 @@ export const Claim = () => {
         {acceptLegalDisclaimer && (
           <>
             <Line />
+
             <section className={styles.section}>
               <h1 className={styles.section_title}>Claim your TEIA tokens!</h1>
 
@@ -204,13 +208,14 @@ export const Claim = () => {
                 </Button>
               </p>
             </section>
+
             <Line />
 
             <section className={styles.section}>
               <h1 className={styles.section_title}>Troubleshooting</h1>
               <p>
                 Here are some of the most common solutions if the token claim
-                process fails
+                process fails.
               </p>
 
               <ol>
@@ -220,7 +225,7 @@ export const Claim = () => {
                   wallet. The transaction cost for the claim process is about
                   0.1-0.2 tez.
                 </li>
-                <li>Clear your browser cache</li>
+                <li>Clear your browser cache.</li>
                 <li>
                   Switch the rpc node in the{' '}
                   <DefaultLink href="/settings">config menu</DefaultLink>,

src/pages/dao/index.jsx

@@ -3,11 +3,11 @@ import { DAO_GOVERNANCE_CONTRACT } from '@constants'
 import { useUserStore } from '@context/userStore'
 import { Page } from '@atoms/layout'
 import { Loading } from '@atoms/loading'
-import { Tabs } from '@atoms/tab/Tabs'
+import { Tabs } from '@atoms/tab'
 import {
-  useDaoTokenBalance,
   useStorage,
   useDaoRepresentatives,
+  useDaoTokenBalance,
 } from '@data/swr'
 import styles from '@style'
 
@@ -29,37 +29,38 @@ const TABS = [
 
 export const DAO = () => {
   // Get all the required DAO information
-  const daoStorage = useStorage(DAO_GOVERNANCE_CONTRACT)
-  const representatives = useDaoRepresentatives(daoStorage)
+  const [daoStorage] = useStorage(DAO_GOVERNANCE_CONTRACT)
+  const [representatives] = useDaoRepresentatives(daoStorage)
 
   // Get all the required user information
   const userAddress = useUserStore((st) => st.address)
   const userCommunity = representatives?.[userAddress]
-  const userTokenBalance = useDaoTokenBalance(userAddress)
+  const [userTokenBalance] = useDaoTokenBalance(userAddress)
 
   return (
     <Page title="Teia DAO">
-      <div className={styles.headline}>
-        <h1>Teia DAO</h1>
-      </div>
+      <div className={styles.container}>
+        <h1 className={styles.headline}>Teia DAO</h1>
 
-      {!daoStorage || !representatives ? (
-        <Loading message="Loading DAO information" />
-      ) : (
-        <>
-          <Tabs
-            tabs={TABS}
-            filter={(tab) => {
-              if (userTokenBalance === 0 && !userCommunity && tab.private) {
-                return null
-              }
+        {!daoStorage || !representatives ? (
+          <Loading message="Loading DAO information" />
+        ) : (
+          <>
+            <Tabs
+              tabs={TABS}
+              filter={(tab) => {
+                if (userTokenBalance === 0 && !userCommunity && tab.private) {
+                  return null
+                }
 
-              return tab
-            }}
-          />
-          <Outlet />
-        </>
-      )}
+                return tab
+              }}
+            />
+
+            <Outlet />
+          </>
+        )}
+      </div>
     </Page>
   )
 }

src/pages/dao/index.module.scss

@@ -1,28 +1,19 @@
 @import '@styles/mixins.scss';
-@import '@styles/variables.scss';
 
 .container {
-  padding-top: 12px;
   padding-bottom: 60px;
   width: 100%;
-
-  @include respond-to('desktop') {
-    margin: 0;
-  }
 }
 
 .headline {
   text-align: center;
-  margin-bottom: 1em;
+  margin-bottom: 1em 0;
+
   > p {
     margin: 1em 0;
   }
 }
 
-.section_title {
-  margin-bottom: 1em;
-}
-
 .section {
   margin: 1em 0;
 
@@ -57,3 +48,7 @@
     margin-bottom: 30px;
   }
 }
+
+.section_title {
+  margin-bottom: 1em;
+}

src/pages/dao/tabs/Parameters.jsx

@@ -4,16 +4,16 @@ import { Loading } from '@atoms/loading'
 import { Line } from '@atoms/line'
 import { TeiaUserLink, TezosAddressLink } from '@atoms/link'
 import {
-  useBalance,
-  useDaoTokenBalance,
   useStorage,
   useDaoGovernanceParameters,
   useDaoProposals,
   useDaoRepresentatives,
+  useDaoMemberCount,
+  useBalance,
+  useDaoTokenBalance,
   useDaoUserVotes,
   useDaoCommunityVotes,
   useDaoUsersAliases,
-  useDaoMemberCount,
 } from '@data/swr'
 import styles from '@style'
 
@@ -42,7 +42,7 @@ export const DaoParameters = () => {
   )
 
   // Display the loading page information until all data is available
-  if (!daoStorage || !governanceParameters || !representatives || !proposals) {
+  if (!governanceParameters || !proposals || !representatives) {
     return <Loading message="Loading DAO information" />
   }
 
@@ -55,29 +55,22 @@ export const DaoParameters = () => {
     ? DAO_TOKEN_DECIMALS
     : Math.pow(DAO_TOKEN_DECIMALS, 0.5)
 
-  // Invert the representatives map and sort the community keys
-  const communities = {}
-  const communitiesList = Object.values(representatives).sort()
-  communitiesList.forEach((key) => (communities[key] = ''))
-  Object.entries(representatives).forEach(
-    ([representative, community]) => (communities[community] = representative)
-  )
-
   // Calculate the number of times that the user has voted
   const numberOfTimesVoted = userVotes ? Object.keys(userVotes).length : 0
   const numberOfTimesVotedAsRepresentative = userCommunityVotes
     ? Object.keys(userCommunityVotes).length
     : 0
 
   return (
-    <div className={styles.container}>
+    <>
       {userAddress && (
         <>
           <section className={styles.section}>
             <h1 className={styles.section_title}>User information</h1>
+
             <ul className={styles.parameters_list}>
-              <li>Address: {<TeiaUserLink address={userAddress} />}</li>
-              {userCommunity && <li>Teia Community: {userCommunity}</li>}
+              <li>Address: {<TeiaUserLink address={userAddress} shorten />}</li>
+              {userCommunity && <li>Representative for {userCommunity}.</li>}
               <li>
                 DAO token balance: {Math.round(userTokenBalance * 10) / 10} TEIA
               </li>
@@ -100,11 +93,12 @@ export const DaoParameters = () => {
       )}
 
       <section className={styles.section}>
-        <h1 className={styles.section_title}>General information</h1>
+        <h1 className={styles.section_title}>DAO information</h1>
+
         <ul className={styles.parameters_list}>
-          <li>DAO members: {daoMemberCount}</li>
+          <li>Members: {daoMemberCount}</li>
           <li>
-            DAO Treasury balance: {Math.round(daoBalance)} tez and{' '}
+            Treasury balance: {Math.round(daoBalance)} tez and{' '}
             {Math.round(daoTokenBalance * 10) / 10} TEIA tokens
           </li>
           <li>Total number of proposals: {Object.keys(proposals).length}</li>
@@ -136,16 +130,19 @@ export const DaoParameters = () => {
 
       <section className={styles.section}>
         <h1 className={styles.section_title}>Community representatives</h1>
+
         <ul className={styles.parameters_list}>
-          {Object.entries(communities).map(([community, representative]) => (
-            <li key={community}>
-              {community}:{' '}
-              <TeiaUserLink
-                address={representative}
-                alias={usersAliases?.[representative]}
-              />
-            </li>
-          ))}
+          {Object.entries(representatives).map(
+            ([representative, community]) => (
+              <li key={community}>
+                {`${community}: `}
+                <TeiaUserLink
+                  address={representative}
+                  alias={usersAliases?.[representative]}
+                />
+              </li>
+            )
+          )}
         </ul>
       </section>
 
@@ -155,6 +152,7 @@ export const DaoParameters = () => {
         <h1 className={styles.section_title}>
           Current DAO governance parameters
         </h1>
+
         <ul className={styles.parameters_list}>
           <li>
             Vote method:{' '}
@@ -203,30 +201,33 @@ export const DaoParameters = () => {
 
       <section className={styles.section}>
         <h1 className={styles.section_title}>Smart contracts</h1>
+
         <ul className={styles.parameters_list}>
           <li>
             DAO governance:{' '}
-            <TezosAddressLink address={DAO_GOVERNANCE_CONTRACT} />
+            <TezosAddressLink address={DAO_GOVERNANCE_CONTRACT} shorten />
           </li>
           <li>
-            DAO token: <TezosAddressLink address={daoStorage.token} />
+            DAO token: <TezosAddressLink address={daoStorage.token} shorten />
           </li>
           <li>
-            DAO treasury: <TezosAddressLink address={daoStorage.treasury} />
+            DAO treasury:{' '}
+            <TezosAddressLink address={daoStorage.treasury} shorten />
           </li>
           <li>
-            DAO guardians: <TezosAddressLink address={daoStorage.guardians} />
+            DAO guardians:{' '}
+            <TezosAddressLink address={daoStorage.guardians} shorten />
           </li>
           <li>
             DAO administrator:{' '}
-            <TezosAddressLink address={daoStorage.administrator} />
+            <TezosAddressLink address={daoStorage.administrator} shorten />
           </li>
           <li>
             Community representatives:{' '}
-            <TezosAddressLink address={daoStorage.representatives} />
+            <TezosAddressLink address={daoStorage.representatives} shorten />
           </li>
         </ul>
       </section>
-    </div>
+    </>
   )
 }