feat: add stride [web-stride] (#1297)

## Description

Closes: [BDU-1096](https://forbole.atlassian.net/browse/BDU-1096)

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [ ] ran linting via `yarn lint`
- [ ] wrote tests where necessary
- [ ] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] targeted the correct branch
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed
- [ ] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)


[BDU-1096]:
https://forbole.atlassian.net/browse/BDU-1096?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Magic Cat <[email protected]>

apps/web-stride/src/components/avatar_name/index.tsx

@@ -0,0 +1,44 @@
+import Avatar from '@/components/avatar';
+import useStyles from '@/components/avatar_name/styles';
+import MiddleEllipsis from '@/components/MiddleEllipsis';
+import { ADDRESS_DETAILS } from '@/utils/go_to_page';
+import Tooltip from '@mui/material/Tooltip';
+import Zoom from '@mui/material/Zoom';
+import Link from 'next/link';
+import { FC } from 'react';
+
+const AvatarName: FC<AvatarName & JSX.IntrinsicElements['div'] & { displayAddress?: string }> = ({
+  className,
+  address,
+  name,
+  imageUrl,
+  href = ADDRESS_DETAILS,
+  image,
+  target,
+  displayAddress,
+  ...props
+}) => {
+  const { classes, cx } = useStyles();
+
+  const adx = displayAddress || address;
+
+  return (
+    <Tooltip
+      TransitionComponent={Zoom}
+      title={<pre>{adx}</pre>}
+      placement="bottom"
+      arrow
+      PopperProps={{ className: classes.popper }}
+      slotProps={{ tooltip: { className: classes.tooltip } }}
+    >
+      <Link shallow href={href(adx)} target={target}>
+        <span className={cx(classes.root, className)} {...props}>
+          <Avatar className={classes.avatar} address={address} imageUrl={imageUrl ?? undefined} />
+          <MiddleEllipsis className={classes.text} content={name} />
+        </span>
+      </Link>
+    </Tooltip>
+  );
+};
+
+export default AvatarName;

apps/web-stride/src/graphql/general/blocks.graphql

@@ -4,10 +4,9 @@ subscription BlocksListener($limit: Int = 7, $offset: Int = 0) {
     txs: num_txs
     hash
     timestamp
-    validator {
-      validatorInfo: validator_info {
-        operatorAddress: operator_address
-      }
+    validator: ccv_validator {
+      consumerOperatorAddress: consumer_operator_address
+      providerOperatorAddress: provider_operator_address
     }
   }
 }
@@ -19,14 +18,16 @@ query Blocks($limit: Int = 7, $offset: Int = 0) {
     txs: num_txs
     hash
     timestamp
-    validator {
-      validatorInfo: validator_info {
-        operatorAddress: operator_address
-        self_delegate_address
-      }
-      validatorDescriptions: validator_descriptions(limit: 1, order_by: {height: desc}) {
-        moniker
-        identity
+    ccv_validator {
+      consumerOperatorAddress: consumer_operator_address
+      providerOperatorAddress: provider_operator_address
+      consumerSelfDelegateAddress: consumer_self_delegate_address
+      providerSelfDelegateAddress: provider_self_delegate_address
+      validator {
+        validatorDescriptions: validator_descriptions(limit: 1, order_by: {height: desc}) {
+            moniker
+            identity
+        }
       }
     }
   }

apps/web-stride/src/graphql/general/token_price.graphql

@@ -1,6 +1,5 @@
 subscription TokenPriceListener($denom: String) {
   tokenPrice: token_price(where: {unit_name: {_eq: $denom}}) {
-    id
     price
     timestamp
     marketCap: market_cap

apps/web-stride/src/graphql/general/validators.graphql

@@ -12,6 +12,16 @@ query Validators {
       missedBlocksCounter: missed_blocks_counter
       tombstoned
     }
+    ccv_validator {
+      providerOperatorAddress: provider_operator_address
+    }
+    validatorDescriptions: validator_descriptions {
+      moniker
+      avatar_url
+      validator_address
+      website
+      details
+    }
     validatorInfo: validator_info {
       operatorAddress: operator_address
       selfDelegateAddress: self_delegate_address
@@ -30,3 +40,34 @@ query Validators {
     params
   }
 }
+
+query ConsumerCustomValidator($consumerAddress: String) {
+  validatorInfo: validator_info(where: {operator_address: {_eq: $consumerAddress}}) {
+    validator {
+      validatorDescriptions: validator_descriptions {
+        moniker
+        avatar_url
+        validator_address
+        website
+        details
+      }
+    }
+  }
+}
+
+query ProviderCustomValidator($providerAddress: String) {
+  ccv_validator(where: {provider_operator_address: {_eq: $providerAddress}}) {
+    ccv_validator_info {
+      operator_address
+      validator {
+        validatorDescriptions: validator_descriptions {
+          moniker
+          avatar_url
+          validator_address
+          website
+          details
+        }
+      }
+  	}
+  }
+}

apps/web-stride/src/graphql/general/validators_address_list.graphql

@@ -26,3 +26,24 @@ query ValidatorAddresses {
     }
   }
 }
+
+query ValidatorConsumerProviderAddresses {
+  ccv_validator(
+    where: {consumer_consensus_address: {_is_null: false}, provider_consensus_address: {_is_null: false}}
+  ) {
+    consumerOperatorAddress: consumer_operator_address
+    providerOperatorAddress: provider_operator_address
+    providerSelfDelegateAddress: provider_self_delegate_address
+    validator {
+      validatorDescriptions: validator_descriptions(
+        limit: 1
+        order_by: {height: desc}
+      ) {
+        moniker
+        avatarUrl: avatar_url
+        details
+        website
+      }
+    }
+  }
+}