Merge pull request #316 from forbole/merge/desmos-base-v1.1.0

Merge/desmos base v1.1.0

CHANGELOG.md

@@ -1,9 +1,12 @@
-# Unreleased
+# base-v1.1.0 - 2021-09-13
 
 ## Changes
 - Centered desmos profile cover photo ([\#285](https://github.com/forbole/big-dipper-2.0-cosmos/issues/285))
 - Add License to footer ([\#287](https://github.com/forbole/big-dipper-2.0-cosmos/issues/287))
 - Changed position of desmos profile
+- Fix avatar images not loading correctly ([\#296](https://github.com/forbole/big-dipper-2.0-cosmos/issues/296))
+- Fix rendering issue on account and validtor details page ([\#297](https://github.com/forbole/big-dipper-2.0-cosmos/issues/297))
+- Add validator status to account delegation component ([\#307](https://github.com/forbole/big-dipper-2.0-cosmos/issues/307))
 
 # base-v1.0.9 - 2021-09-03
 

CHANGELOG_DESMOS.md

@@ -1,3 +1,8 @@
+# desmos-v1.1.0 - 2021-09-13
+
+## Changes
+- Merged `base-v1.1.0`
+
 # desmos-v1.0.13 - 2021-09-06
 
 ## Changes

README.md

@@ -1,9 +1,16 @@
 # Big Dipper Interface ✨ Cosmos 2.0
 Big Dipper is an open-source block explorer and token management tool serving over 10 proof-of-stake blockchains. It has been forked more than 100 times on GitHub and has served audiences from 140 countries and regions.
 
+**This repo contains the UI of big dipper 2.0 only**
+
 ## Documentation
 Read our official documentation at [http://docs.bigdipper.live/](http://docs.bigdipper.live/)
 
+## Issue Reporting
+For UI related issues please report it here [https://github.com/forbole/big-dipper-2.0-cosmos/issues](https://github.com/forbole/big-dipper-2.0-cosmos/issues).
+
+For Hasura and BdJuno issues please report it here [https://github.com/forbole/bdjuno/issues](https://github.com/forbole/bdjuno/issues)
+
 ## License
 Read our license at [https://raw.githubusercontent.com/forbole/big-dipper-2.0-cosmos/master/LICENSE](https://raw.githubusercontent.com/forbole/big-dipper-2.0-cosmos/master/LICENSE)
 

declarations.d.ts

@@ -35,11 +35,11 @@ type DesmosProfile = {
   imageUrl: string;
   coverUrl: string;
   bio: string;
-  connections: ConnectionType[];
+  connections: ProfileConnectionType[];
   validator?: ValidatorProfile;
 }
 
-type ConnectionType = {
+type ProfileConnectionType = {
   network: string;
   identifier: string;
   creationTime: string;

i18n.js

@@ -9,7 +9,7 @@ module.exports = {
     'rgx:^/transactions': ['transactions', 'message_labels', 'message_contents'],
     'rgx:^/proposals': ['proposals'],
     'rgx:^/validators': ['validators', 'transactions', 'accounts'],
-    'rgx:^/accounts': ['accounts', 'transactions'],
+    'rgx:^/accounts': ['accounts', 'transactions', 'validators'],
     'rgx:^/params': ['params'],
   },
   loadLocaleFrom: (lang, ns) => import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),

public/locales/en/accounts.json

@@ -31,5 +31,6 @@
   "network": "Network",
   "identifier": "Identifier",
   "creationTime": "Creation Time",
-  "bio": "Bio"
+  "bio": "Bio",
+  "status": "Status"
 }

public/locales/en/params.json

@@ -13,7 +13,7 @@
   "minSignedPerWindow": "Min Signed Per Window",
   "signedBlockWindow": "Signed Block Window",
   "slashFractionDoubleSign": "Slash Fraction Double Sign",
-  "slashFractionDowntime": "Slash Traction Downtime",
+  "slashFractionDowntime": "Slash Fraction Downtime",
   "minting": "Minting",
   "blocksPerYear": "Blocks Per Year",
   "goalBonded": "Goal Bonded",

src/components/avatar/index.tsx

@@ -18,16 +18,17 @@ const Avatar: React.FC<{
   const [error, setError] = useState<boolean>(false);
   useEffect(() => {
     jdenticon.update(icon.current, address);
-  }, [address, error]);
+  }, [address, error, imageUrl]);
 
   const handleError = () => {
     setError(true);
   };
 
   const classes = useStyles();
+
   return (
     <div className={classnames(className, classes.root)}>
-      {imageUrl && !error ? (
+      {(imageUrl && !error) ? (
         <img
           src={imageUrl}
           alt="address avatar"

src/components/desmos_profile/components/connections/components/desktop/index.tsx

@@ -14,7 +14,7 @@ import { columns } from './utils';
 
 const Desktop: React.FC<{
   className?: string;
-  items?: ConnectionType[];
+  items?: ProfileConnectionType[];
 }> = ({
   className,
   items,

src/components/desmos_profile/components/connections/components/mobile/index.tsx

@@ -11,7 +11,7 @@ import { useStyles } from './styles';
 
 const Mobile: React.FC<{
   className?: string;
-  items?: ConnectionType[];
+  items?: ProfileConnectionType[];
 }> = ({
   className, items,
 }) => {

src/components/desmos_profile/components/connections/index.tsx

@@ -22,7 +22,7 @@ const Mobile = dynamic(() => import('./components/mobile'));
 const Connections: React.FC<{
   handleClose: () => void;
   open: boolean;
-  data: ConnectionType[];
+  data: ProfileConnectionType[];
 }> = ({
   handleClose,
   open,

src/components/desmos_profile/styles.ts

@@ -8,7 +8,7 @@ export const useStyles = (coverUrl?: string) => {
           overflow: 'hidden',
         },
         cover: {
-          height: '125px',
+          height: '150px',
           background: theme.palette.custom.fonts.fontFour,
           backgroundImage: 'url("/images/default_cover_pattern.png")',
           backgroundRepeat: 'repeat',
@@ -24,11 +24,14 @@ export const useStyles = (coverUrl?: string) => {
             backgroundSize: 'cover',
             backgroundPosition: 'center center',
           },
-          [theme.breakpoints.up('md')]: {
+          [theme.breakpoints.up('sm')]: {
             height: '200px',
           },
+          [theme.breakpoints.up('md')]: {
+            height: '300px',
+          },
           [theme.breakpoints.up('lg')]: {
-            height: '250px',
+            height: '360px',
           },
         },
         avatarContainer: {
@@ -37,7 +40,7 @@ export const useStyles = (coverUrl?: string) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'flex-end',
-          padding: theme.spacing(1.5, 0),
+          padding: theme.spacing(1, 0),
           '& .hide': {
             visibility: 'hidden',
           },
@@ -55,7 +58,7 @@ export const useStyles = (coverUrl?: string) => {
           minHeight: '75px',
           minWidth: '75px',
           border: `solid 3px ${theme.palette.background.paper}`,
-          top: theme.spacing(-3),
+          top: theme.spacing(-4),
           left: 0,
           [theme.breakpoints.up('md')]: {
             width: '115px',

src/graphql/account.graphql

@@ -16,6 +16,10 @@ query Account($address: String, $utc: timestamp) {
         validatorCommissions: validator_commissions(limit: 1, order_by: {height: desc}) {
           commission
         }
+        validatorStatuses: validator_statuses (limit: 1, order_by: {height: desc}) {
+          status
+          jailed
+        }
       }
     }
     unbonding: unbonding_delegations(where: {completion_timestamp: {_gt: $utc}}) {

src/graphql/types.tsx

@@ -17966,6 +17966,9 @@ export type AccountQuery = { stakingParams: Array<(
         )>, validatorCommissions: Array<(
           { __typename?: 'validator_commission' }
           & Pick<Validator_Commission, 'commission'>
+        )>, validatorStatuses: Array<(
+          { __typename?: 'validator_status' }
+          & Pick<Validator_Status, 'status' | 'jailed'>
         )> }
       ) }
     )>, unbonding: Array<(
@@ -18574,6 +18577,10 @@ export const AccountDocument = gql`
         validatorCommissions: validator_commissions(limit: 1, order_by: {height: desc}) {
           commission
         }
+        validatorStatuses: validator_statuses(limit: 1, order_by: {height: desc}) {
+          status
+          jailed
+        }
       }
     }
     unbonding: unbonding_delegations(where: {completion_timestamp: {_gt: $utc}}) {

src/screens/account_details/__snapshots__/index.test.tsx.snap

@@ -124,6 +124,10 @@ exports[`screen: BlockDetails matches snapshot 1`] = `
                   "imageUrl": null,
                   "name": "moniker",
                 },
+                "validatorStatus": Object {
+                  "jailed": false,
+                  "status": 3,
+                },
               },
             ],
           }

src/screens/account_details/components/staking/components/delegations/components/desktop/index.tsx

@@ -13,6 +13,8 @@ import {
   AvatarName,
 } from '@components';
 import { DelegationType } from '@src/screens/account_details/types';
+import { getValidatorStatus } from '@utils/get_validator_status';
+import { useStyles } from './styles';
 import { columns } from './utils';
 
 const Desktop: React.FC<{
@@ -23,8 +25,9 @@ const Desktop: React.FC<{
   items,
 }) => {
   const { t } = useTranslation('accounts');
-
+  const classes = useStyles();
   const formattedItems = items.map((x) => {
+    const statusTheme = getValidatorStatus(x.validatorStatus.status, x.validatorStatus.jailed);
     return ({
       validator: (
         <AvatarName
@@ -33,6 +36,11 @@ const Desktop: React.FC<{
           imageUrl={x.validator.imageUrl}
         />
       ),
+      status: (
+        <span className={classnames(classes.status, statusTheme.status)}>
+          {t(`validators:${statusTheme.status}`)}
+        </span>
+      ),
       commission: `${numeral(x.commission * 100).format('0.00')}%`,
       amount: `${numeral(x.amount.value).format('0,0.[0000]')} ${x.amount.denom.toUpperCase()}`,
       reward: `${numeral(x.reward.value).format('0,0.[0000]')} ${x.reward.denom.toUpperCase()}`,

src/screens/account_details/components/staking/components/delegations/components/desktop/styles.ts

@@ -0,0 +1,31 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = () => {
+  const styles = makeStyles(
+    (theme) => {
+      return ({
+        status: {
+          color: theme.palette.custom.fonts.fontTwo,
+          '&.unknown': {
+            color: theme.palette.custom.condition.zero,
+          },
+          '&.unbonded': {
+            color: theme.palette.custom.condition.zero,
+          },
+          '&.active': {
+            color: theme.palette.custom.condition.one,
+          },
+          '&.jailed': {
+            color: theme.palette.custom.condition.two,
+          },
+          '&.unbonding': {
+            color: theme.palette.custom.condition.three,
+          },
+
+        },
+      });
+    },
+  )();
+
+  return styles;
+};

src/screens/account_details/components/staking/components/delegations/components/desktop/utils.ts

@@ -7,9 +7,13 @@ export const columns:{
     key: 'validator',
     width: 25,
   },
+  {
+    key: 'status',
+    width: 15,
+  },
   {
     key: 'commission',
-    width: 25,
+    width: 10,
     align: 'right',
   },
   {

src/screens/account_details/components/staking/components/delegations/components/mobile/index.tsx

@@ -6,9 +6,8 @@ import {
   Divider,
   Typography,
 } from '@material-ui/core';
-import {
-  AvatarName,
-} from '@components';
+import { getValidatorStatus } from '@utils/get_validator_status';
+import { AvatarName } from '@components';
 import { DelegationType } from '@src/screens/account_details/types';
 import { useStyles } from './styles';
 
@@ -24,6 +23,7 @@ const Mobile: React.FC<{
   return (
     <div className={classnames(className)}>
       {items.map((x, i) => {
+        const statusTheme = getValidatorStatus(x.validatorStatus.status, x.validatorStatus.jailed);
         return (
           <React.Fragment key={`votes-mobile-${i}`}>
             <div className={classes.list}>
@@ -37,6 +37,14 @@ const Mobile: React.FC<{
                   imageUrl={x.validator.imageUrl}
                 />
               </div>
+              <div className={classes.item}>
+                <Typography variant="h4" className="label">
+                  {t('validators:status')}
+                </Typography>
+                <Typography variant="body1" className={classnames('value', statusTheme.status)}>
+                  {t(`validators:${statusTheme.status}`)}
+                </Typography>
+              </div>
               <div className={classes.item}>
                 <Typography variant="h4" className="label">
                   {t('commission')}

src/screens/account_details/components/staking/components/delegations/components/mobile/styles.ts

@@ -15,6 +15,21 @@ export const useStyles = () => {
           },
           '& p.value': {
             color: theme.palette.custom.fonts.fontTwo,
+            '&.unknown': {
+              color: theme.palette.custom.condition.zero,
+            },
+            '&.unbonded': {
+              color: theme.palette.custom.condition.zero,
+            },
+            '&.active': {
+              color: theme.palette.custom.condition.one,
+            },
+            '&.jailed': {
+              color: theme.palette.custom.condition.two,
+            },
+            '&.unbonding': {
+              color: theme.palette.custom.condition.three,
+            },
           },
           '& a': {
             color: theme.palette.custom.fonts.highlight,

src/screens/account_details/hooks.ts

@@ -99,10 +99,7 @@ export const useAccountDetails = () => {
   });
 
   useEffect(() => {
-    handleSetState({
-      loading: true,
-      exists: true,
-    });
+    handleSetState(initialState);
     if (chainConfig.extra.desmosProfile) {
       fetchDesmosProfile(R.pathOr('', ['query', 'address'], router));
     }
@@ -357,6 +354,10 @@ export const useAccountDetails = () => {
             imageUrl: validator.imageUrl,
             name: validator.moniker,
           },
+          validatorStatus: {
+            status: R.pathOr(3, ['validator', 'validatorStatuses', 0, 'status'], x),
+            jailed: R.pathOr(false, ['validator', 'validatorStatuses', 0, 'jailed'], x),
+          },
           reward: rewardsDict[validatorAddress],
           amount: formatDenom(x.amount.amount, x.amount.denom),
           commission: R.pathOr(0, ['validator', 'validatorCommissions', 0, 'commission'], x),

src/screens/account_details/index.test.tsx

@@ -86,6 +86,12 @@ const mockAccount = jest.fn().mockResolvedValue({
                   commission: 0.0999,
                 },
               ],
+              validatorStatuses: [
+                {
+                  status: 3,
+                  jailed: false,
+                },
+              ],
             },
           },
         ],

src/screens/account_details/types.ts

@@ -29,6 +29,10 @@ export type TransactionType = {
 
 export type DelegationType = {
   validator: AvatarName;
+  validatorStatus: {
+    status: number;
+    jailed: boolean;
+  }
   commission: number;
   amount: TokenUnit;
   reward: TokenUnit;