From 4a34d7010b3b8b7f05d157a9d30e0bb8cc1b5ed0 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Wed, 24 Jan 2024 22:06:19 +0800
Subject: [PATCH 01/16] feat: create authz example layout

---
 .../components/common/Footer.tsx              | 166 ++++++++++++++++++
 .../components/common/Header.tsx              |  63 +++++++
 .../components/common/Layout.tsx              |  19 ++
 .../components/common/index.ts                |   1 +
 examples/telescope-authz/components/index.tsx |   1 +
 examples/telescope-authz/configs/defaults.ts  |  19 ++
 examples/telescope-authz/configs/features.ts  |  51 ++++++
 examples/telescope-authz/configs/index.ts     |   2 +
 examples/telescope-authz/package.json         |   3 +-
 examples/telescope-authz/pages/_app.tsx       |  84 +++++++++
 examples/telescope-authz/pages/index.tsx      |  10 ++
 .../telescope-authz/public/image/favicon.ico  | Bin 0 -> 14037 bytes
 examples/telescope-authz/tsconfig.json        |  29 +--
 13 files changed, 434 insertions(+), 14 deletions(-)
 create mode 100644 examples/telescope-authz/components/common/Footer.tsx
 create mode 100644 examples/telescope-authz/components/common/Header.tsx
 create mode 100644 examples/telescope-authz/components/common/Layout.tsx
 create mode 100644 examples/telescope-authz/components/common/index.ts
 create mode 100644 examples/telescope-authz/components/index.tsx
 create mode 100644 examples/telescope-authz/configs/defaults.ts
 create mode 100644 examples/telescope-authz/configs/features.ts
 create mode 100644 examples/telescope-authz/configs/index.ts
 create mode 100644 examples/telescope-authz/pages/_app.tsx
 create mode 100644 examples/telescope-authz/pages/index.tsx
 create mode 100644 examples/telescope-authz/public/image/favicon.ico

diff --git a/examples/telescope-authz/components/common/Footer.tsx b/examples/telescope-authz/components/common/Footer.tsx
new file mode 100644
index 000000000..6dbfd8dcd
--- /dev/null
+++ b/examples/telescope-authz/components/common/Footer.tsx
@@ -0,0 +1,166 @@
+import {
+  Box,
+  Link,
+  Text,
+  Icon,
+  Stack,
+  Divider,
+  useColorModeValue,
+} from '@interchain-ui/react';
+import { dependencies, products, Project } from '@/configs';
+
+function Product({ name, desc, link }: Project) {
+  return (
+    <Link href={link} target="_blank" underline={false}>
+      <Stack
+        space="$5"
+        direction="vertical"
+        attributes={{
+          height: '$full',
+          minHeight: '$24',
+          padding: '$9',
+          justifyContent: 'center',
+          borderRadius: '$xl',
+          color: {
+            base: '$text',
+            hover: useColorModeValue('$purple600', '$purple300'),
+          },
+          boxShadow: {
+            base: useColorModeValue(
+              '0 2px 5px #ccc',
+              '0 1px 3px #727272, 0 2px 12px -2px #2f2f2f'
+            ),
+            hover: useColorModeValue(
+              '0 2px 5px #bca5e9',
+              '0 0 3px rgba(150, 75, 213, 0.8), 0 3px 8px -2px rgba(175, 89, 246, 0.9)'
+            ),
+          },
+        }}
+      >
+        <Text
+          as="h2"
+          fontSize="$xl"
+          color="$text"
+          fontWeight="$semibold"
+          attributes={{ margin: 0 }}
+        >
+          {name}&ensp;&rarr;
+        </Text>
+        <Text
+          as="p"
+          color="inherit"
+          fontSize="$md"
+          fontWeight="$normal"
+          attributes={{ marginY: '$1' }}
+        >
+          {desc}
+        </Text>
+      </Stack>
+    </Link>
+  );
+}
+
+function Dependency({ name, desc, link }: Project) {
+  return (
+    <Link href={link} target="_blank" underline={false}>
+      <Stack
+        key={name}
+        space="$6"
+        direction="horizontal"
+        attributes={{
+          height: '$full',
+          padding: '$8',
+          justifyContent: 'center',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: useColorModeValue('$blackAlpha200', '$whiteAlpha100'),
+          borderRadius: '$xl',
+          boxShadow: {
+            base: 'none',
+            hover: useColorModeValue(
+              '0 2px 5px #ccc',
+              '0 1px 3px #727272, 0 2px 12px -2px #2f2f2f'
+            ),
+          },
+        }}
+      >
+        <Box
+          color={useColorModeValue('$primary500', '$primary200')}
+          flex="0 0 auto"
+        >
+          <Icon name="link" size="$md" attributes={{ mt: '$2' }} />
+        </Box>
+
+        <Stack space="$2" direction="vertical">
+          <Text
+            as="p"
+            fontSize="$lg"
+            fontWeight="$semibold"
+            attributes={{ marginY: '$1' }}
+          >
+            {name}
+          </Text>
+          <Text
+            as="p"
+            fontSize="$md"
+            fontWeight="$light"
+            attributes={{
+              color: useColorModeValue('$blackAlpha700', '$whiteAlpha700'),
+              lineHeight: '$short',
+              marginY: '$1',
+            }}
+          >
+            {desc}
+          </Text>
+        </Stack>
+      </Stack>
+    </Link>
+  );
+}
+
+export function Footer() {
+  return (
+    <>
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          tablet: 'repeat(2, 1fr)',
+          desktop: 'repeat(3, 1fr)',
+        }}
+        mb="$16"
+        gap="$12"
+      >
+        {products.map((product) => (
+          <Product key={product.name} {...product}></Product>
+        ))}
+      </Box>
+      <Box
+        display="grid"
+        gridTemplateColumns={{ tablet: 'repeat(2, 1fr)' }}
+        gap="$12"
+        mb="$19"
+      >
+        {dependencies.map((dependency) => (
+          <Dependency key={dependency.name} {...dependency}></Dependency>
+        ))}
+      </Box>
+      <Box mb="$6">
+        <Divider />
+      </Box>
+      <Stack
+        direction="horizontal"
+        space="$2"
+        attributes={{
+          justifyContent: 'center',
+          opacity: 0.5,
+          fontSize: '$sm',
+        }}
+      >
+        <Text>Built with</Text>
+        <Link href="https://cosmology.zone/" target="_blank">
+          Cosmology
+        </Link>
+      </Stack>
+    </>
+  );
+}
diff --git a/examples/telescope-authz/components/common/Header.tsx b/examples/telescope-authz/components/common/Header.tsx
new file mode 100644
index 000000000..b573280b2
--- /dev/null
+++ b/examples/telescope-authz/components/common/Header.tsx
@@ -0,0 +1,63 @@
+import {
+  Box,
+  Button,
+  Icon,
+  Text,
+  useTheme,
+  useColorModeValue,
+} from '@interchain-ui/react';
+
+const stacks = ['CosmosKit', 'Next.js'];
+
+export function Header() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleColorMode = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <>
+      <Box display="flex" justifyContent="end" mb="$8">
+        <Button
+          intent="secondary"
+          size="sm"
+          attributes={{
+            paddingX: 0,
+          }}
+          onClick={toggleColorMode}
+        >
+          <Icon name={useColorModeValue('moonLine', 'sunLine')} />
+        </Button>
+      </Box>
+
+      <Box textAlign="center">
+        <Text
+          as="h1"
+          fontWeight="$extrabold"
+          fontSize={{ mobile: '$6xl', tablet: '$10xl' }}
+          attributes={{
+            marginBottom: '$2',
+          }}
+        >
+          Create Cosmos App
+        </Text>
+        <Text as="h2" fontWeight="$bold">
+          <Text
+            as="span"
+            fontSize={{ mobile: '$3xl', tablet: '$8xl', desktop: '$8xl' }}
+          >
+            Welcome to&nbsp;
+          </Text>
+          <Text
+            as="span"
+            fontSize={{ mobile: '$3xl', tablet: '$8xl', desktop: '$8xl' }}
+            color={useColorModeValue('$primary500', '$primary200')}
+          >
+            {stacks.join(' + ')}
+          </Text>
+        </Text>
+      </Box>
+    </>
+  );
+}
diff --git a/examples/telescope-authz/components/common/Layout.tsx b/examples/telescope-authz/components/common/Layout.tsx
new file mode 100644
index 000000000..ff3365d5e
--- /dev/null
+++ b/examples/telescope-authz/components/common/Layout.tsx
@@ -0,0 +1,19 @@
+import Head from 'next/head';
+import { Container } from '@interchain-ui/react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Container maxWidth="64rem" attributes={{ py: '$14' }}>
+      <Head>
+        <title>Create Cosmos App</title>
+        <meta name="description" content="Generated by create cosmos app" />
+        <link rel="icon" href="/image/favicon.ico" />
+      </Head>
+      <Header />
+      {children}
+      <Footer />
+    </Container>
+  );
+}
diff --git a/examples/telescope-authz/components/common/index.ts b/examples/telescope-authz/components/common/index.ts
new file mode 100644
index 000000000..9877e7f4a
--- /dev/null
+++ b/examples/telescope-authz/components/common/index.ts
@@ -0,0 +1 @@
+export * from './Layout';
diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
new file mode 100644
index 000000000..d0b932366
--- /dev/null
+++ b/examples/telescope-authz/components/index.tsx
@@ -0,0 +1 @@
+export * from './common';
diff --git a/examples/telescope-authz/configs/defaults.ts b/examples/telescope-authz/configs/defaults.ts
new file mode 100644
index 000000000..f14778924
--- /dev/null
+++ b/examples/telescope-authz/configs/defaults.ts
@@ -0,0 +1,19 @@
+import { assets } from 'chain-registry';
+import { AssetList, Asset } from '@chain-registry/types';
+
+export const defaultChainName = 'osmosis';
+
+export const getChainAssets = (chainName: string = defaultChainName) => {
+  return assets.find((chain) => chain.chain_name === chainName) as AssetList;
+};
+
+export const getCoin = (chainName: string = defaultChainName) => {
+  const chainAssets = getChainAssets(chainName);
+  return chainAssets.assets[0] as Asset;
+};
+
+export const getExponent = (chainName: string) => {
+  return getCoin(chainName).denom_units.find(
+    (unit) => unit.denom === getCoin(chainName).display
+  )?.exponent as number;
+};
diff --git a/examples/telescope-authz/configs/features.ts b/examples/telescope-authz/configs/features.ts
new file mode 100644
index 000000000..a87e4983d
--- /dev/null
+++ b/examples/telescope-authz/configs/features.ts
@@ -0,0 +1,51 @@
+export type Project = {
+  name: string;
+  desc: string;
+  link: string;
+};
+
+export const products: Project[] = [
+  {
+    name: 'CosmosKit',
+    desc: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.',
+    link: 'https://github.com/cosmology-tech/cosmos-kit',
+  },
+  {
+    name: 'Telescope',
+    desc: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.',
+    link: 'https://github.com/cosmology-tech/telescope',
+  },
+  {
+    name: 'TS Codegen',
+    desc: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.',
+    link: 'https://github.com/CosmWasm/ts-codegen',
+  },
+  {
+    name: 'CosmWasm Academy',
+    desc: 'Master CosmWasm and build your secure, multi-chain dApp on any CosmWasm chain!',
+    link: 'https://academy.cosmwasm.com/',
+  },
+  {
+    name: 'Chain Registry',
+    desc: 'Get chain and asset list information from the npm package for the Official Cosmos chain registry.',
+    link: 'https://github.com/cosmology-tech/chain-registry',
+  },
+  {
+    name: 'Videos',
+    desc: 'How-to videos from the official Cosmology website, with learning resources for building in Cosmos.',
+    link: 'https://cosmology.zone/learn',
+  },
+];
+
+export const dependencies: Project[] = [
+  {
+    name: 'Interchain UI',
+    desc: 'Cross-framework UI Kit for Crafting dApps.',
+    link: 'https://github.com/cosmology-tech/interchain-ui',
+  },
+  {
+    name: 'Next.js',
+    desc: 'A React Framework supports hybrid static & server rendering.',
+    link: 'https://nextjs.org/',
+  },
+];
diff --git a/examples/telescope-authz/configs/index.ts b/examples/telescope-authz/configs/index.ts
new file mode 100644
index 000000000..2e1983362
--- /dev/null
+++ b/examples/telescope-authz/configs/index.ts
@@ -0,0 +1,2 @@
+export * from './features';
+export * from './defaults';
diff --git a/examples/telescope-authz/package.json b/examples/telescope-authz/package.json
index a7dd4fda3..9e460835b 100644
--- a/examples/telescope-authz/package.json
+++ b/examples/telescope-authz/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.4",
   "private": true,
   "scripts": {
+    "dev": "next dev",
     "build": "yarn tsc -p tsconfig.json --outDir main --module commonjs",
     "clean": "rimraf ./types && rimraf ./src/codegen",
     "locks:remove": "rm -f yarn.lock",
@@ -93,4 +94,4 @@
     "ts-jest": "^29.1.0",
     "typescript": "4.9.3"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/telescope-authz/pages/_app.tsx b/examples/telescope-authz/pages/_app.tsx
new file mode 100644
index 000000000..ad7fc8c78
--- /dev/null
+++ b/examples/telescope-authz/pages/_app.tsx
@@ -0,0 +1,84 @@
+import '@interchain-ui/react/styles';
+import '@interchain-ui/react/globalStyles';
+
+import React from 'react';
+import type { AppProps } from 'next/app';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import { SignerOptions, wallets } from 'cosmos-kit';
+import { ChainProvider } from '@cosmos-kit/react';
+import { chains, assets } from 'chain-registry';
+import { GasPrice } from '@cosmjs/stargate';
+
+import {
+  Box,
+  Toaster,
+  useTheme,
+  useColorModeValue,
+  ThemeProvider,
+} from '@interchain-ui/react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+function CreateCosmosApp({ Component, pageProps }: AppProps) {
+  const { themeClass } = useTheme();
+
+  const signerOptions: SignerOptions = {
+    signingStargate: (chain) => {
+      let gasPrice;
+      try {
+        const feeToken = chain.fees?.fee_tokens[0];
+        const fee = `${feeToken?.average_gas_price || 0.025}${feeToken?.denom}`;
+        gasPrice = GasPrice.fromString(fee);
+      } catch (error) {
+        gasPrice = GasPrice.fromString('0.025uosmo');
+      }
+      return { gasPrice };
+    },
+  };
+
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={chains}
+        assetLists={assets}
+        wallets={wallets}
+        walletConnectOptions={{
+          signClient: {
+            projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
+            relayUrl: 'wss://relay.walletconnect.org',
+            metadata: {
+              name: 'CosmosKit Template',
+              description: 'CosmosKit dapp template',
+              url: 'https://docs.cosmology.zone/cosmos-kit/',
+              icons: [],
+            },
+          },
+        }}
+        signerOptions={signerOptions}
+      >
+        <QueryClientProvider client={queryClient}>
+          <Box
+            className={themeClass}
+            minHeight="100dvh"
+            backgroundColor={useColorModeValue('$white', '$background')}
+          >
+            <Component {...pageProps} />
+            <Toaster position="top-right" closeButton={true} />
+          </Box>
+          {/* <ReactQueryDevtools /> */}
+        </QueryClientProvider>
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default CreateCosmosApp;
diff --git a/examples/telescope-authz/pages/index.tsx b/examples/telescope-authz/pages/index.tsx
new file mode 100644
index 000000000..1845bf7c8
--- /dev/null
+++ b/examples/telescope-authz/pages/index.tsx
@@ -0,0 +1,10 @@
+import { Box } from '@interchain-ui/react';
+import { Layout } from '@/components';
+
+export default function Home() {
+  return (
+    <Layout>
+      <Box maxWidth="$containerMd" mb="$30"></Box>
+    </Layout>
+  );
+}
diff --git a/examples/telescope-authz/public/image/favicon.ico b/examples/telescope-authz/public/image/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d7b1d76a3208442c141db8fcccb9e1d2769d10af
GIT binary patch
literal 14037
zcmdUW^<Pu}_qc$Fh=`(qlqd*DDoCfoi!Kq_#^`1sAX35zky4PBE@@<p93e5fO9rF6
z9UY@ad@sKLf$y&$9uFS(dG5LQd7h`w^Lfv{z0p*nyv1<q+O=zxD$4)8y>{(-$<_Z&
z65!6%rTjT?A##4JBu6yf#p??I<R6svoUdJ@xPSFebS)|6A#gMEjru!<P?mxu$%+is
zntVuOl}k^FRa<Ms@GxR#^7qnT?Do#$!O`x?<>lo<$KQItff&Bx-qi6S#B8N=S6jqz
zv1RM=?kU=DpxCM{L!~DA3OiBxvAfEpyZ-aQPvzg0AG=z^hbMk74IyUcJN_11w&jBx
z*Rb1F&fOJPGhmN*PlgL;ds4@XEn551CW<Uu(0+d^UAjvw+u9?s!-aEI&OOVKf&164
z3HPe}_xjzZl+EdNGe)IoerWSg8|t4oI~m~lGaB$`UorU+HSk>b^dsL2jn8Ecb@S0Q
zQF^~ev<MMzNPRlLhkTciAO?8;zx(%DQG-KPBd^0)BX203WBl^j=VFfM;aWa2(#d@T
zECQ17ll`u?&~)1I%eN1kPlHd}HmMG}y1MpOE8=Ix4KMSSH!thP&Vsbgf;bcFsv&9p
zk3xTu^%|$8)g5yY(kX+J)N?!NIIFr`L?)N1=GKjyH<o)QZ`Xb@rJ!ESTU_o@0>2v&
zm#j~K+7G65X{C$aC;05Mh%`+49Vb6*UuYxJ!(+!0#)TC&&6^)_ORMpL=C~%=kjW*9
zG^jI8xtLL0o&Ek0MTSDX8^7m+kB1*U1n_xI32i7F$T`gCG}QP3clq&OG4@|*_e%bg
ziDz5pPTFRS$7^AFn&q;Or+%>(pj}r~u;CoV#&>+cR>c;yziEd;(+6%`=5BYz6!0lz
zW0?~b;@Uz(YvOdNVxR+%fE;Y<_*>~v$hxa839veein8a>SX#PLnCt5Db04{zg5pM?
zS~9PRo@I)L&Dm}hMA!)ryW$PedNJl5@wWkqML!3qhj9Jl&&T6G-_ut&raJi}i8-@8
zBDAzQeT3TQTM2yM4Zx;*-a$^H3RWD@)OtVgLq9hI5?At=(_Hk`d1_Nb^d6LpUHmR`
zbayHTKbP<{sYn?4Bx~$eJCc+Aw=76P>2o}%_gR~IJWVb(sB_`PqA}Fl@r(lLIb<u(
z7g~S*VCvN1Tl`|`vo{`4`>(u*0=-^QiYa_b5F&>sNRj_&YxRWoryuoqYOZP;i@GRT
zLsiD1salbO-#N;2i}m&S1}@kLNrTs6`1*SmpsCJ;%nb^UaFnO=P$Jd_iabBnKWxjg
z#epJ{D#im-eF{%ry$t1jH26+Kq-7(sv>|O|$ac~7P&Zp~FpGl``v>(~I~$v%Kr0J5
zTUAC+-b;FB9mata;VnB3YQ~0J6|Z0P6~ipl>1p-6M2gZEUOY$G+tnHJMerg;r1+OQ
z7jW0g8Il7Or+&O$T;}-EhV`@6w+a(Qj#$NykH)Lhf=S<@dU10;1@%Wg=1p%k?LOIz
zy@n#|J!8Bxx=Q{$fns<)+(4YLiWQh?aBgu~gIm_ifk}EdH>vqiIz751CLMUw>ugj^
zrKsS_hg*8gdM?MLRQIKw958?T&eS$6Il?g5M&eLC%82jcV~H3z703AxtNm7#_`%Gp
zyaO2@Rj_tYc;U>Dt%g}xN_B{kiG>P6vH|DGBH%=0pAb){hA8$qmz6g#<$hcw_#mRN
zt(0)g{7qPOfm^MMKX{k2n!B+varYiL@s`5KSEY6)MT)<jUlH$vmEusIUs@UNJL&qD
z``hX<GuzFCwlYvU>4w(#Y-4a9ILPATBHJ=8<2ckrxOE`g3jx_&K}kgbN^^RNbZ-5v
zIH?4RU^Bn-bG6=nq2O%;dd8~#GiqYIxSvL3qZqx7^{nj3Sd9`O`#@czXS?YN=Pskg
z*c!jwFHI8K4J)4c+kznKNTS*kJboTV{GfQ^L&GUQ@{X15N9POfA_f6M(YQ90Cc_WK
z7Xs!xdD|TgY8&1W(XT{7tb7f}`aF$oEYww!7$=;T;j?KuDDEDF3xlcX&DC4m_9ct~
zlDD?;`|t0{=(HE4YHA;=cEG1yLYk|7lyZx>_R^!R#X!ghlk<-(3sv=unn;-Zi=vik
zq|_bdy?Kl0?ui6el-7Oe7=JL*ws$MdOb2qWhv!q0hN(1w6we#?&7A_!d=FQ^fwO$Y
zCKUY-M&`H)cGto_rJi?$G~F)Yb3J<h{I=C+B&=OEXX1{ew!4;)wta9a#B6!@Ez=nG
z`M{;AKtLN}L!WAMa3WHEpJqeePX0z8xFp_~ue5pmPBWUfG}A-kCcM1$)?sj-e~GMG
z;hQ9d`MYrtKMw2hDn<tDZ#3=MGGag2K@X;He-PW;dXnNAM4j^N`%f=Y%ZC#$q=KD(
z-c>7XO6<GVW?*$G9Wm`|Icxeb%JPuqpqj6!-0{WtZ~Z|}#HDUp8d_XxM<jfde2}{#
z^DsCyLoAh&MB5>F@5gj-Mr|rbpY^DtmS*^<re@qIV&agzdrKbjsq|%EqOoy(?Pd6K
zTOSrr*zlbY-5~E-zu2AgI`qLG9tNM{4&6^zR#ral)%Q$Zx;cA!xqjR`+_c4`j}W?n
zSgejlVhmNW?Qga2tv1&raQRVH^0&#)NxW`ov(PU4&q&e7-bTM&5D31laSi4~OD)L6
zc7;8GOhkWrWw`IWzSW0Abh{`Hk#zXjyh;~3eNxhW(UE4?#*IvO3mV7oWn?PR$0RRW
z>Q=-!O*}zvIjCJEr*Dvl;>;kk_V1XDx6u2OEz7m{OND<J4%xEFmTizzFu)1ev-3$r
za%BGL$a1Zv>%gdf6&Px7p)}%4ckY0<AKnCSJI3pN8+F^;`p=f8%ol2JkQ+C<Ngk?V
z%tvJzS6bxR>4}W>7Jycre)=@OYrfDh>)b4-IKl5(Tf$IKhE8t_%Ndzb&Bj8lw!>!z
zS!vmrW-feAib4Xh-tpj3IXiH<9IPU$s`F!7Nx)!5Xnz4ELe|ho4`%OpxSPANe7RFq
zsP*>H`2c3%A?yn`@PM5EwfePgO3^lC%eN_M4E~m>V&09w-ZkDL(slWR)ZEW-uo>am
z5UORd74i^naIl2or74gdz40U$XLaHlC+c}E-kCDrpB6hbOlss}Q&ng<r*VQdQ2R4q
zdY1K3KiT22FxKLrO9v{)y(V}FI^=g2*SF>KfZ&HspMqZ7mT}Pv+OcgNab^+T+*`la
zw~Bo@0-BB1%Wyx?kXtsqXXhKXiXFq?Gzaj7CzErk7IF&z-LrGFU&R(Ia}$O*z~=e9
zTijB}5&lI<WmmJ!U(0n8JDon~-1Im`E1%Q@!oL2olCYVT?B)tqtm@0rLAh{BF}38H
zjDjz;gZv2dUbY3-)=398){v?6jB$%h0#(iYXKenm^l;F|s87~yq<zm}NsBUO$aa(C
zm<>_0ozYi^vvI;>E$Xm^s@zfOUt}u_2>sArgeEtbir!Kf5sj+Ba~!K=6cCCSdJ!ib
zQ1lEJzmiB(O&SVH;qx{hht4|Ov&FL#l5&#Ia(>qyCe&bT`6}lPiwO?2Nbh~{^cHEu
zQAP#hQRFEG_pD~i0k@{fkUT46T%heU=qX^QyWTEy_y7f7-N^j4x|AAUv{ehMO3=mS
zh{}I8G{eG~xrZ@yMh4Q43CnGSU*gCSIrmB5feRERY|Z;%0e7!Y0Yt*qQ^Z;v90k$0
z<1B8)-iL-1-T-J-)2-_s=GiO0^k6Sa8&tNSJj5g~$dDS*cvI@1vhCzD$r;#ZTy)yv
z-pg5x8ydH``B2qylHCRC7f6&PsUj*Gr85=>^kG>|h6bBIM>=i!k>O@X0Su*;e-w?*
z<qbBMa?!ODW>Ds~E%J4T-F*4`WFJ9WOZ_;Bk|7)5t_)|2mG9UMp+9q5y+F471}Hpk
z+hlH+iNq?c;(IM4Jn1~jJ1j}~B*A;XKgP&Y=dH;=ME~IGyV=h<BR-KEIQTxybv@lF
ze*Gz-e5B~~Mj<!^Or~0hwr)_&j1+YOt0M?Qw!T^M3%cauIfYSx6HVdoL$nI&GE6UI
z$LVaIQXd8`svxpDSKs!pNagGW-ADy5w_XV8ic1|_bMn~6259}N$(ZkTD9JDJo(HV*
z*~iviy+b9WULV!XRhIJN{<VM&3Z(>4)rII>_q5aLiBm>Qms@tJ_svUz9ag&(nCk-%
zF(nh}f(3F)=hRFR`jQA26tL!x)jfwKe)xnCmb++%ZBg0jS5@^B@iRXJ=$A63|1*)!
zov2IVs-!A7V?`W}Dl_r(m)vgk{I7!ZCSLG1a)Z_G449Z6vO3OE@wP(dF{&=)&HE^9
zyWP_}oF&m%=!dGh5N(SntQwSgoZ1S3nv=N%9|r#I$OtWT1ElyR6JAtavfdCHyR7?D
z-Ul_o{HTW08}h4w*F=1cX>%w|w4e$lK@Is`u<=25eNIouer6Nhi4#DEGxezm|8lxM
zB3o9h8t*1$I0l1GOVF>``KH4tWec3Lzgq?IPL9qHGysv7auBa8(V$I+R92-Xu``oC
zfBWVajFQ<(eBPK6sZ~f1C0qM8weK)|BWbHo`15sXo3wJnq08;Xq@&jKBY-{e!g;U6
zbG`Mq#vS>aCTOJw8aB_c*4K3_JZi3_g_p_R3SyoX`p=N)n`h;_tXM}Zs4;2s4rpO!
zNDhV%J96@+27I7U_!shXjvne!{Hy~-hm@2HRg|yj&<2%$)PzLI#b$9PYm6*af+~XL
zTzDs9L6Fb_$}UUvuA%4N|7!r1ezs@-$+1lKy)>&YXIh?@ZaNhP_r#I-lJ|SdX=YJ)
zP~sj<*w?e1qes~13z~HAo7Q-e?w!OhTJ)zEB>7p2ko4X3t}GfnFE5Z__%R7nvMH}X
z4-Rm1n{ZVPMXF3StvcI7d<$&k^QSb`%r0F}ruORc&rf4qs)nNHg4f4cs_xLZ3K_tq
zl-11WAT<mkxWvJ^-Nzc_7f9K@i#px>yte5V^b^!)`i=}E+8T^<o3~NyHH@9|%~>HL
z0W4+3*Ecv$t7h*1@)QZ!pDn)v0qo!^0KW84FmH|s7E^)r1-+?#hWy6z>DP);PtY5q
z!IWdac-yVm_cxbm`cyudhdO1s{u`f2Uu^%E4rjK$LUfHKf70-#VU+7gg=wnt<q+Jd
zK?3hqdY!DHF*=0J^Z5D@uB^R~m8B)!Blbdue+2EK(~w6-%>@~xYW1lrXK4p&vmWG#
zAX;7z1?P(d&hrYFnLypw6mfN#;=AXY>8?JJJA&&qzU;*|eNVT&TT&b5d3@!c0g&#9
z+fLmP-O5sxNf!@8Om$t&IlSxQ;1|cYh6nDw>sfrEqrZHGyc@D*8Wy(j{X)ydT?#*n
zlzOI?j0n#Aldv8kXVL1Bqwp8?3tQesD08Q%3$h{iWVmNUZCxh)kfmqSQQbDPDF7Zx
z4t;Gq;5~_0)*O{=-UuOZ6Nno@IEVoffA;+ayx=<#CF*AyN@5%SU<9_6Gx|dHyg(I!
z9=OK=o?6`t>DG+{0z)VI>9=T}t;_C<vz;F>2YG_O&*rBx^*v%Wc@mmrbidD+i=W}i
zCDHl}OElP|x}vPWd2~3L@RBC%&!1O09L42Svr<KiRa#4xLZ4nK1KU1)F4kj|{b)E%
zo9gDTH_I@rYdn05xQ9f}R>vDUeX4e-&>d6L`1V5{KVLT1W596hmw8E1xvaF8xzp5t
zP}k|9$Z^cv^(Xjh4aDh$Jj>uVF;BVmyQWkqZ|-JxEGZ~DJiYgAOxwX~5C&JbnmgD_
z8uvv~IDZ?m?<|ov6j|MftJaOTMa6?wr6UwI4NU%i;M9+SS^CAwcRc&Wpn-6vD12}W
z^0dII5nCz6s{UtJ`&pT;#GI}E`N-QnS_ptjM5TggAzUsdQ5h>l;7Qz3m5ig`a?Y<-
z{qK*FHT)O3d?idzo<iB=AEsfQ1lS$@u-n3%Z4h8N>t?DG#E3-&zFoy1AVXP0EqxR5
zX!!)I8wU2j7W-62h<nuOzo3NXY$chigtGZcE;tD>LxGh5I&U!qe)a0?&1NCdD?E6r
zoa6V=8RP3nr(E6HVy1p>1vdct>K6P$3bDvSD0II!aaS<=UY_pk<|~zLR@4&<u`EqQ
zk$wq=79tXGJA0W3tpB%$`5DX)>pU1qBrG#$%OhPyqHz)D+y}o1GkMlWRXw3Px~;5b
z%dq*|rt?Mni#c0HZ?LbkPn0J=gJ6Ku?JIoodljgO>pA0VSQbO`P6}F-b6cnAH&@n!
zAzdgQE#4&_J9Na6@<l=ov32S8(USpXqAlkRbDi-Z;`s$bt>=|J5JUq)T&w-;dcd`u
zc~qaD^I70d^@QSf1D;Eol6#BEBAcYB@(+P0_pK*`L@~q1pAJLa>6-nId1>4aMfRTD
z9;og@pLM-e-SV!A`tTV&RItr9zzDorUu-+BwGG3blQd^#iPAeWe5bc`$8?t$WJlMM
z(n{h?8?pO!AH|j*njZB)-JH3QBA$*m)vk$7<9sD!M$bu#(pITB^OlNo{OnzY=5Ts@
z-2Z^hgHMGgPJ6g#c}os{ZM50gqa`e~*}a)K)LI3>(uJt_&VK|u49@+C!O3`3M7{Yq
z`m$T+l<5PW$-|X1qqZ$}RU3md-NR`%^SV<2oBZw1h}BNS0JU2Hzcf`eC_-Xi$$3@d
ztfH!Mfhb&9)^u5_-<n(l;=^+sh4PF(xozAkD^=OJ0LS3yZ;*OL{Ry!2YZJ}JI<K&l
zZEGtOH9v14r8R!|0be)1J?{RCV>hORx1^d4SvkKuSGB-ts%KJa)rfVw*aSeCz}agJ
zbPqpNRBRbX?ECKspY&{Ksf%<ZRf(*h<NakrWaG@$<!7_8cR-bFvNr+f4rm}7tNEU6
zn|$^jgU|#Ytb%c}iO}pGKnqC~6tn_g?zrrrcbGFsK@r*5{*}vaG)y;S<{s1p-|-nC
zZJ=)?{nSe-ABK8~v1N$^M;t%!=9J3W3^DJ6dsuqlzph=qsg#ZNkz(?CcPuWakyRfF
zf+zW+>O9{aSR|HjP^sU9Rfr-twZ5hCX60p&D7J5G_d4uw4VEk7g}wu^tZ_;uB~PKj
zTdvD{>UOn6zyh{Bv%#oxm5l>=hqWk;?p#LBzeKU8bfx7h!v5^#anZBi5iux<$m$8r
zohEDcBY|j8Fg1AcmQPyNl8gifXR=^xH)y}5y0us)76%H3)_0;qDajq2!5>-flN8+%
zHMYG!t+2D56-}^tNUzg~>o)qp*`z_Ky2bVcd8?#)!tjHRe>CBl*oas439fy?)*V3J
z=s{^gX-s&k^Tu*-NH&kCAc(WEGhdP!jI4c)?f~yaf`V_R4gVxZ7!HjBOTge>jb>D-
z-3K9VS96=-2dNG-E@(YFgiM8Dd#Ahyc7m#yf`B<X>Ke;Ufw_Xu<4TlZh1Rs5QnvSD
z=6$5SIl2O+#!8aSxylG)p>jGJ{pK>Z_rWOcS5O+-f8)TbaV*`x@fRX6sWReqtIx~L
zo9ot%x<va`;lfmGr~pePNNwA}J1DcQ4<9m!8Xoy4yu|i~0nH0zW;MioYh203O`a8q
zGZDttB!i56piGu8A__z*HX>E`XTOkcJUx!=icQ@Bl{M-5-izuf&MP)w%XR!t7KSpD
z6aj#fjKU1WF+D#NSi(d4`#A5Vdi>$H5cO>AycLEUvbNcGQF7Mx89{uzI)u)1PcIqH
z%w)&k_!;pa!#-<bisv!%)`voIHJi!&+@SZEf@`qYXJsozzn;Wjv6tg{-=kPq_^IIB
z6@m}7a&fewHOU7Melb@-oFVMa%)>>i19L4oQH5e3m#sLwl_&lmk|9d?$nr3FGvaC*
zEE{U2D1fHtZV)k(U6HCy-?_$N-sZP|C=P&H0F5G)<}s4{fP07HX8=tLuv!pHj&2w$
zoIJLK_~8fL&qQEs$Qi>kQ_8-7oD@KocmPz8B_Qe>23Wq2X|?_VBv55Ui}*80eN1Dq
zzaB(hARyx!4Ev?iU);)+QtpZX!@W;0R!27mBowb0#fCQ)2Rd!#01{qt%+Zx(WuZ>9
z@Evmktl=6-5ySnH$TyQV;{TKd_*2+7FXeoD)ZPEFr{YINUhkWE8>ai&yf5q)??jrF
z?})&Qe-w)v+PpP}r>NMkbj26SBwDcIa~F6JWoxiht<5=i1Sk;@pSPbO<>}PX|5yl<
zGXeX{9Mv1BB3kI_U(y1&cDC()fZ1&9*XtM31{S^}BUgej?^~oE!@lUdDAaH&{Cy23
zEa5l%h|IZ?<BAyD12IIC)Dho5*AOGEH1$xfrUWQQ31s0LoMu_6$kVULVQhPeCrhNB
zdQB|I=3tw?f2aT5I64ehKED3Xq88~OFLon$v;i4)B*E_<bu)32v&>%^X~BIbV=gLk
z7S=0b(>GIsET`6_|A{iD5v{$b*l@*}VD3vl@2vJPpDQ(H>-rKC6kUbSQ~=ktP>=ry
zyayO*G=RF|bjI9!CCMWI|7<Q@2`BAiOf6>G{#f|?It*L&RrU!PM|igGJxl?-MYKkZ
z2c{c<GTR~QN;(B@Dz=vhEXAus=|AYUo<X6d0#jW~Fm`0f8=_@I*9&7o$LpeV1-D^s
zRY78ji;b;OL|_F-&c6SGpKuH)T$t_&vbuOfTdt$_AAt}u!&pK%EJi#Uq@c|6NC&r3
zj*<Yz`JeX!wAj(+7+hy(0_(e19uxD=PohCen1Y)$Z_-@nN`g-GX9Y-#RA0=6*fZ_r
zt$Z4dLUA{9r}Ax{kFEez&HI4)DywE)=wYr;ks*<w4U2SWsR%v5%B^R$6XGS=u_$gi
z(jU?rhwL$+<S2obGt#5hufB)nE&t;Ucnm&ysJ7A=Km@i_<~gjIK108};<H3`^|Ai-
zIFkEH|F{twcJ^Ba2m-S~wHsqdl!WojDhSr^$9dm7NPrC?FqSILNKhgM#z>`hWrRQd
z2L+W&uQ^E$WcZc%_Ze>09^JVGNPL9NykGDF-O;xFXxW<uaz~vBkTD?nyR&uv&3@n5
zI+8*oLARIHOjQ1-kyq}1Ilq9wY}!cEa{3fGlC4XWHu|D^HanIG%-#!r?iG{UV0lUL
zP!h1Mow}8^BIj*h0!vdqUv3@{q-}4l8zpF@@Aho?k}U$ZNshry_DlP<y#iv?E9m)7
zouY}r^()`0xpX<vJ(T^r3xr1?O`AOb-k8Y?Ac(*bu3O~1x2_@-n|a#Wlw{XMyZ{5>
zwU3c$TT}NT4+Nq>!On#z<3<nt+U5aXUqPomE1kC+$}a;^{iQ2_gAKY3*j=X$jsyWQ
zJPVo5Pr-W#xYG;46`OdY1lXZ$tl~e18VpZ`6NgG)d0~`*QteUmO<uQu?u4@`Hc9|E
zcxkVvo`aodvYV-*YmZ{D1QG$j&tWpkaW$>cOdrtHW8@vUQOvnx9$?kiV6Hnu%NxEj
zd;nn}3;v{A8Qsu&g$D$PDNujj%S(`dBYG8W1al$JzgKzfiUB}^8sdvqe7*k{rT+zk
zK)C63TB@sv1#^8@M{Judd9*P-+yTbmY`(4v_iRM`XL;N7*()eB<$=q1fCU;zlUICI
z8zqEpP$>!nwD#>_!b?NT4c5LQI3O1Q*pcO*TJd2m&7Tp1*}9EGmWw4dSDb_kcSsq!
zHU4tEVG#Qm*=&1joFzv6iVYeFk#J##anOqgkC7vBrlXVNtD1nozJEXA-6AT_3XqNl
zk@jX|>3k__ae3n`u{OX<Bt>XE$5ykX>KNS>i*q<KQK!+Fu9Wcqv2}FrIJN99m`C?d
zkB?la-N{mV|Nbw_b{KR_U#F629{_X*#BFTWOviNaMnrcbz|0K;X}%)F>nuY4RZ!=F
z;ZZ76eSbtHjQ)|VygP>d>FAOT7{P0({WAAf_!=W~R+}#nbHzvMkXlZn3bSi#zzV*g
zCSIHTea$%12_*k)ti!@1YKBNDZa{%0r_YdX_dgw+oM{{e=REjlfbg3@W}vit`j7r5
z=gyN1kwSqhoqhnS(U^dVlBBDOAY7P*b?524%Axi0;}*1e)qM=^mETdfP+<_@U!PGD
z5R*PbMo{@b1C6~4aUR9~;pj-B01`zc*y%_eEbsqs{@DBfPz*5LMlZY^H1__d)m~eh
z5EM6%(VJQAwycCvK-{GU+=stxW$TG4TQ*>Wwm1E}0gO-+fXT+bBG!+We)|6NRr;mm
z*dcxJh#GVy%-hur7+I3-?BD?1n5)$bmuUHk4#_ur{!=Eskwsoua6l}eOl8E)sKuz%
zr-ji#%^^0z^t8-=Sibr6N>;ilF^vS=6I087d<2G^wR<W<?q4}@2(5>E7$Y(WsI7o9
z<#}1avWX@;z!HYLEw53(aK(rOcq&RjkF}xBcI)res<}06=;D&#{A}i`K!u{S^jc2%
z2r#(ouvp%m^ZT}29{=>X9J=ul<UH^MsTv6q{+be)vyuiR6Ttd@wHmW+*CfHkuBaC%
zEs41cADIAlz-C@R?YZ3-NB$If<xVvLX+4RSz7sy`#%c(E@ezacKe<6eK$Sxd7-l3$
z_tv>p^6I0;&IEwD9DezR8xxAb|B@{}#7n8Za?lTW1z5K(oaMyukBG!$Krui<(&a<-
zou54=EQZJZQ_X2$<!?Cq{EI8T3P?+54>q(U6+_Kou3{ZYlXq*`-ZgUrl?`>a?n^WG
z08JUXii9*(gue<Ru62v!M@cu};6P4{8)MFh8E6yxN3ieP^gV9VSiqqZR1i1Xwr;wb
z0wM3Ju+V6dlw&WH2efv(+7`4XE=NXAW%17ft9ae4qNzuS{wb$|&#mmc9t56TClgw)
zYyK3OL?>Z4%v&f8*kj`v5@l<=!O<diBz;AW2)wv6Fjm}$*cg~hX#>jH_vmO4+r2ur
zGd9A$h$2M`5Lg+a<~RzS!`dVvXL)VdCZ-2Wv18`qNepf!f1F%jz=TDbyruh>-`kz4
z8ZawE!?Zr!k8>8+e`_QA1I3Ut7hRhhg#3yiLCUBiv_1E$#-2y#2JwAGv;cN!)Wm+Y
z4+N;W({BiW0Ja@ef>APh2LT%uA~2i#{j)&K@DA!*^+Y;Q9nl$l99_A{Zd;$56kx>^
zkPRAcO-!YK%-Ocp0_vAR_9I|BWFXLnkXAwX{1-pfw*~Jtqxa%b1j1d~f6q&L0hpq;
z35fF8#5IktB1gd<BGthsxIh$6?LeS;-|~>ND8`J?f4dr|?V{z+JTK2%>;_cu@y&3C
zjhie#JuBE?Si}x#9P_;NqdQxQP`n+rR9;i~4tlnp#+3|HU^g#K=@uYc6M`nCd?}dg
zJ}<lF7BH)Cpfu}erNYxp2LYhuu{#bOoe#sQX|JG@mZ2tlWgd|QI!OOLpY?|3VqbqI
zyA`cn!ad!u#k5HZ>Fmg3ZXZ9(ku`8PcpwVo#d-0(y>Rfki?Or@bl3m*YB6-(n_2>b
zL4*b01+8+~kHRjYGMdoc$bc)H^&={o_Rfco?lm-G0`Q4-o&l%@0dfjn$NYx-GEcH7
z!-e+)0)pQSZ44NYdEl?X+G74KjByY52-fBdj8(Vn_HbmFkX3fx5+PG$7h?M%eT#@-
zc%V(QL^OCd3iO_9@%QO$xvUH65|$3A-70p#%PBm+i~ly9zUN1dy>6$f=iv2l?I^W!
ziz#h<`!ODDhY3lwydD0Md_5unVMGsWdn5>D5HdYabHduOBFD7am#Vkawo(V^gaw1V
zbH1B-rk?+baZLs9$D+)P#eF5}<EIGTvw(dtJ<V}1JxU95V7aTxb0-Fa`9m;C)Ffk-
z9O-R(D-w_zKjrN6G+Kq{mNE>sR+pF2@}(A)`8A~>wVw_$N<S(!h|5A{eouiBc>^<Y
zS2NPfi^q!_FBCO252e_pnQ<VWapfgo@WhC8;y5DkgE*A<-<rIPm?-ZX2HFOgA$<A9
zK<cm1JG>o9^m3Tp$TT<u$9{_4BW0+-_Y~SfG@PN`s4*IJn;mgFxle32#Z0+hg$ZeT
zs_SbF972Ce6JY5Qm<xH$Zhv#&GWxvfewdrQO(PA7njIOgI_5*R)=kQ4vrl@Pub4%{
z!uQED%=@l)PTW1LYh*C($w#sNHxX2_ND7*8Y<-hWqmAJRaR)HqHbdw=PUPw2F0q|D
zALNF?J+5NrH9<mF9=#R?z{7R5$rP6}&(o-PQ`Rhm^S&o4Gb`D%zXh`(CP3BrrS4li
z^YfB^48JE=xNr=s(}HCKMd64(LpF`xUI-U}N^*cjf|gXgY8?Eqk6{YAtqaAZAm`iF
ztl$+MecqA@vqqY~)U|%RB~UYq+cce0k1&pK7iS7ym;#ND)*0K{@dHzH3P4`J<Z+V0
zd?iVbk@<=f>WRP!BZo2%ceKQ8D>1?i6H<_UG4E2>*ljTC(AW8pJBDy0z~_>Q|K)Rn
zTQ&_=g|9mOa&{vkJ?~H)qS*c>YdEZ{aMpOIW)&!0aX%#AoJCwA7gV;wg>?{9;5)$H
z+b0tW2iU-O17AS4J^gg8wfs?;R=-J)_5mfP=QpR_fGJEz?-wk_1)ZvH0h87*8J~p1
z6=UpzWurktCW&X(m|bE-Zgg#wfY1}dZ_f_tEG5yd(F-1!0%MsdyL6S%FlKoR@)Fqz
zhvBS&!^+`OwjUrA+fnPj$1ESE@WxFr^r4NCo4oui&Cwb2Jfi5iEV63=k*3dpaSvDs
z$>qfW)VU~?#wF#FUr&^Ysh#`lt=BB1)v%>pY8~bUPiKSQoI1dir|%U>(Ps;scwpVz
zq@6^{u1@bA0H*2}d|aYkrwK(&nCx471xF3Zg)dh}EB#TqU+Qpm3qA)Nf6I=%++q~5
zkzm9|Xyit^c)TI-d4OTBU_S&tB2TsKmZYO#<a()=4usq%1f7<mf=)!geo1r?oBJit
zYd8Sy_iXe;@?`}8XZV`T9#{{G5p7lSb(ZmTdN*AqBmB%4*LCk>g>BD+hxP?*#h#8$
z65VUfdu*?rxx086n*#;~fk<yLrcJt<I(jz3$@KKyhdhB$)xGYZoe|d^;cawSz{tB7
z#oOVO^V(jM`3ijYiNn!gkpQJ#VRuHkiRer8H`(#Kj{--htU0>>{Fp^t%~~;cWKW3t
z$u+cbl;dM6U%kt9m}%{6FxJMB;rmEyPru=wr2Vi$9(yb*v}pY9%!&SzLRDiXdrzlq
zcplfq%r|dk8$Sg}TD@(FPhaCHXUYEu<6zceqm%~<YcF^yc$2iXBwK!`pBBq$QG4>M
z@qC%|P7^tb-_PsRNd>B2+RAr>i%rhY-=8R27!HQ-JPD;6za;i~r~BJbsilgwBMjYj
zQG(Yqn7V+SwFUlC(_MDs+nObR-%`eQ*2IDIVngg_CJl+Xy9jx)?bJ*Hc|Z+{?8_a$
zWJ2d7ymGSUC8M^VqP`!SIi2kV8}E*eUq0P>2SV?)$8D1yhS{>8Z1_Ntsonbw@37t#
zxduC_jg4=cp>Q#z*GnEJUA+_B*_rWpd^Z0jqx<snGFdw`@F^hg;;~Q9#Sy+J$z8)M
z=QF;((Pw66y&E{ooZty9RL9zr(UfeFOC=7umJiaxDy;Mq^3j_=w_Bv0{P1>%N*Y3j
z4(C;KFw<y-gY~V-jL-P2Y7GLgCrPplMok!S$`;V);;-g-be9g|E%S6r0O+M^u(-^U
ze20A>Bx`7G9DA#cbOZ=Y?UQUskrck$BEOJ&F7ia{L{9Fwr-ZB<lR)>Cm#(}n#NK$H
z{nIN0lXLe&r7#y|pu4R;_*dD4kHd|Tmg^vop;1zwQogb;!y-xZT9=*Z7p~NhKn>$~
z&nb&28WZio&^mOM`GF}hBKsr2MwD<hcQXCR6hY}`p&5t5kZlXA-5V@_asPnt09vGi
z8e*w#MD>yV{Lh{I5ghjS7sBEKv0ZBm!wppgWoV(_@HpI6DVUJ8@aS)N1(ltE37{vS
zkL`Z=+njnZBj8m!rPZ28+USC{+NKSELvcbg#;5p`N6wv{2iD|AbkQI?O}e;>Pt4A<
zhit`Z)N~LwJ6>`%1f}u9mx4{p>ct!*EdeS!mQq-SsWC*kukBEn^oWyGlZm;<*gy`7
z9H)ybdFJ%qR(THx^Lw6g3_rBydjg!&16^wAXb)c`T-4_JNI5YH;ygUF!+4OU6}|I#
zsN3DYszD`m!|q*e;}Nxp44b$#Qp6~<&|CNTPBDu|<z8V=b?x9sY<)Nis?$B8g>OUX
zJA2>@Rp!oZ@NEJ5=uDoF&I$RxuuWqdn=v`yZrN8|J*fSs(*AJn?Yh(6Z>#p#XS#2M
zLasUmafCa#;tEIL$!<cUK4z@P<j$jBnWs?|If@IaM)q8LgDPt9<^rIJ(84|=wp!xS
z{V>)R*d-)mdecfSP!o6c1`>v6yLQGCZxr$cqW3Dltp<c;109H-a*|FtM0W7Y?{&}d
z4d=geuAYssv3mK5zu4{G_*d5pyJ^d#6$~)3^v|5?Xs{%Cy)aGubZFg$P;lqzYaOSY
zCU4OUY1az=(r)yd7c)H^1^%xmLJ<4E!JeB>w}c<q3G<giwGfnKZd<%bwTZw<y+zo`
z15ft?eKQTC^gyG}^SwT$6*lu<_o-wojLS!^YqmlWw%>%8C`ezr81*KlS<QZ)7JpTZ
zXe4^ch&|H?;{)XER{PT6tfFo5@2mc;3tD(6&c=O!$yKUQ#yyB~i*$4e`-n9{w)i~m
z+)pV5<ZgsN>@6u>{bJmS@cxg*<XG69^u-}+VhxsvU0c8z7;SP@<I-xlHdv8c2c^AG
zR86%+JeUwtRFfyowebuvge+g1u@$|7fh8>Z3u0@PONY@@4I%klsZQ7cb^Zfvw8?jY
zR*EmB?a=V8qWUP&tr)zronJRG>)SS4)Vco`Uzf?#b%qVCMlhQS*k6QqBS@~J)$yU_
zKiMRv^MIz+uc|v5bVV{T;NVX&PCcyDcGnwPmwVew`U`e*?BJ2$U==R1+o=$?6Nh*q
z+4G#`!THd|A*U&A57(aotRp8S-`J6l_V+UTR)b=8rIusC!QIcyQmG&w@gObRqMsEB
z{Q8U^@z*_EtB*Ac!(LO{-4-67udh3XeYTSgn9RZEJLG!^lD29xpW{X`WEnZwL#yI~
zZEi!ROR3BpY><aHdjL9RN79$;m<#yW(r;9sFN~t?FrOgv5s3#YWDAK*aaHjB01+hM
zcs2XUmac~_xG4fhcb6Bj&fGH;O5)Giff-b(qs7cqAbKT`V6|89Bc(k^c6)L8^`#q3
zw{sj3I@J*@%ly1!Pcbt1ld-M%E}Ip){F3R1c3mcd!<x$u*``G&n;v%Nu4EMZ<J`Id
z40LMx^&0aVUvC>R`&cKnIWLliEnR*TIxIckUKGWS3=)C=u1mNBjz~WnR(WTCrf)<O
zJG^m`I<(32EXzv)oYU{%j9But+Z_rGoy=x9xv@ib`ONL4T1VkpZ`|bBPc_7Y^7y=-
z(8a%61cgyEL20zu$%&=)YkcCOSljY8`F3xdR&jYQhI{%9Xq!%t=cMcC82alXm^c+t
z(zfY)4wH~Z_vJ4SRB>VZ`nOHP7k|W$NqP?SEQbbzpfPmC9j=A%-&>W-jA{)e%m!Qv
zAN?!~>^XBFDcfB*HWNS1oB963Ey#2!l`~*hA_m;@DMrZrhT;ZPvgM78<*fcg#t5=t
z9eEzw@83H7<qHZo?%3~t`T*(PdK2E^Pom=%YzFGylt<)DGAFGb%<b6X+=7GpVkg-w
z>ZQpP+g>a^lwh3uz_Wb#7`VRa2AlGh&b{acM*)|+-QW!1a;>KLi=J8243k^9)i+Xj
zlDO2v0cwiF%;YEj?6e#5qVjjtc*hbqO=y8j?50T?cwCf)Axlqau+@Nf%x}|#-?`KT
zemTOMw63x0NE^H<E}5_`e;9v_A!EXb1W8#E7BTKyP^eMXK=$Vv_7Iw1+v0oypeS73
zKP4^eY8=$I=<pWf_P7WXMEJ70f-sFIQtf*MG9rOHk9!c@-rW~Qufl)_EOc%jL5y_Q
z1qro8KwoLWnB(~Do&4@@eKN#~`V%kH7xJ4N-H@HcrrY?T$!m-un;ORn=hA++dS$sQ
zt6tM13Qt@Q8$M5uQ;Nuof?n@0Z=%f>D*g*gJm(=4M{at2(|nSQnmC?Q`uW7oKg=Wk
zJdED|WHQ;Y;gCfE#ItcDIcvw~Ckw{54_!iOokl6LrgJ!&Yq^iz_16#S;wBikJG+F4
zbZ0et1Lt{+s(P+Eb+&Ozfp9%T>HRP|J(^ljoo)O}2}!sJQe;%uyW}lT8zL9xFxCZv
zxw@O`&hjiVY3}p0k5pCy;WJ8?vEoo55~8o?Jym}&?`NtpJfXC3IdH*&b*xl^+E0Bg
zRQ-zBjf7|=c}r#Q01r^MV)K;?mAs{&Rf|T&_BS3zMM0>zBSDO;JXoGEa28wX7FX;Q
z6jsfU<DN$2g8-TnzZTwhb`l2FFrpJ0n6vA5QaOW~eoS=qa;1imDYiez>Ut7g%^>~_
zzt)-XaTIa{zw0FIlgc?V2dp?s0rWYs8rPIOwDBC8#!PkVk%?LOUL)xF7YFuniPRA4
zc#yl4AX6lfp!DAtrI|pdx&JBQ@k&q6ak5Hg58CHU2gou42&ve^JFf3MXRR&NyLjxa
zAwMv>=`&v47b}5cJsJo}x1gLKvdOPr0%g`A<yJ|Q0K0}!U-|R)n>OZalhsv$`?eTc
z^WAyxLmF7h>X&IoM}_KcWJ`|a$jpNYJ%auB;0%O1g0iRZ9AdCLzE&9sbcv*PAxaH*
zGmyMR$L$G8%47`mI%C1>8|%a26TZG*MdK7kBH7GuC66&USmHBdB~`QU@s_P1tT4F#
z9OV4Vy>QMqwe56z0&M0XwY$SR+VBRpXc?ii>XK#S1@|m_Uh#ltngLrBCt?{j0eRNs
zs|77hy|i&K9`k}uN9h?W^SJHkt3?R|?UCi5^3q&oVn7?YiQe-MlgS-xd>pC^*4H@0
zY@U=wlNnI1S&duzj(EL8Sej|z9?iTP=u9wG_hd{HHWnFqtz?h$zP~mG{D5J>P&8Sd
z@wIBcU|Egl7on36(udq<?@#(MA#%2%g+&-#d9tOYXhzBj9t&BIeEKW@Y{ncqtyjlr
zOz(rP!QtHm^Cc8T@yVd{FfLR8jXcz%A+sPOO28lb-2^V?3tz_P-QMJIv=(cK1I^a_
zt|>C@s*M0z_=S1Qmg>k+gHZzV$#wcg6P{jTaQL!&Fl0VYF&nGHFN-RDonmPG*Wj_z
z+!6<waHW$T9=h&k$c|91xcS%e2dFk-D#ZYNc+&|DePmn{{LXYto^8L%?F*sW%bijG
z1c4mKzx^FDVPHh5Bddp>adge^>cf7FEt^WJ_l2A3DpZ723HHaufpXLx!nJ0K<Q_%$
z&dwJ7no;3qC~>glEu}~-PVr-IU0RvO?s<M)N~&)_8*0}lSKA9&oqKs-4ktB?5|~V!
z7!5l(d#VuF_m^<tWTb-*4tG4AbK}hf@H>^Qhx+@jgDs-6P4=GCQ%o%BDJgZ{a7NQA
zt0Uy){^q4o+7!p|ZeL$(s+kL|=(c7Y!rJYzdosB!<`w%$!+b{vxT;~kr;3p?nFZ%A
mYWwK_?$49{|5x64_ksogzS->{TQKhGEfodL|BB>HzWhI#L%i<*

literal 0
HcmV?d00001

diff --git a/examples/telescope-authz/tsconfig.json b/examples/telescope-authz/tsconfig.json
index 1f63d593c..61581e45d 100644
--- a/examples/telescope-authz/tsconfig.json
+++ b/examples/telescope-authz/tsconfig.json
@@ -1,21 +1,24 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "declaration": true,
-    "declarationDir": "./types",
-    "emitDeclarationOnly": false,
-    "isolatedModules": true,
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
     "esModuleInterop": true,
-    "target": "es2022",
-    "lib": ["es2022", "DOM"],
-    "downlevelIteration": true,
+    "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
   },
-  "include": ["src/**/*"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

From 15533fec8cb0f9cee1c20acdfdee1730ab2a6329 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Thu, 25 Jan 2024 21:24:32 +0800
Subject: [PATCH 02/16] feat: add wallet section

---
 examples/telescope-authz/components/index.tsx |   1 +
 .../components/wallet/AddressCard.tsx         | 116 +++++++++
 .../components/wallet/Astronaut.tsx           | 156 +++++++++++
 .../components/wallet/ChainCard.tsx           |  49 ++++
 .../components/wallet/ChooseChain.tsx         |  76 ++++++
 .../components/wallet/UserInfo.tsx            |  47 ++++
 .../components/wallet/Wallet.tsx              | 235 +++++++++++++++++
 .../components/wallet/WalletConnect.tsx       | 243 ++++++++++++++++++
 .../components/wallet/WarnBlock.tsx           |  92 +++++++
 .../components/wallet/index.ts                |   1 +
 examples/telescope-authz/pages/index.tsx      |  18 +-
 11 files changed, 1031 insertions(+), 3 deletions(-)
 create mode 100644 examples/telescope-authz/components/wallet/AddressCard.tsx
 create mode 100644 examples/telescope-authz/components/wallet/Astronaut.tsx
 create mode 100644 examples/telescope-authz/components/wallet/ChainCard.tsx
 create mode 100644 examples/telescope-authz/components/wallet/ChooseChain.tsx
 create mode 100644 examples/telescope-authz/components/wallet/UserInfo.tsx
 create mode 100644 examples/telescope-authz/components/wallet/Wallet.tsx
 create mode 100644 examples/telescope-authz/components/wallet/WalletConnect.tsx
 create mode 100644 examples/telescope-authz/components/wallet/WarnBlock.tsx
 create mode 100644 examples/telescope-authz/components/wallet/index.ts

diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index d0b932366..692a439bd 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -1 +1,2 @@
 export * from './common';
+export * from './wallet';
diff --git a/examples/telescope-authz/components/wallet/AddressCard.tsx b/examples/telescope-authz/components/wallet/AddressCard.tsx
new file mode 100644
index 000000000..81ca1feda
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/AddressCard.tsx
@@ -0,0 +1,116 @@
+import Image from 'next/image';
+import { Box, ClipboardCopyText, Stack } from '@interchain-ui/react';
+import { WalletStatus } from 'cosmos-kit';
+import React, { ReactNode, useEffect, useState } from 'react';
+
+const SIZES = {
+  lg: {
+    height: 32,
+    walletImageSize: 144,
+  },
+  md: {
+    height: 24,
+    walletImageSize: 96,
+  },
+  sm: {
+    height: 20,
+    walletImageSize: 64,
+  },
+};
+
+type CopyAddressType = {
+  address?: string;
+  walletIcon?: string;
+  isLoading?: boolean;
+  maxDisplayLength?: number;
+  size?: keyof typeof SIZES;
+};
+
+export const ConnectedShowAddress = ({
+  address = '',
+  walletIcon,
+  isLoading,
+  size = 'md',
+  maxDisplayLength,
+}: CopyAddressType) => {
+  const [displayAddress, setDisplayAddress] = useState<string>('');
+  const defaultMaxLength = {
+    lg: 14,
+    md: 16,
+    sm: 18,
+  };
+
+  useEffect(() => {
+    if (!address) setDisplayAddress('address not identified yet');
+    if (address && maxDisplayLength)
+      setDisplayAddress(stringTruncateFromCenter(address, maxDisplayLength));
+    if (address && !maxDisplayLength)
+      setDisplayAddress(
+        stringTruncateFromCenter(
+          address,
+          defaultMaxLength[size as keyof typeof defaultMaxLength]
+        )
+      );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [address]);
+
+  const walletImgDimension = `${SIZES[size as keyof typeof SIZES].walletImageSize
+    }px`;
+
+  const chainIcon =
+    address && walletIcon ? (
+      <Box
+        borderRadius="$full"
+        width="100%"
+        height="100%"
+        minWidth={walletImgDimension}
+        minHeight={walletImgDimension}
+        maxWidth={walletImgDimension}
+        maxHeight={walletImgDimension}
+        marginRight="$4"
+        opacity={0.85}
+      >
+        <Image src={walletIcon} alt={displayAddress} />
+      </Box>
+    ) : null;
+
+  return (
+    <Stack direction="vertical">
+      {chainIcon}
+      <ClipboardCopyText
+        text={address}
+        truncate="middle"
+        midTruncateLimit="md"
+      />
+    </Stack>
+  );
+};
+
+export const CopyAddressBtn = ({
+  walletStatus,
+  connected,
+}: {
+  walletStatus: WalletStatus;
+  connected: ReactNode;
+}) => {
+  switch (walletStatus) {
+    case WalletStatus.Connected:
+      return <>{connected}</>;
+    default:
+      return <></>;
+  }
+};
+
+function stringTruncateFromCenter(str: string, maxLength: number) {
+  const midChar = '…'; // character to insert into the center of the result
+
+  if (str.length <= maxLength) return str;
+
+  // length of beginning part
+  const left = Math.ceil(maxLength / 2);
+
+  // start index of ending part
+  const right = str.length - Math.floor(maxLength / 2) + 1;
+
+  return str.substring(0, left) + midChar + str.substring(right);
+}
diff --git a/examples/telescope-authz/components/wallet/Astronaut.tsx b/examples/telescope-authz/components/wallet/Astronaut.tsx
new file mode 100644
index 000000000..0704133ad
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/Astronaut.tsx
@@ -0,0 +1,156 @@
+export const Astronaut = (props: any) => (
+  <svg
+    viewBox="0 0 278 255"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M136.844 254.8c70.527 0 127.7-57.039 127.7-127.4S207.371 0 136.844 0 9.144 57.039 9.144 127.4s57.173 127.4 127.7 127.4Z"
+      fill="#030609"
+    />
+    <path
+      d="M85.444 22.2a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8ZM208.144 42.1a2.9 2.9 0 1 0 0-5.801 2.9 2.9 0 0 0 0 5.8ZM226.644 110.6a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802ZM211.044 182.1a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802ZM202.244 218.1a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802ZM144.744 230.3a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802ZM111.844 206.1a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802ZM14.144 112.1a2.9 2.9 0 1 0-.001-5.8 2.9 2.9 0 0 0 0 5.8ZM48.144 50a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Z"
+      fill="#F6F5F3"
+    />
+    <path
+      d="M235.944 47.1c9.6 11.7 17 25.1 22 39.7-4.5 4.5-10.7 7.4-17.6 7.4-13.4 0-24.2-10.7-24.2-23.8 0-11.6 8.5-21.3 19.8-23.3Z"
+      fill="#BA536A"
+    />
+    <path
+      d="M242.544 92.9c-13 0-23.6-10.6-23.6-23.7 0-10.6 7-19.6 16.7-22.6 9.7 11.9 17.4 25.6 22.4 40.5-4.2 3.6-9.6 5.8-15.5 5.8Z"
+      fill="#FF6B84"
+    />
+    <path
+      d="M144.744 246.7c0 2.8-.6 5.4-1.5 7.9-2.067.133-4.2.2-6.4.2-14.2 0-28-2.4-40.8-6.7 0-.5-.1-1-.1-1.4 0-13.1 10.9-23.8 24.4-23.8 13.5 0 24.4 10.7 24.4 23.8Z"
+      fill="#124899"
+    />
+    <path
+      d="M145.644 249.2c0 1.8-.2 3.567-.6 5.3-2.667.2-5.4.3-8.2.3-13.5 0-26.5-2.1-38.7-6 .2-13.4 10.8-24.3 23.7-24.3 13.1 0 23.8 11.1 23.8 24.7Z"
+      fill="#4CBAB6"
+    />
+    <path
+      d="M205.144 117.7c5.9 6.3 17.1 16.7 27.6 23.5 21.8 13.9 20.8 11.7 26.1 14l-8.8 27.9c-13.334-9.733-24.167-17.033-32.5-21.9-10.2-6.067-21.8-12.033-34.8-17.9l22.4-25.6Z"
+      fill="#D8DEDC"
+    />
+    <path
+      d="M207.344 119.9c.4.467 2.066 2.1 5 4.9-2.667 5.933-5.067 10.333-7.2 13.2-5 6.8-5.3 6.5-10 11.2l-7.9-3.8 20.1-25.5Z"
+      fill="#839091"
+    />
+    <path
+      d="M242.844 196.2c-6.934 1.333-10.367.2-10.3-3.4 0-8.4 5.1-7.8 18.6-10.2l-8.3 13.6Z"
+      fill="#9CA9A8"
+    />
+    <path
+      d="M234.844 190.9c-.267-1.6.466-3.067 2.2-4.4 1.666-1.267 4.933-1.933 9.8-2-4.534 1.4-7.334 2.533-8.4 3.4-1 .867-2.2 1.867-3.6 3Z"
+      fill="#DAE0DF"
+    />
+    <path
+      d="M251.844 156.9c-4.134-6.6-4.734-10.433-1.8-11.5 4.5-1.6 11.2-1 16.1 1 6.2 2.5 11.7 6.9 11.7 10.5 0 3.133-2.6 5.233-7.8 6.3 3.866 4.6 4.866 7.933 3 10-1.8 2.067-5.267 2.8-10.4 2.2 5 5.133 6.333 8.767 4 10.9-2.6 2.3-12.1 1.6-18.1-.9-5.2-2.1-14.2-12.6-11.5-15.8 1.733-2.133 5.5-3.2 11.3-3.2-5.334-3.067-7-5.567-5-7.5 2-1.867 4.833-2.533 8.5-2Z"
+      fill="#030609"
+    />
+    <path
+      d="M252.344 148.9c2.9-1.1 8.3.5 12.3 1.8 3.9 1.2 10.5 5.7 9 8-1 1.6-3.267 2.567-6.8 2.9 4.133 5.933 4.966 9.267 2.5 10-3.7 1-11.8.8-11.3 1.3s11.1 10.2 6.5 12.5c-4.5 2.3-10.9.8-15.7-1.8-5.7-3-10.4-10-8.5-12 .733-.8 4.466-1.7 11.2-2.7-5.334-4-7.8-6.533-7.4-7.6.7-1.7 3-2.6 6.4-2.6h6.5c-5.934-5.533-7.5-8.8-4.7-9.8Z"
+      fill="#9CA9A8"
+    />
+    <path
+      d="M256.544 155.2c-3.134-2.733-4.134-4.333-3-4.8 1.066-.4 2.9-.3 5.5.3-1.6 0-2.6.3-3 .9-.4.6-.234 1.8.5 3.6ZM248.844 161.4c-.534 1.2-.3 2.367.7 3.5-3.2-1.4-4.434-2.666-3.7-3.8.733-1.133 3.4-1.533 8-1.2-2.8-.2-4.467.3-5 1.5ZM244.544 173.8c-.467 1.067-.167 2.867.9 5.4-3.334-2.933-4.367-5.133-3.1-6.6 1.266-1.533 3.433-2.133 6.5-1.8-2.467.867-3.9 1.867-4.3 3Z"
+      fill="#DAE0DF"
+    />
+    <path
+      d="M180.844 148.9c1.933 5.933 3.933 13.767 6 23.5 3.7 17.5 2.9 36.9-4.1 39.9-2.8 1.2-5.4 3.6-16.1 0-7.2-2.4-22.134-12.133-44.8-29.2l59-34.2Z"
+      fill="#D8DEDC"
+    />
+    <path
+      d="M182.744 155.2c-3.2 10.933-12.3 19.7-27.3 26.3-7.334 3.267-16.334 5.4-27 6.4l-10.2-7.5 46.5-25.2h18Z"
+      fill="#687476"
+    />
+    <path
+      d="M74.044 99.2c-7.467.867-13.3 1.533-17.5 2-1.934.2-4.767 1.167-8.5 2.9-3.2-4.333-5.434-8.533-6.7-12.6-1.5-4.6-3-15.4.2-21.7 2.2-4.2 14.366-9.067 36.5-14.6l-4 44Z"
+      fill="#D8DEDC"
+    />
+    <path
+      d="m82.544 53.7-3.5 43.9-23.9 3.9c-1-4.333-1.434-7.933-1.3-10.8.8-14.133 2.466-24.1 5-29.9l23.7-7.1Z"
+      fill="#839091"
+    />
+    <path
+      d="m189.144 137.5-6.4 17.7c-12.4 14.067-26.967 23.533-43.7 28.4-16.8 4.867-34.934 5.467-54.4 1.8l-68.8-32.5c.733-5.933 2.766-11.667 6.1-17.2 5-8.3 15.9-29.3 28.5-33 8.4-2.533 17.6-3.7 27.6-3.5l111.1 38.3Z"
+      fill="#030609"
+    />
+    <path
+      d="M174.844 148.9c-15.334 26-42.1 37.233-80.3 33.7-16.6-1.6-41.934-12.333-76-32.2 3.666-4.733 5.833-8.467 6.5-11.2 1.1-4 2.4-7.2 6.5-9.5 4.1-2.4 9-6.9 11.7-8.8 4.8-3.5 4.6-9.7 7.2-10.4 4.266-1 12.3-1.933 24.1-2.8l100.3 41.2Z"
+      fill="#D8DEDC"
+    />
+    <path
+      d="M113.844 150.7h63.5c-4.334 6.133-11.3 12.2-20.9 18.2-9.6 6-16.4 9-20.4 9-3.334 0-8.6-2.067-15.8-6.2-9.6-5.533-15.734-10.467-18.4-14.8l12-6.2Z"
+      fill="#687476"
+    />
+    <path
+      d="m79.844 106.3 14.8 30.1-20.1 6.9c-5.8-7.667-9.534-12.967-11.2-15.9-1.667-2.933-4.267-8.867-7.8-17.8l24.3-3.3Z"
+      fill="#839091"
+    />
+    <path
+      d="M142.144 166.5c40.869 0 74-33.937 74-75.8s-33.131-75.8-74-75.8-74 33.937-74 75.8 33.131 75.8 74 75.8Z"
+      fill="#030609"
+    />
+    <path
+      d="M143.444 158.8c37.334 0 67.6-31.027 67.6-69.3 0-38.273-30.266-69.3-67.6-69.3-37.335 0-67.6 31.027-67.6 69.3 0 38.273 30.265 69.3 67.6 69.3Z"
+      fill="#D8DEDC"
+    />
+    <path
+      d="M172.344 29.4c9.066 4.133 15.9 10.033 20.5 17.7-.534 1.933-7.367 4.033-20.5 6.3-4.667.8-8.934 1.4-12.8 1.8.066-5.467-.5-10.667-1.7-15.6-1.867-7.467-3.867-12.034-6-13.7 6.6-.867 13.433.3 20.5 3.5Z"
+      fill="#fff"
+    />
+    <path
+      d="M85.444 50c23.133 6.6 44.366 9.566 63.7 8.9 19.333-.667 37.033-3.634 53.1-8.9 6.533 14.4 10.433 25.266 11.7 32.6 1.266 7.333.3 16.633-2.9 27.9-16.334 16.666-38.9 24.3-67.7 22.9-35.8-1.734-58.633-11.267-68.5-28.6-2.6-15.467-2.7-27.134-.3-35 2.4-7.934 6.033-14.534 10.9-19.8Z"
+      fill="#030609"
+    />
+    <path
+      d="M96.744 75.6c5.7 1.4 15.8-.4 20.1 1.3 4.2 1.8 11.7 12.8 16.3 14.4 4.6 1.5 11.7-5.4 14-5 2.3.3 1.9 4.4 4.9 6.6 1.2.9 3.2 1.9 7.3 3 3.066.866 6.233 1.866 9.5 3-20.334 11.666-40.3 15.533-59.9 11.6-19.6-3.867-30.067-8.267-31.4-13.2-.467-4.667-.3-10.367.5-17.1.666-5.134 1.7-9.567 3.1-13.3 6.666 4.866 11.866 7.766 15.6 8.7Z"
+      fill="#173D3E"
+    />
+    <path
+      d="M77.344 91.7c2.733-.6 5.166-.2 7.3 1.2 3.1 2.1 14.7 9.3 18.7 10.8s24.9-.2 26.8-1.5c1.2-.934 3.1-1.7 5.7-2.3 3.333 2.733 5.933 4 7.8 3.8 2.7-.4 6 1.2 9.9-1.3 4-2.5 6-5.6 8.8-5.6 2.7 0 5.9 1.8 8 2.1 6.5 1.1 8.2-1.5 11-.5 2.8 1 4.2 1.5 8.8 1.3 3.066-.2 9.033-.834 17.9-1.9 1.6 4.466-3.534 11.333-15.4 20.6-6.3 4.9-19.3 12-55 12-5.8 0-27.9-1.1-46-14.5-11.4-8.334-16.167-16.4-14.3-24.2Z"
+      fill="#276A69"
+    />
+    <path
+      d="M122.844 103.5c4.466-.467 8.566-2.434 12.3-5.9l1.7 2.7c.133 2.266-.767 4.266-2.7 6-2.9 2.6-7.3 4.6-12.3 4.2-3.267-.2-7.934-2.334-14-6.4 5.4.133 10.4-.067 15-.6ZM150.644 102.6c3.6-.6 6.7-2.7 9.2-5 1.666-1.534 3.9-1.534 6.7 0-1 .733-2 1.433-3 2.1-1.4 1-2.6 1.1-5.2 2.2s-6.6 4.4-13.8 4.4c-3 0-5.134-1.6-6.4-4.8 4.266 1.466 8.4 1.833 12.4 1.1h.1Z"
+      fill="#388688"
+    />
+    <g opacity={0.4} fill="#fff">
+      <path d="m159.344 60.9 20-2.5c4.2 14.266 4.833 36.333 1.9 66.2-4.067 1.266-7.634 2.3-10.7 3.1-4.6 1.2-8.934 1.866-13 2 2.533-7.667 3.633-19.5 3.3-35.5-.2-11.867-.7-22.967-1.5-33.3ZM199.344 54.9c2.4 2.7 7.5 10.9 8.8 20 1.9 14.4 1.3 21.5-.6 27.8-2.134 4-4.634 7.1-7.5 9.3-2.867 2.266-5.434 4.466-7.7 6.6 3.2-5.067 4.466-14.734 3.8-29-.667-15.134-2.534-26.134-5.6-33l8.8-1.7Z" />
+    </g>
+    <path
+      d="M74.544 142.9c15.733-15.333 28.166-21.9 37.3-19.7 15.3 3.6 14.9 13.9 11.4 24.4-2.334 6.933-15.2 12.7-38.6 17.3l-10.1-22Z"
+      fill="#030609"
+    />
+    <path
+      d="M78.144 146.2c4-4.667 11.233-8.5 21.7-11.5 15.8-4.5 18.3 4.3 18.4 7.2.2 3-1.4 7.2-6.4 8.8-3.334 1.067-11.567 3.8-24.7 8.2l-9-12.7Z"
+      fill="#9CA9A8"
+    />
+    <path
+      d="m78.144 144.9 4.2-2.3c3.933 4.6 6.6 6.867 8 6.8 4.2-.1 9.3.4 9.5-.5.2-.6.866-2.7 2-6.3-.134 2.8-.134 4.5 0 5.1.2.9 9.1-.2 11.3-1.3 2-1 3.7-2.5 5.1-4.5.2 3.2-.534 5.367-2.2 6.5-3.6 2.6-13.234 6.1-28.9 10.5l-9-14Z"
+      fill="#515C5C"
+    />
+    <path
+      d="M105.144 136.1c1-.3 6.2-.7 7.7 0 1 .467 1.633 1.5 1.9 3.1-.8-.733-1.767-1.433-2.9-2.1-.934-.533-3.167-.867-6.7-1ZM100.644 143.9l-1.5 4.2c-.267.867-2.367 1.067-6.3.6 2.466-.2 4.233-.8 5.3-1.8 1.133-.933 1.966-1.933 2.5-3Z"
+      fill="#DAE0DF"
+    />
+    <path
+      d="M57.844 227.4c-.1 2.8 0 7.5-3.3 9.3-3.2 1.7-31 3.2-36.5-2.8-5.4-6-15.4-25.5-17.2-36.5-1.2-7.3-2-20.5 4-22.2 4-1.2 8.066-.833 12.2 1.1-3.934-5.933-5.9-11.4-5.9-16.4 0-3.6 1.3-9.5 5.9-10.5 3.066-.667 9.333-.167 18.8 1.5-2-7.2-2-12.2 0-15 6-8.5 22.5-7.2 27-6 4.5 1.3 39.8 37 42 46.4 1.4 5.7-2.3 21.4-6.7 24-1.867 1.133-6.1 2.1-12.7 2.9 4.2 8 4.2 13.4 0 16.2-4.267 2.867-13.467 2.867-27.6 0v8Z"
+      fill="#030609"
+    />
+    <path
+      d="M38.844 152.9c-1.2-6.867-.7-11.034 1.5-12.5 3.2-2.3 12-2.7 16.5-2.2s5.1 8 11.5 12.2c11 7.3 24 25.3 25.5 28.8s.3 6 0 8.5-12.5 6.6-16 3.7c-1.4-1.1-7.2-8.4-12-12.2-4.667-3.8-9.1-6.567-13.3-8.3 7 7.8 10.933 12.566 11.8 14.3 1.3 2.6 4.1 10.2 7 12.2 2.9 2 10.1 7.8 11.2 8.6 1.1.9 1.6 8.9 1.1 10.4-1.8 2-15.3-4.6-17.3-5-2-.3-7.2-1.2-11.7-2.5-3.067-.8-10.5-7.8-22.3-21 2.733 8.866 5.333 14.9 7.8 18.1 3.6 4.8 6 12 9.2 12 4.5 0 3.8 9.2 1.7 10.9-2.2 1.8-18.3 1.4-24.7-1.5-4.7-2.1-24.5-46.5-19-48.2 7-2.3 11.8-1 14.2 1.3 1.533 1.533 3.133 3.1 4.8 4.7-6.867-19.067-8.367-28.834-4.5-29.3 4.466-.534 9.4-.934 14.8-1.2l1.5 4.7.5-4.2 3.2 1-3-3.3Z"
+      fill="#9CA9A8"
+    />
+    <path
+      d="M12.244 178.1c-2 2.533-2.367 5.566-1.1 9.1 2 5.2 5.4 15 7.7 18.8 2.3 3.9 9.2 16.4 10.8 18.5 1 1.466 2.4 3.066 4.2 4.8-2.867-.267-5.367-.9-7.5-1.9-4.1-1.8-16.2-25.1-19-38.5-1.3-6.3-1.5-8.9 0-9.7 2.533-1.334 4.166-1.7 4.9-1.1ZM33.844 229.3c4.666-3 7.6-5.134 8.8-6.4a99.173 99.173 0 0 1 5.2-5.4c2.666.266 4.333.9 5 1.9 1 1.5-.4 8.9-1.8 9.5-2.4 1.1-5.1 1.3-6.9 1.4-3.867.133-7.3-.2-10.3-1ZM35.244 196.3c.9 3 3.7 7.6 6.1 11.6 2.533 4.266 4.233 7.033 5.1 8.3-8.2-7-12.9-12.667-14.1-17-1.2-4.334-1.2-8.1 0-11.3.533.533 1.5 3.333 2.9 8.4ZM82.544 206c1.6 2.9 2.3 7.7 1 10.4-.8 1.866-6.534.2-17.2-5 1.6-1.334 3-3.134 4.2-5.4 3.2-5.7 3.2-5.7 3.5-6.6 4.533 2.533 7.366 4.733 8.5 6.6ZM62.544 182.6c2.533 3.533 5.033 8.066 7.5 13.6-6.334-4-11-8.534-14-13.6-2.334-4.067-4-8.634-5-13.7 5.733 6.466 9.566 11.033 11.5 13.7ZM74.544 187.9c3.2-.734 6.433-2.034 9.7-3.9 4.266-2.4 7.266-4.4 9-6 1.8 2.666 2 5.9.6 9.7-1.4 3.5-11.3 7.2-16 3.7-2-1.467-3.1-2.634-3.3-3.5Z"
+      fill="#515C5C"
+    />
+    <path
+      d="M43.344 150.7c-.867-6.6.733-10.367 4.8-11.3 4-.867 8.133.566 12.4 4.3-4.534-1.2-7.9-1.634-10.1-1.3-2.134.333-4.5 3.1-7.1 8.3ZM25.844 161.7c-.667 2-.334 7.833 1 17.5-5.2-12.4-6.467-19.4-3.8-21 3.2-1.934 6.8-1.934 10.8 0-4.667.333-7.334 1.5-8 3.5ZM15.644 182c-1.134.533-2 2.5-2.6 5.9-1.667-5.8-1.334-8.7 1-8.7 3.666-.067 6.3 1.533 7.9 4.8-2.134-2.334-4.267-3-6.4-2h.1Z"
+      fill="#DAE0DF"
+    />
+  </svg>
+);
diff --git a/examples/telescope-authz/components/wallet/ChainCard.tsx b/examples/telescope-authz/components/wallet/ChainCard.tsx
new file mode 100644
index 000000000..7ac166cbe
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/ChainCard.tsx
@@ -0,0 +1,49 @@
+import Image from 'next/image';
+import { Text, Box, useTheme } from '@interchain-ui/react';
+
+interface IChainCard {
+  prettyName: string;
+  icon?: string;
+}
+
+export const ChainCard = (props: IChainCard) => {
+  const { theme } = useTheme();
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap="$4"
+      overflow="hidden"
+      wordBreak="break-word"
+      color={theme === 'light' ? '$blackAlpha800' : '$whiteAlpha800'}
+      width="100%"
+    >
+      <Box
+        minWidth="$10"
+        minHeight="$10"
+        maxWidth="$10"
+        maxHeight="$10"
+        width="100%"
+        height="100%"
+        borderWidth="1px"
+        borderStyle="solid"
+        borderColor={theme === 'light' ? '$blackAlpha200' : '$whiteAlpha200'}
+        border="1px solid"
+        borderRadius="$full"
+        overflow="hidden"
+      >
+        <Image
+          width={24}
+          height={24}
+          alt="chain icon"
+          src={props.icon ?? 'https://dummyimage.com/150/9e9e9e/ffffff&text=☒'}
+        />
+      </Box>
+
+      <Text fontSize="$xl" fontWeight="$semibold">
+        {props.prettyName}
+      </Text>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/ChooseChain.tsx b/examples/telescope-authz/components/wallet/ChooseChain.tsx
new file mode 100644
index 000000000..e8538fe16
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/ChooseChain.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Box, ChangeChainCombobox } from '@interchain-ui/react';
+
+export interface ChainInfo {
+  chainName: string;
+  chainRoute?: string;
+  label: string;
+  value: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+type ComboboxItem = {
+  iconUrl?: string;
+  chainName: string;
+};
+
+export interface ChooseChainProps {
+  chainName?: string;
+  chainInfos: ChainInfo[];
+  onChange: (selectedItem: ComboboxItem | null) => void;
+}
+
+export const ChooseChain = (props: ChooseChainProps) => {
+  const { chainName, chainInfos, onChange } = props;
+
+  const [selectedChain, setSelectedChain] = React.useState<ComboboxItem | null>(
+    () => {
+      const found = chainInfos.find((item) => item.chainName === chainName);
+      return found
+        ? {
+            iconUrl: found.icon,
+            chainName: found.chainName,
+          }
+        : null;
+    }
+  );
+
+  const options = React.useMemo(
+    () =>
+      chainInfos.map((item) => ({
+        iconUrl: item.icon,
+        chainName: item.chainName,
+      })),
+    [chainInfos]
+  );
+
+  React.useEffect(() => {
+    if (chainName && options.length > 0) {
+      const selectedOption = options.filter(
+        (options) => options.chainName === chainName
+      )[0];
+
+      setSelectedChain(selectedOption ?? null);
+    }
+
+    if (!chainName) {
+      setSelectedChain(null);
+    }
+  }, [options, chainName]);
+
+  return (
+    <Box maxWidth="350px" marginX="auto" py="$4">
+      <ChangeChainCombobox
+        maxHeight={350}
+        valueItem={selectedChain ? selectedChain : undefined}
+        appearance="bold"
+        onItemSelected={(item: ComboboxItem | null) => {
+          setSelectedChain(item);
+          onChange(item);
+        }}
+        options={options}
+      />
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/UserInfo.tsx b/examples/telescope-authz/components/wallet/UserInfo.tsx
new file mode 100644
index 000000000..4f07c95bb
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/UserInfo.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Text, Stack, Box } from '@interchain-ui/react';
+
+interface IUserInfo {
+  walletIcon?: string;
+  username?: string;
+  icon?: React.ReactNode;
+}
+
+export const UserInfo = ({ username, icon }: IUserInfo) => {
+  return (
+    <Stack
+      direction="vertical"
+      space={1}
+      attributes={{
+        alignItems: 'center',
+      }}
+    >
+      {username && (
+        <>
+          <Box
+            display={icon ? 'block' : 'none'}
+            width={{
+              mobile: '$16',
+              tablet: '$19',
+            }}
+            height={{
+              mobile: '$16',
+              tablet: '$19',
+            }}
+            borderRadius="$full"
+            overflow="hidden"
+          >
+            {icon}
+          </Box>
+
+          <Text
+            fontSize={{ mobile: '$sm', tablet: '$xl' }}
+            fontWeight="$semibold"
+          >
+            {username}
+          </Text>
+        </>
+      )}
+    </Stack>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
new file mode 100644
index 000000000..19681347c
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -0,0 +1,235 @@
+import { useChain, useManager } from '@cosmos-kit/react';
+import { Box, Stack, useTheme } from '@interchain-ui/react';
+import { MouseEventHandler, useEffect, useMemo } from 'react';
+import { FiAlertTriangle } from 'react-icons/fi';
+
+import { ChainName } from 'cosmos-kit';
+import { defaultChainName } from '@/configs';
+import {
+  Connected,
+  Connecting,
+  Disconnected,
+  NotExist,
+  Error,
+  Rejected,
+  WalletConnectComponent,
+  ConnectWalletButton,
+} from './WalletConnect';
+import { ConnectStatusWarn, RejectedWarn } from './WarnBlock';
+import { ChooseChain, ChooseChainProps } from './ChooseChain';
+import { ConnectedShowAddress, CopyAddressBtn } from './AddressCard';
+import { UserInfo } from './UserInfo';
+import { Astronaut } from './Astronaut';
+import { ChainCard } from './ChainCard';
+
+export interface WalletSectionProps {
+  isMultiChain: boolean;
+  providedChainName?: ChainName;
+  setChainName?: (chainName: ChainName | undefined) => void;
+}
+
+export const WalletSection = ({
+  isMultiChain,
+  providedChainName,
+  setChainName,
+}: WalletSectionProps) => {
+  const { chainRecords, getChainLogo } = useManager();
+  const {
+    connect,
+    openView,
+    status,
+    username,
+    address,
+    message,
+    wallet,
+    chain: chainInfo,
+  } = useChain(providedChainName || defaultChainName);
+
+  const { theme } = useTheme();
+
+  const chain = {
+    chainName: defaultChainName,
+    label: chainInfo.pretty_name,
+    value: defaultChainName,
+    icon: getChainLogo(defaultChainName),
+  };
+
+  const chainOptions = useMemo(
+    () =>
+      chainRecords.map((chainRecord) => {
+        return {
+          chainName: chainRecord?.name,
+          label: chainRecord?.chain.pretty_name,
+          value: chainRecord?.name,
+          icon: getChainLogo(chainRecord.name),
+        };
+      }),
+    [chainRecords, getChainLogo]
+  );
+
+  // Events
+  const onClickConnect: MouseEventHandler = async (e) => {
+    e.preventDefault();
+    await connect();
+  };
+
+  const onClickOpenView: MouseEventHandler = (e) => {
+    e.preventDefault();
+    openView();
+  };
+
+  // Components
+  const connectWalletButton = (
+    <WalletConnectComponent
+      walletStatus={status}
+      disconnect={
+        <Disconnected buttonText="Connect Wallet" onClick={onClickConnect} />
+      }
+      connecting={<Connecting />}
+      connected={
+        <Connected buttonText={'My Wallet'} onClick={onClickOpenView} />
+      }
+      rejected={<Rejected buttonText="Reconnect" onClick={onClickConnect} />}
+      error={<Error buttonText="Change Wallet" onClick={onClickOpenView} />}
+      notExist={
+        <NotExist buttonText="Install Wallet" onClick={onClickOpenView} />
+      }
+    />
+  );
+
+  const connectWalletWarn = message ? (
+    <ConnectStatusWarn
+      walletStatus={status}
+      rejected={
+        <RejectedWarn
+          icon={
+            <Box mt="$2">
+              <FiAlertTriangle />
+            </Box>
+          }
+          wordOfWarning={`${wallet?.prettyName}: ${message}`}
+        />
+      }
+      error={
+        <RejectedWarn
+          icon={
+            <Box mt="$2">
+              <FiAlertTriangle />
+            </Box>
+          }
+          wordOfWarning={`${wallet?.prettyName}: ${message}`}
+        />
+      }
+    />
+  ) : null;
+
+  useEffect(() => {
+    setChainName?.(
+      window.localStorage.getItem('selected-chain') || defaultChainName
+    );
+  }, [setChainName]);
+
+  const onChainChange: ChooseChainProps['onChange'] = async (selectedValue) => {
+    setChainName?.(selectedValue?.chainName);
+    if (selectedValue?.chainName) {
+      window?.localStorage.setItem('selected-chain', selectedValue?.chainName);
+    } else {
+      window?.localStorage.removeItem('selected-chain');
+    }
+  };
+
+  const chooseChain = (
+    <ChooseChain
+      chainName={providedChainName}
+      chainInfos={chainOptions}
+      onChange={onChainChange}
+    />
+  );
+
+  const userInfo = username && (
+    <UserInfo username={username} icon={<Astronaut />} />
+  );
+
+  const addressBtn = (
+    <CopyAddressBtn
+      walletStatus={status}
+      connected={<ConnectedShowAddress address={address} isLoading={false} />}
+    />
+  );
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      py="$12"
+      width="100%"
+      attributes={{
+        'data-part-id': 'wallet-section',
+      }}
+    >
+      <Box
+        display="grid"
+        width="$full"
+        maxWidth={{
+          mobile: '100%',
+          tablet: '450px',
+        }}
+        gridTemplateColumns="1fr"
+        rowGap="$4"
+        alignItems="center"
+        justifyContent="center"
+      >
+        {isMultiChain ? (
+          <Box>{chooseChain}</Box>
+        ) : (
+          <Box marginBottom={'$9'}>
+            <ChainCard
+              prettyName={chain?.label || defaultChainName}
+              icon={chain?.icon}
+            />
+          </Box>
+        )}
+
+        {!providedChainName && isMultiChain ? (
+          <ConnectWalletButton buttonText={'Connect Wallet'} isDisabled />
+        ) : (
+          <Box px={6}>
+            <Stack
+              direction="vertical"
+              attributes={{
+                px: '$2',
+                py: '$12',
+                mx: 'auto',
+                maxWidth: '21rem',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: '$lg',
+                backgroundColor:
+                  theme === 'light' ? '$white' : '$blackAlpha400',
+                boxShadow:
+                  theme === 'light'
+                    ? '0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3'
+                    : '0 0 2px #363636, 0 0 8px -2px #4f4f4f',
+              }}
+              space="$8"
+            >
+              {userInfo}
+              {addressBtn}
+
+              <Box
+                width="100%"
+                maxWidth="200px"
+                attributes={{ id: 'connect-button' }}
+              >
+                {connectWalletButton}
+              </Box>
+
+              {connectWalletWarn}
+            </Stack>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/WalletConnect.tsx b/examples/telescope-authz/components/wallet/WalletConnect.tsx
new file mode 100644
index 000000000..408b385e0
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/WalletConnect.tsx
@@ -0,0 +1,243 @@
+import * as React from 'react';
+import {
+  Button,
+  Box,
+  Text,
+  Stack,
+  useColorModeValue,
+} from '@interchain-ui/react';
+import { IoWallet } from 'react-icons/io5';
+import { FiAlertTriangle } from 'react-icons/fi';
+import { WalletStatus } from 'cosmos-kit';
+
+interface IConnectWalletButton {
+  buttonText?: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  onClickConnectBtn?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export const ConnectWalletButton = ({
+  buttonText,
+  isLoading,
+  isDisabled,
+  onClickConnectBtn,
+}: IConnectWalletButton) => {
+  return (
+    <Button
+      fluidWidth
+      size="md"
+      isLoading={isLoading}
+      disabled={isDisabled}
+      onClick={onClickConnectBtn}
+      attributes={{
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: '8px',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          zIndex: '0',
+          margin: '-1px',
+          position: 'absolute',
+          backgroundImage: `linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)`,
+        }}
+      />
+
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        gap="$4"
+        as="span"
+        borderRadius="8px"
+        style={{
+          zIndex: '1',
+        }}
+      >
+        <Box as="span">
+          <IoWallet />
+        </Box>
+
+        <Box as="span">{buttonText ? buttonText : 'Connect Wallet'}</Box>
+      </Box>
+    </Button>
+  );
+};
+
+export const Disconnected = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
+  );
+};
+
+export const Connected = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
+  );
+};
+
+export const Connecting = () => {
+  return <ConnectWalletButton isLoading={true} />;
+};
+
+export const Rejected = ({
+  buttonText,
+  wordOfWarning,
+  onClick,
+}: {
+  buttonText: string;
+  wordOfWarning?: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const bg = useColorModeValue('$orange200', '$orange300');
+
+  return (
+    <Stack direction="vertical">
+      <ConnectWalletButton
+        buttonText={buttonText}
+        isDisabled={false}
+        onClickConnectBtn={onClick}
+      />
+
+      {wordOfWarning && (
+        <Stack
+          direction="horizontal"
+          space="$1"
+          attributes={{
+            borderRadius: '$md',
+            backgroundColor: bg,
+            color: '$text',
+            padding: '$2',
+          }}
+        >
+          <Box display="inline-block">
+            <FiAlertTriangle />
+          </Box>
+
+          <Text fontSize="$sm">
+            <Text as="span" fontWeight="$semibold">
+              Warning:&ensp;
+            </Text>
+
+            {wordOfWarning}
+          </Text>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export const Error = ({
+  buttonText,
+  wordOfWarning,
+  onClick,
+}: {
+  buttonText: string;
+  wordOfWarning?: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const bg = useColorModeValue('$orange200', '$orange300');
+
+  return (
+    <Stack direction="vertical">
+      <ConnectWalletButton
+        buttonText={buttonText}
+        isDisabled={false}
+        onClickConnectBtn={onClick}
+      />
+
+      {wordOfWarning && (
+        <Stack
+          direction="horizontal"
+          space="$1"
+          attributes={{
+            borderRadius: '$md',
+            backgroundColor: bg,
+            color: '$text',
+            padding: '$2',
+          }}
+        >
+          <Box display="inline-block">
+            <FiAlertTriangle />
+          </Box>
+
+          <Text fontSize="$sm">
+            <Text fontWeight="$semibold" as="span">
+              Warning:&ensp;
+            </Text>
+
+            {wordOfWarning}
+          </Text>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export const NotExist = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <ConnectWalletButton
+      buttonText={buttonText}
+      isDisabled={false}
+      onClickConnectBtn={onClick}
+    />
+  );
+};
+
+export const WalletConnectComponent = ({
+  walletStatus,
+  disconnect,
+  connecting,
+  connected,
+  rejected,
+  error,
+  notExist,
+}: {
+  walletStatus: WalletStatus;
+  disconnect: React.ReactNode;
+  connecting: React.ReactNode;
+  connected: React.ReactNode;
+  rejected: React.ReactNode;
+  error: React.ReactNode;
+  notExist: React.ReactNode;
+}) => {
+  switch (walletStatus) {
+    case WalletStatus.Disconnected:
+      return <>{disconnect}</>;
+    case WalletStatus.Connecting:
+      return <>{connecting}</>;
+    case WalletStatus.Connected:
+      return <>{connected}</>;
+    case WalletStatus.Rejected:
+      return <>{rejected}</>;
+    case WalletStatus.Error:
+      return <>{error}</>;
+    case WalletStatus.NotExist:
+      return <>{notExist}</>;
+    default:
+      return <>{disconnect}</>;
+  }
+};
diff --git a/examples/telescope-authz/components/wallet/WarnBlock.tsx b/examples/telescope-authz/components/wallet/WarnBlock.tsx
new file mode 100644
index 000000000..7de4a5ecd
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/WarnBlock.tsx
@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { Box, Text, useColorModeValue } from '@interchain-ui/react';
+import { WalletStatus } from 'cosmos-kit';
+
+export const WarnBlock = ({
+  wordOfWarning,
+  icon,
+}: {
+  wordOfWarning?: string;
+  icon?: ReactNode;
+}) => {
+  return (
+    <Box
+      borderRadius="md"
+      paddingTop="$4"
+      paddingBottom="$4"
+      paddingLeft="$4"
+      paddingRight="$4"
+      backgroundColor={useColorModeValue('$orange200', '$orange300')}
+      color="$text"
+    >
+      <Box
+        display="flex"
+        gap="$4"
+        alignItems="flex-start"
+        justifyContent="center"
+        width="$full"
+        overflowY="scroll"
+        style={{
+          // For Firefox
+          scrollbarWidth: 'auto',
+          scrollbarColor: useColorModeValue(
+            'rgba(0,0,0,0.3) rgba(0,0,0,0.2)',
+            'rgba(255,255,255,0.2) rgba(255,255,255,0.1)'
+          ),
+          // For Chrome and other browsers except Firefox
+          '&::-webkit-scrollbar': {
+            width: '14px',
+            background: useColorModeValue(
+              'rgba(220,220,220,0.1)',
+              'rgba(60,60,60,0.1)'
+            ),
+            borderRadius: '3px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: useColorModeValue(
+              'rgba(0,0,0,0.1)',
+              'rgba(255,255,255,0.1)'
+            ),
+            borderRadius: '10px',
+            border: '3px solid transparent',
+            backgroundClip: 'content-box',
+          },
+        }}
+      >
+        <Box position="sticky" top={0}>
+          {icon}
+        </Box>
+        <Text attributes={{ maxHeight: '40px' }}>{wordOfWarning}</Text>
+      </Box>
+    </Box>
+  );
+};
+
+export const RejectedWarn = ({
+  wordOfWarning,
+  icon,
+}: {
+  wordOfWarning?: string;
+  icon?: ReactNode;
+}) => {
+  return <WarnBlock wordOfWarning={wordOfWarning} icon={icon} />;
+};
+
+export const ConnectStatusWarn = ({
+  walletStatus,
+  rejected,
+  error,
+}: {
+  walletStatus: WalletStatus;
+  rejected: ReactNode;
+  error: ReactNode;
+}) => {
+  switch (walletStatus) {
+    case WalletStatus.Rejected:
+      return <>{rejected}</>;
+    case WalletStatus.Error:
+      return <>{error}</>;
+    default:
+      return <></>;
+  }
+};
diff --git a/examples/telescope-authz/components/wallet/index.ts b/examples/telescope-authz/components/wallet/index.ts
new file mode 100644
index 000000000..7df19835e
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/index.ts
@@ -0,0 +1 @@
+export * from './Wallet';
diff --git a/examples/telescope-authz/pages/index.tsx b/examples/telescope-authz/pages/index.tsx
index 1845bf7c8..aeab8d6cf 100644
--- a/examples/telescope-authz/pages/index.tsx
+++ b/examples/telescope-authz/pages/index.tsx
@@ -1,10 +1,22 @@
-import { Box } from '@interchain-ui/react';
-import { Layout } from '@/components';
+import { useState } from 'react';
+import { Divider } from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+import NoSSR from 'react-no-ssr';
+
+import { Layout, WalletSection } from '@/components';
 
 export default function Home() {
+  const [selectedChain, setSelectedChain] = useState<ChainName>();
+
   return (
     <Layout>
-      <Box maxWidth="$containerMd" mb="$30"></Box>
+      <WalletSection
+        isMultiChain={true}
+        providedChainName={selectedChain}
+        setChainName={setSelectedChain}
+      />
+      <Divider height="0.1px" mt="$12" mb="$17" />
+      <NoSSR></NoSSR>
     </Layout>
   );
 }

From 45e53b29699d077f2390b5b5a947fb169154a70d Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Sun, 28 Jan 2024 01:07:22 +0800
Subject: [PATCH 03/16] feat: add create grant modal

---
 .../components/authz/AuthzSection.tsx         |  46 ++
 .../components/authz/CustomizationField.tsx   |  87 +++
 .../components/authz/GrantModal.tsx           | 207 +++++++
 .../components/authz/GrantsByMe.tsx           |   5 +
 .../components/authz/GrantsToMe.tsx           |   5 +
 .../telescope-authz/components/authz/index.ts |   1 +
 examples/telescope-authz/components/index.tsx |   1 +
 examples/telescope-authz/configs/index.ts     |   1 +
 .../telescope-authz/configs/permissions.ts    |  42 ++
 examples/telescope-authz/package.json         |  22 +-
 examples/telescope-authz/pages/_app.tsx       |   1 +
 examples/telescope-authz/pages/index.tsx      |   5 +-
 yarn.lock                                     | 508 ++++++++++++++++--
 13 files changed, 858 insertions(+), 73 deletions(-)
 create mode 100644 examples/telescope-authz/components/authz/AuthzSection.tsx
 create mode 100644 examples/telescope-authz/components/authz/CustomizationField.tsx
 create mode 100644 examples/telescope-authz/components/authz/GrantModal.tsx
 create mode 100644 examples/telescope-authz/components/authz/GrantsByMe.tsx
 create mode 100644 examples/telescope-authz/components/authz/GrantsToMe.tsx
 create mode 100644 examples/telescope-authz/components/authz/index.ts
 create mode 100644 examples/telescope-authz/configs/permissions.ts

diff --git a/examples/telescope-authz/components/authz/AuthzSection.tsx b/examples/telescope-authz/components/authz/AuthzSection.tsx
new file mode 100644
index 000000000..601693f24
--- /dev/null
+++ b/examples/telescope-authz/components/authz/AuthzSection.tsx
@@ -0,0 +1,46 @@
+import { Box, Button, Tabs } from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+import { useState } from 'react';
+
+import { GrantModal } from './GrantModal';
+import { GrantsByMe } from './GrantsByMe';
+import { GrantsToMe } from './GrantsToMe';
+
+export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <Box mb="$18">
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Tabs
+          tabs={[
+            {
+              label: 'Grants to Me',
+              content: null,
+            },
+            {
+              label: 'Grants by Me',
+              content: null,
+            },
+          ]}
+          activeTab={activeTab}
+          onActiveTabChange={(tabId) => setActiveTab(tabId)}
+          attributes={{ width: '$min' }}
+        />
+        <Button intent="tertiary" onClick={() => setIsOpen(true)}>
+          Create Grant
+        </Button>
+      </Box>
+
+      {activeTab === 0 && <GrantsToMe />}
+      {activeTab === 1 && <GrantsByMe />}
+
+      <GrantModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        chainName={chainName}
+      />
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/authz/CustomizationField.tsx b/examples/telescope-authz/components/authz/CustomizationField.tsx
new file mode 100644
index 000000000..572b3dbd5
--- /dev/null
+++ b/examples/telescope-authz/components/authz/CustomizationField.tsx
@@ -0,0 +1,87 @@
+import { Permission, PermissionId } from '@/configs';
+import { NumberField } from '@interchain-ui/react';
+
+/* --------------SendCustomization-------------- */
+
+type SendCustomizationProps = {
+  value: number | undefined;
+  onChange: (value: string) => void;
+};
+
+const SendCustomization = ({ value, onChange }: SendCustomizationProps) => {
+  return (
+    <NumberField
+      placeholder="Spend Limit (Optional)"
+      value={value}
+      onInput={(e) => {
+        // @ts-ignore
+        onChange(e.target.value);
+      }}
+      formatOptions={{
+        maximumFractionDigits: 6,
+      }}
+    />
+  );
+};
+
+/* ------------DelegateCustomization------------ */
+
+type DelegateCustomizationProps = {
+  value: number | undefined;
+  onChange: (value: string) => void;
+};
+
+const DelegateCustomization = ({
+  value,
+  onChange,
+}: DelegateCustomizationProps) => {
+  return (
+    <NumberField
+      placeholder="Max Tokens (Optional)"
+      value={value}
+      onInput={(e) => {
+        // @ts-ignore
+        onChange(e.target.value);
+      }}
+      formatOptions={{
+        maximumFractionDigits: 6,
+      }}
+    />
+  );
+};
+
+/* --------------CustomizationField------------- */
+
+type CustomizationFieldProps =
+  | {
+      permissionType: typeof Permission['Send'];
+      inputProps: SendCustomizationProps;
+    }
+  | {
+      permissionType: typeof Permission['Delegate'];
+      inputProps: DelegateCustomizationProps;
+    }
+  | {
+      permissionType: PermissionId;
+      inputProps?: never;
+    };
+
+export const CustomizationField = ({
+  permissionType,
+  inputProps,
+}: CustomizationFieldProps): JSX.Element | null => {
+  const fields: Partial<Record<PermissionId, JSX.Element | null>> = {
+    send:
+      permissionType === 'send' ? (
+        <SendCustomization {...(inputProps as SendCustomizationProps)} />
+      ) : null,
+    delegate:
+      permissionType === 'delegate' ? (
+        <DelegateCustomization
+          {...(inputProps as DelegateCustomizationProps)}
+        />
+      ) : null,
+  };
+
+  return fields[permissionType] ?? null;
+};
diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
new file mode 100644
index 000000000..9664702ff
--- /dev/null
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -0,0 +1,207 @@
+import { ChainName } from 'cosmos-kit';
+import {
+  BasicModal,
+  Box,
+  Select,
+  SelectOption,
+  TextField,
+  Item,
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Text,
+  Icon,
+} from '@interchain-ui/react';
+import { useState } from 'react';
+import { IoMdCalendar } from 'react-icons/io';
+import Calendar from 'react-calendar';
+import dayjs from 'dayjs';
+
+import { isPermissionCustomizable, PermissionId, permissions } from '@/configs';
+import { CustomizationField } from './CustomizationField';
+
+interface PermissionItem extends Item {
+  key: PermissionId;
+}
+
+type GrantModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  chainName: ChainName;
+};
+
+export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [showCustomization, setShowCustomization] = useState(false);
+
+  const [granteeAddress, setGranteeAddress] = useState('');
+  const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+  const [selectedPermission, setSelectedPermission] =
+    useState<PermissionItem | null>(null);
+
+  const [sendLimit, setSendLimit] = useState<number | undefined>(undefined);
+  const [delegateLimit, setDelegateLimit] = useState<number | undefined>(
+    undefined
+  );
+
+  const onModalClose = () => {
+    setShowCustomization(false);
+    setGranteeAddress('');
+    setExpiryDate(null);
+    setSelectedPermission(null);
+    setSendLimit(undefined);
+    setDelegateLimit(undefined);
+    onClose();
+  };
+
+  const isCustomizable =
+    selectedPermission && isPermissionCustomizable(selectedPermission.key);
+
+  return (
+    <BasicModal title="Create Grant" isOpen={isOpen} onClose={onModalClose}>
+      <Box
+        width={{ mobile: '100%', tablet: '$containerSm' }}
+        display="flex"
+        flexDirection="column"
+        gap="$8"
+      >
+        <TextField
+          id="grantee-address"
+          value={granteeAddress}
+          onChange={(e) => setGranteeAddress(e.target.value)}
+          label="Grantee address"
+          placeholder="Enter grantee address"
+        />
+
+        <Select
+          label="Permission"
+          placeholder="Select permission"
+          selectedIndex={selectedPermission?.index}
+          onSelectItem={(item) => setSelectedPermission(item as PermissionItem)}
+          defaultSelectedItem={{
+            index: 1,
+            key: permissions[1].id,
+            label: permissions[1].name,
+          }}
+        >
+          {permissions.map(({ id, name }) => (
+            <SelectOption key={id} optionKey={id} label={name}>
+              {name}
+            </SelectOption>
+          ))}
+        </Select>
+
+        <Box
+          display={isCustomizable ? 'flex' : 'none'}
+          gap="$4"
+          justifyContent="flex-end"
+          alignItems="center"
+        >
+          <Text color="$textSecondary" fontWeight="$normal">
+            Customize
+          </Text>
+          <Box
+            width="$10"
+            height="$10"
+            backgroundColor={showCustomization ? '$text' : '$inputBg'}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            borderRadius="$base"
+            cursor="pointer"
+            attributes={{
+              onClick: () => {
+                setShowCustomization((prev) => !prev);
+              },
+            }}
+          >
+            <Icon
+              name="arrowRightRounded"
+              size="$xs"
+              color={showCustomization ? '$white' : '$textSecondary'}
+              attributes={{ transform: 'rotate(90deg)' }}
+            />
+          </Box>
+        </Box>
+
+        <Box display={isCustomizable && showCustomization ? 'block' : 'none'}>
+          {selectedPermission?.key === 'send' && (
+            <CustomizationField
+              permissionType={selectedPermission.key}
+              inputProps={{
+                value: sendLimit,
+                onChange: (val) => {
+                  if (!val) {
+                    setSendLimit(undefined);
+                    return;
+                  }
+                  setSendLimit(Number(val));
+                },
+              }}
+            />
+          )}
+          {selectedPermission?.key === 'delegate' && (
+            <CustomizationField
+              permissionType={selectedPermission.key}
+              inputProps={{
+                value: delegateLimit,
+                onChange: (val) => {
+                  if (!val) {
+                    setDelegateLimit(undefined);
+                    return;
+                  }
+                  setDelegateLimit(Number(val));
+                },
+              }}
+            />
+          )}
+        </Box>
+
+        <Box position="relative">
+          <TextField
+            id="expiry-date"
+            value={expiryDate ? dayjs(expiryDate).format('MM/DD/YYYY') : ''}
+            label="Expiry Date"
+            placeholder="Select expiry date"
+          />
+          <Box position="absolute" bottom="7px" right="10px">
+            <Popover
+              triggerType="click"
+              offset={{ mainAxis: 12 }}
+              isOpen={isCalendarOpen}
+              setIsOpen={setIsCalendarOpen}
+            >
+              <PopoverTrigger>
+                <IoMdCalendar size="26px" cursor="pointer" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <Calendar
+                  locale="en-US"
+                  value={expiryDate}
+                  minDate={new Date()}
+                  onChange={(val) => {
+                    if (Array.isArray(val)) {
+                      setExpiryDate(val[1]);
+                      return;
+                    }
+                    setExpiryDate(val);
+                  }}
+                  onClickDay={() => {
+                    setIsCalendarOpen(false);
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+          </Box>
+        </Box>
+
+        <Box width="$full" mt="$12">
+          <Button intent="tertiary" fluidWidth>
+            Grant
+          </Button>
+        </Box>
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/authz/GrantsByMe.tsx b/examples/telescope-authz/components/authz/GrantsByMe.tsx
new file mode 100644
index 000000000..b9d2fb3a5
--- /dev/null
+++ b/examples/telescope-authz/components/authz/GrantsByMe.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const GrantsByMe = () => {
+  return <div>GrantsByMe</div>;
+};
diff --git a/examples/telescope-authz/components/authz/GrantsToMe.tsx b/examples/telescope-authz/components/authz/GrantsToMe.tsx
new file mode 100644
index 000000000..2b35f271b
--- /dev/null
+++ b/examples/telescope-authz/components/authz/GrantsToMe.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const GrantsToMe = () => {
+  return <div>GrantsToMe</div>;
+};
diff --git a/examples/telescope-authz/components/authz/index.ts b/examples/telescope-authz/components/authz/index.ts
new file mode 100644
index 000000000..50f8ea527
--- /dev/null
+++ b/examples/telescope-authz/components/authz/index.ts
@@ -0,0 +1 @@
+export * from './AuthzSection';
diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index 692a439bd..8a2599b0a 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -1,2 +1,3 @@
+export * from './authz';
 export * from './common';
 export * from './wallet';
diff --git a/examples/telescope-authz/configs/index.ts b/examples/telescope-authz/configs/index.ts
index 2e1983362..64654ed9b 100644
--- a/examples/telescope-authz/configs/index.ts
+++ b/examples/telescope-authz/configs/index.ts
@@ -1,2 +1,3 @@
 export * from './features';
 export * from './defaults';
+export * from './permissions';
diff --git a/examples/telescope-authz/configs/permissions.ts b/examples/telescope-authz/configs/permissions.ts
new file mode 100644
index 000000000..07266a048
--- /dev/null
+++ b/examples/telescope-authz/configs/permissions.ts
@@ -0,0 +1,42 @@
+export const Permission = {
+  Vote: 'vote',
+  Send: 'send',
+  Delegate: 'delegate',
+  ClaimRewards: 'claim-rewards',
+} as const;
+
+export type PermissionId = typeof Permission[keyof typeof Permission];
+
+export type PermissionItem = {
+  id: PermissionId;
+  name: string;
+  isCustomizable: boolean;
+};
+
+export const permissions: PermissionItem[] = [
+  {
+    id: Permission.Vote,
+    name: 'Vote',
+    isCustomizable: false,
+  },
+  {
+    id: Permission.Send,
+    name: 'Send',
+    isCustomizable: true,
+  },
+  {
+    id: Permission.Delegate,
+    name: 'Delegate',
+    isCustomizable: true,
+  },
+  {
+    id: Permission.ClaimRewards,
+    name: 'Claim Rewards',
+    isCustomizable: false,
+  },
+];
+
+export const isPermissionCustomizable = (permissionId: string) => {
+  const permission = permissions.find((p) => p.id === permissionId);
+  return permission?.isCustomizable ?? false;
+};
diff --git a/examples/telescope-authz/package.json b/examples/telescope-authz/package.json
index 9e460835b..f56c13294 100644
--- a/examples/telescope-authz/package.json
+++ b/examples/telescope-authz/package.json
@@ -43,35 +43,25 @@
   },
   "dependencies": {
     "@chain-registry/client": "1.11.0",
-    "@chain-registry/osmosis": "^1.21.0",
     "@chain-registry/types": "0.17.0",
-    "@chakra-ui/icons": "2.0.12",
-    "@chakra-ui/react": "2.5.1",
     "@cosmjs/amino": "0.32.0",
     "@cosmjs/cosmwasm-stargate": "0.32.0",
     "@cosmjs/proto-signing": "0.32.0",
     "@cosmjs/stargate": "0.32.0",
     "@cosmology/lcd": "^0.12.0",
-    "@cosmos-kit/react": "2.10.5",
-    "@emotion/react": "11.10.6",
-    "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "1.20.5",
+    "@cosmos-kit/react": "2.10.8",
+    "@interchain-ui/react": "1.21.3",
     "@tanstack/react-query": "4.16.1",
     "bignumber.js": "9.1.0",
     "chain-registry": "1.20.0",
-    "cosmos-kit": "2.8.0",
-    "chakra-react-select": "^4.7.0",
+    "cosmos-kit": "2.8.4",
+    "dayjs": "1.11.10",
     "fast-fuzzy": "^1.12.0",
-    "framer-motion": "9.0.7",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
     "next": "^13",
-    "osmojs": "^16.5.1",
     "react": "18.2.0",
+    "react-calendar": "4.8.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.4.0",
-    "react-markdown": "^8.0.7",
-    "react-minimal-pie-chart": "^8.4.0"
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@confio/relayer": "0.7.0",
diff --git a/examples/telescope-authz/pages/_app.tsx b/examples/telescope-authz/pages/_app.tsx
index ad7fc8c78..bd1b9050f 100644
--- a/examples/telescope-authz/pages/_app.tsx
+++ b/examples/telescope-authz/pages/_app.tsx
@@ -1,5 +1,6 @@
 import '@interchain-ui/react/styles';
 import '@interchain-ui/react/globalStyles';
+import 'react-calendar/dist/Calendar.css';
 
 import React from 'react';
 import type { AppProps } from 'next/app';
diff --git a/examples/telescope-authz/pages/index.tsx b/examples/telescope-authz/pages/index.tsx
index aeab8d6cf..b79031ff1 100644
--- a/examples/telescope-authz/pages/index.tsx
+++ b/examples/telescope-authz/pages/index.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Divider } from '@interchain-ui/react';
 import { ChainName } from 'cosmos-kit';
-import NoSSR from 'react-no-ssr';
 
-import { Layout, WalletSection } from '@/components';
+import { Layout, WalletSection, AuthzSection } from '@/components';
 
 export default function Home() {
   const [selectedChain, setSelectedChain] = useState<ChainName>();
@@ -16,7 +15,7 @@ export default function Home() {
         setChainName={setSelectedChain}
       />
       <Divider height="0.1px" mt="$12" mb="$17" />
-      <NoSSR></NoSSR>
+      {selectedChain && <AuthzSection chainName={selectedChain} />}
     </Layout>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 71b3e0f3b..733e9c1d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2117,6 +2117,17 @@
     bfs-path "^1.0.2"
     cross-fetch "^3.1.5"
 
+"@chain-registry/client@^1.18.0":
+  version "1.19.0"
+  resolved "https://registry.npmjs.org/@chain-registry/client/-/client-1.19.0.tgz#7f40d194c942e11c413dcfeba1ac63c264e5e142"
+  integrity sha512-Nt25fi5yuo+W26jaMHauWP4on7p8EZuOB7oBgpvl3XSje8EIJtLMnQChKzd/6+J/8fkr1vpp1lFwaIkInh9K2Q==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@chain-registry/types" "^0.18.0"
+    "@chain-registry/utils" "^1.18.0"
+    bfs-path "^1.0.2"
+    cross-fetch "^3.1.5"
+
 "@chain-registry/cosmostation@1.26.0":
   version "1.26.0"
   resolved "https://registry.npmjs.org/@chain-registry/cosmostation/-/cosmostation-1.26.0.tgz#0d3967b8d320168a5c9c7b56b3352dcf3f2945b0"
@@ -2192,6 +2203,13 @@
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+"@chain-registry/types@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@chain-registry/types/-/types-0.18.0.tgz#68d91054a5b36ff621248f2843f3ff62dc9ade7f"
+  integrity sha512-jRFOKOMIAcA5Qp5cXEiAPyXs13WbSP19kvcb8qm5vaRwXvHMufPd/ZxLC80yq/LB62FeZeaVYfsjorLf3M6tTw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 "@chain-registry/utils@1.13.1":
   version "1.13.1"
   resolved "https://registry.npmmirror.com/@chain-registry/utils/-/utils-1.13.1.tgz"
@@ -2242,6 +2260,16 @@
     bignumber.js "9.1.1"
     sha.js "^2.4.11"
 
+"@chain-registry/utils@^1.18.0":
+  version "1.18.0"
+  resolved "https://registry.npmjs.org/@chain-registry/utils/-/utils-1.18.0.tgz#d711efc2660b3b65077a5bee90b45ddc6af2194f"
+  integrity sha512-FAPyP1FN1jr88GfiBWnppe5S1ddgbK9TfwkyKuNSKHlk9Q+fhdC4nPM552bEz76AuFyfv7SFHg3kDuQSgYYZBw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@chain-registry/types" "^0.18.0"
+    bignumber.js "9.1.1"
+    sha.js "^2.4.11"
+
 "@chakra-ui/accordion@2.1.9":
   version "2.1.9"
   resolved "https://registry.npmmirror.com/@chakra-ui/accordion/-/accordion-2.1.9.tgz"
@@ -3538,6 +3566,18 @@
     "@cosmjs/utils" "^0.32.0"
     cosmjs-types "^0.9.0"
 
+"@cosmjs/proto-signing@0.32.2", "@cosmjs/proto-signing@^0.32.0", "@cosmjs/proto-signing@^0.32.2":
+  version "0.32.2"
+  resolved "https://registry.npmmirror.com/@cosmjs/proto-signing/-/proto-signing-0.32.2.tgz#26ed2675978ce24078981f4c15a06c5d6b808f44"
+  integrity sha512-UV4WwkE3W3G3s7wwU9rizNcUEz2g0W8jQZS5J6/3fiN0mRPwtPKQ6EinPN9ASqcAJ7/VQH4/9EPOw7d6XQGnqw==
+  dependencies:
+    "@cosmjs/amino" "^0.32.2"
+    "@cosmjs/crypto" "^0.32.2"
+    "@cosmjs/encoding" "^0.32.2"
+    "@cosmjs/math" "^0.32.2"
+    "@cosmjs/utils" "^0.32.2"
+    cosmjs-types "^0.9.0"
+
 "@cosmjs/proto-signing@^0.31.3":
   version "0.31.3"
   resolved "https://registry.npmjs.org/@cosmjs/proto-signing/-/proto-signing-0.31.3.tgz#20440b7b96fb2cd924256a10e656fd8d4481cdcd"
@@ -3551,18 +3591,6 @@
     cosmjs-types "^0.8.0"
     long "^4.0.0"
 
-"@cosmjs/proto-signing@^0.32.0", "@cosmjs/proto-signing@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.npmmirror.com/@cosmjs/proto-signing/-/proto-signing-0.32.2.tgz#26ed2675978ce24078981f4c15a06c5d6b808f44"
-  integrity sha512-UV4WwkE3W3G3s7wwU9rizNcUEz2g0W8jQZS5J6/3fiN0mRPwtPKQ6EinPN9ASqcAJ7/VQH4/9EPOw7d6XQGnqw==
-  dependencies:
-    "@cosmjs/amino" "^0.32.2"
-    "@cosmjs/crypto" "^0.32.2"
-    "@cosmjs/encoding" "^0.32.2"
-    "@cosmjs/math" "^0.32.2"
-    "@cosmjs/utils" "^0.32.2"
-    cosmjs-types "^0.9.0"
-
 "@cosmjs/socket@^0.29.5":
   version "0.29.5"
   resolved "https://registry.npmmirror.com/@cosmjs/socket/-/socket-0.29.5.tgz"
@@ -4359,6 +4387,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/coin98-extension@^2.7.8":
+  version "2.7.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/coin98-extension/-/coin98-extension-2.7.8.tgz#13eed9c1a74b1d777780f6a9b070c6156ad4c48a"
+  integrity sha512-DrFfR3/BdFe6hgrbczf5YdOToMV4R/fmmnaPnzNbdJpDbzEApOS79+RJBIDk1XgEqCsRjoVocRD39AZtOZ+/8g==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/coin98@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/coin98/-/coin98-2.6.5.tgz#134541b9c93a0feca1c7b727eb6b66c9005c8bfd"
@@ -4366,6 +4402,13 @@
   dependencies:
     "@cosmos-kit/coin98-extension" "^2.7.5"
 
+"@cosmos-kit/coin98@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/coin98/-/coin98-2.6.8.tgz#023f22fa171a41393da7fb6d5a42a9ccdb4ea38c"
+  integrity sha512-ZD6Sh7+jQ776bTI6/YWf/8qt2pD6PiRhDp7MbVPswwgncz8H6mpsb5xPNSm+zabzTka+KLPNVq6cGcCwzamh9A==
+  dependencies:
+    "@cosmos-kit/coin98-extension" "^2.7.8"
+
 "@cosmos-kit/compass-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/compass-extension/-/compass-extension-2.6.5.tgz#a07c70b8b7fe85c909fb18ef7235392a37a37711"
@@ -4374,6 +4417,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/compass-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/compass-extension/-/compass-extension-2.6.8.tgz#de85b315dcf855162d217c499b6ab31d7f3f436b"
+  integrity sha512-nJUsbF5DMosTDFXEzdH07W1Y0GipEzrc2euYM4/7/kihSi3rOmw9grZCbn7Yd1NvUQDdAnNPjhAtWZ5ZAlHeDg==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/compass@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/compass/-/compass-2.6.5.tgz#03d7377b00e6afcfe4aa6fa58bfcb32a0841a5dd"
@@ -4381,6 +4432,13 @@
   dependencies:
     "@cosmos-kit/compass-extension" "^2.6.5"
 
+"@cosmos-kit/compass@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/compass/-/compass-2.6.8.tgz#42c3e4a6f02481073279430217691c9175dd1445"
+  integrity sha512-VgLNmKHXfgGk56bmMUR1bMFGk9D9rw8wRsJxi3mLe9iemPiMFklSDCDxOJY1zZOVQT9Vgf5YCaNxx7LDpmt8+A==
+  dependencies:
+    "@cosmos-kit/compass-extension" "^2.6.8"
+
 "@cosmos-kit/core@^2.8.5":
   version "2.8.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-2.8.5.tgz#4b2acdf8e8d90a780e1d1f4937876a960be192b3"
@@ -4397,6 +4455,23 @@
     events "3.3.0"
     uuid "^9.0.1"
 
+"@cosmos-kit/core@^2.8.8":
+  version "2.8.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-2.8.8.tgz#634e0849fa972efdf1ccd50e6adc033c1c861863"
+  integrity sha512-gM0yyNS4BdHh8Tb0x9o4tEV97HXSHmKKDgjrzVxUnVhxiIaHtGsCvlUAnBc3uDcsm0HF5vhM3gJX8vkk3uitDw==
+  dependencies:
+    "@chain-registry/client" "^1.18.0"
+    "@chain-registry/types" "0.17.0"
+    "@cosmjs/amino" "^0.32.2"
+    "@cosmjs/cosmwasm-stargate" "^0.32.2"
+    "@cosmjs/proto-signing" "^0.32.2"
+    "@cosmjs/stargate" "^0.32.2"
+    "@walletconnect/types" "2.11.0"
+    bowser "2.11.0"
+    cosmjs-types "^0.9.0"
+    events "3.3.0"
+    uuid "^9.0.1"
+
 "@cosmos-kit/cosmostation-extension@^2.7.5":
   version "2.7.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation-extension/-/cosmostation-extension-2.7.5.tgz#a12914ca3b1f2b09c252f8cd04cf1cfd4c896d0c"
@@ -4405,6 +4480,14 @@
     "@chain-registry/cosmostation" "^1.26.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/cosmostation-extension@^2.7.8":
+  version "2.7.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation-extension/-/cosmostation-extension-2.7.8.tgz#2336eea14b9cac9e42690ac248333ba7edecfd03"
+  integrity sha512-XUvOraMwriVIv3QBZLY+FCfyxb+hGdhFmy4w3zo2GRlx+/+jVM4B74hflWjRNZUJ7H4tegGNOYp92cKXymMYMw==
+  dependencies:
+    "@chain-registry/cosmostation" "^1.26.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/cosmostation-mobile@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation-mobile/-/cosmostation-mobile-2.6.5.tgz#1587e66b1292f666d96b966eb6e05bb3ccda9c66"
@@ -4414,6 +4497,15 @@
     "@cosmos-kit/core" "^2.8.5"
     "@cosmos-kit/walletconnect" "^2.5.5"
 
+"@cosmos-kit/cosmostation-mobile@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation-mobile/-/cosmostation-mobile-2.6.8.tgz#02dc795cf4c5e05b752bb39ac138fd3b8092ebed"
+  integrity sha512-GchATnZJ3X265f34CfYYKO5C+KVXOYHHejMXB1PszwK4FPqJ6ixOnswsX8W3ECEmdSAn9g0+4beMmEynnlJXFw==
+  dependencies:
+    "@chain-registry/cosmostation" "1.26.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/walletconnect" "^2.5.8"
+
 "@cosmos-kit/cosmostation@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation/-/cosmostation-2.6.5.tgz#2a22c7871321a8374dd13d4a8aaad5ebb17914ee"
@@ -4422,6 +4514,14 @@
     "@cosmos-kit/cosmostation-extension" "^2.7.5"
     "@cosmos-kit/cosmostation-mobile" "^2.6.5"
 
+"@cosmos-kit/cosmostation@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation/-/cosmostation-2.6.8.tgz#28a1bd108bb5af80f8e0d55ea79bd26e12e39569"
+  integrity sha512-4nXUPpZUfibcFfBLoM3+LgHz+PRkv3Y1e1GlmVQ8brI14lBZvTc/5NHDU7hO9LtsAawAgswWoSac9vFpUXi1ig==
+  dependencies:
+    "@cosmos-kit/cosmostation-extension" "^2.7.8"
+    "@cosmos-kit/cosmostation-mobile" "^2.6.8"
+
 "@cosmos-kit/exodus-extension@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/exodus-extension/-/exodus-extension-2.5.5.tgz#162ec9db03401a592601c243936aec98aee61c49"
@@ -4430,6 +4530,14 @@
     "@cosmos-kit/core" "^2.8.5"
     react-icons "4.4.0"
 
+"@cosmos-kit/exodus-extension@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/exodus-extension/-/exodus-extension-2.5.8.tgz#13034db71e485cd40ede4599e480434a2723bcb5"
+  integrity sha512-ThzO20r9Z49MXznNQdqP3Tiini7t3LrXfYPfR7cOQn0Nobgsu8SgzEh6eK8SaJNnWLornKbl9PJE63jsps2BpA==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+    react-icons "4.4.0"
+
 "@cosmos-kit/exodus@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/exodus/-/exodus-2.5.5.tgz#219449dda518cfecb77005a06ab7fb454eb6e1c1"
@@ -4437,6 +4545,13 @@
   dependencies:
     "@cosmos-kit/exodus-extension" "^2.5.5"
 
+"@cosmos-kit/exodus@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/exodus/-/exodus-2.5.8.tgz#c9111b651b4dd718f3dc2f7310fe1df2ca71b6e4"
+  integrity sha512-lCi/yWGnM8upt5eXKYMZn8yQeHP281eKB8UqfOpKMm/HmqJeykkOAGytue3k7RiSnd/LwTDObUUFbZd5EFi2JQ==
+  dependencies:
+    "@cosmos-kit/exodus-extension" "^2.5.8"
+
 "@cosmos-kit/fin-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/fin-extension/-/fin-extension-2.6.5.tgz#8c652fed5bc8849391634d947848f0d66d4054ae"
@@ -4445,6 +4560,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/fin-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/fin-extension/-/fin-extension-2.6.8.tgz#2599caa7f25b4198465c43afe8e5dab4aa004d84"
+  integrity sha512-BUR89uMrVR9XMPJRf9GqnE4e2Km6msJkmVMc3aH93MRaywGWEVKb7HuWZdZN+LjUTln4OLgQeNYHMqtg8msNTA==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/fin@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/fin/-/fin-2.6.5.tgz#04883dab4b7e60879aa41f11bb61638bd5bb465d"
@@ -4452,6 +4575,13 @@
   dependencies:
     "@cosmos-kit/fin-extension" "^2.6.5"
 
+"@cosmos-kit/fin@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/fin/-/fin-2.6.8.tgz#f466cccbc71a206dea74b147223a74e3c472a665"
+  integrity sha512-atpDQhG1clcEXfo/QBCiE5gcL2sM+4aReKJZ4QE/RLa90R4xpaIGFXnUfQ/+lqxbqKwx1knEGvqZa2XvkTukrA==
+  dependencies:
+    "@cosmos-kit/fin-extension" "^2.6.8"
+
 "@cosmos-kit/frontier-extension@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/frontier-extension/-/frontier-extension-2.5.5.tgz#e43abab05f99561f4b4af74c7337da83af440c5b"
@@ -4459,6 +4589,13 @@
   dependencies:
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/frontier-extension@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/frontier-extension/-/frontier-extension-2.5.8.tgz#01af6fa98b93edd70734274e9d82b0a99a2acc08"
+  integrity sha512-A4RFeatLy/Y4d/n3LapmZiNQe0GNtsgeOd83WF0lBo9cwaMXrtu17tbGnLDwb6bykVNg/56zxyYLAcOZBSOzhg==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/frontier@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/frontier/-/frontier-2.5.5.tgz#c59f5ca880d6ea87f830633935c0f19319e4d1ee"
@@ -4466,6 +4603,13 @@
   dependencies:
     "@cosmos-kit/frontier-extension" "^2.5.5"
 
+"@cosmos-kit/frontier@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/frontier/-/frontier-2.5.8.tgz#376522eaf2dc915e85fcb8db4ef4323998885e8d"
+  integrity sha512-mskAwtx9NP000V+RdW1KROGrhoxcYtv9o70Rus4lT70HKYDvQqCewRaXgKr/uE0I+M1GUfAIqitG8JF1QHSiSg==
+  dependencies:
+    "@cosmos-kit/frontier-extension" "^2.5.8"
+
 "@cosmos-kit/keplr-extension@^2.7.5":
   version "2.7.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/keplr-extension/-/keplr-extension-2.7.5.tgz#992916f46fd607bdcb94cdf14f188b71618a38dc"
@@ -4475,6 +4619,15 @@
     "@cosmos-kit/core" "^2.8.5"
     "@keplr-wallet/types" "^0.12.58"
 
+"@cosmos-kit/keplr-extension@^2.7.8":
+  version "2.7.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/keplr-extension/-/keplr-extension-2.7.8.tgz#1169aaf84c07e7dc1aca901be034d661757c0f32"
+  integrity sha512-SNmgEjPT294Lc/z5mAss+56Bud35+YxjOTTLhAmY8lrjAeIH6iiYpUbXdpY8J8mbqkdQvVs2TvJUDR/0phKhIw==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@keplr-wallet/types" "^0.12.58"
+
 "@cosmos-kit/keplr-mobile@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/keplr-mobile/-/keplr-mobile-2.6.5.tgz#2a8aaff0dab92d950a0df96ba7cb116e4437a101"
@@ -4484,6 +4637,15 @@
     "@cosmos-kit/core" "^2.8.5"
     "@cosmos-kit/walletconnect" "^2.5.5"
 
+"@cosmos-kit/keplr-mobile@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/keplr-mobile/-/keplr-mobile-2.6.8.tgz#c9d5d39e7ebf34578285321467c8361691334306"
+  integrity sha512-Kyb/cxYxqlkkdBaFw067FY8yYHuCr2MjtJ2bgQq6sNXHSKRGvUO7aur6Vb/A1uogpmbhMEka0UFA45HHPgAZhw==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/walletconnect" "^2.5.8"
+
 "@cosmos-kit/keplr@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-2.6.5.tgz#d2e019389b18facad728a32b25649fc03f291a16"
@@ -4492,6 +4654,14 @@
     "@cosmos-kit/keplr-extension" "^2.7.5"
     "@cosmos-kit/keplr-mobile" "^2.6.5"
 
+"@cosmos-kit/keplr@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-2.6.8.tgz#e5d7a728d5ee7f271258f1f0cdfa8f4ca2b40761"
+  integrity sha512-nJ3hVw7sK5w7vhArcEY+HVj1xmYfj8iUltBNawhGcZhN4x17cMhPOsrLagt1NmYof3+SAw7Ww6NrSX0McUMOyw==
+  dependencies:
+    "@cosmos-kit/keplr-extension" "^2.7.8"
+    "@cosmos-kit/keplr-mobile" "^2.6.8"
+
 "@cosmos-kit/leap-extension@^2.7.5":
   version "2.7.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/leap-extension/-/leap-extension-2.7.5.tgz#9b6466a191084cea5d0fa8316069bdc7cd1b9e6f"
@@ -4500,6 +4670,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/leap-extension@^2.7.8":
+  version "2.7.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/leap-extension/-/leap-extension-2.7.8.tgz#4fe98f9662a26500778f7b3873df26ed16b2bd93"
+  integrity sha512-flDsUbJ8na5ye0GY0wFYC0Iv7t9hOXCmLBgdQcb86TaxIZjWMV0sgeU1j7WUZuw83bJFc5wI9S2IXP1m6AkfVQ==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/leap-metamask-cosmos-snap@^0.5.5":
   version "0.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/leap-metamask-cosmos-snap/-/leap-metamask-cosmos-snap-0.5.5.tgz#d4f1d9cc25b6b32ba0cf0a286871246529d14783"
@@ -4510,6 +4688,16 @@
     "@leapwallet/cosmos-snap-provider" "0.1.25"
     "@metamask/providers" "^11.1.1"
 
+"@cosmos-kit/leap-metamask-cosmos-snap@^0.5.8":
+  version "0.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/leap-metamask-cosmos-snap/-/leap-metamask-cosmos-snap-0.5.8.tgz#7207280eb79c931f84cc31ef5c7ab69bc2b9ed9b"
+  integrity sha512-5vy1CfA3ZFlib/qepAeYbgr0rgk4nfFvdJc4lgIwFmOhYVsZvC2+a1rNb1f9V0cuKDsNDLLV/DhUcnrROm1TQQ==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@leapwallet/cosmos-snap-provider" "0.1.25"
+    "@metamask/providers" "^11.1.1"
+
 "@cosmos-kit/leap-mobile@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/leap-mobile/-/leap-mobile-2.6.5.tgz#f1a93b6c6a435789f00b2d7740da05b35712b8e3"
@@ -4519,6 +4707,15 @@
     "@cosmos-kit/core" "^2.8.5"
     "@cosmos-kit/walletconnect" "^2.5.5"
 
+"@cosmos-kit/leap-mobile@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/leap-mobile/-/leap-mobile-2.6.8.tgz#921749155c470280f24cf57049ee3276e321bc5b"
+  integrity sha512-MNapVwhtSQgqFwi08krdY1R/ZhVbzOXc1xisb+zqGDGrsNksrVSQPG/C7soYb3sFa7+veDDpQDL3aa30s01NMg==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/walletconnect" "^2.5.8"
+
 "@cosmos-kit/leap@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/leap/-/leap-2.6.5.tgz#aa1792f384528af4f6c69064624a20fc9a5af697"
@@ -4528,6 +4725,15 @@
     "@cosmos-kit/leap-metamask-cosmos-snap" "^0.5.5"
     "@cosmos-kit/leap-mobile" "^2.6.5"
 
+"@cosmos-kit/leap@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/leap/-/leap-2.6.8.tgz#9836ff7be1038d9513c6db54191f579528bbb092"
+  integrity sha512-5ioVlKa+YqvBVdcEBLCjYLFr8bQgAZlVA74tNIyny+7+69IrZSEbJxPJoOm9i5IMaZuII0AJvThYY0IHR1zN4Q==
+  dependencies:
+    "@cosmos-kit/leap-extension" "^2.7.8"
+    "@cosmos-kit/leap-metamask-cosmos-snap" "^0.5.8"
+    "@cosmos-kit/leap-mobile" "^2.6.8"
+
 "@cosmos-kit/ledger@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/ledger/-/ledger-2.6.5.tgz#05c8563271f8faae4b49caace6f5baa08e319590"
@@ -4538,6 +4744,16 @@
     "@ledgerhq/hw-transport-webhid" "^6.27.15"
     "@ledgerhq/hw-transport-webusb" "^6.27.15"
 
+"@cosmos-kit/ledger@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/ledger/-/ledger-2.6.8.tgz#f4131140b42092cba0ea506fbf809106807866af"
+  integrity sha512-6aFkO7iHpc9im6Ouwm7pXDpbBelqtegqhRUbQUTvoJgTPiy9H4ceH1oXYI/nIxwW6dvisjs8W94W6IlwaKYfeg==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+    "@ledgerhq/hw-app-cosmos" "^6.28.1"
+    "@ledgerhq/hw-transport-webhid" "^6.27.15"
+    "@ledgerhq/hw-transport-webusb" "^6.27.15"
+
 "@cosmos-kit/okxwallet-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/okxwallet-extension/-/okxwallet-extension-2.6.5.tgz#14cbe84ea8fa8bb98d1e618c9521627305733fc4"
@@ -4545,6 +4761,13 @@
   dependencies:
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/okxwallet-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/okxwallet-extension/-/okxwallet-extension-2.6.8.tgz#0ba872819d4c1d86b71ad751920930272794fecb"
+  integrity sha512-c6GBMu0Nh88fbLPylG3zOdGs9xp/tC445Wy70fXO2Ijay06ms/gPi+coqARGpwub7dPAqvDMu1nfcaAqT/IOJg==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/omni-mobile@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/omni-mobile/-/omni-mobile-2.5.5.tgz#bb398093a5ac53d3137227e5055941594c86558c"
@@ -4553,6 +4776,14 @@
     "@cosmos-kit/core" "^2.8.5"
     "@cosmos-kit/walletconnect" "^2.5.5"
 
+"@cosmos-kit/omni-mobile@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/omni-mobile/-/omni-mobile-2.5.8.tgz#b696f7ffdb1a304c5a46d03c0b13afea5ab9638c"
+  integrity sha512-veUFYwoF6SqPkZGPF02kOU3fLova7S8eIZ2qrBpoliLaMMZdHCaqrhdYZqKiA4sAPHLjcQ3rpb15SDbfJddFmw==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/walletconnect" "^2.5.8"
+
 "@cosmos-kit/omni@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/omni/-/omni-2.5.5.tgz#3bec481d59a4a184cd7b21720b1b64ccb9c9c9f9"
@@ -4560,6 +4791,13 @@
   dependencies:
     "@cosmos-kit/omni-mobile" "^2.5.5"
 
+"@cosmos-kit/omni@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/omni/-/omni-2.5.8.tgz#c79739934896cad7c77ede49d0c19ea086d0ab65"
+  integrity sha512-innyul/wgmu1DPyz3Xm2L4C699cRjFN/fAnnLNkPqTyiDc+7q8AGN9np9p6lpUYr9gnXehmu+5eWF9QEon+p8g==
+  dependencies:
+    "@cosmos-kit/omni-mobile" "^2.5.8"
+
 "@cosmos-kit/react-lite@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/react-lite/-/react-lite-2.6.5.tgz#b8a0e37c544635b8578a62dfb02390fe23feca50"
@@ -4568,6 +4806,14 @@
     "@chain-registry/types" "0.17.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/react-lite@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/react-lite/-/react-lite-2.6.8.tgz#9b7860c21f8124aa713e4d1b44bc1b59bb1b49c0"
+  integrity sha512-h2bg4Z/lMXjgzOlBU+Rjl5ywDvOIdICPrKya6QpHPF30hNCYh98iiyZn83HgBGk0QWHwNhJKRJ1cv2jxjeQEIQ==
+  dependencies:
+    "@chain-registry/types" "0.17.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/react@2.10.5":
   version "2.10.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/react/-/react-2.10.5.tgz#fd4c00cf0c2bad8cca176a6f880876d13bc5ae96"
@@ -4578,6 +4824,16 @@
     "@cosmos-kit/react-lite" "^2.6.5"
     "@react-icons/all-files" "^4.1.0"
 
+"@cosmos-kit/react@2.10.8":
+  version "2.10.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/react/-/react-2.10.8.tgz#bc6850d5852646a28660a6cd7c3f8bcb4d9fadcb"
+  integrity sha512-UESlMSEx9IGXRH007YuczotknoVGNQW4VpOtWCuKPVL+HPoMNeAvM4Jcr2gD3wD70HpU678fmR98QNdpzAtQog==
+  dependencies:
+    "@chain-registry/types" "0.17.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/react-lite" "^2.6.8"
+    "@react-icons/all-files" "^4.1.0"
+
 "@cosmos-kit/shell-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/shell-extension/-/shell-extension-2.6.5.tgz#4b31d54c1c8c895326019c2a731ffecaca6afa18"
@@ -4586,6 +4842,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/shell-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/shell-extension/-/shell-extension-2.6.8.tgz#7df9bba0a786555bd7c4e7b548729932617e4b23"
+  integrity sha512-p8vuGdMtcVEYwKGU1HavEBKGm2ox8K/bR5r7nrlSJeumCFXbvaNCGujJlmiU5ETRJsgdSCSRdQmbNWRCpQzglw==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/shell@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/shell/-/shell-2.6.5.tgz#60214b8023a694a4360406091eac6c794e96d5f1"
@@ -4593,6 +4857,13 @@
   dependencies:
     "@cosmos-kit/shell-extension" "^2.6.5"
 
+"@cosmos-kit/shell@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/shell/-/shell-2.6.8.tgz#af1755afe55424df8da8bf7c53f006ca2f8d46de"
+  integrity sha512-TKPIKbZ9XfeWXlOCW3muBko5lpvhfDVlyQ+vs+69tkskMWwggxtXdDi3nsLTvsCxag2bWF19sU9Si31BuEcn0Q==
+  dependencies:
+    "@cosmos-kit/shell-extension" "^2.6.8"
+
 "@cosmos-kit/station-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/station-extension/-/station-extension-2.6.5.tgz#2efbf5b6f00a824bf238c178d0a0f8695b0031e3"
@@ -4604,6 +4875,17 @@
     "@terra-money/station-connector" "^1.0.5"
     "@terra-money/wallet-types" "^3.11.2"
 
+"@cosmos-kit/station-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/station-extension/-/station-extension-2.6.8.tgz#8bab5c42afdd8d078b1b561ace3bd5d03fd52c6d"
+  integrity sha512-7PuqWWAD8U4zuibeLx0X1OwwTvVCpnQKna80OxjZm5TGA3+adOQem98+jv4cDCxV9RwR5k6B3YbqzSpGAqCoNA==
+  dependencies:
+    "@chain-registry/types" "0.17.0"
+    "@cosmos-kit/core" "^2.8.8"
+    "@terra-money/feather.js" "^1.0.8"
+    "@terra-money/station-connector" "^1.0.5"
+    "@terra-money/wallet-types" "^3.11.2"
+
 "@cosmos-kit/station@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/station/-/station-2.5.5.tgz#388b14d156ee8b2b0c7162270d789bfbb85c5435"
@@ -4611,6 +4893,13 @@
   dependencies:
     "@cosmos-kit/station-extension" "^2.6.5"
 
+"@cosmos-kit/station@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/station/-/station-2.5.8.tgz#ada6af087a76c8f205c86820c1225c4390071d9a"
+  integrity sha512-6zfJMB4wu02FQ00IkRijqNN1ttH2A6uZl7y5mUC+Qyh2UHAG866geBZPmQEtt4JNL8lyNVkYfZoq6lwU+tBKrg==
+  dependencies:
+    "@cosmos-kit/station-extension" "^2.6.8"
+
 "@cosmos-kit/trust-mobile@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/trust-mobile/-/trust-mobile-2.5.5.tgz#f507bfd867ec12450add5d79a1abc4c4d5291123"
@@ -4619,6 +4908,14 @@
     "@cosmos-kit/core" "^2.8.5"
     "@cosmos-kit/walletconnect" "^2.5.5"
 
+"@cosmos-kit/trust-mobile@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/trust-mobile/-/trust-mobile-2.5.8.tgz#7c2e2ac99a2c0791b5297b4ff2e8de8b51d3ce92"
+  integrity sha512-SbVZPme1TmzVaWY03b+surFNnxEyKaGYt4QQYb2GZ9GYJKIMKGPOVWsp2ANVxwM1r40a+PQt6HdTnWuQyY3usA==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+    "@cosmos-kit/walletconnect" "^2.5.8"
+
 "@cosmos-kit/trust@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/trust/-/trust-2.5.5.tgz#7cc4f6ef44a078c8cb5d83473538a2335ae8961b"
@@ -4626,6 +4923,13 @@
   dependencies:
     "@cosmos-kit/trust-mobile" "^2.5.5"
 
+"@cosmos-kit/trust@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/trust/-/trust-2.5.8.tgz#7dfc3969d6b60691eb6578ac71fe7f4b74a68ed4"
+  integrity sha512-SxzyAxPa6QMxOP9sVcuAO4Wkd9YyS8t3WF7flmkafW3s9N3E1Yf0jMMk44SODHIHmssH3TmOqojt9j+TrDzajA==
+  dependencies:
+    "@cosmos-kit/trust-mobile" "^2.5.8"
+
 "@cosmos-kit/vectis-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/vectis-extension/-/vectis-extension-2.6.5.tgz#a4bb48dbae04be43710722a7583639fc8449c595"
@@ -4634,6 +4938,14 @@
     "@chain-registry/keplr" "1.28.0"
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/vectis-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/vectis-extension/-/vectis-extension-2.6.8.tgz#0d67a2394a23cf5914f814278580bbcdbd383e48"
+  integrity sha512-2/CHDtBSoKGXN3zndTpVZZmwmE8pgTXth4KG/MapZsI5LIamnzLnkZcp5xDbBOFQJ3uLbHELHxA6fBp33ho+WQ==
+  dependencies:
+    "@chain-registry/keplr" "1.28.0"
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/vectis@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/vectis/-/vectis-2.6.5.tgz#0156104efb7ca8cacf9adf345707188c3a8615f0"
@@ -4641,6 +4953,13 @@
   dependencies:
     "@cosmos-kit/vectis-extension" "^2.6.5"
 
+"@cosmos-kit/vectis@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/vectis/-/vectis-2.6.8.tgz#a76c4757c6781614896e16d4d85661efbbe55093"
+  integrity sha512-Tfbz8DO6hZ3cfmm8c1Zgyyzgywo5ubXYhdjOn8lGvN6Y7cL4qOxDY941ZDWtJNMb3O+kLIszBGsSrPBO6tArPA==
+  dependencies:
+    "@cosmos-kit/vectis-extension" "^2.6.8"
+
 "@cosmos-kit/walletconnect@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/walletconnect/-/walletconnect-2.5.5.tgz#1e8a93c61da7302cfd7746943083be12813e739f"
@@ -4651,6 +4970,17 @@
     "@walletconnect/utils" "^2.9.0"
     events "3.3.0"
 
+"@cosmos-kit/walletconnect@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/walletconnect/-/walletconnect-2.5.8.tgz#d86031bf5bb7997b2df9188fbce740fc54be1067"
+  integrity sha512-k4ookgLGOMy3z/+GCfU6WfOIRFTLB0pu4lwv5fBw10yZXvzeNLWPUNPT8jEe4OF6W6ifcZ+dV7HJt41FiV7zyg==
+  dependencies:
+    "@cosmjs/proto-signing" "0.32.2"
+    "@cosmos-kit/core" "^2.8.8"
+    "@walletconnect/sign-client" "^2.9.0"
+    "@walletconnect/utils" "^2.9.0"
+    events "3.3.0"
+
 "@cosmos-kit/xdefi-extension@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/xdefi-extension/-/xdefi-extension-2.6.5.tgz#87c7793fee59ed0cb3573df3ad3db576004018e1"
@@ -4658,6 +4988,13 @@
   dependencies:
     "@cosmos-kit/core" "^2.8.5"
 
+"@cosmos-kit/xdefi-extension@^2.6.8":
+  version "2.6.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/xdefi-extension/-/xdefi-extension-2.6.8.tgz#24048bc4e56f37443cc64fce05be31dd8d3a6ac9"
+  integrity sha512-dqxk1vc4kEPVrWwOEv1l1HPVoa3ypoBpACXY+5YVNBVwy83VUQklS5LIr5UPbRD3sijLJGLIXWuSM8xRJgjE9g==
+  dependencies:
+    "@cosmos-kit/core" "^2.8.8"
+
 "@cosmos-kit/xdefi@^2.5.5":
   version "2.5.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/xdefi/-/xdefi-2.5.5.tgz#0f67122a83fc61edbc9aa813c59f3fdbb18f76fa"
@@ -4665,6 +5002,13 @@
   dependencies:
     "@cosmos-kit/xdefi-extension" "^2.6.5"
 
+"@cosmos-kit/xdefi@^2.5.8":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@cosmos-kit/xdefi/-/xdefi-2.5.8.tgz#5d181f60df093207fa1b5b24c44038f590cd95cc"
+  integrity sha512-3VCPT26v12nMLBVq+J4muHXluwY15GgiET8ktkODuudmqx6Oe2CMoZs7HCOl90D4MHFYzCj/tRCQBx3tVigXGQ==
+  dependencies:
+    "@cosmos-kit/xdefi-extension" "^2.6.8"
+
 "@cosmostation/extension-client@0.1.15":
   version "0.1.15"
   resolved "https://registry.npmjs.org/@cosmostation/extension-client/-/extension-client-0.1.15.tgz#cdc6d8fce42217704c1c0d5814f0ee7ce27e8dab"
@@ -5899,6 +6243,31 @@
     react-stately "^3.27.1"
     zustand "^4.4.7"
 
+"@interchain-ui/react@1.21.3":
+  version "1.21.3"
+  resolved "https://registry.npmjs.org/@interchain-ui/react/-/react-1.21.3.tgz#38b5bbef23ab629ee07150e676e4c0989e927880"
+  integrity sha512-uwKh3gVO4mJPCfqD053Wpz2OImG8JrM5a7RJx1wnDo+hFnSP9xXjAvDljdJa+ESIzsXF8Dtpmin7igf5mAnEYg==
+  dependencies:
+    "@fastify/deepmerge" "^1.3.0"
+    "@floating-ui/dom" "^1.5.3"
+    "@floating-ui/react" "^0.26.4"
+    "@formkit/auto-animate" "^0.8.1"
+    "@react-aria/utils" "^3.21.1"
+    "@vanilla-extract/css" "^1.14.0"
+    "@vanilla-extract/dynamic" "^2.1.0"
+    "@vanilla-extract/recipes" "^0.5.1"
+    animejs "^3.2.1"
+    bignumber.js "^9.1.1"
+    client-only "^0.0.1"
+    clsx "^1.2.1"
+    copy-to-clipboard "^3.3.3"
+    immer "^9.0.19"
+    lodash "^4.17.21"
+    rainbow-sprinkles "^0.17.1"
+    react-aria "^3.29.1"
+    react-stately "^3.27.1"
+    zustand "^4.4.7"
+
 "@interchain-ui/react@^1.20.4":
   version "1.20.4"
   resolved "https://registry.npmjs.org/@interchain-ui/react/-/react-1.20.4.tgz#9eaf73ad0dc2610cb132b409215f4995cc10a3db"
@@ -9663,6 +10032,13 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash.memoize@^4.1.7":
+  version "4.1.9"
+  resolved "https://registry.npmjs.org/@types/lodash.memoize/-/lodash.memoize-4.1.9.tgz#9f8912d39b6e450c0d342a2b74c99d331bf2016b"
+  integrity sha512-glY1nQuoqX4Ft8Uk+KfJudOD7DQbbEDF6k9XpGncaohW3RW4eSWBlx6AA0fZCrh40tZcQNH4jS/Oc59J6Eq+aw==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.mergewith@4.6.7":
   version "4.6.7"
   resolved "https://registry.npmmirror.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz"
@@ -9769,34 +10145,13 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@18.0.6":
-  version "18.0.6"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz"
-  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@18.0.9":
+"@types/react-dom@18.0.6", "@types/react-dom@18.0.9", "@types/react-dom@^18.0.0", "@types/react-dom@^18.2":
   version "18.0.9"
   resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.0.9.tgz"
   integrity sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.0.0":
-  version "18.0.11"
-  resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.0.11.tgz"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@^18.2":
-  version "18.2.15"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz#921af67f9ee023ac37ea84b1bc0cc40b898ea522"
-  integrity sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-no-ssr@1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@types/react-no-ssr/-/react-no-ssr-1.1.3.tgz#895baced8f49e270289c8ad11be1a4a50328d243"
@@ -9818,16 +10173,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.0.20":
-  version "18.0.20"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.20.tgz"
-  integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.25":
+"@types/react@*", "@types/react@18.0.20", "@types/react@18.0.25", "@types/react@^18.2":
   version "18.0.25"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44"
   integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==
@@ -9836,15 +10182,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^18.2":
-  version "18.2.37"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz#0f03af69e463c0f19a356c2660dbca5d19c44cae"
-  integrity sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
@@ -10309,6 +10646,11 @@
     fast-url-parser "^1.1.3"
     tslib "^2.3.1"
 
+"@wojtekmaj/date-utils@^1.1.3":
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz#c3cd67177ac781cfa5736219d702a55a2aea5f2b"
+  integrity sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==
+
 "@wry/context@^0.7.0":
   version "0.7.3"
   resolved "https://registry.npmmirror.com/@wry/context/-/context-0.7.3.tgz"
@@ -11913,6 +12255,11 @@ clsx@^1.1.1, clsx@^1.2.1:
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 cluster-key-slot@^1.1.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
@@ -12327,6 +12674,28 @@ cosmos-kit@2.8.0:
     "@cosmos-kit/vectis" "^2.6.5"
     "@cosmos-kit/xdefi" "^2.5.5"
 
+cosmos-kit@2.8.4:
+  version "2.8.4"
+  resolved "https://registry.npmjs.org/cosmos-kit/-/cosmos-kit-2.8.4.tgz#24469e570c7a885b8c3841afc568cab1f1e91484"
+  integrity sha512-9Cmxvu0AKOlPInFdTjdLy8IjEb+dk70VaMppHzyjuY+FliAw9O5jMCkhLIlD9KOJSPD3lOk3wlAnSRHnFaQOpA==
+  dependencies:
+    "@cosmos-kit/coin98" "^2.6.8"
+    "@cosmos-kit/compass" "^2.6.8"
+    "@cosmos-kit/cosmostation" "^2.6.8"
+    "@cosmos-kit/exodus" "^2.5.8"
+    "@cosmos-kit/fin" "^2.6.8"
+    "@cosmos-kit/frontier" "^2.5.8"
+    "@cosmos-kit/keplr" "^2.6.8"
+    "@cosmos-kit/leap" "^2.6.8"
+    "@cosmos-kit/ledger" "^2.6.8"
+    "@cosmos-kit/okxwallet-extension" "^2.6.8"
+    "@cosmos-kit/omni" "^2.5.8"
+    "@cosmos-kit/shell" "^2.6.8"
+    "@cosmos-kit/station" "^2.5.8"
+    "@cosmos-kit/trust" "^2.5.8"
+    "@cosmos-kit/vectis" "^2.6.8"
+    "@cosmos-kit/xdefi" "^2.5.8"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -12502,6 +12871,11 @@ dateformat@^3.0.0:
   resolved "https://registry.npmmirror.com/dateformat/-/dateformat-3.0.3.tgz"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+dayjs@1.11.10:
+  version "1.11.10"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 dayjs@1.11.8:
   version "1.11.8"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz"
@@ -14443,6 +14817,14 @@ get-tsconfig@^4.2.0:
   resolved "https://registry.npmmirror.com/get-tsconfig/-/get-tsconfig-4.4.0.tgz"
   integrity sha512-0Gdjo/9+FzsYhXCEFueo2aY1z1tpXrxWZzP7k8ul9qt1U5o8rYJwTJYmaeHdrVosYIVYkOy2iwCJ9FdpocJhPQ==
 
+get-user-locale@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.1.tgz#fc7319429c8a70fac01b3b2a0b08b0c71c1d3fe2"
+  integrity sha512-VEvcsqKYx7zhZYC1CjecrDC5ziPSpl1gSm0qFFJhHSGDrSC+x4+p1KojWC/83QX//j476gFhkVXP/kNUc9q+bQ==
+  dependencies:
+    "@types/lodash.memoize" "^4.1.7"
+    lodash.memoize "^4.1.1"
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz"
@@ -17178,7 +17560,7 @@ lodash.isplainobject@^4.0.6:
   resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz"
   integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
-lodash.memoize@4.x:
+lodash.memoize@4.x, lodash.memoize@^4.1.1:
   version "4.1.2"
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
@@ -19609,6 +19991,17 @@ react-aria@^3.29.1:
     "@react-aria/visually-hidden" "^3.8.7"
     "@react-types/shared" "^3.22.0"
 
+react-calendar@4.8.0:
+  version "4.8.0"
+  resolved "https://registry.npmjs.org/react-calendar/-/react-calendar-4.8.0.tgz#61edbba6d17e7ef8a8012de9143b5e5ff41104c8"
+  integrity sha512-qFgwo+p58sgv1QYMI1oGNaop90eJVKuHTZ3ZgBfrrpUb+9cAexxsKat0sAszgsizPMVo7vOXedV7Lqa0GQGMvA==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.1.3"
+    clsx "^2.0.0"
+    get-user-locale "^2.2.1"
+    prop-types "^15.6.0"
+    warning "^4.0.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz"
@@ -22256,6 +22649,13 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 wasm-ast-types@^0.24.0:
   version "0.24.0"
   resolved "https://registry.npmjs.org/wasm-ast-types/-/wasm-ast-types-0.24.0.tgz"

From 2b07ce0454c117f022959e6196f8246f671f56b9 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Sun, 28 Jan 2024 22:32:01 +0800
Subject: [PATCH 04/16] feat: add GrantCard component

---
 .../components/authz/AuthzSection.tsx         |  11 +-
 .../components/authz/GrantCard.tsx            | 141 ++++++++++++++++++
 .../components/authz/GrantsByMe.tsx           |  29 +++-
 .../components/authz/GrantsToMe.tsx           |  22 ++-
 examples/telescope-authz/next.config.js       |   3 +
 examples/telescope-authz/pages/_app.tsx       |   6 +-
 .../telescope-authz/styles/custom.module.css  |   9 ++
 examples/telescope-authz/utils/index.ts       |   7 +
 8 files changed, 219 insertions(+), 9 deletions(-)
 create mode 100644 examples/telescope-authz/components/authz/GrantCard.tsx
 create mode 100644 examples/telescope-authz/styles/custom.module.css
 create mode 100644 examples/telescope-authz/utils/index.ts

diff --git a/examples/telescope-authz/components/authz/AuthzSection.tsx b/examples/telescope-authz/components/authz/AuthzSection.tsx
index 601693f24..466311e9f 100644
--- a/examples/telescope-authz/components/authz/AuthzSection.tsx
+++ b/examples/telescope-authz/components/authz/AuthzSection.tsx
@@ -12,7 +12,12 @@ export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
 
   return (
     <Box mb="$18">
-      <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb="$16"
+      >
         <Tabs
           tabs={[
             {
@@ -33,8 +38,8 @@ export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
         </Button>
       </Box>
 
-      {activeTab === 0 && <GrantsToMe />}
-      {activeTab === 1 && <GrantsByMe />}
+      {activeTab === 0 && <GrantsToMe grants={[]} />}
+      {activeTab === 1 && <GrantsByMe grants={[{}]} />}
 
       <GrantModal
         isOpen={isOpen}
diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
new file mode 100644
index 000000000..0a48863fe
--- /dev/null
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -0,0 +1,141 @@
+import Image from 'next/image';
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  Text,
+  TextField,
+} from '@interchain-ui/react';
+
+import { getChainLogoUrl } from '@/utils';
+import styles from '@/styles/custom.module.css';
+
+const granteeAddress = 'osmo1qx6kgrla69wmz90tn379p4kaux5prdkuzly2tw';
+
+type GrantCardProps = {
+  permissions: string[];
+};
+
+export const GrantCard = ({ permissions }: GrantCardProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copy = (text: string) => {
+    if (isCopied) return;
+
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 800);
+      })
+      .catch((error) => {
+        console.error('Failed to copy:', error);
+      });
+  };
+
+  return (
+    <Box
+      px="$10"
+      py="$11"
+      backgroundColor="$cardBg"
+      borderRadius="$lg"
+      width="496px"
+    >
+      <Stack space="$4" attributes={{ alignItems: 'center', mb: '$10' }}>
+        <Image
+          alt="chain name"
+          src={getChainLogoUrl('juno')}
+          width="30"
+          height="30"
+          sizes="100vw"
+        />
+        <Text fontWeight="$semibold" fontSize="$lg">
+          Juno
+        </Text>
+      </Stack>
+
+      <Box position="relative" mb="$10">
+        <TextField
+          id="grantee"
+          label="Grantee"
+          value={granteeAddress}
+          inputClassName={styles.customInput}
+        />
+        <Box position="absolute" bottom="$2" right="$2">
+          <IconButton
+            icon={isCopied ? 'checkLine' : 'copy'}
+            size="sm"
+            intent="secondary"
+            iconSize={isCopied ? '$xl' : '$md'}
+            onClick={() => copy(granteeAddress)}
+          />
+        </Box>
+      </Box>
+
+      <Text
+        color="$textSecondary"
+        fontSize="$sm"
+        fontWeight="$semibold"
+        lineHeight="$normal"
+        attributes={{ mb: '$6' }}
+      >
+        Permissions
+      </Text>
+
+      <Box display="flex" gap="$6" flexWrap="wrap" mb="$12">
+        {permissions.map((permission) => (
+          <PermissionItem
+            key={permission}
+            name={permission}
+            onRevoke={() => {}}
+          />
+        ))}
+      </Box>
+
+      <Button intent="tertiary" fluidWidth>
+        View Details
+      </Button>
+    </Box>
+  );
+};
+
+type PermissionItemProps = {
+  name: string;
+  onRevoke: () => void;
+};
+
+const PermissionItem = ({ name, onRevoke }: PermissionItemProps) => {
+  return (
+    <Box
+      width="$fit"
+      py="$3"
+      pl="$6"
+      pr="$4"
+      backgroundColor="$inputBg"
+      borderRadius="$base"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap="$2"
+    >
+      <Text
+        color="$textSecondary"
+        fontSize="$md"
+        fontWeight="$semibold"
+        lineHeight="$normal"
+      >
+        {name}
+      </Text>
+      <IconButton
+        className={styles.customIconButton}
+        icon="close"
+        iconSize="$xl"
+        intent="secondary"
+        size="xs"
+        onClick={onRevoke}
+      />
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/authz/GrantsByMe.tsx b/examples/telescope-authz/components/authz/GrantsByMe.tsx
index b9d2fb3a5..b558a1a5d 100644
--- a/examples/telescope-authz/components/authz/GrantsByMe.tsx
+++ b/examples/telescope-authz/components/authz/GrantsByMe.tsx
@@ -1,5 +1,28 @@
-import React from 'react';
+import { Box, Text } from '@interchain-ui/react';
+import { GrantCard } from './GrantCard';
 
-export const GrantsByMe = () => {
-  return <div>GrantsByMe</div>;
+type GrantsByMeProps = {
+  grants: any[];
+};
+
+export const GrantsByMe = ({ grants }: GrantsByMeProps) => {
+  if (grants.length === 0) {
+    return (
+      <Text
+        fontSize="$lg"
+        color="$textSecondary"
+        fontWeight="$semibold"
+        textAlign="center"
+        attributes={{ my: '$28' }}
+      >
+        You haven't granted any permission yet
+      </Text>
+    );
+  }
+
+  return (
+    <Box width="$full">
+      <GrantCard permissions={['Send', 'Vote', 'Delegate']} />
+    </Box>
+  );
 };
diff --git a/examples/telescope-authz/components/authz/GrantsToMe.tsx b/examples/telescope-authz/components/authz/GrantsToMe.tsx
index 2b35f271b..512510933 100644
--- a/examples/telescope-authz/components/authz/GrantsToMe.tsx
+++ b/examples/telescope-authz/components/authz/GrantsToMe.tsx
@@ -1,5 +1,23 @@
-import React from 'react';
+import { Box, Text } from '@interchain-ui/react';
+
+type GrantsToMeProps = {
+  grants: any[];
+};
+
+export const GrantsToMe = ({ grants }: GrantsToMeProps) => {
+  if (grants.length === 0) {
+    return (
+      <Text
+        fontSize="$lg"
+        color="$textSecondary"
+        fontWeight="$semibold"
+        textAlign="center"
+        attributes={{ my: '$28' }}
+      >
+        You don't have any grants
+      </Text>
+    );
+  }
 
-export const GrantsToMe = () => {
   return <div>GrantsToMe</div>;
 };
diff --git a/examples/telescope-authz/next.config.js b/examples/telescope-authz/next.config.js
index 3d3bc9990..76756d4a4 100644
--- a/examples/telescope-authz/next.config.js
+++ b/examples/telescope-authz/next.config.js
@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  images: {
+    domains: ['raw.githubusercontent.com'],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/examples/telescope-authz/pages/_app.tsx b/examples/telescope-authz/pages/_app.tsx
index bd1b9050f..5a6a6bdf3 100644
--- a/examples/telescope-authz/pages/_app.tsx
+++ b/examples/telescope-authz/pages/_app.tsx
@@ -33,9 +33,13 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
   const { themeClass } = useTheme();
 
   const signerOptions: SignerOptions = {
-    signingStargate: (chain) => {
+    signingStargate: (_chain) => {
       let gasPrice;
       try {
+        const chain =
+          typeof _chain === 'string'
+            ? chains.find(({ chain_name }) => chain_name === _chain)!
+            : _chain;
         const feeToken = chain.fees?.fee_tokens[0];
         const fee = `${feeToken?.average_gas_price || 0.025}${feeToken?.denom}`;
         gasPrice = GasPrice.fromString(fee);
diff --git a/examples/telescope-authz/styles/custom.module.css b/examples/telescope-authz/styles/custom.module.css
new file mode 100644
index 000000000..e2866b713
--- /dev/null
+++ b/examples/telescope-authz/styles/custom.module.css
@@ -0,0 +1,9 @@
+.customInput {
+  background-color: #eef2f8;
+  color: #697584;
+}
+
+.customIconButton {
+  border-radius: 100%;
+  transform: scale(0.9);
+}
diff --git a/examples/telescope-authz/utils/index.ts b/examples/telescope-authz/utils/index.ts
new file mode 100644
index 000000000..8bd694906
--- /dev/null
+++ b/examples/telescope-authz/utils/index.ts
@@ -0,0 +1,7 @@
+import { assets } from 'chain-registry';
+
+export const getChainLogoUrl = (chainName: string): string => {
+  const asset = assets.find(({ chain_name }) => chain_name === chainName)
+    ?.assets?.[0];
+  return Object.values(asset?.logo_URIs || {})?.[0] || '';
+};

From d07f863e567f00baa3ce8dd40251668704f55496 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 29 Jan 2024 14:48:32 +0800
Subject: [PATCH 05/16] fix: chain dropdown doesn't show chain names

---
 .../components/wallet/AddressCard.tsx         | 116 -------
 .../components/wallet/Chain.tsx               |  34 ++
 .../components/wallet/ChainCard.tsx           |  49 ---
 .../components/wallet/ChooseChain.tsx         |  76 -----
 .../components/wallet/Connect.tsx             |  60 ++++
 .../components/wallet/User.tsx                |  19 ++
 .../components/wallet/UserInfo.tsx            |  47 ---
 .../components/wallet/Wallet.tsx              | 322 ++++++------------
 .../components/wallet/WalletConnect.tsx       | 243 -------------
 .../components/wallet/WarnBlock.tsx           |  92 -----
 .../components/wallet/Warning.tsx             |  32 ++
 examples/telescope-authz/pages/index.tsx      |   8 +-
 examples/telescope-authz/utils/index.ts       |   7 +-
 yarn.lock                                     |   8 +-
 14 files changed, 260 insertions(+), 853 deletions(-)
 delete mode 100644 examples/telescope-authz/components/wallet/AddressCard.tsx
 create mode 100644 examples/telescope-authz/components/wallet/Chain.tsx
 delete mode 100644 examples/telescope-authz/components/wallet/ChainCard.tsx
 delete mode 100644 examples/telescope-authz/components/wallet/ChooseChain.tsx
 create mode 100644 examples/telescope-authz/components/wallet/Connect.tsx
 create mode 100644 examples/telescope-authz/components/wallet/User.tsx
 delete mode 100644 examples/telescope-authz/components/wallet/UserInfo.tsx
 delete mode 100644 examples/telescope-authz/components/wallet/WalletConnect.tsx
 delete mode 100644 examples/telescope-authz/components/wallet/WarnBlock.tsx
 create mode 100644 examples/telescope-authz/components/wallet/Warning.tsx

diff --git a/examples/telescope-authz/components/wallet/AddressCard.tsx b/examples/telescope-authz/components/wallet/AddressCard.tsx
deleted file mode 100644
index 81ca1feda..000000000
--- a/examples/telescope-authz/components/wallet/AddressCard.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import Image from 'next/image';
-import { Box, ClipboardCopyText, Stack } from '@interchain-ui/react';
-import { WalletStatus } from 'cosmos-kit';
-import React, { ReactNode, useEffect, useState } from 'react';
-
-const SIZES = {
-  lg: {
-    height: 32,
-    walletImageSize: 144,
-  },
-  md: {
-    height: 24,
-    walletImageSize: 96,
-  },
-  sm: {
-    height: 20,
-    walletImageSize: 64,
-  },
-};
-
-type CopyAddressType = {
-  address?: string;
-  walletIcon?: string;
-  isLoading?: boolean;
-  maxDisplayLength?: number;
-  size?: keyof typeof SIZES;
-};
-
-export const ConnectedShowAddress = ({
-  address = '',
-  walletIcon,
-  isLoading,
-  size = 'md',
-  maxDisplayLength,
-}: CopyAddressType) => {
-  const [displayAddress, setDisplayAddress] = useState<string>('');
-  const defaultMaxLength = {
-    lg: 14,
-    md: 16,
-    sm: 18,
-  };
-
-  useEffect(() => {
-    if (!address) setDisplayAddress('address not identified yet');
-    if (address && maxDisplayLength)
-      setDisplayAddress(stringTruncateFromCenter(address, maxDisplayLength));
-    if (address && !maxDisplayLength)
-      setDisplayAddress(
-        stringTruncateFromCenter(
-          address,
-          defaultMaxLength[size as keyof typeof defaultMaxLength]
-        )
-      );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [address]);
-
-  const walletImgDimension = `${SIZES[size as keyof typeof SIZES].walletImageSize
-    }px`;
-
-  const chainIcon =
-    address && walletIcon ? (
-      <Box
-        borderRadius="$full"
-        width="100%"
-        height="100%"
-        minWidth={walletImgDimension}
-        minHeight={walletImgDimension}
-        maxWidth={walletImgDimension}
-        maxHeight={walletImgDimension}
-        marginRight="$4"
-        opacity={0.85}
-      >
-        <Image src={walletIcon} alt={displayAddress} />
-      </Box>
-    ) : null;
-
-  return (
-    <Stack direction="vertical">
-      {chainIcon}
-      <ClipboardCopyText
-        text={address}
-        truncate="middle"
-        midTruncateLimit="md"
-      />
-    </Stack>
-  );
-};
-
-export const CopyAddressBtn = ({
-  walletStatus,
-  connected,
-}: {
-  walletStatus: WalletStatus;
-  connected: ReactNode;
-}) => {
-  switch (walletStatus) {
-    case WalletStatus.Connected:
-      return <>{connected}</>;
-    default:
-      return <></>;
-  }
-};
-
-function stringTruncateFromCenter(str: string, maxLength: number) {
-  const midChar = '…'; // character to insert into the center of the result
-
-  if (str.length <= maxLength) return str;
-
-  // length of beginning part
-  const left = Math.ceil(maxLength / 2);
-
-  // start index of ending part
-  const right = str.length - Math.floor(maxLength / 2) + 1;
-
-  return str.substring(0, left) + midChar + str.substring(right);
-}
diff --git a/examples/telescope-authz/components/wallet/Chain.tsx b/examples/telescope-authz/components/wallet/Chain.tsx
new file mode 100644
index 000000000..178e0133b
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/Chain.tsx
@@ -0,0 +1,34 @@
+import { Chain as TChain } from '@chain-registry/types';
+import { ChangeChainCombobox } from '@interchain-ui/react';
+import { getChainLogoFromChain } from '@/utils';
+
+export type ChainProps = {
+  name: string;
+  chains: TChain[];
+  onChainChange?: (chainName?: string) => void;
+};
+
+export function Chain({
+  name,
+  chains = [],
+  onChainChange = () => {},
+}: ChainProps) {
+  const options = chains.map((chain) => ({
+    label: chain.pretty_name,
+    value: chain.chain_name,
+    iconUrl: getChainLogoFromChain(chain),
+  }));
+
+  const value = options.find((chain) => chain.value === name)!;
+
+  return (
+    <ChangeChainCombobox
+      size="md"
+      maxHeight={360}
+      options={options}
+      valueItem={value}
+      appearance="bold"
+      onItemSelected={(option) => onChainChange(option?.value)}
+    />
+  );
+}
diff --git a/examples/telescope-authz/components/wallet/ChainCard.tsx b/examples/telescope-authz/components/wallet/ChainCard.tsx
deleted file mode 100644
index 7ac166cbe..000000000
--- a/examples/telescope-authz/components/wallet/ChainCard.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Image from 'next/image';
-import { Text, Box, useTheme } from '@interchain-ui/react';
-
-interface IChainCard {
-  prettyName: string;
-  icon?: string;
-}
-
-export const ChainCard = (props: IChainCard) => {
-  const { theme } = useTheme();
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      gap="$4"
-      overflow="hidden"
-      wordBreak="break-word"
-      color={theme === 'light' ? '$blackAlpha800' : '$whiteAlpha800'}
-      width="100%"
-    >
-      <Box
-        minWidth="$10"
-        minHeight="$10"
-        maxWidth="$10"
-        maxHeight="$10"
-        width="100%"
-        height="100%"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor={theme === 'light' ? '$blackAlpha200' : '$whiteAlpha200'}
-        border="1px solid"
-        borderRadius="$full"
-        overflow="hidden"
-      >
-        <Image
-          width={24}
-          height={24}
-          alt="chain icon"
-          src={props.icon ?? 'https://dummyimage.com/150/9e9e9e/ffffff&text=☒'}
-        />
-      </Box>
-
-      <Text fontSize="$xl" fontWeight="$semibold">
-        {props.prettyName}
-      </Text>
-    </Box>
-  );
-};
diff --git a/examples/telescope-authz/components/wallet/ChooseChain.tsx b/examples/telescope-authz/components/wallet/ChooseChain.tsx
deleted file mode 100644
index e8538fe16..000000000
--- a/examples/telescope-authz/components/wallet/ChooseChain.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { Box, ChangeChainCombobox } from '@interchain-ui/react';
-
-export interface ChainInfo {
-  chainName: string;
-  chainRoute?: string;
-  label: string;
-  value: string;
-  icon?: string;
-  disabled?: boolean;
-}
-
-type ComboboxItem = {
-  iconUrl?: string;
-  chainName: string;
-};
-
-export interface ChooseChainProps {
-  chainName?: string;
-  chainInfos: ChainInfo[];
-  onChange: (selectedItem: ComboboxItem | null) => void;
-}
-
-export const ChooseChain = (props: ChooseChainProps) => {
-  const { chainName, chainInfos, onChange } = props;
-
-  const [selectedChain, setSelectedChain] = React.useState<ComboboxItem | null>(
-    () => {
-      const found = chainInfos.find((item) => item.chainName === chainName);
-      return found
-        ? {
-            iconUrl: found.icon,
-            chainName: found.chainName,
-          }
-        : null;
-    }
-  );
-
-  const options = React.useMemo(
-    () =>
-      chainInfos.map((item) => ({
-        iconUrl: item.icon,
-        chainName: item.chainName,
-      })),
-    [chainInfos]
-  );
-
-  React.useEffect(() => {
-    if (chainName && options.length > 0) {
-      const selectedOption = options.filter(
-        (options) => options.chainName === chainName
-      )[0];
-
-      setSelectedChain(selectedOption ?? null);
-    }
-
-    if (!chainName) {
-      setSelectedChain(null);
-    }
-  }, [options, chainName]);
-
-  return (
-    <Box maxWidth="350px" marginX="auto" py="$4">
-      <ChangeChainCombobox
-        maxHeight={350}
-        valueItem={selectedChain ? selectedChain : undefined}
-        appearance="bold"
-        onItemSelected={(item: ComboboxItem | null) => {
-          setSelectedChain(item);
-          onChange(item);
-        }}
-        options={options}
-      />
-    </Box>
-  );
-};
diff --git a/examples/telescope-authz/components/wallet/Connect.tsx b/examples/telescope-authz/components/wallet/Connect.tsx
new file mode 100644
index 000000000..336cd2636
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/Connect.tsx
@@ -0,0 +1,60 @@
+import { MouseEventHandler } from 'react';
+import { Button as UIButton, IconName } from '@interchain-ui/react';
+
+export type ButtonProps =  {
+  text?: string;
+  icon?: IconName;
+  loading?: boolean;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type ConnectProps = Pick<ButtonProps, 'text' | 'loading' | 'onClick'>;
+
+function noop() {}
+
+export function Button({
+  text,
+  icon,
+  loading,
+  disabled,
+  onClick = noop
+}: ButtonProps) {
+  return (
+    <UIButton
+      onClick={onClick}
+      leftIcon={icon}
+      disabled={disabled}
+      isLoading={loading}
+      domAttributes={{
+        style: {
+          flex: 1,
+          backgroundImage: 'linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)'
+        }
+      }}
+    >
+      {text}
+    </UIButton>
+  );
+};
+
+export const ButtonConnect = ({ text = 'Connect Wallet', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
+
+export const ButtonConnected = ({ text = 'My Wallet', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
+
+export const ButtonDisconnected = ({ text = 'Connect Wallet', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
+
+export const ButtonConnecting = ({ text = 'Connecting ...', loading = true }: ConnectProps) =>
+  <Button text={text} loading={loading} />
+
+export const ButtonRejected = ({ text = 'Reconnect', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
+
+export const ButtonError = ({ text = 'Change Wallet', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
+
+export const ButtonNotExist = ({ text = 'Install Wallet', onClick = noop }: ConnectProps) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />
\ No newline at end of file
diff --git a/examples/telescope-authz/components/wallet/User.tsx b/examples/telescope-authz/components/wallet/User.tsx
new file mode 100644
index 000000000..351a98958
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/User.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Box, Text, Stack, useColorModeValue } from '@interchain-ui/react';
+import { Astronaut } from './Astronaut';
+
+export type UserProps = {
+  name: string;
+  icon?: ReactNode;
+}
+
+export function User({ name, icon = <Astronaut /> }: UserProps) {
+  return <Stack direction="vertical">
+    <Box width="$19" height="$19" mx="auto" borderRadius="$full">
+      {icon}
+    </Box>
+    <Box textAlign="center" py="$4" mb="$6">
+      <Text color={useColorModeValue("$gray700", "$white")} fontSize="$xl" fontWeight="$medium">{name}</Text>
+    </Box>
+  </Stack>
+}
\ No newline at end of file
diff --git a/examples/telescope-authz/components/wallet/UserInfo.tsx b/examples/telescope-authz/components/wallet/UserInfo.tsx
deleted file mode 100644
index 4f07c95bb..000000000
--- a/examples/telescope-authz/components/wallet/UserInfo.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { Text, Stack, Box } from '@interchain-ui/react';
-
-interface IUserInfo {
-  walletIcon?: string;
-  username?: string;
-  icon?: React.ReactNode;
-}
-
-export const UserInfo = ({ username, icon }: IUserInfo) => {
-  return (
-    <Stack
-      direction="vertical"
-      space={1}
-      attributes={{
-        alignItems: 'center',
-      }}
-    >
-      {username && (
-        <>
-          <Box
-            display={icon ? 'block' : 'none'}
-            width={{
-              mobile: '$16',
-              tablet: '$19',
-            }}
-            height={{
-              mobile: '$16',
-              tablet: '$19',
-            }}
-            borderRadius="$full"
-            overflow="hidden"
-          >
-            {icon}
-          </Box>
-
-          <Text
-            fontSize={{ mobile: '$sm', tablet: '$xl' }}
-            fontWeight="$semibold"
-          >
-            {username}
-          </Text>
-        </>
-      )}
-    </Stack>
-  );
-};
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
index 19681347c..ea8a958db 100644
--- a/examples/telescope-authz/components/wallet/Wallet.tsx
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -1,235 +1,119 @@
-import { useChain, useManager } from '@cosmos-kit/react';
-import { Box, Stack, useTheme } from '@interchain-ui/react';
-import { MouseEventHandler, useEffect, useMemo } from 'react';
-import { FiAlertTriangle } from 'react-icons/fi';
-
-import { ChainName } from 'cosmos-kit';
-import { defaultChainName } from '@/configs';
+import { useEffect } from 'react';
 import {
-  Connected,
-  Connecting,
-  Disconnected,
-  NotExist,
-  Error,
-  Rejected,
-  WalletConnectComponent,
-  ConnectWalletButton,
-} from './WalletConnect';
-import { ConnectStatusWarn, RejectedWarn } from './WarnBlock';
-import { ChooseChain, ChooseChainProps } from './ChooseChain';
-import { ConnectedShowAddress, CopyAddressBtn } from './AddressCard';
-import { UserInfo } from './UserInfo';
-import { Astronaut } from './Astronaut';
-import { ChainCard } from './ChainCard';
-
-export interface WalletSectionProps {
-  isMultiChain: boolean;
-  providedChainName?: ChainName;
-  setChainName?: (chainName: ChainName | undefined) => void;
-}
+  Box,
+  ClipboardCopyText,
+  Stack,
+  useColorModeValue,
+} from '@interchain-ui/react';
+import { WalletStatus } from '@cosmos-kit/core';
+import { useChain } from '@cosmos-kit/react';
+import { chains } from 'chain-registry';
+import { User } from './User';
+import { Chain } from './Chain';
+import { Warning } from './Warning';
+import {
+  ButtonConnect,
+  ButtonConnected,
+  ButtonConnecting,
+  ButtonDisconnected,
+  ButtonError,
+  ButtonNotExist,
+  ButtonRejected,
+} from './Connect';
+
+export const CHAIN_NAME = 'cosmoshub';
+export const CHAIN_NAME_STORAGE_KEY = 'selected-chain';
+
+export type WalletProps = {
+  chainName?: string;
+  onChainChange?: (chainName?: string) => void;
+};
 
-export const WalletSection = ({
-  isMultiChain,
-  providedChainName,
-  setChainName,
-}: WalletSectionProps) => {
-  const { chainRecords, getChainLogo } = useManager();
+export function Wallet({
+  chainName = CHAIN_NAME,
+  onChainChange = () => {},
+}: WalletProps) {
   const {
-    connect,
-    openView,
+    chain,
     status,
+    wallet,
     username,
     address,
     message,
-    wallet,
-    chain: chainInfo,
-  } = useChain(providedChainName || defaultChainName);
-
-  const { theme } = useTheme();
-
-  const chain = {
-    chainName: defaultChainName,
-    label: chainInfo.pretty_name,
-    value: defaultChainName,
-    icon: getChainLogo(defaultChainName),
-  };
-
-  const chainOptions = useMemo(
-    () =>
-      chainRecords.map((chainRecord) => {
-        return {
-          chainName: chainRecord?.name,
-          label: chainRecord?.chain.pretty_name,
-          value: chainRecord?.name,
-          icon: getChainLogo(chainRecord.name),
-        };
-      }),
-    [chainRecords, getChainLogo]
-  );
-
-  // Events
-  const onClickConnect: MouseEventHandler = async (e) => {
-    e.preventDefault();
-    await connect();
-  };
-
-  const onClickOpenView: MouseEventHandler = (e) => {
-    e.preventDefault();
-    openView();
-  };
-
-  // Components
-  const connectWalletButton = (
-    <WalletConnectComponent
-      walletStatus={status}
-      disconnect={
-        <Disconnected buttonText="Connect Wallet" onClick={onClickConnect} />
-      }
-      connecting={<Connecting />}
-      connected={
-        <Connected buttonText={'My Wallet'} onClick={onClickOpenView} />
-      }
-      rejected={<Rejected buttonText="Reconnect" onClick={onClickConnect} />}
-      error={<Error buttonText="Change Wallet" onClick={onClickOpenView} />}
-      notExist={
-        <NotExist buttonText="Install Wallet" onClick={onClickOpenView} />
-      }
-    />
-  );
-
-  const connectWalletWarn = message ? (
-    <ConnectStatusWarn
-      walletStatus={status}
-      rejected={
-        <RejectedWarn
-          icon={
-            <Box mt="$2">
-              <FiAlertTriangle />
-            </Box>
-          }
-          wordOfWarning={`${wallet?.prettyName}: ${message}`}
-        />
-      }
-      error={
-        <RejectedWarn
-          icon={
-            <Box mt="$2">
-              <FiAlertTriangle />
-            </Box>
-          }
-          wordOfWarning={`${wallet?.prettyName}: ${message}`}
-        />
-      }
-    />
-  ) : null;
+    connect,
+    openView,
+  } = useChain(chainName);
+
+  const ConnectButton = {
+    [WalletStatus.Connected]: <ButtonConnected onClick={openView} />,
+    [WalletStatus.Connecting]: <ButtonConnecting />,
+    [WalletStatus.Disconnected]: <ButtonDisconnected onClick={connect} />,
+    [WalletStatus.Error]: <ButtonError onClick={openView} />,
+    [WalletStatus.Rejected]: <ButtonRejected onClick={connect} />,
+    [WalletStatus.NotExist]: <ButtonNotExist onClick={openView} />,
+  }[status] || <ButtonConnect onClick={connect} />;
+
+  function handleChainChange(chainName?: string) {
+    if (chainName) {
+      onChainChange(chainName);
+      localStorage.setItem(CHAIN_NAME_STORAGE_KEY, chainName!);
+    }
+  }
 
   useEffect(() => {
-    setChainName?.(
-      window.localStorage.getItem('selected-chain') || defaultChainName
-    );
-  }, [setChainName]);
-
-  const onChainChange: ChooseChainProps['onChange'] = async (selectedValue) => {
-    setChainName?.(selectedValue?.chainName);
-    if (selectedValue?.chainName) {
-      window?.localStorage.setItem('selected-chain', selectedValue?.chainName);
-    } else {
-      window?.localStorage.removeItem('selected-chain');
+    const selected = localStorage.getItem(CHAIN_NAME_STORAGE_KEY);
+    if (selected && selected !== chainName) {
+      onChainChange(selected);
     }
-  };
-
-  const chooseChain = (
-    <ChooseChain
-      chainName={providedChainName}
-      chainInfos={chainOptions}
-      onChange={onChainChange}
-    />
-  );
-
-  const userInfo = username && (
-    <UserInfo username={username} icon={<Astronaut />} />
-  );
-
-  const addressBtn = (
-    <CopyAddressBtn
-      walletStatus={status}
-      connected={<ConnectedShowAddress address={address} isLoading={false} />}
-    />
-  );
+  }, []);
 
   return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      py="$12"
-      width="100%"
-      attributes={{
-        'data-part-id': 'wallet-section',
-      }}
-    >
-      <Box
-        display="grid"
-        width="$full"
-        maxWidth={{
-          mobile: '100%',
-          tablet: '450px',
+    <Box py="$16">
+      <Box mx="auto" maxWidth="28rem" attributes={{ mb: '$12' }}>
+        <Chain
+          name={chain.chain_name}
+          chains={chains}
+          onChainChange={handleChainChange}
+        />
+      </Box>
+      <Stack
+        direction="vertical"
+        attributes={{
+          mx: 'auto',
+          px: '$8',
+          py: '$15',
+          maxWidth: '21rem',
+          borderRadius: '$lg',
+          justifyContent: 'center',
+          backgroundColor: useColorModeValue('$white', '$blackAlpha500'),
+          boxShadow: useColorModeValue(
+            '0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3',
+            '0 0 2px #363636, 0 0 8px -2px #4f4f4f'
+          ),
         }}
-        gridTemplateColumns="1fr"
-        rowGap="$4"
-        alignItems="center"
-        justifyContent="center"
       >
-        {isMultiChain ? (
-          <Box>{chooseChain}</Box>
-        ) : (
-          <Box marginBottom={'$9'}>
-            <ChainCard
-              prettyName={chain?.label || defaultChainName}
-              icon={chain?.icon}
-            />
-          </Box>
-        )}
-
-        {!providedChainName && isMultiChain ? (
-          <ConnectWalletButton buttonText={'Connect Wallet'} isDisabled />
-        ) : (
-          <Box px={6}>
-            <Stack
-              direction="vertical"
-              attributes={{
-                px: '$2',
-                py: '$12',
-                mx: 'auto',
-                maxWidth: '21rem',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderRadius: '$lg',
-                backgroundColor:
-                  theme === 'light' ? '$white' : '$blackAlpha400',
-                boxShadow:
-                  theme === 'light'
-                    ? '0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3'
-                    : '0 0 2px #363636, 0 0 8px -2px #4f4f4f',
-              }}
-              space="$8"
-            >
-              {userInfo}
-              {addressBtn}
-
-              <Box
-                width="100%"
-                maxWidth="200px"
-                attributes={{ id: 'connect-button' }}
-              >
-                {connectWalletButton}
-              </Box>
-
-              {connectWalletWarn}
-            </Stack>
-          </Box>
-        )}
-      </Box>
+        {username ? <User name={username} /> : null}
+        {address ? (
+          <ClipboardCopyText text={address} truncate="middle" />
+        ) : null}
+        <Box
+          my="$8"
+          flex="1"
+          width="full"
+          display="flex"
+          height="$16"
+          overflow="hidden"
+          justifyContent="center"
+          px={{ mobile: '$8', tablet: '$10' }}
+        >
+          {ConnectButton}
+        </Box>
+
+        {message &&
+        [WalletStatus.Error, WalletStatus.Rejected].includes(status) ? (
+          <Warning text={`${wallet?.prettyName}: ${message}`} />
+        ) : null}
+      </Stack>
     </Box>
   );
-};
+}
diff --git a/examples/telescope-authz/components/wallet/WalletConnect.tsx b/examples/telescope-authz/components/wallet/WalletConnect.tsx
deleted file mode 100644
index 408b385e0..000000000
--- a/examples/telescope-authz/components/wallet/WalletConnect.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  Box,
-  Text,
-  Stack,
-  useColorModeValue,
-} from '@interchain-ui/react';
-import { IoWallet } from 'react-icons/io5';
-import { FiAlertTriangle } from 'react-icons/fi';
-import { WalletStatus } from 'cosmos-kit';
-
-interface IConnectWalletButton {
-  buttonText?: string;
-  isLoading?: boolean;
-  isDisabled?: boolean;
-  onClickConnectBtn?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export const ConnectWalletButton = ({
-  buttonText,
-  isLoading,
-  isDisabled,
-  onClickConnectBtn,
-}: IConnectWalletButton) => {
-  return (
-    <Button
-      fluidWidth
-      size="md"
-      isLoading={isLoading}
-      disabled={isDisabled}
-      onClick={onClickConnectBtn}
-      attributes={{
-        position: 'relative',
-      }}
-    >
-      <div
-        style={{
-          borderRadius: '8px',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          zIndex: '0',
-          margin: '-1px',
-          position: 'absolute',
-          backgroundImage: `linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)`,
-        }}
-      />
-
-      <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        gap="$4"
-        as="span"
-        borderRadius="8px"
-        style={{
-          zIndex: '1',
-        }}
-      >
-        <Box as="span">
-          <IoWallet />
-        </Box>
-
-        <Box as="span">{buttonText ? buttonText : 'Connect Wallet'}</Box>
-      </Box>
-    </Button>
-  );
-};
-
-export const Disconnected = ({
-  buttonText,
-  onClick,
-}: {
-  buttonText: string;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  return (
-    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
-  );
-};
-
-export const Connected = ({
-  buttonText,
-  onClick,
-}: {
-  buttonText: string;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  return (
-    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
-  );
-};
-
-export const Connecting = () => {
-  return <ConnectWalletButton isLoading={true} />;
-};
-
-export const Rejected = ({
-  buttonText,
-  wordOfWarning,
-  onClick,
-}: {
-  buttonText: string;
-  wordOfWarning?: string;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  const bg = useColorModeValue('$orange200', '$orange300');
-
-  return (
-    <Stack direction="vertical">
-      <ConnectWalletButton
-        buttonText={buttonText}
-        isDisabled={false}
-        onClickConnectBtn={onClick}
-      />
-
-      {wordOfWarning && (
-        <Stack
-          direction="horizontal"
-          space="$1"
-          attributes={{
-            borderRadius: '$md',
-            backgroundColor: bg,
-            color: '$text',
-            padding: '$2',
-          }}
-        >
-          <Box display="inline-block">
-            <FiAlertTriangle />
-          </Box>
-
-          <Text fontSize="$sm">
-            <Text as="span" fontWeight="$semibold">
-              Warning:&ensp;
-            </Text>
-
-            {wordOfWarning}
-          </Text>
-        </Stack>
-      )}
-    </Stack>
-  );
-};
-
-export const Error = ({
-  buttonText,
-  wordOfWarning,
-  onClick,
-}: {
-  buttonText: string;
-  wordOfWarning?: string;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  const bg = useColorModeValue('$orange200', '$orange300');
-
-  return (
-    <Stack direction="vertical">
-      <ConnectWalletButton
-        buttonText={buttonText}
-        isDisabled={false}
-        onClickConnectBtn={onClick}
-      />
-
-      {wordOfWarning && (
-        <Stack
-          direction="horizontal"
-          space="$1"
-          attributes={{
-            borderRadius: '$md',
-            backgroundColor: bg,
-            color: '$text',
-            padding: '$2',
-          }}
-        >
-          <Box display="inline-block">
-            <FiAlertTriangle />
-          </Box>
-
-          <Text fontSize="$sm">
-            <Text fontWeight="$semibold" as="span">
-              Warning:&ensp;
-            </Text>
-
-            {wordOfWarning}
-          </Text>
-        </Stack>
-      )}
-    </Stack>
-  );
-};
-
-export const NotExist = ({
-  buttonText,
-  onClick,
-}: {
-  buttonText: string;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  return (
-    <ConnectWalletButton
-      buttonText={buttonText}
-      isDisabled={false}
-      onClickConnectBtn={onClick}
-    />
-  );
-};
-
-export const WalletConnectComponent = ({
-  walletStatus,
-  disconnect,
-  connecting,
-  connected,
-  rejected,
-  error,
-  notExist,
-}: {
-  walletStatus: WalletStatus;
-  disconnect: React.ReactNode;
-  connecting: React.ReactNode;
-  connected: React.ReactNode;
-  rejected: React.ReactNode;
-  error: React.ReactNode;
-  notExist: React.ReactNode;
-}) => {
-  switch (walletStatus) {
-    case WalletStatus.Disconnected:
-      return <>{disconnect}</>;
-    case WalletStatus.Connecting:
-      return <>{connecting}</>;
-    case WalletStatus.Connected:
-      return <>{connected}</>;
-    case WalletStatus.Rejected:
-      return <>{rejected}</>;
-    case WalletStatus.Error:
-      return <>{error}</>;
-    case WalletStatus.NotExist:
-      return <>{notExist}</>;
-    default:
-      return <>{disconnect}</>;
-  }
-};
diff --git a/examples/telescope-authz/components/wallet/WarnBlock.tsx b/examples/telescope-authz/components/wallet/WarnBlock.tsx
deleted file mode 100644
index 7de4a5ecd..000000000
--- a/examples/telescope-authz/components/wallet/WarnBlock.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ReactNode } from 'react';
-import { Box, Text, useColorModeValue } from '@interchain-ui/react';
-import { WalletStatus } from 'cosmos-kit';
-
-export const WarnBlock = ({
-  wordOfWarning,
-  icon,
-}: {
-  wordOfWarning?: string;
-  icon?: ReactNode;
-}) => {
-  return (
-    <Box
-      borderRadius="md"
-      paddingTop="$4"
-      paddingBottom="$4"
-      paddingLeft="$4"
-      paddingRight="$4"
-      backgroundColor={useColorModeValue('$orange200', '$orange300')}
-      color="$text"
-    >
-      <Box
-        display="flex"
-        gap="$4"
-        alignItems="flex-start"
-        justifyContent="center"
-        width="$full"
-        overflowY="scroll"
-        style={{
-          // For Firefox
-          scrollbarWidth: 'auto',
-          scrollbarColor: useColorModeValue(
-            'rgba(0,0,0,0.3) rgba(0,0,0,0.2)',
-            'rgba(255,255,255,0.2) rgba(255,255,255,0.1)'
-          ),
-          // For Chrome and other browsers except Firefox
-          '&::-webkit-scrollbar': {
-            width: '14px',
-            background: useColorModeValue(
-              'rgba(220,220,220,0.1)',
-              'rgba(60,60,60,0.1)'
-            ),
-            borderRadius: '3px',
-          },
-          '&::-webkit-scrollbar-thumb': {
-            background: useColorModeValue(
-              'rgba(0,0,0,0.1)',
-              'rgba(255,255,255,0.1)'
-            ),
-            borderRadius: '10px',
-            border: '3px solid transparent',
-            backgroundClip: 'content-box',
-          },
-        }}
-      >
-        <Box position="sticky" top={0}>
-          {icon}
-        </Box>
-        <Text attributes={{ maxHeight: '40px' }}>{wordOfWarning}</Text>
-      </Box>
-    </Box>
-  );
-};
-
-export const RejectedWarn = ({
-  wordOfWarning,
-  icon,
-}: {
-  wordOfWarning?: string;
-  icon?: ReactNode;
-}) => {
-  return <WarnBlock wordOfWarning={wordOfWarning} icon={icon} />;
-};
-
-export const ConnectStatusWarn = ({
-  walletStatus,
-  rejected,
-  error,
-}: {
-  walletStatus: WalletStatus;
-  rejected: ReactNode;
-  error: ReactNode;
-}) => {
-  switch (walletStatus) {
-    case WalletStatus.Rejected:
-      return <>{rejected}</>;
-    case WalletStatus.Error:
-      return <>{error}</>;
-    default:
-      return <></>;
-  }
-};
diff --git a/examples/telescope-authz/components/wallet/Warning.tsx b/examples/telescope-authz/components/wallet/Warning.tsx
new file mode 100644
index 000000000..0081ba755
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/Warning.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { Box, Text, Icon, Stack, useColorModeValue } from '@interchain-ui/react';
+
+export type WarningProps = {
+  text: string;
+  icon?: ReactNode;
+}
+
+export const WarningIcon = <Icon name="errorWarningLine" size="$lg" />
+
+export function Warning({ text, icon = WarningIcon }: WarningProps) {
+  return (
+    <Box
+      p="$6"
+      borderRadius="$md"
+      backgroundColor={useColorModeValue('$orange200', '$orange300')}
+    >
+      <Stack>
+        <Box mt="$2">{icon}</Box>
+        <Box flex="1" ml="$4" maxHeight="$24" overflow="scroll">
+          <Text
+            color={useColorModeValue('$gray700', '$gray800')}
+            fontSize="$sm"
+            fontWeight="$medium"
+            lineHeight="$tall">
+            {text}
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  )
+}
\ No newline at end of file
diff --git a/examples/telescope-authz/pages/index.tsx b/examples/telescope-authz/pages/index.tsx
index b79031ff1..8dbc7f0cc 100644
--- a/examples/telescope-authz/pages/index.tsx
+++ b/examples/telescope-authz/pages/index.tsx
@@ -2,18 +2,14 @@ import { useState } from 'react';
 import { Divider } from '@interchain-ui/react';
 import { ChainName } from 'cosmos-kit';
 
-import { Layout, WalletSection, AuthzSection } from '@/components';
+import { Layout, Wallet, AuthzSection } from '@/components';
 
 export default function Home() {
   const [selectedChain, setSelectedChain] = useState<ChainName>();
 
   return (
     <Layout>
-      <WalletSection
-        isMultiChain={true}
-        providedChainName={selectedChain}
-        setChainName={setSelectedChain}
-      />
+      <Wallet chainName={selectedChain} onChainChange={setSelectedChain} />
       <Divider height="0.1px" mt="$12" mb="$17" />
       {selectedChain && <AuthzSection chainName={selectedChain} />}
     </Layout>
diff --git a/examples/telescope-authz/utils/index.ts b/examples/telescope-authz/utils/index.ts
index 8bd694906..8c81c8bee 100644
--- a/examples/telescope-authz/utils/index.ts
+++ b/examples/telescope-authz/utils/index.ts
@@ -1,7 +1,12 @@
+import { Chain } from '@chain-registry/types';
 import { assets } from 'chain-registry';
 
-export const getChainLogoUrl = (chainName: string): string => {
+export const getChainLogoByChainName = (chainName: string): string => {
   const asset = assets.find(({ chain_name }) => chain_name === chainName)
     ?.assets?.[0];
   return Object.values(asset?.logo_URIs || {})?.[0] || '';
 };
+
+export const getChainLogoFromChain = (chain: Chain) => {
+  return Object.values(chain?.logo_URIs || {})?.[0] || '';
+};
diff --git a/yarn.lock b/yarn.lock
index 188861f8a..4d28a60eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4439,7 +4439,7 @@
   dependencies:
     "@cosmos-kit/compass-extension" "^2.6.8"
 
-"@cosmos-kit/core@^2.8.5":
+"@cosmos-kit/core@2.8.5", "@cosmos-kit/core@^2.8.5":
   version "2.8.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-2.8.5.tgz#4b2acdf8e8d90a780e1d1f4937876a960be192b3"
   integrity sha512-kIUYIF08MOH+DPki2d54EpU0ALdS0euBUJUwcUN+oaQrDza/q8VwTPHXG4grzlxiW7w3HG36jowrbySTumoZ7g==
@@ -4506,7 +4506,7 @@
     "@cosmos-kit/core" "^2.8.8"
     "@cosmos-kit/walletconnect" "^2.5.8"
 
-"@cosmos-kit/cosmostation@^2.6.5":
+"@cosmos-kit/cosmostation@2.6.5", "@cosmos-kit/cosmostation@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/cosmostation/-/cosmostation-2.6.5.tgz#2a22c7871321a8374dd13d4a8aaad5ebb17914ee"
   integrity sha512-AiggZSu05r5eilCbclme06NgDmT2QWfHzqvOEtB36BFBquNt/+89KancH5bwG+B5/YFKdhxq6HfX4bnjTD5y9w==
@@ -4646,7 +4646,7 @@
     "@cosmos-kit/core" "^2.8.8"
     "@cosmos-kit/walletconnect" "^2.5.8"
 
-"@cosmos-kit/keplr@^2.6.5":
+"@cosmos-kit/keplr@2.6.5", "@cosmos-kit/keplr@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-2.6.5.tgz#d2e019389b18facad728a32b25649fc03f291a16"
   integrity sha512-4AfcDEcqQUV3C24yl9tp1haOOPgPOOwsn7s2DEv2KafoMF+TDFUzKYZXcCJ93wcDQpDlfE7b1e2INzmcvPPyTg==
@@ -4716,7 +4716,7 @@
     "@cosmos-kit/core" "^2.8.8"
     "@cosmos-kit/walletconnect" "^2.5.8"
 
-"@cosmos-kit/leap@^2.6.5":
+"@cosmos-kit/leap@2.6.5", "@cosmos-kit/leap@^2.6.5":
   version "2.6.5"
   resolved "https://registry.npmjs.org/@cosmos-kit/leap/-/leap-2.6.5.tgz#aa1792f384528af4f6c69064624a20fc9a5af697"
   integrity sha512-Rs2zItKaxpxe08jnQYgaMF8vtjSCPckYdMw+6TZ+gZ66TLNnTh3nE1Xr0bHoMZB5ElfEALtilp0PYfbBN3kOAw==

From 6a860e1ce93104e4892c53ab54c03c18050d0000 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 29 Jan 2024 15:31:54 +0800
Subject: [PATCH 06/16] feat: add GrantDetailsModal

---
 .../components/authz/GrantCard.tsx            |  9 ++--
 .../components/authz/GrantDetailsModal.tsx    | 45 ++++++++++++++++
 .../components/authz/GrantsByMe.tsx           | 11 +++-
 .../components/authz/PermissionDetailCard.tsx | 51 +++++++++++++++++++
 4 files changed, 111 insertions(+), 5 deletions(-)
 create mode 100644 examples/telescope-authz/components/authz/GrantDetailsModal.tsx
 create mode 100644 examples/telescope-authz/components/authz/PermissionDetailCard.tsx

diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index 0a48863fe..cb32d9a25 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -9,16 +9,17 @@ import {
   TextField,
 } from '@interchain-ui/react';
 
-import { getChainLogoUrl } from '@/utils';
+import { getChainLogoByChainName } from '@/utils';
 import styles from '@/styles/custom.module.css';
 
 const granteeAddress = 'osmo1qx6kgrla69wmz90tn379p4kaux5prdkuzly2tw';
 
 type GrantCardProps = {
   permissions: string[];
+  onViewDetails: () => void;
 };
 
-export const GrantCard = ({ permissions }: GrantCardProps) => {
+export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
   const [isCopied, setIsCopied] = useState(false);
 
   const copy = (text: string) => {
@@ -46,7 +47,7 @@ export const GrantCard = ({ permissions }: GrantCardProps) => {
       <Stack space="$4" attributes={{ alignItems: 'center', mb: '$10' }}>
         <Image
           alt="chain name"
-          src={getChainLogoUrl('juno')}
+          src={getChainLogoByChainName('juno')}
           width="30"
           height="30"
           sizes="100vw"
@@ -94,7 +95,7 @@ export const GrantCard = ({ permissions }: GrantCardProps) => {
         ))}
       </Box>
 
-      <Button intent="tertiary" fluidWidth>
+      <Button intent="tertiary" fluidWidth onClick={onViewDetails}>
         View Details
       </Button>
     </Box>
diff --git a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
new file mode 100644
index 000000000..dde364c0b
--- /dev/null
+++ b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
@@ -0,0 +1,45 @@
+import { BasicModal, Box, Button } from '@interchain-ui/react';
+import { PermissionDetailCard } from './PermissionDetailCard';
+
+type GrantDetailsModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const GrantDetailsModal = ({
+  isOpen,
+  onClose,
+}: GrantDetailsModalProps) => {
+  const onModalClose = () => {
+    onClose();
+  };
+
+  const permissions = Array(4).fill(0);
+
+  const isScrollable = permissions.length > 4;
+
+  return (
+    <BasicModal title="All Permissions" isOpen={isOpen} onClose={onModalClose}>
+      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
+        <Box
+          mt="$7"
+          mb="$12"
+          display="grid"
+          gridTemplateColumns={{ mobile: '1fr', tablet: '1fr 1fr' }}
+          gap="$10"
+          maxHeight="360px"
+          overflowY="auto"
+          pr={isScrollable ? '$4' : '0'}
+        >
+          {permissions.map((_, i) => (
+            <PermissionDetailCard key={i} />
+          ))}
+        </Box>
+
+        <Button intent="tertiary" fluidWidth>
+          Revoke All
+        </Button>
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/authz/GrantsByMe.tsx b/examples/telescope-authz/components/authz/GrantsByMe.tsx
index b558a1a5d..0c948c97f 100644
--- a/examples/telescope-authz/components/authz/GrantsByMe.tsx
+++ b/examples/telescope-authz/components/authz/GrantsByMe.tsx
@@ -1,11 +1,15 @@
 import { Box, Text } from '@interchain-ui/react';
+import { useState } from 'react';
 import { GrantCard } from './GrantCard';
+import { GrantDetailsModal } from './GrantDetailsModal';
 
 type GrantsByMeProps = {
   grants: any[];
 };
 
 export const GrantsByMe = ({ grants }: GrantsByMeProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   if (grants.length === 0) {
     return (
       <Text
@@ -22,7 +26,12 @@ export const GrantsByMe = ({ grants }: GrantsByMeProps) => {
 
   return (
     <Box width="$full">
-      <GrantCard permissions={['Send', 'Vote', 'Delegate']} />
+      <GrantCard
+        permissions={['Send', 'Vote', 'Delegate']}
+        onViewDetails={() => setIsOpen(true)}
+      />
+
+      <GrantDetailsModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
     </Box>
   );
 };
diff --git a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
new file mode 100644
index 000000000..71c93306e
--- /dev/null
+++ b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
@@ -0,0 +1,51 @@
+import { Box, Button, Text } from '@interchain-ui/react';
+
+export const PermissionDetailCard = () => {
+  return (
+    <Box
+      px="$10"
+      py="$11"
+      backgroundColor="$cardBg"
+      borderRadius="$lg"
+      width="100%"
+      height={{ mobile: 'auto', tablet: '100%' }}
+    >
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        mb="$10"
+      >
+        <Text fontWeight="$semibold" fontSize="$md">
+          Send
+        </Text>
+        <Button intent="tertiary" size="sm">
+          Revoke
+        </Button>
+      </Box>
+
+      <Box display="flex" flexDirection="column" gap="$7">
+        <PermissionAttribute label="Spend Limit" value="10 ATOM" />
+        <PermissionAttribute label="Expiry" value="2025-01-18 18:27:21" />
+      </Box>
+    </Box>
+  );
+};
+
+type PermissionAttributeProps = {
+  label: string;
+  value: string;
+};
+
+const PermissionAttribute = ({ label, value }: PermissionAttributeProps) => {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="space-between">
+      <Text fontWeight="$normal" fontSize="$sm">
+        {label}
+      </Text>
+      <Text fontWeight="$semibold" fontSize="$sm">
+        {value}
+      </Text>
+    </Box>
+  );
+};

From 4fb73101657139c0c502314993840efdabc562c5 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 29 Jan 2024 16:41:20 +0800
Subject: [PATCH 07/16] fix: optimize permissions dropdown

---
 .../components/authz/GrantModal.tsx           | 80 ++++++++++++-------
 .../telescope-authz/styles/custom.module.css  | 10 +++
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index 9664702ff..eabba7fda 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -2,28 +2,30 @@ import { ChainName } from 'cosmos-kit';
 import {
   BasicModal,
   Box,
-  Select,
-  SelectOption,
   TextField,
-  Item,
   Button,
   Popover,
   PopoverTrigger,
   PopoverContent,
   Text,
   Icon,
+  SelectButton,
+  ListItem,
+  Stack,
+  FieldLabel,
 } from '@interchain-ui/react';
 import { useState } from 'react';
 import { IoMdCalendar } from 'react-icons/io';
 import Calendar from 'react-calendar';
 import dayjs from 'dayjs';
 
-import { isPermissionCustomizable, PermissionId, permissions } from '@/configs';
+import {
+  isPermissionCustomizable,
+  PermissionItem,
+  permissions,
+} from '@/configs';
 import { CustomizationField } from './CustomizationField';
-
-interface PermissionItem extends Item {
-  key: PermissionId;
-}
+import styles from '@/styles/custom.module.css';
 
 type GrantModalProps = {
   isOpen: boolean;
@@ -32,6 +34,7 @@ type GrantModalProps = {
 };
 
 export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [showCustomization, setShowCustomization] = useState(false);
 
@@ -56,7 +59,7 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
   };
 
   const isCustomizable =
-    selectedPermission && isPermissionCustomizable(selectedPermission.key);
+    selectedPermission && isPermissionCustomizable(selectedPermission.id);
 
   return (
     <BasicModal title="Create Grant" isOpen={isOpen} onClose={onModalClose}>
@@ -74,23 +77,40 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
           placeholder="Enter grantee address"
         />
 
-        <Select
-          label="Permission"
-          placeholder="Select permission"
-          selectedIndex={selectedPermission?.index}
-          onSelectItem={(item) => setSelectedPermission(item as PermissionItem)}
-          defaultSelectedItem={{
-            index: 1,
-            key: permissions[1].id,
-            label: permissions[1].name,
-          }}
-        >
-          {permissions.map(({ id, name }) => (
-            <SelectOption key={id} optionKey={id} label={name}>
-              {name}
-            </SelectOption>
-          ))}
-        </Select>
+        <Box>
+          <FieldLabel htmlFor="" label="Permission" attributes={{ mb: '$4' }} />
+          <Popover
+            triggerType="click"
+            isOpen={isDropdownOpen}
+            setIsOpen={setIsDropdownOpen}
+          >
+            <PopoverTrigger>
+              <SelectButton
+                className={styles.customSelect}
+                placeholder={selectedPermission?.name || 'Select permission'}
+              />
+            </PopoverTrigger>
+            <PopoverContent showArrow={false}>
+              <Stack direction="vertical" className={styles.customSelect}>
+                {permissions.map((p) => (
+                  <ListItem
+                    key={p.id}
+                    isActive={p.id === selectedPermission?.id}
+                    className={styles.customSelect}
+                    attributes={{
+                      onClick: () => {
+                        setSelectedPermission(p);
+                        setIsDropdownOpen(false);
+                      },
+                    }}
+                  >
+                    {p.name}
+                  </ListItem>
+                ))}
+              </Stack>
+            </PopoverContent>
+          </Popover>
+        </Box>
 
         <Box
           display={isCustomizable ? 'flex' : 'none'}
@@ -126,9 +146,9 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
         </Box>
 
         <Box display={isCustomizable && showCustomization ? 'block' : 'none'}>
-          {selectedPermission?.key === 'send' && (
+          {selectedPermission?.id === 'send' && (
             <CustomizationField
-              permissionType={selectedPermission.key}
+              permissionType={selectedPermission.id}
               inputProps={{
                 value: sendLimit,
                 onChange: (val) => {
@@ -141,9 +161,9 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
               }}
             />
           )}
-          {selectedPermission?.key === 'delegate' && (
+          {selectedPermission?.id === 'delegate' && (
             <CustomizationField
-              permissionType={selectedPermission.key}
+              permissionType={selectedPermission.id}
               inputProps={{
                 value: delegateLimit,
                 onChange: (val) => {
diff --git a/examples/telescope-authz/styles/custom.module.css b/examples/telescope-authz/styles/custom.module.css
index e2866b713..f9e225cb2 100644
--- a/examples/telescope-authz/styles/custom.module.css
+++ b/examples/telescope-authz/styles/custom.module.css
@@ -7,3 +7,13 @@
   border-radius: 100%;
   transform: scale(0.9);
 }
+
+.customSelect {
+  width: 640px;
+}
+
+.customSelect button {
+  border-radius: 6px;
+  border: 1px solid #d1d6dd;
+  background: #eef2f8;
+}

From 29b4d65636b1e1dd5b611a4335988d0dce71556f Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 29 Jan 2024 16:43:39 +0800
Subject: [PATCH 08/16] fix: add onClick to SelectButton

---
 examples/telescope-authz/components/authz/GrantModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index eabba7fda..e5e3369d4 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -88,6 +88,7 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
               <SelectButton
                 className={styles.customSelect}
                 placeholder={selectedPermission?.name || 'Select permission'}
+                onClick={() => {}}
               />
             </PopoverTrigger>
             <PopoverContent showArrow={false}>

From 1e289dd291a165cebfa84c2a7d8de983bb0f7d3d Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 5 Feb 2024 18:15:38 +0800
Subject: [PATCH 09/16] feat(authz): query and display grants data

---
 .../components/authz/AuthzSection.tsx         |  28 +-
 .../components/authz/CustomizationField.tsx   | 120 ++++++---
 .../components/authz/GrantCard.tsx            |  97 +++----
 .../components/authz/GrantDetailsModal.tsx    |  21 +-
 .../components/authz/GrantModal.tsx           | 245 +++++++++++-------
 .../components/authz/GrantsByMe.tsx           |  62 +++--
 .../components/authz/GrantsToMe.tsx           |   2 +-
 .../components/authz/PermissionDetailCard.tsx |  53 +++-
 .../authz/SelectValidatorsModal.tsx           | 150 +++++++++++
 .../components/wallet/Wallet.tsx              |  17 +-
 examples/telescope-authz/hooks/index.ts       |   6 +
 examples/telescope-authz/hooks/useAuthzTx.ts  | 191 ++++++++++++++
 examples/telescope-authz/hooks/useGrants.ts   |  98 +++++++
 examples/telescope-authz/hooks/usePrices.ts   |  53 ++++
 examples/telescope-authz/hooks/useToast.tsx   |  34 +++
 examples/telescope-authz/hooks/useTx.ts       | 115 ++++++++
 .../telescope-authz/hooks/useValidators.ts    | 136 ++++++++++
 examples/telescope-authz/package.json         |  14 +-
 examples/telescope-authz/pages/_app.tsx       |   4 +-
 .../telescope-authz/styles/custom.module.css  |  14 +-
 examples/telescope-authz/tsconfig.json        |   3 +-
 examples/telescope-authz/utils/authz.ts       | 142 ++++++++++
 examples/telescope-authz/utils/calc.ts        |  38 +++
 examples/telescope-authz/utils/chain.ts       |  46 ++++
 examples/telescope-authz/utils/index.ts       |  17 +-
 examples/telescope-authz/utils/logos.ts       | 123 +++++++++
 examples/telescope-authz/utils/staking.ts     | 190 ++++++++++++++
 27 files changed, 1759 insertions(+), 260 deletions(-)
 create mode 100644 examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
 create mode 100644 examples/telescope-authz/hooks/index.ts
 create mode 100644 examples/telescope-authz/hooks/useAuthzTx.ts
 create mode 100644 examples/telescope-authz/hooks/useGrants.ts
 create mode 100644 examples/telescope-authz/hooks/usePrices.ts
 create mode 100644 examples/telescope-authz/hooks/useToast.tsx
 create mode 100644 examples/telescope-authz/hooks/useTx.ts
 create mode 100644 examples/telescope-authz/hooks/useValidators.ts
 create mode 100644 examples/telescope-authz/utils/authz.ts
 create mode 100644 examples/telescope-authz/utils/calc.ts
 create mode 100644 examples/telescope-authz/utils/chain.ts
 create mode 100644 examples/telescope-authz/utils/logos.ts
 create mode 100644 examples/telescope-authz/utils/staking.ts

diff --git a/examples/telescope-authz/components/authz/AuthzSection.tsx b/examples/telescope-authz/components/authz/AuthzSection.tsx
index 466311e9f..f9c23cc18 100644
--- a/examples/telescope-authz/components/authz/AuthzSection.tsx
+++ b/examples/telescope-authz/components/authz/AuthzSection.tsx
@@ -1,17 +1,33 @@
-import { Box, Button, Tabs } from '@interchain-ui/react';
-import { ChainName } from 'cosmos-kit';
 import { useState } from 'react';
+import { ChainName } from 'cosmos-kit';
+import { Box, Button, Tabs, Text } from '@interchain-ui/react';
 
 import { GrantModal } from './GrantModal';
 import { GrantsByMe } from './GrantsByMe';
 import { GrantsToMe } from './GrantsToMe';
+import { useChain } from '@cosmos-kit/react';
 
 export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState(0);
+  const { address } = useChain(chainName);
+
+  if (!address) {
+    return (
+      <Text
+        fontWeight="$semibold"
+        fontSize="$lg"
+        textAlign="center"
+        color="$textSecondary"
+        attributes={{ my: '$24' }}
+      >
+        Please connect your wallet to view and create grants
+      </Text>
+    );
+  }
 
   return (
-    <Box mb="$18">
+    <Box mb="$18" minHeight="500px" display="flex" flexDirection="column">
       <Box
         display="flex"
         justifyContent="space-between"
@@ -21,11 +37,11 @@ export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
         <Tabs
           tabs={[
             {
-              label: 'Grants to Me',
+              label: 'Grants to me',
               content: null,
             },
             {
-              label: 'Grants by Me',
+              label: 'Grants by me',
               content: null,
             },
           ]}
@@ -39,7 +55,7 @@ export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
       </Box>
 
       {activeTab === 0 && <GrantsToMe grants={[]} />}
-      {activeTab === 1 && <GrantsByMe grants={[{}]} />}
+      {activeTab === 1 && <GrantsByMe chainName={chainName} />}
 
       <GrantModal
         isOpen={isOpen}
diff --git a/examples/telescope-authz/components/authz/CustomizationField.tsx b/examples/telescope-authz/components/authz/CustomizationField.tsx
index 572b3dbd5..1f53518e4 100644
--- a/examples/telescope-authz/components/authz/CustomizationField.tsx
+++ b/examples/telescope-authz/components/authz/CustomizationField.tsx
@@ -1,7 +1,11 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { Box, NumberField, SelectButton, Text } from '@interchain-ui/react';
+
+import { useValidators } from '@/hooks';
 import { Permission, PermissionId } from '@/configs';
-import { NumberField } from '@interchain-ui/react';
+import { SelectValidatorsModal } from './SelectValidatorsModal';
 
-/* --------------SendCustomization-------------- */
+// ==============================================
 
 type SendCustomizationProps = {
   value: number | undefined;
@@ -24,62 +28,118 @@ const SendCustomization = ({ value, onChange }: SendCustomizationProps) => {
   );
 };
 
-/* ------------DelegateCustomization------------ */
+// ==============================================
 
 type DelegateCustomizationProps = {
   value: number | undefined;
   onChange: (value: string) => void;
+  chainName: string;
+  allowList: string[];
+  denyList: string[];
+  setAllowList: Dispatch<SetStateAction<string[]>>;
+  setDenyList: Dispatch<SetStateAction<string[]>>;
 };
 
 const DelegateCustomization = ({
   value,
   onChange,
+  chainName,
+  allowList,
+  denyList,
+  setAllowList,
+  setDenyList,
 }: DelegateCustomizationProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { data } = useValidators(chainName);
+
+  const allowedValidators = data
+    ? allowList.map((address) => data.find((v) => v.address === address)!.name)
+    : [];
+
+  const deniedValidators = data
+    ? denyList.map((address) => data.find((v) => v.address === address)!.name)
+    : [];
+
+  const hasAllowedValidators = allowedValidators.length > 0;
+  const hasDeniedValidators = deniedValidators.length > 0;
+
   return (
-    <NumberField
-      placeholder="Max Tokens (Optional)"
-      value={value}
-      onInput={(e) => {
-        // @ts-ignore
-        onChange(e.target.value);
-      }}
-      formatOptions={{
-        maximumFractionDigits: 6,
-      }}
-    />
+    <>
+      <NumberField
+        placeholder="Max Tokens (Optional)"
+        value={value}
+        onInput={(e) => {
+          // @ts-ignore
+          onChange(e.target.value);
+        }}
+        formatOptions={{
+          maximumFractionDigits: 6,
+        }}
+      />
+      <SelectButton
+        placeholder="Select Validators (Optional)"
+        onClick={() => setIsOpen(true)}
+      />
+      <Box
+        display={hasAllowedValidators || hasDeniedValidators ? 'flex' : 'none'}
+        flexDirection="column"
+        gap="$4"
+        mt="$2"
+        px="$2"
+      >
+        {hasAllowedValidators && (
+          <Text>
+            <Text as="span" fontWeight="$semibold" color="$textSuccess">
+              Allow List:&nbsp;
+            </Text>
+            {allowedValidators.join(', ')}
+          </Text>
+        )}
+        {hasDeniedValidators && (
+          <Text>
+            <Text as="span" fontWeight="$semibold" color="$textDanger">
+              Deny List:&nbsp;
+            </Text>
+            {deniedValidators.join(', ')}
+          </Text>
+        )}
+      </Box>
+      <SelectValidatorsModal
+        chainName={chainName}
+        allowList={allowList}
+        denyList={denyList}
+        setAllowList={setAllowList}
+        setDenyList={setDenyList}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      />
+    </>
   );
 };
 
-/* --------------CustomizationField------------- */
+// ==============================================
 
 type CustomizationFieldProps =
-  | {
+  | ({
       permissionType: typeof Permission['Send'];
-      inputProps: SendCustomizationProps;
-    }
-  | {
+    } & SendCustomizationProps)
+  | ({
       permissionType: typeof Permission['Delegate'];
-      inputProps: DelegateCustomizationProps;
-    }
-  | {
-      permissionType: PermissionId;
-      inputProps?: never;
-    };
+    } & DelegateCustomizationProps);
 
 export const CustomizationField = ({
   permissionType,
-  inputProps,
+  ...rest
 }: CustomizationFieldProps): JSX.Element | null => {
   const fields: Partial<Record<PermissionId, JSX.Element | null>> = {
     send:
       permissionType === 'send' ? (
-        <SendCustomization {...(inputProps as SendCustomizationProps)} />
+        <SendCustomization {...(rest as SendCustomizationProps)} />
       ) : null,
     delegate:
       permissionType === 'delegate' ? (
-        <DelegateCustomization
-          {...(inputProps as DelegateCustomizationProps)}
-        />
+        <DelegateCustomization {...(rest as DelegateCustomizationProps)} />
       ) : null,
   };
 
diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index cb32d9a25..e36081e2a 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -9,18 +9,28 @@ import {
   TextField,
 } from '@interchain-ui/react';
 
-import { getChainLogoByChainName } from '@/utils';
+import { getCoin } from '@/configs';
+import { getChainLogoByChainName, PrettyGrant } from '@/utils';
 import styles from '@/styles/custom.module.css';
 
-const granteeAddress = 'osmo1qx6kgrla69wmz90tn379p4kaux5prdkuzly2tw';
-
 type GrantCardProps = {
-  permissions: string[];
+  role: 'granter' | 'grantee';
+  grant: PrettyGrant;
+  chainName: string;
   onViewDetails: () => void;
 };
 
-export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
+export const GrantCard = ({
+  role,
+  grant,
+  chainName,
+  onViewDetails,
+}: GrantCardProps) => {
   const [isCopied, setIsCopied] = useState(false);
+  const { address, permissions } = grant;
+
+  const isGranter = role === 'granter';
+  const token = getCoin(chainName);
 
   const copy = (text: string) => {
     if (isCopied) return;
@@ -46,22 +56,22 @@ export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
     >
       <Stack space="$4" attributes={{ alignItems: 'center', mb: '$10' }}>
         <Image
-          alt="chain name"
-          src={getChainLogoByChainName('juno')}
+          alt={token.name}
+          src={getChainLogoByChainName(chainName)}
           width="30"
           height="30"
           sizes="100vw"
         />
         <Text fontWeight="$semibold" fontSize="$lg">
-          Juno
+          {token.name}
         </Text>
       </Stack>
 
       <Box position="relative" mb="$10">
         <TextField
-          id="grantee"
-          label="Grantee"
-          value={granteeAddress}
+          id="address"
+          label={isGranter ? 'Grantee' : 'Granter'}
+          value={address}
           inputClassName={styles.customInput}
         />
         <Box position="absolute" bottom="$2" right="$2">
@@ -70,7 +80,7 @@ export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
             size="sm"
             intent="secondary"
             iconSize={isCopied ? '$xl' : '$md'}
-            onClick={() => copy(granteeAddress)}
+            onClick={() => copy(address)}
           />
         </Box>
       </Box>
@@ -85,17 +95,25 @@ export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
         Permissions
       </Text>
 
-      <Box display="flex" gap="$6" flexWrap="wrap" mb="$12">
-        {permissions.map((permission) => (
+      <Box
+        display="flex"
+        gap="$6"
+        flexWrap="wrap"
+        mb="$12"
+        height="$12"
+        overflow="hidden"
+      >
+        {permissions.map(({ name }) => (
           <PermissionItem
-            key={permission}
-            name={permission}
-            onRevoke={() => {}}
+            key={name}
+            role={role}
+            name={name}
+            onClick={() => {}}
           />
         ))}
       </Box>
 
-      <Button intent="tertiary" fluidWidth onClick={onViewDetails}>
+      <Button intent="tertiary" onClick={onViewDetails} fluidWidth>
         View Details
       </Button>
     </Box>
@@ -104,39 +122,22 @@ export const GrantCard = ({ permissions, onViewDetails }: GrantCardProps) => {
 
 type PermissionItemProps = {
   name: string;
-  onRevoke: () => void;
+  role: 'granter' | 'grantee';
+  onClick: () => void;
 };
 
-const PermissionItem = ({ name, onRevoke }: PermissionItemProps) => {
+const PermissionItem = ({ name, role, onClick }: PermissionItemProps) => {
+  const isGranter = role === 'granter';
+
   return (
-    <Box
-      width="$fit"
-      py="$3"
-      pl="$6"
-      pr="$4"
-      backgroundColor="$inputBg"
-      borderRadius="$base"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      gap="$2"
+    <Button
+      size="sm"
+      intent="secondary"
+      rightIcon={isGranter ? 'close' : 'arrowRightRounded'}
+      iconSize={isGranter ? '$lg' : '$2xs'}
+      onClick={onClick}
     >
-      <Text
-        color="$textSecondary"
-        fontSize="$md"
-        fontWeight="$semibold"
-        lineHeight="$normal"
-      >
-        {name}
-      </Text>
-      <IconButton
-        className={styles.customIconButton}
-        icon="close"
-        iconSize="$xl"
-        intent="secondary"
-        size="xs"
-        onClick={onRevoke}
-      />
-    </Box>
+      {name}
+    </Button>
   );
 };
diff --git a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
index dde364c0b..611d309cc 100644
--- a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
@@ -1,38 +1,47 @@
+import { PrettyGrant } from '@/utils';
 import { BasicModal, Box, Button } from '@interchain-ui/react';
 import { PermissionDetailCard } from './PermissionDetailCard';
 
 type GrantDetailsModalProps = {
+  grant: PrettyGrant;
+  chainName: string;
   isOpen: boolean;
   onClose: () => void;
 };
 
 export const GrantDetailsModal = ({
+  grant,
   isOpen,
   onClose,
+  chainName,
 }: GrantDetailsModalProps) => {
+  const { permissions } = grant;
+
   const onModalClose = () => {
     onClose();
   };
 
-  const permissions = Array(4).fill(0);
-
   const isScrollable = permissions.length > 4;
 
   return (
     <BasicModal title="All Permissions" isOpen={isOpen} onClose={onModalClose}>
-      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
+      <Box width={{ mobile: '100%', tablet: '$containerMd' }}>
         <Box
           mt="$7"
           mb="$12"
           display="grid"
           gridTemplateColumns={{ mobile: '1fr', tablet: '1fr 1fr' }}
           gap="$10"
-          maxHeight="360px"
+          maxHeight="480px"
           overflowY="auto"
           pr={isScrollable ? '$4' : '0'}
         >
-          {permissions.map((_, i) => (
-            <PermissionDetailCard key={i} />
+          {permissions.map((permission) => (
+            <PermissionDetailCard
+              key={permission.name}
+              chainName={chainName}
+              permission={permission}
+            />
           ))}
         </Box>
 
diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index e5e3369d4..cdf1fd54e 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { ChainName } from 'cosmos-kit';
 import {
   BasicModal,
@@ -7,24 +8,29 @@ import {
   Popover,
   PopoverTrigger,
   PopoverContent,
-  Text,
-  Icon,
   SelectButton,
   ListItem,
   Stack,
   FieldLabel,
 } from '@interchain-ui/react';
-import { useState } from 'react';
+import { coin } from '@cosmjs/amino';
+import { useChain } from '@cosmos-kit/react';
 import { IoMdCalendar } from 'react-icons/io';
 import Calendar from 'react-calendar';
 import dayjs from 'dayjs';
 
 import {
+  getExponent,
   isPermissionCustomizable,
+  PermissionId,
   PermissionItem,
   permissions,
 } from '@/configs';
+import { AuthorizationType } from '@/src/codegen/cosmos/staking/v1beta1/authz';
+import { GrantMsg, useAuthzTx } from '@/hooks';
+import { getTokenByChainName, shiftDigits } from '@/utils';
 import { CustomizationField } from './CustomizationField';
+
 import styles from '@/styles/custom.module.css';
 
 type GrantModalProps = {
@@ -33,10 +39,9 @@ type GrantModalProps = {
   chainName: ChainName;
 };
 
-export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
+export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
-  const [showCustomization, setShowCustomization] = useState(false);
 
   const [granteeAddress, setGranteeAddress] = useState('');
   const [expiryDate, setExpiryDate] = useState<Date | null>(null);
@@ -47,27 +52,99 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
   const [delegateLimit, setDelegateLimit] = useState<number | undefined>(
     undefined
   );
+  const [allowList, setAllowList] = useState<string[]>([]);
+  const [denyList, setDenyList] = useState<string[]>([]);
+
+  const [isGranting, setIsGranting] = useState(false);
+
+  const { address } = useChain(chainName);
+  const { authzTx, createGrantMsg } = useAuthzTx(chainName);
+
+  const token = getTokenByChainName(chainName);
+  const exponent = getExponent(chainName);
+  const denom = token.base;
 
   const onModalClose = () => {
-    setShowCustomization(false);
     setGranteeAddress('');
     setExpiryDate(null);
     setSelectedPermission(null);
     setSendLimit(undefined);
     setDelegateLimit(undefined);
+    setIsGranting(false);
+    setAllowList([]);
+    setDenyList([]);
     onClose();
   };
 
+  const onGrantClick = () => {
+    if (!address || !granteeAddress || !expiryDate || !selectedPermission)
+      return;
+
+    setIsGranting(true);
+
+    const sendMsg: GrantMsg = {
+      grantType: 'send',
+      customize: sendLimit
+        ? {
+            spendLimit: [coin(shiftDigits(sendLimit, exponent), denom)],
+          }
+        : undefined,
+    };
+
+    const delegateMsg: GrantMsg = {
+      grantType: 'delegate',
+      customize: delegateLimit //TODO: add allowList and denyList later
+        ? {
+            authorizationType: AuthorizationType.AUTHORIZATION_TYPE_DELEGATE,
+            maxTokens: coin(shiftDigits(delegateLimit, exponent), denom),
+            allowList: { address: allowList },
+            // denyList: { address: [] },
+          }
+        : undefined,
+    };
+
+    const grantMsg: Record<PermissionId, GrantMsg> = {
+      send: sendMsg,
+      delegate: delegateMsg,
+      vote: { grantType: 'vote' },
+      'claim-rewards': { grantType: 'claim-rewards' },
+    };
+
+    const msg = createGrantMsg({
+      grantee: granteeAddress,
+      granter: address,
+      expiration: expiryDate,
+      ...grantMsg[selectedPermission.id],
+    });
+
+    authzTx({
+      msgs: [msg],
+      onSuccess: () => {
+        // onModalClose();
+        // console.log('success');
+      },
+      onComplete: () => {
+        setIsGranting(false);
+      },
+    });
+  };
+
   const isCustomizable =
     selectedPermission && isPermissionCustomizable(selectedPermission.id);
 
   return (
-    <BasicModal title="Create Grant" isOpen={isOpen} onClose={onModalClose}>
+    <BasicModal
+      title="Create Grant"
+      isOpen={isOpen}
+      onClose={onModalClose}
+      closeOnClickaway={false}
+    >
       <Box
         width={{ mobile: '100%', tablet: '$containerSm' }}
         display="flex"
         flexDirection="column"
-        gap="$8"
+        gap="$9"
+        pt="$4"
       >
         <TextField
           id="grantee-address"
@@ -79,104 +156,74 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
 
         <Box>
           <FieldLabel htmlFor="" label="Permission" attributes={{ mb: '$4' }} />
-          <Popover
-            triggerType="click"
-            isOpen={isDropdownOpen}
-            setIsOpen={setIsDropdownOpen}
-          >
-            <PopoverTrigger>
-              <SelectButton
-                className={styles.customSelect}
-                placeholder={selectedPermission?.name || 'Select permission'}
-                onClick={() => {}}
-              />
-            </PopoverTrigger>
-            <PopoverContent showArrow={false}>
-              <Stack direction="vertical" className={styles.customSelect}>
-                {permissions.map((p) => (
-                  <ListItem
-                    key={p.id}
-                    isActive={p.id === selectedPermission?.id}
-                    className={styles.customSelect}
-                    attributes={{
-                      onClick: () => {
-                        setSelectedPermission(p);
-                        setIsDropdownOpen(false);
-                      },
-                    }}
-                  >
-                    {p.name}
-                  </ListItem>
-                ))}
-              </Stack>
-            </PopoverContent>
-          </Popover>
-        </Box>
 
-        <Box
-          display={isCustomizable ? 'flex' : 'none'}
-          gap="$4"
-          justifyContent="flex-end"
-          alignItems="center"
-        >
-          <Text color="$textSecondary" fontWeight="$normal">
-            Customize
-          </Text>
-          <Box
-            width="$10"
-            height="$10"
-            backgroundColor={showCustomization ? '$text' : '$inputBg'}
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            borderRadius="$base"
-            cursor="pointer"
-            attributes={{
-              onClick: () => {
-                setShowCustomization((prev) => !prev);
-              },
-            }}
-          >
-            <Icon
-              name="arrowRightRounded"
-              size="$xs"
-              color={showCustomization ? '$white' : '$textSecondary'}
-              attributes={{ transform: 'rotate(90deg)' }}
-            />
-          </Box>
-        </Box>
+          <Box display="flex" flexDirection="column" gap="$6">
+            <Popover
+              triggerType="click"
+              isOpen={isDropdownOpen}
+              setIsOpen={setIsDropdownOpen}
+            >
+              <PopoverTrigger>
+                <SelectButton
+                  className={styles.containerSm}
+                  placeholder={selectedPermission?.name || 'Select permission'}
+                  onClick={() => {}}
+                />
+              </PopoverTrigger>
+              <PopoverContent showArrow={false}>
+                <Stack direction="vertical">
+                  {permissions.map((p) => (
+                    <ListItem
+                      key={p.id}
+                      isActive={p.id === selectedPermission?.id}
+                      className={styles.containerSm}
+                      attributes={{
+                        onClick: () => {
+                          setSelectedPermission(p);
+                          setIsDropdownOpen(false);
+                        },
+                      }}
+                    >
+                      {p.name}
+                    </ListItem>
+                  ))}
+                </Stack>
+              </PopoverContent>
+            </Popover>
 
-        <Box display={isCustomizable && showCustomization ? 'block' : 'none'}>
-          {selectedPermission?.id === 'send' && (
-            <CustomizationField
-              permissionType={selectedPermission.id}
-              inputProps={{
-                value: sendLimit,
-                onChange: (val) => {
+            {selectedPermission?.id === 'send' && (
+              <CustomizationField
+                permissionType={selectedPermission.id}
+                value={sendLimit}
+                onChange={(val) => {
                   if (!val) {
                     setSendLimit(undefined);
                     return;
                   }
                   setSendLimit(Number(val));
-                },
-              }}
-            />
-          )}
-          {selectedPermission?.id === 'delegate' && (
-            <CustomizationField
-              permissionType={selectedPermission.id}
-              inputProps={{
-                value: delegateLimit,
-                onChange: (val) => {
+                }}
+              />
+            )}
+
+            {selectedPermission?.id === 'delegate' && (
+              <CustomizationField
+                permissionType={selectedPermission.id}
+                chainName={chainName}
+                allowList={allowList}
+                denyList={denyList}
+                setAllowList={setAllowList}
+                setDenyList={setDenyList}
+                value={delegateLimit}
+                onChange={(val) => {
                   if (!val) {
                     setDelegateLimit(undefined);
                     return;
                   }
                   setDelegateLimit(Number(val));
-                },
-              }}
-            />
-          )}
+                }}
+              />
+            )}
+          </Box>
         </Box>
 
         <Box position="relative">
@@ -217,8 +264,14 @@ export const GrantModal = ({ isOpen, onClose }: GrantModalProps) => {
           </Box>
         </Box>
 
-        <Box width="$full" mt="$12">
-          <Button intent="tertiary" fluidWidth>
+        <Box width="$full" mt="$9">
+          <Button
+            fluidWidth
+            intent="tertiary"
+            isLoading={isGranting}
+            disabled={isGranting}
+            onClick={onGrantClick}
+          >
             Grant
           </Button>
         </Box>
diff --git a/examples/telescope-authz/components/authz/GrantsByMe.tsx b/examples/telescope-authz/components/authz/GrantsByMe.tsx
index 0c948c97f..dd5d4902c 100644
--- a/examples/telescope-authz/components/authz/GrantsByMe.tsx
+++ b/examples/telescope-authz/components/authz/GrantsByMe.tsx
@@ -1,37 +1,53 @@
-import { Box, Text } from '@interchain-ui/react';
 import { useState } from 'react';
+import { Box, Spinner, Text } from '@interchain-ui/react';
+
+import { useGrants } from '@/hooks';
+import { PrettyGrant } from '@/utils';
 import { GrantCard } from './GrantCard';
 import { GrantDetailsModal } from './GrantDetailsModal';
 
 type GrantsByMeProps = {
-  grants: any[];
+  chainName: string;
 };
 
-export const GrantsByMe = ({ grants }: GrantsByMeProps) => {
+export const GrantsByMe = ({ chainName }: GrantsByMeProps) => {
   const [isOpen, setIsOpen] = useState(false);
-
-  if (grants.length === 0) {
-    return (
-      <Text
-        fontSize="$lg"
-        color="$textSecondary"
-        fontWeight="$semibold"
-        textAlign="center"
-        attributes={{ my: '$28' }}
-      >
-        You haven't granted any permission yet
-      </Text>
-    );
-  }
+  const [viewingGrant, setViewingGrant] = useState<PrettyGrant>();
+  const { data, isLoading } = useGrants(chainName);
 
   return (
-    <Box width="$full">
-      <GrantCard
-        permissions={['Send', 'Vote', 'Delegate']}
-        onViewDetails={() => setIsOpen(true)}
-      />
+    <Box flex="1" display="flex" justifyContent="center" alignItems="center">
+      {isLoading ? (
+        <Spinner size="$6xl" />
+      ) : data && data.granterGrants.length > 0 ? (
+        <Box width="$full" alignSelf="flex-start">
+          {data.granterGrants.map((grant) => (
+            <GrantCard
+              key={grant.address}
+              role="granter"
+              grant={grant}
+              chainName={chainName}
+              onViewDetails={() => {
+                setIsOpen(true);
+                setViewingGrant(grant);
+              }}
+            />
+          ))}
+        </Box>
+      ) : (
+        <Text fontSize="$lg" color="$textSecondary" fontWeight="$semibold">
+          You haven't granted any permission yet
+        </Text>
+      )}
 
-      <GrantDetailsModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      {viewingGrant && (
+        <GrantDetailsModal
+          grant={viewingGrant}
+          isOpen={isOpen}
+          chainName={chainName}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
     </Box>
   );
 };
diff --git a/examples/telescope-authz/components/authz/GrantsToMe.tsx b/examples/telescope-authz/components/authz/GrantsToMe.tsx
index 512510933..ea9c8e949 100644
--- a/examples/telescope-authz/components/authz/GrantsToMe.tsx
+++ b/examples/telescope-authz/components/authz/GrantsToMe.tsx
@@ -12,7 +12,7 @@ export const GrantsToMe = ({ grants }: GrantsToMeProps) => {
         color="$textSecondary"
         fontWeight="$semibold"
         textAlign="center"
-        attributes={{ my: '$28' }}
+        attributes={{ my: '$30' }}
       >
         You don't have any grants
       </Text>
diff --git a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
index 71c93306e..b1cb5080c 100644
--- a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
+++ b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
@@ -1,6 +1,22 @@
-import { Box, Button, Text } from '@interchain-ui/react';
+import { Box, Button, Skeleton, Text } from '@interchain-ui/react';
+
+import { useValidators } from '@/hooks';
+import { getAttributePairs, PrettyGrant } from '@/utils';
+
+type PermissionDetailCardProps = {
+  chainName: string;
+  permission: PrettyGrant['permissions'][0];
+};
+
+export const PermissionDetailCard = ({
+  chainName,
+  permission,
+}: PermissionDetailCardProps) => {
+  const { data, isLoading } = useValidators(chainName, { fetchLogos: false });
+  const { name, expiration, expiry, authorization } = permission;
+
+  const attributes = getAttributePairs(authorization, data || []);
 
-export const PermissionDetailCard = () => {
   return (
     <Box
       px="$10"
@@ -14,10 +30,11 @@ export const PermissionDetailCard = () => {
         display="flex"
         alignItems="center"
         justifyContent="space-between"
+        gap="$6"
         mb="$10"
       >
         <Text fontWeight="$semibold" fontSize="$md">
-          Send
+          {name}
         </Text>
         <Button intent="tertiary" size="sm">
           Revoke
@@ -25,8 +42,17 @@ export const PermissionDetailCard = () => {
       </Box>
 
       <Box display="flex" flexDirection="column" gap="$7">
-        <PermissionAttribute label="Spend Limit" value="10 ATOM" />
-        <PermissionAttribute label="Expiry" value="2025-01-18 18:27:21" />
+        {attributes.map((attr) => (
+          <PermissionAttribute
+            {...attr}
+            key={attr.label}
+            isLoading={
+              (attr.label === 'Allow List' || attr.label === 'Deny List') &&
+              isLoading
+            }
+          />
+        ))}
+        {expiration && <PermissionAttribute label="Expiry" value={expiry} />}
       </Box>
     </Box>
   );
@@ -35,17 +61,26 @@ export const PermissionDetailCard = () => {
 type PermissionAttributeProps = {
   label: string;
   value: string;
+  isLoading?: boolean;
 };
 
-const PermissionAttribute = ({ label, value }: PermissionAttributeProps) => {
+const PermissionAttribute = ({
+  label,
+  value,
+  isLoading = false,
+}: PermissionAttributeProps) => {
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
       <Text fontWeight="$normal" fontSize="$sm">
         {label}
       </Text>
-      <Text fontWeight="$semibold" fontSize="$sm">
-        {value}
-      </Text>
+      {isLoading ? (
+        <Skeleton width="$20" height="$9" />
+      ) : (
+        <Text fontWeight="$semibold" fontSize="$sm">
+          {value}
+        </Text>
+      )}
     </Box>
   );
 };
diff --git a/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx b/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
new file mode 100644
index 000000000..3c76be1fd
--- /dev/null
+++ b/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
@@ -0,0 +1,150 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+  BasicModal,
+  Box,
+  Button,
+  GridColumn,
+  Spinner,
+  Text,
+  ValidatorList,
+  ValidatorNameCell,
+} from '@interchain-ui/react';
+
+import { useValidators } from '@/hooks';
+import { ExtendedValidator as Validator } from '@/utils';
+
+type SelectValidatorsModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  chainName: string;
+  allowList: string[];
+  denyList: string[];
+  setAllowList: Dispatch<SetStateAction<string[]>>;
+  setDenyList: Dispatch<SetStateAction<string[]>>;
+};
+
+export const SelectValidatorsModal = ({
+  isOpen,
+  onClose,
+  chainName,
+  allowList,
+  denyList,
+  setAllowList,
+  setDenyList,
+}: SelectValidatorsModalProps) => {
+  const { data, isLoading } = useValidators(chainName);
+
+  const handleChoiceClick =
+    (validator: Validator, onListChange: typeof setAllowList) => () => {
+      onListChange((prev) => [...prev, validator.address]);
+    };
+
+  const handleCancelClick =
+    (validator: Validator, onListChange: typeof setAllowList) => () => {
+      onListChange((prev) =>
+        prev.filter((address) => address !== validator.address)
+      );
+    };
+
+  const columns: GridColumn[] = useMemo(() => {
+    return [
+      {
+        id: 'validator',
+        label: 'Validator',
+        width: '196px',
+        align: 'left',
+        render: (validator: Validator) => (
+          <ValidatorNameCell
+            validatorName={validator.name}
+            validatorImg={validator.logo}
+          />
+        ),
+      },
+      {
+        id: 'action',
+        width: '126px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="flex-end"
+            gap="$5"
+            pr="$4"
+          >
+            {allowList.includes(validator.address) ? (
+              <Button
+                size="sm"
+                intent="success"
+                onClick={handleCancelClick(validator, setAllowList)}
+                rightIcon="close"
+                iconSize="$xl"
+              >
+                Allowed
+              </Button>
+            ) : denyList.includes(validator.address) ? (
+              <Button
+                size="sm"
+                intent="danger"
+                onClick={handleCancelClick(validator, setDenyList)}
+                rightIcon="close"
+                iconSize="$xl"
+              >
+                Denied
+              </Button>
+            ) : (
+              <>
+                <Button
+                  size="sm"
+                  intent="text"
+                  onClick={handleChoiceClick(validator, setAllowList)}
+                >
+                  Allow
+                </Button>
+                <Button
+                  size="sm"
+                  intent="text"
+                  onClick={handleChoiceClick(validator, setDenyList)}
+                >
+                  Deny
+                </Button>
+              </>
+            )}
+          </Box>
+        ),
+      },
+    ];
+  }, [chainName, allowList, denyList]);
+
+  return (
+    <BasicModal title="Select Validators" isOpen={isOpen} onClose={onClose}>
+      <Box
+        width={{ mobile: '100%', tablet: '$containerSm' }}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="$30"
+        maxHeight="640px"
+        overflowY="auto"
+        mb="$8"
+      >
+        {isLoading ? (
+          <Spinner size="$6xl" />
+        ) : data && data.length > 0 ? (
+          <Box width="$full" alignSelf="flex-start">
+            <ValidatorList
+              data={data}
+              columns={columns}
+              variant="ghost"
+              tableProps={{ width: '$full' }}
+            />
+          </Box>
+        ) : (
+          <Text color="$textSecondary" fontSize="$lg" fontWeight="$semibold">
+            No Validators Found
+          </Text>
+        )}
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
index ea8a958db..1e6aaea1f 100644
--- a/examples/telescope-authz/components/wallet/Wallet.tsx
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -21,7 +21,7 @@ import {
   ButtonRejected,
 } from './Connect';
 
-export const CHAIN_NAME = 'cosmoshub';
+export const DEFAULT_CHAIN_NAME = 'cosmoshub';
 export const CHAIN_NAME_STORAGE_KEY = 'selected-chain';
 
 export type WalletProps = {
@@ -30,7 +30,7 @@ export type WalletProps = {
 };
 
 export function Wallet({
-  chainName = CHAIN_NAME,
+  chainName = DEFAULT_CHAIN_NAME,
   onChainChange = () => {},
 }: WalletProps) {
   const {
@@ -54,17 +54,18 @@ export function Wallet({
   }[status] || <ButtonConnect onClick={connect} />;
 
   function handleChainChange(chainName?: string) {
+    onChainChange(chainName);
     if (chainName) {
-      onChainChange(chainName);
-      localStorage.setItem(CHAIN_NAME_STORAGE_KEY, chainName!);
+      localStorage.setItem(CHAIN_NAME_STORAGE_KEY, chainName);
+    } else {
+      localStorage.removeItem(CHAIN_NAME_STORAGE_KEY);
     }
   }
 
   useEffect(() => {
-    const selected = localStorage.getItem(CHAIN_NAME_STORAGE_KEY);
-    if (selected && selected !== chainName) {
-      onChainChange(selected);
-    }
+    onChainChange(
+      localStorage.getItem(CHAIN_NAME_STORAGE_KEY) || DEFAULT_CHAIN_NAME
+    );
   }, []);
 
   return (
diff --git a/examples/telescope-authz/hooks/index.ts b/examples/telescope-authz/hooks/index.ts
new file mode 100644
index 000000000..00c48afb1
--- /dev/null
+++ b/examples/telescope-authz/hooks/index.ts
@@ -0,0 +1,6 @@
+export * from './useTx';
+export * from './useToast';
+export * from './usePrices';
+export * from './useGrants';
+export * from './useAuthzTx';
+export * from './useValidators';
diff --git a/examples/telescope-authz/hooks/useAuthzTx.ts b/examples/telescope-authz/hooks/useAuthzTx.ts
new file mode 100644
index 000000000..70c6ac449
--- /dev/null
+++ b/examples/telescope-authz/hooks/useAuthzTx.ts
@@ -0,0 +1,191 @@
+import { useChain } from '@cosmos-kit/react';
+import { isDeliverTxSuccess, StdFee } from '@cosmjs/stargate';
+
+import { cosmos, getSigningCosmosClient } from '@/src/codegen';
+import { MsgVote } from '@/src/codegen/cosmos/gov/v1beta1/tx';
+import { MsgWithdrawDelegatorReward } from '@/src/codegen/cosmos/distribution/v1beta1/tx';
+import {
+  MsgExec,
+  MsgGrant,
+  MsgRevoke,
+} from '@/src/codegen/cosmos/authz/v1beta1/tx';
+import { EncodeObject } from '@/src/codegen/types';
+import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
+import { StakeAuthorization } from '@/src/codegen/cosmos/staking/v1beta1/authz';
+import { GenericAuthorization } from '@/src/codegen/cosmos/authz/v1beta1/authz';
+
+import { getTokenByChainName } from '@/utils';
+import { Permission } from '@/configs';
+import { useToast, type CustomToast } from './useToast';
+import { coin } from '@cosmjs/amino';
+import { MsgSend } from '@/src/codegen/cosmos/bank/v1beta1/tx';
+import { MsgDelegate } from '@/src/codegen/cosmos/staking/v1beta1/tx';
+
+const { grant } = cosmos.authz.v1beta1.MessageComposer.fromPartial;
+
+/**
+ authz type: grant, revoke, exec
+  msg type: MsgGrant, MsgRevoke, MsgExec
+  grant type: send, delegate, undelegate, withdraw, vote
+*/
+
+export type GrantMsg =
+  | {
+      grantType: typeof Permission.Send;
+      customize?: SendAuthorization;
+    }
+  | {
+      grantType: typeof Permission.Delegate;
+      customize?: StakeAuthorization;
+    }
+  | {
+      grantType: typeof Permission.ClaimRewards | typeof Permission.Vote;
+      customize?: GenericAuthorization;
+    };
+
+type CreateGrantMsgOptions = GrantMsg & {
+  grantee: MsgGrant['grantee'];
+  granter: MsgGrant['granter'];
+  expiration?: NonNullable<MsgGrant['grant']>['expiration'];
+};
+
+const createGrantMsg = (options: CreateGrantMsgOptions) => {
+  const { grantType, customize, grantee, granter, expiration } = options;
+
+  const authz: Record<typeof grantType, typeof customize> = {
+    send:
+      customize ||
+      GenericAuthorization.fromPartial({
+        msg: MsgSend.typeUrl,
+      }),
+    delegate:
+      customize ||
+      GenericAuthorization.fromPartial({
+        msg: MsgDelegate.typeUrl,
+      }),
+    vote: GenericAuthorization.fromPartial({
+      msg: MsgVote.typeUrl,
+    }),
+    'claim-rewards': GenericAuthorization.fromPartial({
+      msg: MsgWithdrawDelegatorReward.typeUrl,
+    }),
+  };
+
+  return grant({
+    granter,
+    grantee,
+    grant: {
+      authorization: authz[grantType],
+      expiration,
+    },
+  });
+};
+
+const txRaw = cosmos.tx.v1beta1.TxRaw;
+
+enum TxStatus {
+  Failed = 'Transaction Failed',
+  Successful = 'Transaction Successful',
+  Broadcasting = 'Transaction Broadcasting',
+}
+
+type AuthzTxOptions = {
+  msgs: EncodeObject[];
+  fee?: StdFee | null;
+  toast?: Partial<CustomToast>;
+  onSuccess?: () => void;
+  onComplete?: () => void;
+};
+
+export const useAuthzTx = (chainName: string) => {
+  const { toast } = useToast();
+  const { address, getRpcEndpoint, getOfflineSignerDirect } =
+    useChain(chainName);
+
+  const authzTx = async (options: AuthzTxOptions) => {
+    const { msgs, fee, onSuccess, onComplete, toast: customToast } = options;
+
+    if (!address) {
+      toast({
+        type: 'error',
+        title: 'Wallet not connected',
+        description: 'Please connect the wallet',
+      });
+      if (onComplete) onComplete();
+      return;
+    }
+
+    let signed: Parameters<typeof txRaw.encode>['0'];
+    let client: Awaited<ReturnType<typeof getSigningCosmosClient>>;
+
+    const defaultFee: StdFee = {
+      amount: [coin('0', getTokenByChainName(chainName).base)],
+      gas: '860000',
+    };
+
+    try {
+      client = await getSigningCosmosClient({
+        rpcEndpoint: await getRpcEndpoint(),
+        signer: getOfflineSignerDirect(),
+      });
+      signed = await client.sign(address, msgs, fee || defaultFee, '');
+    } catch (e: any) {
+      console.error(e);
+      toast({
+        title: TxStatus.Failed,
+        description: e?.message || 'An unexpected error has occurred',
+        type: 'error',
+      });
+      if (onComplete) onComplete();
+      return;
+    }
+
+    let broadcastToastId: string | number;
+
+    broadcastToastId = toast({
+      title: TxStatus.Broadcasting,
+      description: 'Waiting for transaction to be included in the block',
+      type: 'loading',
+      duration: 999999,
+    });
+
+    if (client && signed) {
+      await client
+        .broadcastTx(Uint8Array.from(txRaw.encode(signed).finish()))
+        .then((res) => {
+          if (isDeliverTxSuccess(res)) {
+            if (onSuccess) onSuccess();
+
+            toast({
+              title: customToast?.title || TxStatus.Successful,
+              type: customToast?.type || 'success',
+              description: customToast?.description,
+            });
+          } else {
+            toast({
+              title: TxStatus.Failed,
+              description: res?.rawLog,
+              type: 'error',
+              duration: 10000,
+            });
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          toast({
+            title: TxStatus.Failed,
+            description: err?.message,
+            type: 'error',
+            duration: 10000,
+          });
+        })
+        .finally(() => toast.close(broadcastToastId));
+    } else {
+      toast.close(broadcastToastId);
+    }
+
+    if (onComplete) onComplete();
+  };
+
+  return { authzTx, createGrantMsg };
+};
diff --git a/examples/telescope-authz/hooks/useGrants.ts b/examples/telescope-authz/hooks/useGrants.ts
new file mode 100644
index 000000000..ce9cd8e87
--- /dev/null
+++ b/examples/telescope-authz/hooks/useGrants.ts
@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { useChain } from '@cosmos-kit/react';
+import { useQuery } from '@tanstack/react-query';
+
+import { cosmos } from '@/src/codegen';
+import { prettyGrants } from '@/utils';
+
+export const useGrants = (chainName: string) => {
+  const { address, getRpcEndpoint } = useChain(chainName);
+
+  const rpcEndpointQuery = useQuery({
+    queryKey: ['rpcEndpoint', chainName],
+    queryFn: () => getRpcEndpoint(),
+    enabled: !!address,
+    staleTime: Infinity,
+  });
+
+  const rpcQueryClientQuery = useQuery({
+    queryKey: ['rpcQueryClient', chainName],
+    queryFn: () =>
+      cosmos.ClientFactory.createRPCQueryClient({
+        rpcEndpoint: rpcEndpointQuery.data || '',
+      }),
+    enabled: !!rpcEndpointQuery.data,
+    staleTime: Infinity,
+  });
+
+  const queryClient = rpcQueryClientQuery.data;
+  const hasQueryClient = !!queryClient;
+
+  const granterGrantsQuery = useQuery({
+    queryKey: ['granterGrants', address],
+    queryFn: () =>
+      queryClient?.cosmos.authz.v1beta1.granterGrants({
+        granter: address || '',
+      }),
+    enabled: !!address && hasQueryClient,
+    select: (data) => data?.grants,
+  });
+
+  const granteeGrantsQuery = useQuery({
+    queryKey: ['granteeGrants', address],
+    queryFn: () =>
+      queryClient?.cosmos.authz.v1beta1.granteeGrants({
+        grantee: address || '',
+      }),
+    enabled: !!address && hasQueryClient,
+    select: (data) => data?.grants,
+  });
+
+  const dataQueries = {
+    granterGrants: granterGrantsQuery,
+    granteeGrants: granteeGrantsQuery,
+  };
+
+  const queriesToRefetch = [
+    dataQueries.granteeGrants,
+    dataQueries.granterGrants,
+  ];
+
+  const refetch = () => {
+    queriesToRefetch.forEach((query) => query.refetch());
+  };
+
+  const isInitialFetching = Object.values(dataQueries).some(
+    ({ isLoading }) => isLoading
+  );
+
+  const isRefetching = Object.values(dataQueries).some(
+    ({ isRefetching }) => isRefetching
+  );
+
+  const isLoading = isInitialFetching || isRefetching;
+
+  type DataQueries = typeof dataQueries;
+
+  type QueriesData = {
+    [Key in keyof DataQueries]: NonNullable<DataQueries[Key]['data']>;
+  };
+
+  const data = useMemo(() => {
+    if (isLoading) return;
+
+    const queriesData = Object.fromEntries(
+      Object.entries(dataQueries).map(([key, query]) => [key, query.data])
+    ) as QueriesData;
+
+    const { granteeGrants, granterGrants } = queriesData;
+
+    return {
+      granteeGrants: prettyGrants(granteeGrants, 'granter'),
+      granterGrants: prettyGrants(granterGrants, 'grantee'),
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return { data, isLoading, refetch };
+};
diff --git a/examples/telescope-authz/hooks/usePrices.ts b/examples/telescope-authz/hooks/usePrices.ts
new file mode 100644
index 000000000..284b0bd20
--- /dev/null
+++ b/examples/telescope-authz/hooks/usePrices.ts
@@ -0,0 +1,53 @@
+import { assets } from 'chain-registry';
+import { useQuery } from '@tanstack/react-query';
+import { AssetList } from '@chain-registry/types';
+
+type CoinGeckoId = string;
+type CoinGeckoUSD = { usd: number };
+type CoinGeckoUSDResponse = Record<CoinGeckoId, CoinGeckoUSD>;
+export type Prices = Record<CoinGeckoId, CoinGeckoUSD['usd']>;
+
+const handleError = (resp: Response) => {
+  if (!resp.ok) throw Error(resp.statusText);
+  return resp;
+};
+
+const getGeckoIdsFromAssets = (assets: AssetList[]) => {
+  return assets
+    .map((asset) => asset.assets[0].coingecko_id)
+    .filter(Boolean) as string[];
+};
+
+const formatPrices = (
+  prices: CoinGeckoUSDResponse,
+  assets: AssetList[]
+): Prices => {
+  return Object.entries(prices).reduce((priceHash, cur) => {
+    const assetList = assets.find(
+      (asset) => asset.assets[0].coingecko_id === cur[0]
+    )!;
+    const denom = assetList.assets[0].base;
+    return { ...priceHash, [denom]: cur[1].usd };
+  }, {});
+};
+
+const fetchPrices = async (
+  geckoIds: string[]
+): Promise<CoinGeckoUSDResponse> => {
+  const url = `https://api.coingecko.com/api/v3/simple/price?ids=${geckoIds.join()}&vs_currencies=usd`;
+
+  return fetch(url)
+    .then(handleError)
+    .then((res) => res.json());
+};
+
+export const usePrices = () => {
+  const geckoIds = getGeckoIdsFromAssets(assets);
+
+  return useQuery({
+    queryKey: ['prices'],
+    queryFn: () => fetchPrices(geckoIds),
+    select: (data) => formatPrices(data, assets),
+    staleTime: Infinity,
+  });
+};
diff --git a/examples/telescope-authz/hooks/useToast.tsx b/examples/telescope-authz/hooks/useToast.tsx
new file mode 100644
index 000000000..e348d89b3
--- /dev/null
+++ b/examples/telescope-authz/hooks/useToast.tsx
@@ -0,0 +1,34 @@
+import { toast, Text, ToastType } from '@interchain-ui/react';
+
+export type CustomToast = {
+  type: ToastType;
+  title: string;
+  duration?: number;
+  description?: string | JSX.Element;
+};
+
+const ToastTitle = ({ title }: { title: string }) => {
+  return (
+    <Text color="inherit" fontSize="$md" fontWeight="$semibold">
+      {title}
+    </Text>
+  );
+};
+
+export const useToast = () => {
+  const customToast = ({
+    type,
+    title,
+    description,
+    duration = 5000,
+  }: CustomToast) => {
+    return toast.custom(type, <ToastTitle title={title} />, {
+      duration,
+      description,
+    });
+  };
+
+  customToast.close = toast.dismiss;
+
+  return { toast: customToast };
+};
diff --git a/examples/telescope-authz/hooks/useTx.ts b/examples/telescope-authz/hooks/useTx.ts
new file mode 100644
index 000000000..5087b69ce
--- /dev/null
+++ b/examples/telescope-authz/hooks/useTx.ts
@@ -0,0 +1,115 @@
+import { cosmos } from 'interchain-query';
+import { useChain } from '@cosmos-kit/react';
+import { isDeliverTxSuccess, StdFee } from '@cosmjs/stargate';
+import { useToast, type CustomToast } from './useToast';
+
+const txRaw = cosmos.tx.v1beta1.TxRaw;
+
+interface Msg {
+  typeUrl: string;
+  value: any;
+}
+
+interface TxOptions {
+  fee?: StdFee | null;
+  toast?: Partial<CustomToast>;
+  onSuccess?: () => void;
+}
+
+export enum TxStatus {
+  Failed = 'Transaction Failed',
+  Successful = 'Transaction Successful',
+  Broadcasting = 'Transaction Broadcasting',
+}
+
+export const useTx = (chainName: string) => {
+  const { address, getSigningStargateClient, estimateFee } =
+    useChain(chainName);
+
+  const { toast } = useToast();
+
+  const tx = async (msgs: Msg[], options: TxOptions) => {
+    if (!address) {
+      toast({
+        type: 'error',
+        title: 'Wallet not connected',
+        description: 'Please connect the wallet',
+      });
+      return;
+    }
+
+    let signed: Parameters<typeof txRaw.encode>['0'];
+    let client: Awaited<ReturnType<typeof getSigningStargateClient>>;
+
+    try {
+      let fee: StdFee;
+      if (options?.fee) {
+        fee = options.fee;
+        client = await getSigningStargateClient();
+      } else {
+        const [_fee, _client] = await Promise.all([
+          estimateFee(msgs),
+          getSigningStargateClient(),
+        ]);
+        fee = _fee;
+        client = _client;
+      }
+      signed = await client.sign(address, msgs, fee, '');
+    } catch (e: any) {
+      console.error(e);
+      toast({
+        title: TxStatus.Failed,
+        description: e?.message || 'An unexpected error has occured',
+        type: 'error',
+      });
+      return;
+    }
+
+    let broadcastToastId: string | number;
+
+    broadcastToastId = toast({
+      title: TxStatus.Broadcasting,
+      description: 'Waiting for transaction to be included in the block',
+      type: 'loading',
+      duration: 999999,
+    });
+
+    if (client && signed) {
+      await client
+        .broadcastTx(Uint8Array.from(txRaw.encode(signed).finish()))
+        .then((res) => {
+          console.log(res);
+          if (isDeliverTxSuccess(res)) {
+            if (options.onSuccess) options.onSuccess();
+
+            toast({
+              title: options.toast?.title || TxStatus.Successful,
+              type: options.toast?.type || 'success',
+              description: options.toast?.description,
+            });
+          } else {
+            toast({
+              title: TxStatus.Failed,
+              description: res?.rawLog,
+              type: 'error',
+              duration: 10000,
+            });
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          toast({
+            title: TxStatus.Failed,
+            description: err?.message,
+            type: 'error',
+            duration: 10000,
+          });
+        })
+        .finally(() => toast.close(broadcastToastId));
+    } else {
+      toast.close(broadcastToastId);
+    }
+  };
+
+  return { tx };
+};
diff --git a/examples/telescope-authz/hooks/useValidators.ts b/examples/telescope-authz/hooks/useValidators.ts
new file mode 100644
index 000000000..1529189d6
--- /dev/null
+++ b/examples/telescope-authz/hooks/useValidators.ts
@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+import { useChain } from '@cosmos-kit/react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  cosmos,
+  useRpcClient,
+  useRpcEndpoint,
+  createRpcQueryHooks,
+} from 'interchain-query';
+import BigNumber from 'bignumber.js';
+
+import { extendValidators, getLogoUrls, parseValidators } from '@/utils';
+
+(BigInt.prototype as any).toJSON = function () {
+  return this.toString();
+};
+
+type UseValidatorsConfig = {
+  fetchLogos?: boolean;
+};
+
+export const useValidators = (
+  chainName: string,
+  { fetchLogos = true }: UseValidatorsConfig = {}
+) => {
+  const { address, getRpcEndpoint } = useChain(chainName);
+
+  const rpcEndpointQuery = useRpcEndpoint({
+    getter: getRpcEndpoint,
+    options: {
+      enabled: !!address,
+      staleTime: Infinity,
+      queryKeyHashFn: (queryKey) => {
+        return JSON.stringify([...queryKey, chainName]);
+      },
+    },
+  });
+
+  const rpcClientQuery = useRpcClient({
+    rpcEndpoint: rpcEndpointQuery.data || '',
+    options: {
+      enabled: !!address && !!rpcEndpointQuery.data,
+      staleTime: Infinity,
+    },
+  });
+
+  const { cosmos: cosmosQuery } = createRpcQueryHooks({
+    rpc: rpcClientQuery.data,
+  });
+
+  const isDataQueryEnabled = !!address && !!rpcClientQuery.data;
+
+  const validatorsQuery = cosmosQuery.staking.v1beta1.useValidators({
+    request: {
+      status: cosmos.staking.v1beta1.bondStatusToJSON(
+        cosmos.staking.v1beta1.BondStatus.BOND_STATUS_BONDED
+      ),
+      pagination: {
+        key: new Uint8Array(),
+        offset: 0n,
+        limit: 500n,
+        countTotal: true,
+        reverse: false,
+      },
+    },
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ validators }) => {
+        const sorted = validators.sort((a, b) =>
+          new BigNumber(b.tokens).minus(a.tokens).toNumber()
+        );
+        return parseValidators(sorted);
+      },
+      queryKeyHashFn: (queryKey) => {
+        return JSON.stringify([...queryKey, chainName]);
+      },
+      staleTime: Infinity,
+    },
+  });
+
+  const validatorLogosQuery = useQuery({
+    queryKey: ['validatorLogos', chainName],
+    queryFn: () => getLogoUrls(validatorsQuery.data || [], chainName),
+    enabled: isDataQueryEnabled && !!validatorsQuery.data && fetchLogos,
+    staleTime: Infinity,
+  });
+
+  const allQueries = {
+    rpcEndpoint: rpcEndpointQuery,
+    rpcClient: rpcClientQuery,
+    validators: validatorsQuery,
+    validatorLogos: validatorLogosQuery,
+  };
+
+  const queriesToRefetch = [allQueries.validators];
+
+  const refetch = () => {
+    queriesToRefetch.forEach((query) => query.refetch());
+  };
+
+  const isInitialFetching = Object.values(allQueries).some(
+    ({ isFetching }) => isFetching
+  );
+
+  const isRefetching = Object.values(allQueries).some(
+    ({ isRefetching }) => isRefetching
+  );
+
+  const isLoading = isInitialFetching || isRefetching;
+
+  type AllQueries = typeof allQueries;
+
+  type QueriesData = {
+    [Key in keyof AllQueries]: NonNullable<AllQueries[Key]['data']>;
+  };
+
+  const data = useMemo(() => {
+    if (isLoading) return;
+
+    const queriesData = Object.fromEntries(
+      Object.entries(allQueries).map(([key, query]) => [key, query.data])
+    ) as QueriesData;
+
+    const { validators, validatorLogos } = queriesData;
+
+    const extendedValidators = extendValidators({
+      validators,
+      logos: validatorLogos,
+    });
+
+    return extendedValidators;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return { data, isLoading, refetch };
+};
diff --git a/examples/telescope-authz/package.json b/examples/telescope-authz/package.json
index f56c13294..acab615bf 100644
--- a/examples/telescope-authz/package.json
+++ b/examples/telescope-authz/package.json
@@ -49,19 +49,21 @@
     "@cosmjs/proto-signing": "0.32.0",
     "@cosmjs/stargate": "0.32.0",
     "@cosmology/lcd": "^0.12.0",
-    "@cosmos-kit/react": "2.10.8",
-    "@interchain-ui/react": "1.21.3",
-    "@tanstack/react-query": "4.16.1",
+    "@cosmos-kit/react": "2.10.9",
+    "@interchain-ui/react": "^1.21.11",
+    "@tanstack/react-query": "4.32.0",
     "bignumber.js": "9.1.0",
     "chain-registry": "1.20.0",
-    "cosmos-kit": "2.8.4",
+    "cosmos-kit": "2.8.6",
     "dayjs": "1.11.10",
     "fast-fuzzy": "^1.12.0",
+    "interchain-query": "1.10.1",
     "next": "^13",
     "react": "18.2.0",
     "react-calendar": "4.8.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.4.0"
+    "react-icons": "^4.4.0",
+    "react-no-ssr": "1.1.0"
   },
   "devDependencies": {
     "@confio/relayer": "0.7.0",
@@ -70,10 +72,12 @@
     "@protobufs/cosmos": "^0.1.0",
     "@protobufs/cosmwasm": "^0.1.1",
     "@protobufs/ibc": "^0.1.0",
+    "@tanstack/react-query-devtools": "4.32.0",
     "@types/jest": "^29.5.0",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
+    "@types/react-no-ssr": "1.1.7",
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.5",
     "generate-lockfile": "0.0.12",
diff --git a/examples/telescope-authz/pages/_app.tsx b/examples/telescope-authz/pages/_app.tsx
index 5a6a6bdf3..e440b258a 100644
--- a/examples/telescope-authz/pages/_app.tsx
+++ b/examples/telescope-authz/pages/_app.tsx
@@ -5,7 +5,7 @@ import 'react-calendar/dist/Calendar.css';
 import React from 'react';
 import type { AppProps } from 'next/app';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { SignerOptions, wallets } from 'cosmos-kit';
 import { ChainProvider } from '@cosmos-kit/react';
@@ -79,7 +79,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
             <Component {...pageProps} />
             <Toaster position="top-right" closeButton={true} />
           </Box>
-          {/* <ReactQueryDevtools /> */}
+          <ReactQueryDevtools />
         </QueryClientProvider>
       </ChainProvider>
     </ThemeProvider>
diff --git a/examples/telescope-authz/styles/custom.module.css b/examples/telescope-authz/styles/custom.module.css
index f9e225cb2..6a1988aae 100644
--- a/examples/telescope-authz/styles/custom.module.css
+++ b/examples/telescope-authz/styles/custom.module.css
@@ -1,19 +1,7 @@
 .customInput {
   background-color: #eef2f8;
-  color: #697584;
 }
 
-.customIconButton {
-  border-radius: 100%;
-  transform: scale(0.9);
-}
-
-.customSelect {
+.containerSm {
   width: 640px;
 }
-
-.customSelect button {
-  border-radius: 6px;
-  border: 1px solid #d1d6dd;
-  background: #eef2f8;
-}
diff --git a/examples/telescope-authz/tsconfig.json b/examples/telescope-authz/tsconfig.json
index 61581e45d..5477be90c 100644
--- a/examples/telescope-authz/tsconfig.json
+++ b/examples/telescope-authz/tsconfig.json
@@ -16,7 +16,8 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["*"]
+      "@/*": ["*"],
+      "react": ["./node_modules/@types/react"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
diff --git a/examples/telescope-authz/utils/authz.ts b/examples/telescope-authz/utils/authz.ts
new file mode 100644
index 000000000..17337cfa9
--- /dev/null
+++ b/examples/telescope-authz/utils/authz.ts
@@ -0,0 +1,142 @@
+import dayjs from 'dayjs';
+import { Coin } from '@cosmjs/amino';
+
+import {
+  GenericAuthorization,
+  GrantAuthorization,
+} from '@/src/codegen/cosmos/authz/v1beta1/authz';
+import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
+import {
+  authorizationTypeToJSON,
+  StakeAuthorization,
+} from '@/src/codegen/cosmos/staking/v1beta1/authz';
+
+import { shiftDigits } from './calc';
+import { ExtendedValidator } from './staking';
+import { getExponentByDenom, getSymbolByDenom } from './chain';
+
+const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+const getAuthzPrettyName = (authz: GrantAuthorization['authorization']) => {
+  switch (true) {
+    case SendAuthorization.is(authz):
+      return 'Send';
+
+    case StakeAuthorization.is(authz):
+      const type = authorizationTypeToJSON(
+        (authz as StakeAuthorization).authorizationType
+      );
+      return capitalize(type.split('_').pop()!);
+
+    case GenericAuthorization.is(authz):
+      const msg = (authz as GenericAuthorization).msg;
+      return msg.split('.').pop()!.replace('Msg', '');
+
+    default:
+      return 'Unknown';
+  }
+};
+
+export const prettyGrants = (
+  grants: GrantAuthorization[],
+  groupBy: 'granter' | 'grantee'
+) => {
+  return grants
+    .reduce((acc, grant) => {
+      const addr = grant[groupBy];
+      const isNewAddr = acc.every((item) => !item[addr]);
+      if (isNewAddr) {
+        return [...acc, { [addr]: [grant] }];
+      }
+      return acc.map((item) => {
+        if (item[addr]) {
+          return { [addr]: [...item[addr], grant] };
+        }
+        return item;
+      });
+    }, [] as { [addr: string]: GrantAuthorization[] }[])
+    .map((item) => {
+      const address = Object.keys(item)[0];
+      const grants = item[address];
+
+      const permissions = grants.map((grant) => {
+        return {
+          ...grant,
+          expiry: dayjs(grant.expiration).format('YYYY-MM-DD HH:mm:ss'),
+          name: getAuthzPrettyName(grant.authorization),
+        };
+      });
+
+      return {
+        address,
+        permissions,
+      };
+    });
+};
+
+export type PrettyGrant = ReturnType<typeof prettyGrants>[0];
+
+const formatTokenAmount = (token: Coin) => {
+  const symbol = getSymbolByDenom(token.denom);
+  const exponent = getExponentByDenom(token.denom);
+  const displayAmount = shiftDigits(token.amount, -exponent);
+  return `${displayAmount} ${symbol}`;
+};
+
+const formatValidatorsList = (
+  addresses: string[],
+  validators: ExtendedValidator[]
+) => {
+  return addresses
+    .map((address) => {
+      const validator = validators.find((v) => v.address === address);
+      return validator ? validator.name : address;
+    })
+    .join(', ');
+};
+
+export const getAttributePairs = (
+  authz: GrantAuthorization['authorization'],
+  validators: ExtendedValidator[]
+) => {
+  const pair: { label: string; value: string }[] = [];
+
+  switch (true) {
+    case SendAuthorization.is(authz):
+      const sendAuthz = authz as SendAuthorization;
+      if (sendAuthz.spendLimit) {
+        pair.push({
+          label: 'Spend Limit',
+          value: formatTokenAmount(sendAuthz.spendLimit[0]),
+        });
+      }
+
+    case StakeAuthorization.is(authz):
+      const stakeAuthz = authz as StakeAuthorization;
+      if (stakeAuthz.maxTokens) {
+        pair.push({
+          label: 'Max Tokens',
+          value: formatTokenAmount(stakeAuthz.maxTokens),
+        });
+      }
+      if (stakeAuthz.allowList) {
+        pair.push({
+          label: 'Allow List',
+          value: formatValidatorsList(stakeAuthz.allowList.address, validators),
+        });
+      }
+      if (stakeAuthz.denyList) {
+        pair.push({
+          label: 'Deny List',
+          value: formatValidatorsList(stakeAuthz.denyList.address, validators),
+        });
+      }
+
+    default:
+      break;
+  }
+
+  return pair;
+};
diff --git a/examples/telescope-authz/utils/calc.ts b/examples/telescope-authz/utils/calc.ts
new file mode 100644
index 000000000..b97d5a5c7
--- /dev/null
+++ b/examples/telescope-authz/utils/calc.ts
@@ -0,0 +1,38 @@
+import BigNumber from 'bignumber.js';
+import { Prices } from '@/hooks';
+
+export const isGreaterThanZero = (val: number | string | undefined) => {
+  return new BigNumber(val || 0).gt(0);
+};
+
+export const toNumber = (val: string, decimals: number = 6) => {
+  return new BigNumber(val).decimalPlaces(decimals).toNumber();
+};
+
+export const sum = (...args: string[]) => {
+  return args
+    .reduce((prev, cur) => prev.plus(cur), new BigNumber(0))
+    .toString();
+};
+
+export const calcDollarValue = (
+  denom: string,
+  amount: string | number,
+  prices: Prices
+) => {
+  return new BigNumber(prices[denom] || 0)
+    .times(amount)
+    .decimalPlaces(2)
+    .toNumber();
+};
+
+export const shiftDigits = (
+  num: string | number | undefined | null,
+  places: number,
+  decimalPlaces?: number
+) => {
+  return new BigNumber(num ?? 0)
+    .shiftedBy(places)
+    .decimalPlaces(decimalPlaces || 6)
+    .toString();
+};
diff --git a/examples/telescope-authz/utils/chain.ts b/examples/telescope-authz/utils/chain.ts
new file mode 100644
index 000000000..d67a80914
--- /dev/null
+++ b/examples/telescope-authz/utils/chain.ts
@@ -0,0 +1,46 @@
+import { assets } from 'chain-registry';
+import { Asset, AssetList, Chain } from '@chain-registry/types';
+
+// TODO: refactor this, create getAssetByChainName and getAssetByDenom as base functions
+
+export const getChainLogoByChainName = (chainName: string): string => {
+  const asset = assets.find(({ chain_name }) => chain_name === chainName)
+    ?.assets?.[0];
+  return Object.values(asset?.logo_URIs || {})?.[0] || '';
+};
+
+export const getChainLogoFromChain = (chain: Chain) => {
+  return Object.values(chain?.logo_URIs || {})?.[0] || '';
+};
+
+export const getChainAssets = (chainName: string) => {
+  return assets.find((chain) => chain.chain_name === chainName) as AssetList;
+};
+
+export const getTokenByChainName = (chainName: string) => {
+  const chainAssets = getChainAssets(chainName);
+  return chainAssets.assets[0] as Asset;
+};
+
+export const getExponentByChainName = (chainName: string) => {
+  return (
+    getTokenByChainName(chainName).denom_units.find(
+      (unit) => unit.denom === getTokenByChainName(chainName).display
+    )?.exponent || 6
+  );
+};
+
+export const getExponentByDenom = (denom: string) => {
+  const asset = assets.find((chain) => chain.assets[0].base === denom)
+    ?.assets[0];
+  const exponent = asset?.denom_units.find(
+    (unit) => unit.denom === asset.display
+  )?.exponent;
+  return exponent || 6;
+};
+
+export const getSymbolByDenom = (denom: string) => {
+  const asset = assets.find((chain) => chain.assets[0].base === denom)
+    ?.assets[0];
+  return asset?.symbol || '';
+};
diff --git a/examples/telescope-authz/utils/index.ts b/examples/telescope-authz/utils/index.ts
index 8c81c8bee..0cfdbd023 100644
--- a/examples/telescope-authz/utils/index.ts
+++ b/examples/telescope-authz/utils/index.ts
@@ -1,12 +1,5 @@
-import { Chain } from '@chain-registry/types';
-import { assets } from 'chain-registry';
-
-export const getChainLogoByChainName = (chainName: string): string => {
-  const asset = assets.find(({ chain_name }) => chain_name === chainName)
-    ?.assets?.[0];
-  return Object.values(asset?.logo_URIs || {})?.[0] || '';
-};
-
-export const getChainLogoFromChain = (chain: Chain) => {
-  return Object.values(chain?.logo_URIs || {})?.[0] || '';
-};
+export * from './calc';
+export * from './chain';
+export * from './logos';
+export * from './authz';
+export * from './staking';
diff --git a/examples/telescope-authz/utils/logos.ts b/examples/telescope-authz/utils/logos.ts
new file mode 100644
index 000000000..a03eddd47
--- /dev/null
+++ b/examples/telescope-authz/utils/logos.ts
@@ -0,0 +1,123 @@
+import { ParsedValidator as Validator } from './staking';
+
+type ImageSource = {
+  imageSource: 'cosmostation' | 'keybase';
+};
+
+export const splitIntoChunks = (arr: any[], chunkSize: number) => {
+  const res = [];
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize);
+    res.push(chunk);
+  }
+  return res;
+};
+
+export const convertChainName = (chainName: string) => {
+  if (chainName.endsWith('testnet')) {
+    return chainName.replace('testnet', '-testnet');
+  }
+
+  switch (chainName) {
+    case 'cosmoshub':
+      return 'cosmos';
+    case 'assetmantle':
+      return 'asset-mantle';
+    case 'cryptoorgchain':
+      return 'crypto-org';
+    case 'dig':
+      return 'dig-chain';
+    case 'gravitybridge':
+      return 'gravity-bridge';
+    case 'kichain':
+      return 'ki-chain';
+    case 'oraichain':
+      return 'orai-chain';
+    case 'terra':
+      return 'terra-classic';
+    default:
+      return chainName;
+  }
+};
+
+export const isUrlValid = async (url: string) => {
+  const res = await fetch(url, { method: 'HEAD' });
+  const contentType = res?.headers?.get('Content-Type') || '';
+  return contentType.startsWith('image');
+};
+
+export const getCosmostationUrl = (
+  chainName: string,
+  validatorAddr: string
+) => {
+  const cosmostationChainName = convertChainName(chainName);
+  return `https://raw.githubusercontent.com/cosmostation/chainlist/main/chain/${cosmostationChainName}/moniker/${validatorAddr}.png`;
+};
+
+export const getKeybaseUrl = (identity: string) => {
+  return `https://keybase.io/_/api/1.0/user/lookup.json?key_suffix=${identity}&fields=pictures`;
+};
+
+export const addLogoUrlSource = async (
+  validator: Validator,
+  chainName: string
+): Promise<Validator & ImageSource> => {
+  const url = getCosmostationUrl(chainName, validator.address);
+  const isValid = await isUrlValid(url);
+  return { ...validator, imageSource: isValid ? 'cosmostation' : 'keybase' };
+};
+
+export const getLogoUrls = async (
+  validators: Validator[],
+  chainName: string
+) => {
+  const validatorsWithImgSource = await Promise.all(
+    validators.map((validator) => addLogoUrlSource(validator, chainName))
+  );
+
+  // cosmostation urls
+  const cosmostationUrls = validatorsWithImgSource
+    .filter((validator) => validator.imageSource === 'cosmostation')
+    .map(({ address }) => {
+      return {
+        address,
+        url: getCosmostationUrl(chainName, address),
+      };
+    });
+
+  // keybase urls
+  const keybaseIdentities = validatorsWithImgSource
+    .filter((validator) => validator.imageSource === 'keybase')
+    .map(({ address, identity }) => ({
+      address,
+      identity,
+    }));
+
+  const chunkedIdentities = splitIntoChunks(keybaseIdentities, 20);
+
+  let responses: any[] = [];
+
+  for (const chunk of chunkedIdentities) {
+    const logoUrlRequests = chunk.map(({ address, identity }) => {
+      if (!identity) return { address, url: '' };
+
+      return fetch(getKeybaseUrl(identity))
+        .then((response) => response.json())
+        .then((res) => ({
+          address,
+          url: res.them?.[0]?.pictures?.primary.url || '',
+        }));
+    });
+    responses = [...responses, await Promise.all(logoUrlRequests)];
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+
+  const keybaseUrls = responses.flat();
+
+  const allUrls = [...cosmostationUrls, ...keybaseUrls].reduce(
+    (prev, cur) => ({ ...prev, [cur.address]: cur.url }),
+    {}
+  );
+
+  return allUrls;
+};
diff --git a/examples/telescope-authz/utils/staking.ts b/examples/telescope-authz/utils/staking.ts
new file mode 100644
index 000000000..e33220cfe
--- /dev/null
+++ b/examples/telescope-authz/utils/staking.ts
@@ -0,0 +1,190 @@
+import { QueryDelegationTotalRewardsResponse } from 'interchain-query/cosmos/distribution/v1beta1/query';
+import {
+  Pool,
+  Validator,
+} from 'interchain-query/cosmos/staking/v1beta1/staking';
+import { isGreaterThanZero, shiftDigits, toNumber } from '.';
+import { Coin, decodeCosmosSdkDecFromProto } from '@cosmjs/stargate';
+import {
+  QueryDelegatorDelegationsResponse,
+  QueryParamsResponse,
+} from 'interchain-query/cosmos/staking/v1beta1/query';
+import BigNumber from 'bignumber.js';
+import { QueryAnnualProvisionsResponse } from 'interchain-query/cosmos/mint/v1beta1/query';
+import type { Asset } from '@chain-registry/types';
+
+const DAY_TO_SECONDS = 24 * 60 * 60;
+const ZERO = '0';
+
+export const calcStakingApr = ({
+  pool,
+  commission,
+  communityTax,
+  annualProvisions,
+}: ChainMetaData & { commission: string }) => {
+  const totalSupply = new BigNumber(pool?.bondedTokens || 0).plus(
+    pool?.notBondedTokens || 0
+  );
+
+  const bondedTokensRatio = new BigNumber(pool?.bondedTokens || 0).div(
+    totalSupply
+  );
+
+  const inflation = new BigNumber(annualProvisions || 0).div(totalSupply);
+
+  const one = new BigNumber(1);
+
+  return inflation
+    .multipliedBy(one.minus(communityTax || 0))
+    .div(bondedTokensRatio)
+    .multipliedBy(one.minus(commission))
+    .shiftedBy(2)
+    .decimalPlaces(2, BigNumber.ROUND_DOWN)
+    .toString();
+};
+
+export const decodeUint8Arr = (uint8array: Uint8Array | undefined) => {
+  if (!uint8array) return '';
+  return new TextDecoder('utf-8').decode(uint8array);
+};
+
+const formatCommission = (commission: string) => {
+  return new BigNumber(commission).isLessThan(1)
+    ? commission
+    : shiftDigits(commission, -18);
+};
+
+export type ParsedValidator = ReturnType<typeof parseValidators>[0];
+
+export const parseValidators = (validators: Validator[]) => {
+  return validators.map((validator) => ({
+    description: validator.description?.details || '',
+    name: validator.description?.moniker || '',
+    identity: validator.description?.identity || '',
+    address: validator.operatorAddress,
+    commission: formatCommission(
+      validator.commission?.commissionRates?.rate || '0'
+    ),
+    votingPower: toNumber(shiftDigits(validator.tokens, -6, 4), 4),
+  }));
+};
+
+export type ExtendedValidator = ReturnType<typeof extendValidators>[0];
+
+export type ChainMetaData = {
+  annualProvisions: string;
+  communityTax: string;
+  pool: Pool;
+};
+
+export const extendValidators = ({
+  validators = [],
+  logos = {},
+  delegations = [],
+  rewards = [],
+  chainMetadata = {} as ChainMetaData,
+}: {
+  validators: ParsedValidator[];
+  logos?: Record<string, string>;
+  delegations?: ParsedDelegations;
+  rewards?: ParsedRewards['byValidators'];
+  chainMetadata?: ChainMetaData;
+}) => {
+  const { annualProvisions, communityTax, pool } = chainMetadata;
+
+  return validators.map((validator) => {
+    const { address, commission } = validator;
+
+    const logo = logos[address] || '';
+
+    const delegation =
+      delegations.find(({ validatorAddress }) => validatorAddress === address)
+        ?.amount || ZERO;
+
+    const reward =
+      rewards.find(({ validatorAddress }) => validatorAddress === address)
+        ?.amount || ZERO;
+
+    const apr =
+      annualProvisions && communityTax && pool && commission
+        ? calcStakingApr({ annualProvisions, commission, communityTax, pool })
+        : null;
+
+    return { ...validator, logo, delegation, reward, apr };
+  });
+};
+
+const findAndDecodeReward = (
+  coins: Coin[],
+  denom: string,
+  exponent: number
+) => {
+  const amount = coins.find((coin) => coin.denom === denom)?.amount || ZERO;
+  const decodedAmount = decodeCosmosSdkDecFromProto(amount).toString();
+  return shiftDigits(decodedAmount, exponent);
+};
+
+export type ParsedRewards = ReturnType<typeof parseRewards>;
+
+export const parseRewards = (
+  { rewards, total }: QueryDelegationTotalRewardsResponse,
+  denom: string,
+  exponent: number
+) => {
+  if (!rewards || !total) return { byValidators: [], total: ZERO };
+
+  const totalReward = findAndDecodeReward(total, denom, exponent);
+
+  const rewardsParsed = rewards.map(({ reward, validatorAddress }) => ({
+    validatorAddress,
+    amount: findAndDecodeReward(reward, denom, exponent),
+  }));
+
+  return { byValidators: rewardsParsed, total: totalReward };
+};
+
+export type ParsedDelegations = ReturnType<typeof parseDelegations>;
+
+export const parseDelegations = (
+  delegations: QueryDelegatorDelegationsResponse['delegationResponses'],
+  exponent: number
+) => {
+  if (!delegations) return [];
+  return delegations.map(({ balance, delegation }) => ({
+    validatorAddress: delegation?.validatorAddress || '',
+    amount: shiftDigits(balance?.amount || ZERO, exponent),
+  }));
+};
+
+export const calcTotalDelegation = (delegations: ParsedDelegations) => {
+  if (!delegations) return ZERO;
+
+  return delegations
+    .reduce((prev, cur) => prev.plus(cur.amount), new BigNumber(0))
+    .toString();
+};
+
+export const parseUnbondingDays = (params: QueryParamsResponse['params']) => {
+  return new BigNumber(Number(params?.unbondingTime?.seconds || 0))
+    .div(DAY_TO_SECONDS)
+    .decimalPlaces(0)
+    .toString();
+};
+
+export const parseAnnualProvisions = (data: QueryAnnualProvisionsResponse) => {
+  const res = shiftDigits(decodeUint8Arr(data?.annualProvisions), -18);
+  return isGreaterThanZero(res) ? res : null;
+};
+
+export const getAssetLogoUrl = (asset: Asset): string => {
+  return Object.values(asset?.logo_URIs || {})?.[0] || '';
+};
+
+export const formatValidatorMetaInfo = (
+  validator: ExtendedValidator
+): string => {
+  const commissionStr = `Commission ${shiftDigits(validator.commission, 2)}%`;
+  const aprStr = validator.apr ? `APR ${validator.apr}%` : '';
+
+  return [commissionStr, aprStr].filter(Boolean).join(' | ');
+};

From 00de6a94447174f68b2ee7de86bb2cc95dc286ba Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 5 Feb 2024 23:04:53 +0800
Subject: [PATCH 10/16] feat(authz): revoke grants

---
 .../components/authz/GrantCard.tsx            | 75 +++++++++++--------
 .../components/authz/GrantDetailsModal.tsx    | 47 ++++++++++--
 .../components/authz/GrantModal.tsx           |  7 +-
 .../components/authz/PermissionDetailCard.tsx | 13 +++-
 examples/telescope-authz/hooks/useAuthzTx.ts  | 68 ++++++++++++++---
 examples/telescope-authz/hooks/useGrants.ts   |  2 +
 examples/telescope-authz/utils/authz.ts       |  1 +
 7 files changed, 162 insertions(+), 51 deletions(-)

diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index e36081e2a..c1d5f3402 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -10,7 +10,13 @@ import {
 } from '@interchain-ui/react';
 
 import { getCoin } from '@/configs';
-import { getChainLogoByChainName, PrettyGrant } from '@/utils';
+import {
+  getChainLogoByChainName,
+  PrettyGrant,
+  PrettyPermission,
+} from '@/utils';
+import { useAuthzTx, useGrants } from '@/hooks';
+
 import styles from '@/styles/custom.module.css';
 
 type GrantCardProps = {
@@ -27,6 +33,13 @@ export const GrantCard = ({
   onViewDetails,
 }: GrantCardProps) => {
   const [isCopied, setIsCopied] = useState(false);
+  const [isRevoking, setIsRevoking] = useState(false);
+  const [revokingPermission, setRevokingPermission] =
+    useState<PrettyPermission>();
+
+  const { refetch } = useGrants(chainName);
+  const { authzTx, createRevokeMsg } = useAuthzTx(chainName);
+
   const { address, permissions } = grant;
 
   const isGranter = role === 'granter';
@@ -46,6 +59,20 @@ export const GrantCard = ({
       });
   };
 
+  const handleRevoke = (permission: PrettyPermission) => {
+    setIsRevoking(true);
+
+    authzTx({
+      msgs: [createRevokeMsg(permission)],
+      onSuccess: () => {
+        refetch();
+      },
+      onComplete: () => {
+        setIsRevoking(false);
+      },
+    });
+  };
+
   return (
     <Box
       px="$10"
@@ -103,13 +130,23 @@ export const GrantCard = ({
         height="$12"
         overflow="hidden"
       >
-        {permissions.map(({ name }) => (
-          <PermissionItem
-            key={name}
-            role={role}
-            name={name}
-            onClick={() => {}}
-          />
+        {permissions.map((permission) => (
+          <Button
+            key={permission.name}
+            size="sm"
+            intent="secondary"
+            rightIcon={isGranter ? 'close' : 'arrowRightRounded'}
+            iconSize={isGranter ? '$lg' : '$2xs'}
+            onClick={() => {
+              handleRevoke(permission);
+              setRevokingPermission(permission);
+            }}
+            disabled={
+              isRevoking && revokingPermission?.name === permission.name
+            }
+          >
+            {permission.name}
+          </Button>
         ))}
       </Box>
 
@@ -119,25 +156,3 @@ export const GrantCard = ({
     </Box>
   );
 };
-
-type PermissionItemProps = {
-  name: string;
-  role: 'granter' | 'grantee';
-  onClick: () => void;
-};
-
-const PermissionItem = ({ name, role, onClick }: PermissionItemProps) => {
-  const isGranter = role === 'granter';
-
-  return (
-    <Button
-      size="sm"
-      intent="secondary"
-      rightIcon={isGranter ? 'close' : 'arrowRightRounded'}
-      iconSize={isGranter ? '$lg' : '$2xs'}
-      onClick={onClick}
-    >
-      {name}
-    </Button>
-  );
-};
diff --git a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
index 611d309cc..7c04ebc96 100644
--- a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
@@ -1,5 +1,8 @@
-import { PrettyGrant } from '@/utils';
+import { useState } from 'react';
 import { BasicModal, Box, Button } from '@interchain-ui/react';
+
+import { useAuthzTx, useGrants } from '@/hooks';
+import { PrettyGrant, PrettyPermission } from '@/utils';
 import { PermissionDetailCard } from './PermissionDetailCard';
 
 type GrantDetailsModalProps = {
@@ -17,14 +20,33 @@ export const GrantDetailsModal = ({
 }: GrantDetailsModalProps) => {
   const { permissions } = grant;
 
-  const onModalClose = () => {
-    onClose();
+  const [isRevoking, setIsRevoking] = useState(false);
+  const [revokingPermission, setRevokingPermission] =
+    useState<PrettyPermission>();
+
+  const { refetch } = useGrants(chainName);
+  const { authzTx, createRevokeMsg } = useAuthzTx(chainName);
+
+  const handleRevoke = (permissions: PrettyPermission[]) => {
+    setIsRevoking(true);
+
+    authzTx({
+      msgs: permissions.map(createRevokeMsg),
+      onSuccess: () => {
+        refetch();
+        onClose();
+      },
+      onComplete: () => {
+        setIsRevoking(false);
+        setRevokingPermission(undefined);
+      },
+    });
   };
 
   const isScrollable = permissions.length > 4;
 
   return (
-    <BasicModal title="All Permissions" isOpen={isOpen} onClose={onModalClose}>
+    <BasicModal title="All Permissions" isOpen={isOpen} onClose={onClose}>
       <Box width={{ mobile: '100%', tablet: '$containerMd' }}>
         <Box
           mt="$7"
@@ -39,13 +61,28 @@ export const GrantDetailsModal = ({
           {permissions.map((permission) => (
             <PermissionDetailCard
               key={permission.name}
+              onRevoke={() => {
+                handleRevoke([permission]);
+                setRevokingPermission(permission);
+              }}
+              isRevoking={
+                isRevoking && permission.name === revokingPermission?.name
+              }
               chainName={chainName}
               permission={permission}
             />
           ))}
         </Box>
 
-        <Button intent="tertiary" fluidWidth>
+        <Button
+          intent="tertiary"
+          fluidWidth
+          onClick={() => {
+            handleRevoke(permissions);
+          }}
+          isLoading={isRevoking && !revokingPermission}
+          disabled={isRevoking && !revokingPermission}
+        >
           Revoke All
         </Button>
       </Box>
diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index cdf1fd54e..39626f319 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -27,7 +27,7 @@ import {
   permissions,
 } from '@/configs';
 import { AuthorizationType } from '@/src/codegen/cosmos/staking/v1beta1/authz';
-import { GrantMsg, useAuthzTx } from '@/hooks';
+import { GrantMsg, useAuthzTx, useGrants } from '@/hooks';
 import { getTokenByChainName, shiftDigits } from '@/utils';
 import { CustomizationField } from './CustomizationField';
 
@@ -57,6 +57,7 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
 
   const [isGranting, setIsGranting] = useState(false);
 
+  const { refetch } = useGrants(chainName);
   const { address } = useChain(chainName);
   const { authzTx, createGrantMsg } = useAuthzTx(chainName);
 
@@ -120,8 +121,8 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
     authzTx({
       msgs: [msg],
       onSuccess: () => {
-        // onModalClose();
-        // console.log('success');
+        refetch();
+        onModalClose();
       },
       onComplete: () => {
         setIsGranting(false);
diff --git a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
index b1cb5080c..5745b46ae 100644
--- a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
+++ b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
@@ -4,17 +4,21 @@ import { useValidators } from '@/hooks';
 import { getAttributePairs, PrettyGrant } from '@/utils';
 
 type PermissionDetailCardProps = {
+  onRevoke: () => void;
+  isRevoking: boolean;
   chainName: string;
   permission: PrettyGrant['permissions'][0];
 };
 
 export const PermissionDetailCard = ({
+  onRevoke,
+  isRevoking,
   chainName,
   permission,
 }: PermissionDetailCardProps) => {
-  const { data, isLoading } = useValidators(chainName, { fetchLogos: false });
   const { name, expiration, expiry, authorization } = permission;
 
+  const { data, isLoading } = useValidators(chainName, { fetchLogos: false });
   const attributes = getAttributePairs(authorization, data || []);
 
   return (
@@ -36,7 +40,12 @@ export const PermissionDetailCard = ({
         <Text fontWeight="$semibold" fontSize="$md">
           {name}
         </Text>
-        <Button intent="tertiary" size="sm">
+        <Button
+          intent="tertiary"
+          size="sm"
+          onClick={onRevoke}
+          disabled={isRevoking}
+        >
           Revoke
         </Button>
       </Box>
diff --git a/examples/telescope-authz/hooks/useAuthzTx.ts b/examples/telescope-authz/hooks/useAuthzTx.ts
index 70c6ac449..c6d4e4aef 100644
--- a/examples/telescope-authz/hooks/useAuthzTx.ts
+++ b/examples/telescope-authz/hooks/useAuthzTx.ts
@@ -11,23 +11,26 @@ import {
 } from '@/src/codegen/cosmos/authz/v1beta1/tx';
 import { EncodeObject } from '@/src/codegen/types';
 import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
-import { StakeAuthorization } from '@/src/codegen/cosmos/staking/v1beta1/authz';
+import {
+  AuthorizationType,
+  StakeAuthorization,
+} from '@/src/codegen/cosmos/staking/v1beta1/authz';
 import { GenericAuthorization } from '@/src/codegen/cosmos/authz/v1beta1/authz';
 
-import { getTokenByChainName } from '@/utils';
-import { Permission } from '@/configs';
+import { getTokenByChainName, PrettyPermission } from '@/utils';
+import { Permission, PermissionId } from '@/configs';
 import { useToast, type CustomToast } from './useToast';
 import { coin } from '@cosmjs/amino';
 import { MsgSend } from '@/src/codegen/cosmos/bank/v1beta1/tx';
-import { MsgDelegate } from '@/src/codegen/cosmos/staking/v1beta1/tx';
+import {
+  MsgDelegate,
+  MsgBeginRedelegate,
+  MsgUndelegate,
+} from '@/src/codegen/cosmos/staking/v1beta1/tx';
 
-const { grant } = cosmos.authz.v1beta1.MessageComposer.fromPartial;
+const { grant, revoke } = cosmos.authz.v1beta1.MessageComposer.fromPartial;
 
-/**
- authz type: grant, revoke, exec
-  msg type: MsgGrant, MsgRevoke, MsgExec
-  grant type: send, delegate, undelegate, withdraw, vote
-*/
+// ==========================================
 
 export type GrantMsg =
   | {
@@ -81,6 +84,49 @@ const createGrantMsg = (options: CreateGrantMsgOptions) => {
   });
 };
 
+// ==========================================
+
+export const createRevokeMsg = (permission: PrettyPermission) => {
+  const { grantee, granter, authorization: authz } = permission;
+
+  let msgTypeUrl = '';
+
+  switch (true) {
+    case GenericAuthorization.is(authz):
+      msgTypeUrl = (authz as GenericAuthorization).msg;
+      break;
+
+    case SendAuthorization.is(authz):
+      msgTypeUrl = MsgSend.typeUrl;
+      break;
+
+    case StakeAuthorization.is(authz):
+      const authzType = (authz as StakeAuthorization).authorizationType;
+      if (authzType === AuthorizationType.AUTHORIZATION_TYPE_DELEGATE) {
+        msgTypeUrl = MsgDelegate.typeUrl;
+        break;
+      }
+      if (authzType === AuthorizationType.AUTHORIZATION_TYPE_UNDELEGATE) {
+        msgTypeUrl = MsgUndelegate.typeUrl;
+        break;
+      }
+      if (authzType === AuthorizationType.AUTHORIZATION_TYPE_REDELEGATE) {
+        msgTypeUrl = MsgBeginRedelegate.typeUrl;
+        break;
+      }
+    default:
+      break;
+  }
+
+  return revoke({
+    grantee,
+    granter,
+    msgTypeUrl,
+  });
+};
+
+// ==========================================
+
 const txRaw = cosmos.tx.v1beta1.TxRaw;
 
 enum TxStatus {
@@ -187,5 +233,5 @@ export const useAuthzTx = (chainName: string) => {
     if (onComplete) onComplete();
   };
 
-  return { authzTx, createGrantMsg };
+  return { authzTx, createGrantMsg, createRevokeMsg };
 };
diff --git a/examples/telescope-authz/hooks/useGrants.ts b/examples/telescope-authz/hooks/useGrants.ts
index ce9cd8e87..26ae8701f 100644
--- a/examples/telescope-authz/hooks/useGrants.ts
+++ b/examples/telescope-authz/hooks/useGrants.ts
@@ -36,6 +36,7 @@ export const useGrants = (chainName: string) => {
       }),
     enabled: !!address && hasQueryClient,
     select: (data) => data?.grants,
+    staleTime: Infinity,
   });
 
   const granteeGrantsQuery = useQuery({
@@ -46,6 +47,7 @@ export const useGrants = (chainName: string) => {
       }),
     enabled: !!address && hasQueryClient,
     select: (data) => data?.grants,
+    staleTime: Infinity,
   });
 
   const dataQueries = {
diff --git a/examples/telescope-authz/utils/authz.ts b/examples/telescope-authz/utils/authz.ts
index 17337cfa9..21fe4b757 100644
--- a/examples/telescope-authz/utils/authz.ts
+++ b/examples/telescope-authz/utils/authz.ts
@@ -77,6 +77,7 @@ export const prettyGrants = (
 };
 
 export type PrettyGrant = ReturnType<typeof prettyGrants>[0];
+export type PrettyPermission = PrettyGrant['permissions'][0];
 
 const formatTokenAmount = (token: Coin) => {
   const symbol = getSymbolByDenom(token.denom);

From 4269f7de140046f51fb158633fe51ffdc5986417 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Fri, 16 Feb 2024 10:09:07 +0800
Subject: [PATCH 11/16] feat: exec stake grants

---
 .../components/authz/AuthzSection.tsx         |  11 +-
 .../components/authz/CustomizationField.tsx   |  63 ++--
 .../components/authz/GrantCard.tsx            |  56 ++-
 .../components/authz/GrantDetailsModal.tsx    |  28 +-
 .../components/authz/GrantModal.tsx           |  36 +-
 .../authz/{GrantsByMe.tsx => Grants.tsx}      |  19 +-
 .../components/authz/GrantsToMe.tsx           |  23 --
 .../components/authz/PermissionDetailCard.tsx |  21 +-
 .../authz/SelectValidatorsModal.tsx           | 103 +++---
 examples/telescope-authz/components/index.tsx |   1 +
 .../components/staking/AllValidators.tsx      |  66 ++++
 .../components/staking/AllValidatorsList.tsx  | 119 ++++++
 .../components/staking/DelegateModal.tsx      | 349 ++++++++++++++++++
 .../components/staking/MyValidators.tsx       | 134 +++++++
 .../components/staking/MyValidatorsList.tsx   |  97 +++++
 .../components/staking/Overview.tsx           |  96 +++++
 .../components/staking/RedelegateModal.tsx    | 188 ++++++++++
 .../staking/SelectValidatorModal.tsx          | 133 +++++++
 .../components/staking/StakingSection.tsx     |  77 ++++
 .../components/staking/UndelegateModal.tsx    | 183 +++++++++
 .../components/staking/ValidatorInfoModal.tsx |  95 +++++
 .../components/staking/index.ts               |   1 +
 .../components/wallet/ChainCard.tsx           |  43 +++
 .../components/wallet/Wallet.tsx              |  23 +-
 .../telescope-authz/context/authz-context.tsx |  35 ++
 examples/telescope-authz/context/index.ts     |   1 +
 examples/telescope-authz/hooks/index.ts       |   3 +
 examples/telescope-authz/hooks/useAuthzTx.ts  |  13 +-
 .../telescope-authz/hooks/useDisclosure.ts    |  18 +
 .../telescope-authz/hooks/useStakingData.ts   | 269 ++++++++++++++
 examples/telescope-authz/hooks/useToast.tsx   |   3 +-
 .../hooks/useValidatorLogos.ts                |  13 +
 examples/telescope-authz/pages/_app.tsx       |  20 +-
 examples/telescope-authz/pages/index.tsx      |  11 +-
 examples/telescope-authz/pages/stake.tsx      |  31 ++
 35 files changed, 2191 insertions(+), 191 deletions(-)
 rename examples/telescope-authz/components/authz/{GrantsByMe.tsx => Grants.tsx} (73%)
 delete mode 100644 examples/telescope-authz/components/authz/GrantsToMe.tsx
 create mode 100644 examples/telescope-authz/components/staking/AllValidators.tsx
 create mode 100644 examples/telescope-authz/components/staking/AllValidatorsList.tsx
 create mode 100644 examples/telescope-authz/components/staking/DelegateModal.tsx
 create mode 100644 examples/telescope-authz/components/staking/MyValidators.tsx
 create mode 100644 examples/telescope-authz/components/staking/MyValidatorsList.tsx
 create mode 100644 examples/telescope-authz/components/staking/Overview.tsx
 create mode 100644 examples/telescope-authz/components/staking/RedelegateModal.tsx
 create mode 100644 examples/telescope-authz/components/staking/SelectValidatorModal.tsx
 create mode 100644 examples/telescope-authz/components/staking/StakingSection.tsx
 create mode 100644 examples/telescope-authz/components/staking/UndelegateModal.tsx
 create mode 100644 examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
 create mode 100644 examples/telescope-authz/components/staking/index.ts
 create mode 100644 examples/telescope-authz/components/wallet/ChainCard.tsx
 create mode 100644 examples/telescope-authz/context/authz-context.tsx
 create mode 100644 examples/telescope-authz/context/index.ts
 create mode 100644 examples/telescope-authz/hooks/useDisclosure.ts
 create mode 100644 examples/telescope-authz/hooks/useStakingData.ts
 create mode 100644 examples/telescope-authz/hooks/useValidatorLogos.ts
 create mode 100644 examples/telescope-authz/pages/stake.tsx

diff --git a/examples/telescope-authz/components/authz/AuthzSection.tsx b/examples/telescope-authz/components/authz/AuthzSection.tsx
index f9c23cc18..3e5ae2c6a 100644
--- a/examples/telescope-authz/components/authz/AuthzSection.tsx
+++ b/examples/telescope-authz/components/authz/AuthzSection.tsx
@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import { ChainName } from 'cosmos-kit';
+import { useChain } from '@cosmos-kit/react';
 import { Box, Button, Tabs, Text } from '@interchain-ui/react';
 
+import { Grants } from './Grants';
 import { GrantModal } from './GrantModal';
-import { GrantsByMe } from './GrantsByMe';
-import { GrantsToMe } from './GrantsToMe';
-import { useChain } from '@cosmos-kit/react';
 
 export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -54,8 +53,10 @@ export const AuthzSection = ({ chainName }: { chainName: ChainName }) => {
         </Button>
       </Box>
 
-      {activeTab === 0 && <GrantsToMe grants={[]} />}
-      {activeTab === 1 && <GrantsByMe chainName={chainName} />}
+      <Grants
+        chainName={chainName}
+        role={activeTab === 0 ? 'grantee' : 'granter'}
+      />
 
       <GrantModal
         isOpen={isOpen}
diff --git a/examples/telescope-authz/components/authz/CustomizationField.tsx b/examples/telescope-authz/components/authz/CustomizationField.tsx
index 1f53518e4..7021bb5da 100644
--- a/examples/telescope-authz/components/authz/CustomizationField.tsx
+++ b/examples/telescope-authz/components/authz/CustomizationField.tsx
@@ -4,6 +4,7 @@ import { Box, NumberField, SelectButton, Text } from '@interchain-ui/react';
 import { useValidators } from '@/hooks';
 import { Permission, PermissionId } from '@/configs';
 import { SelectValidatorsModal } from './SelectValidatorsModal';
+import { AccessList } from './GrantModal';
 
 // ==============================================
 
@@ -34,36 +35,27 @@ type DelegateCustomizationProps = {
   value: number | undefined;
   onChange: (value: string) => void;
   chainName: string;
-  allowList: string[];
-  denyList: string[];
-  setAllowList: Dispatch<SetStateAction<string[]>>;
-  setDenyList: Dispatch<SetStateAction<string[]>>;
+  accessList: AccessList;
+  setAccessList: Dispatch<SetStateAction<AccessList>>;
 };
 
 const DelegateCustomization = ({
   value,
   onChange,
   chainName,
-  allowList,
-  denyList,
-  setAllowList,
-  setDenyList,
+  accessList,
+  setAccessList,
 }: DelegateCustomizationProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const { data } = useValidators(chainName);
 
-  const allowedValidators = data
-    ? allowList.map((address) => data.find((v) => v.address === address)!.name)
+  const validatorNames = data
+    ? accessList.addresses.map(
+        (address) => data.find((v) => v.address === address)!.name
+      )
     : [];
 
-  const deniedValidators = data
-    ? denyList.map((address) => data.find((v) => v.address === address)!.name)
-    : [];
-
-  const hasAllowedValidators = allowedValidators.length > 0;
-  const hasDeniedValidators = deniedValidators.length > 0;
-
   return (
     <>
       <NumberField
@@ -82,35 +74,28 @@ const DelegateCustomization = ({
         onClick={() => setIsOpen(true)}
       />
       <Box
-        display={hasAllowedValidators || hasDeniedValidators ? 'flex' : 'none'}
-        flexDirection="column"
-        gap="$4"
+        display={validatorNames.length > 0 ? 'block' : 'none'}
         mt="$2"
         px="$2"
       >
-        {hasAllowedValidators && (
-          <Text>
-            <Text as="span" fontWeight="$semibold" color="$textSuccess">
-              Allow List:&nbsp;
-            </Text>
-            {allowedValidators.join(', ')}
-          </Text>
-        )}
-        {hasDeniedValidators && (
-          <Text>
-            <Text as="span" fontWeight="$semibold" color="$textDanger">
-              Deny List:&nbsp;
-            </Text>
-            {deniedValidators.join(', ')}
+        <Text>
+          <Text
+            as="span"
+            fontWeight="$semibold"
+            color={
+              accessList.type === 'allowList' ? '$textSuccess' : '$textDanger'
+            }
+          >
+            {accessList.type === 'allowList' ? 'Allow List' : 'Deny List'}
+            :&nbsp;
           </Text>
-        )}
+          {validatorNames.join(', ')}
+        </Text>
       </Box>
       <SelectValidatorsModal
         chainName={chainName}
-        allowList={allowList}
-        denyList={denyList}
-        setAllowList={setAllowList}
-        setDenyList={setDenyList}
+        accessList={accessList}
+        setAccessList={setAccessList}
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
       />
diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index c1d5f3402..a642f684e 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import Image from 'next/image';
 import { useState } from 'react';
 import {
@@ -9,12 +10,13 @@ import {
   TextField,
 } from '@interchain-ui/react';
 
-import { getCoin } from '@/configs';
 import {
   getChainLogoByChainName,
   PrettyGrant,
   PrettyPermission,
 } from '@/utils';
+import { getCoin } from '@/configs';
+import { useAuthzContext } from '@/context';
 import { useAuthzTx, useGrants } from '@/hooks';
 
 import styles from '@/styles/custom.module.css';
@@ -38,6 +40,7 @@ export const GrantCard = ({
     useState<PrettyPermission>();
 
   const { refetch } = useGrants(chainName);
+  const { setPermission } = useAuthzContext();
   const { authzTx, createRevokeMsg } = useAuthzTx(chainName);
 
   const { address, permissions } = grant;
@@ -130,24 +133,39 @@ export const GrantCard = ({
         height="$12"
         overflow="hidden"
       >
-        {permissions.map((permission) => (
-          <Button
-            key={permission.name}
-            size="sm"
-            intent="secondary"
-            rightIcon={isGranter ? 'close' : 'arrowRightRounded'}
-            iconSize={isGranter ? '$lg' : '$2xs'}
-            onClick={() => {
-              handleRevoke(permission);
-              setRevokingPermission(permission);
-            }}
-            disabled={
-              isRevoking && revokingPermission?.name === permission.name
-            }
-          >
-            {permission.name}
-          </Button>
-        ))}
+        {permissions.map((permission) =>
+          isGranter ? (
+            <Button
+              key={permission.name}
+              size="sm"
+              intent="secondary"
+              rightIcon="close"
+              iconSize="$lg"
+              onClick={() => {
+                handleRevoke(permission);
+                setRevokingPermission(permission);
+              }}
+              disabled={
+                isRevoking && revokingPermission?.name === permission.name
+              }
+            >
+              {permission.name}
+            </Button>
+          ) : (
+            <Link href="/stake" style={{ textDecoration: 'none' }}>
+              <Button
+                key={permission.name}
+                size="sm"
+                intent="secondary"
+                rightIcon="arrowRightRounded"
+                iconSize="$2xs"
+                onClick={() => setPermission(permission)}
+              >
+                {permission.name}
+              </Button>
+            </Link>
+          )
+        )}
       </Box>
 
       <Button intent="tertiary" onClick={onViewDetails} fluidWidth>
diff --git a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
index 7c04ebc96..2814956da 100644
--- a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
@@ -8,17 +8,20 @@ import { PermissionDetailCard } from './PermissionDetailCard';
 type GrantDetailsModalProps = {
   grant: PrettyGrant;
   chainName: string;
+  role: 'granter' | 'grantee';
   isOpen: boolean;
   onClose: () => void;
 };
 
 export const GrantDetailsModal = ({
+  role,
   grant,
   isOpen,
   onClose,
   chainName,
 }: GrantDetailsModalProps) => {
   const { permissions } = grant;
+  const isGranter = role === 'granter';
 
   const [isRevoking, setIsRevoking] = useState(false);
   const [revokingPermission, setRevokingPermission] =
@@ -61,6 +64,7 @@ export const GrantDetailsModal = ({
           {permissions.map((permission) => (
             <PermissionDetailCard
               key={permission.name}
+              role={role}
               onRevoke={() => {
                 handleRevoke([permission]);
                 setRevokingPermission(permission);
@@ -74,17 +78,19 @@ export const GrantDetailsModal = ({
           ))}
         </Box>
 
-        <Button
-          intent="tertiary"
-          fluidWidth
-          onClick={() => {
-            handleRevoke(permissions);
-          }}
-          isLoading={isRevoking && !revokingPermission}
-          disabled={isRevoking && !revokingPermission}
-        >
-          Revoke All
-        </Button>
+        {isGranter && (
+          <Button
+            intent="tertiary"
+            fluidWidth
+            onClick={() => {
+              handleRevoke(permissions);
+            }}
+            isLoading={isRevoking && !revokingPermission}
+            disabled={isRevoking && !revokingPermission}
+          >
+            Revoke All
+          </Button>
+        )}
       </Box>
     </BasicModal>
   );
diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index 39626f319..66e3cb2c1 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -33,6 +33,11 @@ import { CustomizationField } from './CustomizationField';
 
 import styles from '@/styles/custom.module.css';
 
+export type AccessList = {
+  type: 'allowList' | 'denyList';
+  addresses: string[];
+};
+
 type GrantModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -52,8 +57,10 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
   const [delegateLimit, setDelegateLimit] = useState<number | undefined>(
     undefined
   );
-  const [allowList, setAllowList] = useState<string[]>([]);
-  const [denyList, setDenyList] = useState<string[]>([]);
+  const [accessList, setAccessList] = useState<AccessList>({
+    type: 'allowList',
+    addresses: [],
+  });
 
   const [isGranting, setIsGranting] = useState(false);
 
@@ -72,8 +79,7 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
     setSendLimit(undefined);
     setDelegateLimit(undefined);
     setIsGranting(false);
-    setAllowList([]);
-    setDenyList([]);
+    setAccessList({ type: 'allowList', addresses: [] });
     onClose();
   };
 
@@ -94,14 +100,14 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
 
     const delegateMsg: GrantMsg = {
       grantType: 'delegate',
-      customize: delegateLimit //TODO: add allowList and denyList later
-        ? {
-            authorizationType: AuthorizationType.AUTHORIZATION_TYPE_DELEGATE,
-            maxTokens: coin(shiftDigits(delegateLimit, exponent), denom),
-            allowList: { address: allowList },
-            // denyList: { address: [] },
-          }
-        : undefined,
+      customize:
+        delegateLimit || accessList.addresses.length > 0
+          ? {
+              authorizationType: AuthorizationType.AUTHORIZATION_TYPE_DELEGATE,
+              maxTokens: coin(shiftDigits(delegateLimit, exponent), denom),
+              [accessList.type]: { address: accessList.addresses },
+            }
+          : undefined,
     };
 
     const grantMsg: Record<PermissionId, GrantMsg> = {
@@ -210,10 +216,8 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
               <CustomizationField
                 permissionType={selectedPermission.id}
                 chainName={chainName}
-                allowList={allowList}
-                denyList={denyList}
-                setAllowList={setAllowList}
-                setDenyList={setDenyList}
+                accessList={accessList}
+                setAccessList={setAccessList}
                 value={delegateLimit}
                 onChange={(val) => {
                   if (!val) {
diff --git a/examples/telescope-authz/components/authz/GrantsByMe.tsx b/examples/telescope-authz/components/authz/Grants.tsx
similarity index 73%
rename from examples/telescope-authz/components/authz/GrantsByMe.tsx
rename to examples/telescope-authz/components/authz/Grants.tsx
index dd5d4902c..d5448a724 100644
--- a/examples/telescope-authz/components/authz/GrantsByMe.tsx
+++ b/examples/telescope-authz/components/authz/Grants.tsx
@@ -6,25 +6,29 @@ import { PrettyGrant } from '@/utils';
 import { GrantCard } from './GrantCard';
 import { GrantDetailsModal } from './GrantDetailsModal';
 
-type GrantsByMeProps = {
+type GrantsProps = {
+  role: 'granter' | 'grantee';
   chainName: string;
 };
 
-export const GrantsByMe = ({ chainName }: GrantsByMeProps) => {
+export const Grants = ({ chainName, role }: GrantsProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [viewingGrant, setViewingGrant] = useState<PrettyGrant>();
   const { data, isLoading } = useGrants(chainName);
 
+  const isGranter = role === 'granter';
+  const grants = isGranter ? data?.granterGrants : data?.granteeGrants;
+
   return (
     <Box flex="1" display="flex" justifyContent="center" alignItems="center">
       {isLoading ? (
         <Spinner size="$6xl" />
-      ) : data && data.granterGrants.length > 0 ? (
+      ) : grants && grants.length > 0 ? (
         <Box width="$full" alignSelf="flex-start">
-          {data.granterGrants.map((grant) => (
+          {grants.map((grant) => (
             <GrantCard
               key={grant.address}
-              role="granter"
+              role={role}
               grant={grant}
               chainName={chainName}
               onViewDetails={() => {
@@ -36,12 +40,15 @@ export const GrantsByMe = ({ chainName }: GrantsByMeProps) => {
         </Box>
       ) : (
         <Text fontSize="$lg" color="$textSecondary" fontWeight="$semibold">
-          You haven't granted any permission yet
+          {isGranter
+            ? "You haven't granted any permission yet"
+            : "You don't have any grants"}
         </Text>
       )}
 
       {viewingGrant && (
         <GrantDetailsModal
+          role={role}
           grant={viewingGrant}
           isOpen={isOpen}
           chainName={chainName}
diff --git a/examples/telescope-authz/components/authz/GrantsToMe.tsx b/examples/telescope-authz/components/authz/GrantsToMe.tsx
deleted file mode 100644
index ea9c8e949..000000000
--- a/examples/telescope-authz/components/authz/GrantsToMe.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Box, Text } from '@interchain-ui/react';
-
-type GrantsToMeProps = {
-  grants: any[];
-};
-
-export const GrantsToMe = ({ grants }: GrantsToMeProps) => {
-  if (grants.length === 0) {
-    return (
-      <Text
-        fontSize="$lg"
-        color="$textSecondary"
-        fontWeight="$semibold"
-        textAlign="center"
-        attributes={{ my: '$30' }}
-      >
-        You don't have any grants
-      </Text>
-    );
-  }
-
-  return <div>GrantsToMe</div>;
-};
diff --git a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
index 5745b46ae..66789d780 100644
--- a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
+++ b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
@@ -4,6 +4,7 @@ import { useValidators } from '@/hooks';
 import { getAttributePairs, PrettyGrant } from '@/utils';
 
 type PermissionDetailCardProps = {
+  role: 'granter' | 'grantee';
   onRevoke: () => void;
   isRevoking: boolean;
   chainName: string;
@@ -11,12 +12,14 @@ type PermissionDetailCardProps = {
 };
 
 export const PermissionDetailCard = ({
+  role,
   onRevoke,
   isRevoking,
   chainName,
   permission,
 }: PermissionDetailCardProps) => {
   const { name, expiration, expiry, authorization } = permission;
+  const isGranter = role === 'granter';
 
   const { data, isLoading } = useValidators(chainName, { fetchLogos: false });
   const attributes = getAttributePairs(authorization, data || []);
@@ -40,14 +43,16 @@ export const PermissionDetailCard = ({
         <Text fontWeight="$semibold" fontSize="$md">
           {name}
         </Text>
-        <Button
-          intent="tertiary"
-          size="sm"
-          onClick={onRevoke}
-          disabled={isRevoking}
-        >
-          Revoke
-        </Button>
+        {isGranter && (
+          <Button
+            intent="tertiary"
+            size="sm"
+            onClick={onRevoke}
+            disabled={isRevoking}
+          >
+            Revoke
+          </Button>
+        )}
       </Box>
 
       <Box display="flex" flexDirection="column" gap="$7">
diff --git a/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx b/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
index 3c76be1fd..04ee042ae 100644
--- a/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
+++ b/examples/telescope-authz/components/authz/SelectValidatorsModal.tsx
@@ -1,10 +1,13 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import {
   BasicModal,
   Box,
   Button,
+  GovernanceRadio,
+  GovernanceRadioGroup,
   GridColumn,
   Spinner,
+  Stack,
   Text,
   ValidatorList,
   ValidatorNameCell,
@@ -12,39 +15,27 @@ import {
 
 import { useValidators } from '@/hooks';
 import { ExtendedValidator as Validator } from '@/utils';
+import { AccessList } from './GrantModal';
 
 type SelectValidatorsModalProps = {
   isOpen: boolean;
   onClose: () => void;
   chainName: string;
-  allowList: string[];
-  denyList: string[];
-  setAllowList: Dispatch<SetStateAction<string[]>>;
-  setDenyList: Dispatch<SetStateAction<string[]>>;
+  accessList: AccessList;
+  setAccessList: Dispatch<SetStateAction<AccessList>>;
 };
 
+type ListType = 'allowList' | 'denyList';
+
 export const SelectValidatorsModal = ({
   isOpen,
   onClose,
   chainName,
-  allowList,
-  denyList,
-  setAllowList,
-  setDenyList,
+  accessList,
+  setAccessList,
 }: SelectValidatorsModalProps) => {
   const { data, isLoading } = useValidators(chainName);
-
-  const handleChoiceClick =
-    (validator: Validator, onListChange: typeof setAllowList) => () => {
-      onListChange((prev) => [...prev, validator.address]);
-    };
-
-  const handleCancelClick =
-    (validator: Validator, onListChange: typeof setAllowList) => () => {
-      onListChange((prev) =>
-        prev.filter((address) => address !== validator.address)
-      );
-    };
+  const listType = accessList.type;
 
   const columns: GridColumn[] = useMemo(() => {
     return [
@@ -70,43 +61,38 @@ export const SelectValidatorsModal = ({
             alignItems="center"
             justifyContent="flex-end"
             gap="$5"
-            pr="$4"
+            pr="$6"
           >
-            {allowList.includes(validator.address) ? (
-              <Button
-                size="sm"
-                intent="success"
-                onClick={handleCancelClick(validator, setAllowList)}
-                rightIcon="close"
-                iconSize="$xl"
-              >
-                Allowed
-              </Button>
-            ) : denyList.includes(validator.address) ? (
+            {accessList.addresses.includes(validator.address) ? (
               <Button
                 size="sm"
-                intent="danger"
-                onClick={handleCancelClick(validator, setDenyList)}
+                intent={listType === 'allowList' ? 'success' : 'danger'}
+                onClick={() => {
+                  setAccessList((prev) => ({
+                    ...prev,
+                    addresses: prev.addresses.filter(
+                      (address) => address !== validator.address
+                    ),
+                  }));
+                }}
                 rightIcon="close"
                 iconSize="$xl"
               >
-                Denied
+                {listType === 'allowList' ? 'Allowed' : 'Denied'}
               </Button>
             ) : (
               <>
                 <Button
                   size="sm"
                   intent="text"
-                  onClick={handleChoiceClick(validator, setAllowList)}
-                >
-                  Allow
-                </Button>
-                <Button
-                  size="sm"
-                  intent="text"
-                  onClick={handleChoiceClick(validator, setDenyList)}
+                  onClick={() => {
+                    setAccessList((prev) => ({
+                      ...prev,
+                      addresses: [...prev.addresses, validator.address],
+                    }));
+                  }}
                 >
-                  Deny
+                  {listType === 'allowList' ? 'Allow' : 'Deny'}
                 </Button>
               </>
             )}
@@ -114,7 +100,7 @@ export const SelectValidatorsModal = ({
         ),
       },
     ];
-  }, [chainName, allowList, denyList]);
+  }, [chainName, accessList]);
 
   return (
     <BasicModal title="Select Validators" isOpen={isOpen} onClose={onClose}>
@@ -132,6 +118,31 @@ export const SelectValidatorsModal = ({
           <Spinner size="$6xl" />
         ) : data && data.length > 0 ? (
           <Box width="$full" alignSelf="flex-start">
+            <Box
+              display="flex"
+              justifyContent="center"
+              transform="scale(0.86)"
+              my="$6"
+            >
+              <GovernanceRadioGroup
+                value={listType}
+                defaultValue="allowList"
+                onChange={(selected) => {
+                  setAccessList((prev) => ({
+                    ...prev,
+                    type: selected as ListType,
+                  }));
+                }}
+              >
+                <Stack direction="horizontal" space="$8">
+                  <GovernanceRadio value="allowList">
+                    Allow List
+                  </GovernanceRadio>
+                  <GovernanceRadio value="denyList">Deny List</GovernanceRadio>
+                </Stack>
+              </GovernanceRadioGroup>
+            </Box>
+
             <ValidatorList
               data={data}
               columns={columns}
diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index 8a2599b0a..17a77110a 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -1,3 +1,4 @@
 export * from './authz';
 export * from './common';
 export * from './wallet';
+export * from './staking';
diff --git a/examples/telescope-authz/components/staking/AllValidators.tsx b/examples/telescope-authz/components/staking/AllValidators.tsx
new file mode 100644
index 000000000..ca21669bf
--- /dev/null
+++ b/examples/telescope-authz/components/staking/AllValidators.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Text } from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+
+import { DelegateModal } from './DelegateModal';
+import AllValidatorsList from './AllValidatorsList';
+import { Prices, useDisclosure } from '@/hooks';
+import { type ExtendedValidator as Validator } from '@/utils';
+
+export const AllValidators = ({
+  validators,
+  balance,
+  updateData,
+  unbondingDays,
+  chainName,
+  logos,
+  prices,
+}: {
+  validators: Validator[];
+  balance: string;
+  updateData: () => void;
+  unbondingDays: string;
+  chainName: ChainName;
+  logos: {
+    [key: string]: string;
+  };
+  prices: Prices;
+}) => {
+  const delegateModalControl = useDisclosure();
+  const [selectedValidator, setSelectedValidator] = useState<Validator>();
+
+  return (
+    <>
+      <Text
+        color="$textSecondary"
+        fontSize="$lg"
+        fontWeight="$semibold"
+        attributes={{ mt: '$14', mb: '$6' }}
+      >
+        All Validators
+      </Text>
+
+      <AllValidatorsList
+        validators={validators}
+        chainName={chainName}
+        logos={logos}
+        openModal={delegateModalControl.onOpen}
+        setSelectedValidator={setSelectedValidator}
+      />
+
+      {selectedValidator && (
+        <DelegateModal
+          balance={balance}
+          updateData={updateData}
+          unbondingDays={unbondingDays}
+          chainName={chainName}
+          prices={prices}
+          logoUrl={logos[selectedValidator.address]}
+          modalControl={delegateModalControl}
+          selectedValidator={selectedValidator}
+          modalTitle="Validator"
+        />
+      )}
+    </>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/AllValidatorsList.tsx b/examples/telescope-authz/components/staking/AllValidatorsList.tsx
new file mode 100644
index 000000000..f6856d506
--- /dev/null
+++ b/examples/telescope-authz/components/staking/AllValidatorsList.tsx
@@ -0,0 +1,119 @@
+import React, { Dispatch, SetStateAction, useMemo } from 'react';
+import { ChainName } from 'cosmos-kit';
+
+import { getCoin } from '@/configs';
+import { shiftDigits, type ExtendedValidator as Validator } from '@/utils';
+import {
+  Text,
+  Button,
+  ValidatorList,
+  ValidatorNameCell,
+  ValidatorTokenAmountCell,
+  GridColumn,
+} from '@interchain-ui/react';
+
+const AllValidatorsList = ({
+  validators,
+  openModal,
+  chainName,
+  logos,
+  setSelectedValidator,
+}: {
+  validators: Validator[];
+  chainName: ChainName;
+  openModal: () => void;
+  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
+  logos: {
+    [key: string]: string;
+  };
+}) => {
+  const coin = getCoin(chainName);
+
+  const columns = useMemo(() => {
+    const _columns: GridColumn[] = [
+      {
+        id: 'validator',
+        label: 'Validator',
+        width: '196px',
+        align: 'left',
+        render: (validator: Validator) => (
+          <ValidatorNameCell
+            validatorName={validator.name}
+            validatorImg={logos[validator.address]}
+          />
+        ),
+      },
+      {
+        id: 'voting-power',
+        label: 'Voting Power',
+        width: '196px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <ValidatorTokenAmountCell
+            amount={validator.votingPower}
+            symbol={coin.symbol}
+          />
+        ),
+      },
+      {
+        id: 'commission',
+        label: 'Commission',
+        width: '196px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <Text fontWeight="$semibold">
+            {shiftDigits(validator.commission, 2)}%
+          </Text>
+        ),
+      },
+      {
+        id: 'action',
+        width: '196px',
+        align: 'right',
+        render: (validator) => (
+          <Button
+            variant="solid"
+            intent="secondary"
+            size="sm"
+            onClick={() => {
+              openModal();
+              setSelectedValidator(validator);
+            }}
+            attributes={{ ml: 'auto' }}
+          >
+            Manage
+          </Button>
+        ),
+      },
+    ];
+
+    const hasApr = !!validators[0]?.apr;
+
+    if (hasApr) {
+      _columns.splice(3, 0, {
+        id: 'apr',
+        label: 'APR',
+        width: '196px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <Text fontWeight="$semibold">{validator.apr}%</Text>
+        ),
+      });
+    }
+
+    return _columns;
+  }, [chainName]);
+
+  return (
+    <ValidatorList
+      columns={columns}
+      data={validators}
+      tableProps={{
+        width: '$full',
+      }}
+      variant="ghost"
+    />
+  );
+};
+
+export default React.memo(AllValidatorsList);
diff --git a/examples/telescope-authz/components/staking/DelegateModal.tsx b/examples/telescope-authz/components/staking/DelegateModal.tsx
new file mode 100644
index 000000000..6828896bc
--- /dev/null
+++ b/examples/telescope-authz/components/staking/DelegateModal.tsx
@@ -0,0 +1,349 @@
+import { useState } from 'react';
+import { StdFee } from '@cosmjs/amino';
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import BigNumber from 'bignumber.js';
+import {
+  BasicModal,
+  StakingDelegate,
+  Box,
+  Button,
+  Callout,
+  Text,
+  NumberField,
+} from '@interchain-ui/react';
+
+import {
+  type ExtendedValidator as Validator,
+  formatValidatorMetaInfo,
+  getAssetLogoUrl,
+  isGreaterThanZero,
+  shiftDigits,
+  calcDollarValue,
+} from '@/utils';
+import { getCoin, getExponent } from '@/configs';
+import {
+  Prices,
+  useAuthzTx,
+  UseDisclosureReturn,
+  useToast,
+  useTx,
+} from '@/hooks';
+import { cosmos } from '@/src/codegen';
+import { useAuthzContext } from '@/context';
+import { MsgDelegate } from '@/src/codegen/cosmos/staking/v1beta1/tx';
+import { StakeAuthorization } from '@/src/codegen/cosmos/staking/v1beta1/authz';
+
+const { delegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
+
+export type MaxAmountAndFee = {
+  maxAmount: number;
+  fee: StdFee;
+};
+
+export const DelegateModal = ({
+  balance,
+  updateData,
+  unbondingDays,
+  chainName,
+  logoUrl,
+  modalControl,
+  selectedValidator,
+  closeOuterModal,
+  prices,
+  modalTitle,
+  showDescription = true,
+}: {
+  balance: string;
+  updateData: () => void;
+  unbondingDays: string;
+  chainName: ChainName;
+  modalControl: UseDisclosureReturn;
+  selectedValidator: Validator;
+  logoUrl: string;
+  prices: Prices;
+  closeOuterModal?: () => void;
+  modalTitle?: string;
+  showDescription?: boolean;
+}) => {
+  const { isOpen, onClose } = modalControl;
+  const { address, estimateFee } = useChain(chainName);
+
+  const [amount, setAmount] = useState<number | undefined>(0);
+  const [isDelegating, setIsDelegating] = useState(false);
+  const [isSimulating, setIsSimulating] = useState(false);
+  const [maxAmountAndFee, setMaxAmountAndFee] = useState<MaxAmountAndFee>();
+  const [, forceUpdate] = useState(0);
+
+  const coin = getCoin(chainName);
+  const exp = getExponent(chainName);
+  // const { tx } = useTx(chainName);
+  const { authzTx, createExecMsg } = useAuthzTx(chainName);
+  const { permission } = useAuthzContext();
+  const { toast } = useToast();
+
+  const onModalClose = () => {
+    onClose();
+    setAmount(0);
+    setIsDelegating(false);
+    setIsSimulating(false);
+  };
+
+  const onDelegateClick = async () => {
+    if (!amount || !permission) return;
+
+    const { grantee, granter, authorization } = permission;
+
+    const stakeAuthz = authorization as StakeAuthorization;
+
+    const allowList = stakeAuthz.allowList?.address || [];
+    const denyList = stakeAuthz.denyList?.address || [];
+
+    // TODO: check generic stake authz
+
+    if (
+      !allowList.includes(selectedValidator.address) ||
+      denyList.includes(selectedValidator.address)
+    ) {
+      toast({
+        title: 'Unauthorized Delegation',
+        description:
+          'You are not allowed to delegate to this validator from this account.',
+        type: 'error',
+      });
+      return;
+    }
+
+    setIsDelegating(true);
+
+    // const msg = delegate({
+    //   delegatorAddress: granter,
+    //   validatorAddress: selectedValidator.address,
+    //   amount: {
+    //     amount: shiftDigits(amount, exp),
+    //     denom: coin.base,
+    //   },
+    // });
+
+    const isMaxAmountAndFeeExists =
+      maxAmountAndFee &&
+      new BigNumber(amount).isEqualTo(maxAmountAndFee.maxAmount);
+
+    const msg = MsgDelegate.toProtoMsg(
+      MsgDelegate.fromPartial({
+        delegatorAddress: granter,
+        validatorAddress: selectedValidator.address,
+        amount: {
+          amount: shiftDigits(amount, exp),
+          denom: coin.base,
+        },
+      })
+    );
+
+    const msgs = [createExecMsg({ msgs: [msg], grantee })];
+    console.log('msgs', msgs);
+
+    // return;
+    authzTx({
+      msgs,
+      onSuccess: () => {
+        setMaxAmountAndFee(undefined);
+        closeOuterModal && closeOuterModal();
+        updateData();
+        onModalClose();
+      },
+      onComplete: () => {
+        setIsDelegating(false);
+      },
+    });
+
+    // await tx([msg], {
+    //   fee: isMaxAmountAndFeeExists ? maxAmountAndFee.fee : null,
+    //   onSuccess: () => {
+    //     setMaxAmountAndFee(undefined);
+    //     closeOuterModal && closeOuterModal();
+    //     updateData();
+    //     onModalClose();
+    //   },
+    // });
+
+    // setIsDelegating(false);
+  };
+
+  const handleMaxClick = async () => {
+    if (!address) return;
+
+    if (Number(balance) === 0) {
+      setAmount(0);
+      return;
+    }
+
+    setIsSimulating(true);
+
+    const msg = delegate({
+      delegatorAddress: address,
+      validatorAddress: selectedValidator.address,
+      amount: {
+        amount: shiftDigits(balance, exp),
+        denom: coin.base,
+      },
+    });
+
+    try {
+      const fee = await estimateFee([msg]);
+      const feeAmount = new BigNumber(fee.amount[0].amount).shiftedBy(-exp);
+      const balanceAfterFee = new BigNumber(balance)
+        .minus(feeAmount)
+        .toNumber();
+      setMaxAmountAndFee({ fee, maxAmount: balanceAfterFee });
+      setAmount(balanceAfterFee);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsSimulating(false);
+    }
+  };
+
+  const headerExtra = (
+    <>
+      {showDescription && selectedValidator.description && (
+        <Text fontSize="$md">{selectedValidator.description}</Text>
+      )}
+      {unbondingDays && (
+        <Callout
+          title={`Staking will lock your funds for ${unbondingDays} days`}
+          intent="error"
+          iconName="errorWarningLine"
+        >
+          You will need to undelegate in order for your staked assets to be
+          liquid again. This process will take {unbondingDays} days to complete.
+        </Callout>
+      )}
+    </>
+  );
+
+  return (
+    <BasicModal
+      title={modalTitle || 'Delegate'}
+      isOpen={isOpen}
+      onClose={onModalClose}
+    >
+      <Box
+        width={{ mobile: '100%', tablet: '$containerSm' }}
+        position="relative"
+      >
+        <Box
+          position="absolute"
+          bottom="150px"
+          left="104px"
+          zIndex="$10"
+          width="360px"
+        >
+          <NumberField
+            borderless
+            formatOptions={{
+              maximumFractionDigits: 6,
+            }}
+            value={amount}
+            onInput={(e) => {
+              // @ts-ignore
+              const val = e.target.value;
+
+              if (!val) {
+                setAmount(undefined);
+                return;
+              }
+
+              const max = maxAmountAndFee?.maxAmount || balance;
+
+              if (new BigNumber(val).gt(max)) {
+                setAmount(Number(max));
+                forceUpdate((n) => n + 1);
+                return;
+              }
+
+              setAmount(Number(val));
+            }}
+          />
+        </Box>
+        <StakingDelegate
+          header={{
+            title: selectedValidator.name,
+            subtitle: formatValidatorMetaInfo(selectedValidator),
+            avatarUrl: logoUrl,
+          }}
+          headerExtra={headerExtra}
+          delegationItems={[
+            {
+              label: 'Your Delegation',
+              tokenAmount: selectedValidator.delegation,
+              tokenName: coin.symbol,
+            },
+            {
+              label: 'Available to Delegate',
+              tokenAmount: balance,
+              tokenName: coin.symbol,
+            },
+          ]}
+          inputProps={{
+            inputToken: {
+              tokenName: coin.symbol,
+              tokenIconUrl: getAssetLogoUrl(coin),
+            },
+            notionalValue: amount
+              ? calcDollarValue(coin.base, amount, prices)
+              : undefined,
+            // value: amount,
+            // onValueInput: (val) => {
+            //   if (!val) {
+            //     setAmount(undefined);
+            //     return;
+            //   }
+
+            //   const max = maxAmountAndFee?.maxAmount || balance;
+
+            //   if (new BigNumber(val).gt(max)) {
+            //     setAmount(Number(max));
+            //     forceUpdate((n) => n + 1);
+            //     return;
+            //   }
+
+            //   setAmount(Number(val));
+            // },
+            partials: [
+              {
+                label: '1/2',
+                onClick: () => {
+                  setAmount(new BigNumber(balance).dividedBy(2).toNumber());
+                },
+              },
+              {
+                label: '1/3',
+                onClick: () => {
+                  setAmount(new BigNumber(balance).dividedBy(3).toNumber());
+                },
+              },
+              {
+                label: 'Max',
+                onClick: handleMaxClick,
+                isLoading: isSimulating,
+              },
+            ],
+          }}
+          footer={
+            <Button
+              intent="tertiary"
+              onClick={onDelegateClick}
+              disabled={
+                !isGreaterThanZero(amount) || isDelegating || isSimulating
+              }
+              isLoading={isDelegating}
+            >
+              Delegate
+            </Button>
+          }
+        />
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/MyValidators.tsx b/examples/telescope-authz/components/staking/MyValidators.tsx
new file mode 100644
index 000000000..58b560715
--- /dev/null
+++ b/examples/telescope-authz/components/staking/MyValidators.tsx
@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import { Text } from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+
+import MyValidatorsList from './MyValidatorsList';
+import { ValidatorInfoModal } from './ValidatorInfoModal';
+import { UndelegateModal } from './UndelegateModal';
+import { SelectValidatorModal } from './SelectValidatorModal';
+import { RedelegateModal } from './RedelegateModal';
+import { type ExtendedValidator as Validator } from '@/utils';
+import { DelegateModal } from './DelegateModal';
+import { Prices, useDisclosure } from '@/hooks';
+
+export const MyValidators = ({
+  myValidators,
+  allValidators,
+  balance,
+  updateData,
+  unbondingDays,
+  chainName,
+  logos,
+  prices,
+}: {
+  myValidators: Validator[];
+  allValidators: Validator[];
+  balance: string;
+  updateData: () => void;
+  unbondingDays: string;
+  chainName: ChainName;
+  prices: Prices;
+  logos: {
+    [key: string]: string;
+  };
+}) => {
+  const [selectedValidator, setSelectedValidator] = useState<Validator>();
+  const [validatorToRedelegate, setValidatorToRedelegate] =
+    useState<Validator>();
+
+  const validatorInfoModalControl = useDisclosure();
+  const delegateModalControl = useDisclosure();
+  const undelegateModalControl = useDisclosure();
+  const selectValidatorModalControl = useDisclosure();
+  const redelegateModalControl = useDisclosure();
+
+  return (
+    <>
+      <Text
+        color="$textSecondary"
+        fontSize="$lg"
+        fontWeight="$semibold"
+        attributes={{ mt: '$14', mb: '$6' }}
+      >
+        My Validators
+      </Text>
+
+      <MyValidatorsList
+        logos={logos}
+        myValidators={myValidators}
+        chainName={chainName}
+        openModal={validatorInfoModalControl.onOpen}
+        setSelectedValidator={setSelectedValidator}
+      />
+
+      {selectedValidator && validatorInfoModalControl.isOpen && (
+        <ValidatorInfoModal
+          chainName={chainName}
+          logoUrl={logos[selectedValidator.address]}
+          modalControl={validatorInfoModalControl}
+          selectedValidator={selectedValidator}
+          handleClick={{
+            openDelegateModal: delegateModalControl.onOpen,
+            openSelectValidatorModal: selectValidatorModalControl.onOpen,
+            openUndelegateModal: undelegateModalControl.onOpen,
+          }}
+        />
+      )}
+
+      {selectedValidator && delegateModalControl.isOpen && (
+        <DelegateModal
+          balance={balance}
+          chainName={chainName}
+          closeOuterModal={validatorInfoModalControl.onClose}
+          modalControl={delegateModalControl}
+          selectedValidator={selectedValidator}
+          logoUrl={logos[selectedValidator.address]}
+          unbondingDays={unbondingDays}
+          updateData={updateData}
+          showDescription={false}
+          prices={prices}
+        />
+      )}
+
+      {selectedValidator && undelegateModalControl.isOpen && (
+        <UndelegateModal
+          chainName={chainName}
+          closeOuterModal={validatorInfoModalControl.onClose}
+          modalControl={undelegateModalControl}
+          selectedValidator={selectedValidator}
+          logoUrl={logos[selectedValidator.address]}
+          unbondingDays={unbondingDays}
+          updateData={updateData}
+          prices={prices}
+        />
+      )}
+
+      {selectValidatorModalControl.isOpen && (
+        <SelectValidatorModal
+          chainName={chainName}
+          modalControl={selectValidatorModalControl}
+          logos={logos}
+          allValidators={allValidators}
+          handleValidatorClick={(validator) => {
+            redelegateModalControl.onOpen();
+            selectValidatorModalControl.onClose();
+            setValidatorToRedelegate(validator);
+          }}
+        />
+      )}
+
+      {selectedValidator &&
+        validatorToRedelegate &&
+        redelegateModalControl.isOpen && (
+          <RedelegateModal
+            chainName={chainName}
+            modalControl={redelegateModalControl}
+            selectedValidator={selectedValidator}
+            validatorToRedelegate={validatorToRedelegate}
+            updateData={updateData}
+            prices={prices}
+          />
+        )}
+    </>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/MyValidatorsList.tsx b/examples/telescope-authz/components/staking/MyValidatorsList.tsx
new file mode 100644
index 000000000..2d0ed7086
--- /dev/null
+++ b/examples/telescope-authz/components/staking/MyValidatorsList.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Dispatch, SetStateAction } from 'react';
+import {
+  Button,
+  ValidatorList,
+  ValidatorNameCell,
+  ValidatorTokenAmountCell,
+} from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+import { getCoin } from '@/configs';
+import { type ExtendedValidator as Validator } from '@/utils';
+
+const MyValidatorsList = ({
+  myValidators,
+  openModal,
+  chainName,
+  logos,
+  setSelectedValidator,
+}: {
+  myValidators: Validator[];
+  chainName: ChainName;
+  openModal: () => void;
+  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
+  logos: {
+    [key: string]: string;
+  };
+}) => {
+  const coin = getCoin(chainName);
+
+  return (
+    <ValidatorList
+      columns={[
+        {
+          id: 'validator',
+          label: 'Validator',
+          width: '196px',
+          align: 'left',
+          render: (validator: Validator) => (
+            <ValidatorNameCell
+              validatorName={validator.name}
+              validatorImg={logos[validator.address]}
+            />
+          ),
+        },
+        {
+          id: 'amount-staked',
+          label: 'Amount Staked',
+          width: '196px',
+          align: 'right',
+          render: (validator: Validator) => (
+            <ValidatorTokenAmountCell
+              amount={validator.delegation}
+              symbol={coin.symbol}
+            />
+          ),
+        },
+        {
+          id: 'claimable-rewards',
+          label: 'Claimable Rewards',
+          width: '196px',
+          align: 'right',
+          render: (validator: Validator) => (
+            <ValidatorTokenAmountCell
+              amount={validator.reward}
+              symbol={coin.symbol}
+            />
+          ),
+        },
+        {
+          id: 'action',
+          width: '196px',
+          align: 'right',
+          render: (validator) => (
+            <Button
+              variant="solid"
+              intent="tertiary"
+              size="sm"
+              onClick={() => {
+                openModal();
+                setSelectedValidator(validator);
+              }}
+              attributes={{ ml: 'auto' }}
+            >
+              Manage
+            </Button>
+          ),
+        },
+      ]}
+      data={myValidators}
+      tableProps={{
+        width: '$full',
+      }}
+    />
+  );
+};
+
+export default React.memo(MyValidatorsList);
diff --git a/examples/telescope-authz/components/staking/Overview.tsx b/examples/telescope-authz/components/staking/Overview.tsx
new file mode 100644
index 000000000..07bebbdf6
--- /dev/null
+++ b/examples/telescope-authz/components/staking/Overview.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import {
+  Box,
+  StakingAssetHeader,
+  StakingClaimHeader,
+} from '@interchain-ui/react';
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import { cosmos } from 'interchain-query';
+
+import { getCoin } from '@/configs';
+import { Prices, useTx } from '@/hooks';
+import {
+  sum,
+  calcDollarValue,
+  isGreaterThanZero,
+  type ParsedRewards as Rewards,
+} from '@/utils';
+
+const { withdrawDelegatorReward } =
+  cosmos.distribution.v1beta1.MessageComposer.fromPartial;
+
+const Overview = ({
+  balance,
+  rewards,
+  staked,
+  updateData,
+  chainName,
+  prices,
+}: {
+  balance: string;
+  rewards: Rewards;
+  staked: string;
+  updateData: () => void;
+  chainName: ChainName;
+  prices: Prices;
+}) => {
+  const [isClaiming, setIsClaiming] = useState(false);
+  const { address } = useChain(chainName);
+  const { tx } = useTx(chainName);
+
+  const totalAmount = sum(balance, staked, rewards?.total ?? 0);
+  const coin = getCoin(chainName);
+
+  const onClaimRewardClick = async () => {
+    setIsClaiming(true);
+
+    if (!address) return;
+
+    const msgs = rewards.byValidators.map(({ validatorAddress }) =>
+      withdrawDelegatorReward({
+        delegatorAddress: address,
+        validatorAddress,
+      })
+    );
+
+    await tx(msgs, {
+      onSuccess: updateData,
+    });
+
+    setIsClaiming(false);
+  };
+
+  return (
+    <>
+      <Box mb={{ mobile: '$8', tablet: '$12' }}>
+        <StakingAssetHeader
+          imgSrc={
+            coin.logo_URIs?.png ||
+            coin.logo_URIs?.svg ||
+            coin.logo_URIs?.jpeg ||
+            ''
+          }
+          symbol={coin.symbol}
+          totalAmount={Number(totalAmount) || 0}
+          totalPrice={calcDollarValue(coin.base, totalAmount, prices)}
+          available={Number(balance) || 0}
+          availablePrice={calcDollarValue(coin.base, balance, prices)}
+        />
+      </Box>
+
+      {/* <Box mb={{ mobile: '$12', tablet: '$14' }}>
+        <StakingClaimHeader
+          symbol={coin.symbol}
+          rewardsAmount={Number(rewards.total) || 0}
+          stakedAmount={Number(staked) || 0}
+          onClaim={onClaimRewardClick}
+          isLoading={isClaiming}
+          isDisabled={!isGreaterThanZero(rewards.total)}
+        />
+      </Box> */}
+    </>
+  );
+};
+
+export default Overview;
diff --git a/examples/telescope-authz/components/staking/RedelegateModal.tsx b/examples/telescope-authz/components/staking/RedelegateModal.tsx
new file mode 100644
index 000000000..8f1222f64
--- /dev/null
+++ b/examples/telescope-authz/components/staking/RedelegateModal.tsx
@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { cosmos } from 'interchain-query';
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import {
+  BasicModal,
+  Box,
+  Button,
+  StakingDelegateCard,
+  StakingDelegateInput,
+  Text,
+} from '@interchain-ui/react';
+import BigNumber from 'bignumber.js';
+
+import {
+  calcDollarValue,
+  getAssetLogoUrl,
+  isGreaterThanZero,
+  shiftDigits,
+  type ExtendedValidator as Validator,
+} from '@/utils';
+import { getCoin, getExponent } from '@/configs';
+import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
+
+const { beginRedelegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
+
+export const RedelegateModal = ({
+  updateData,
+  chainName,
+  modalControl,
+  selectedValidator,
+  validatorToRedelegate,
+  prices,
+}: {
+  updateData: () => void;
+  chainName: ChainName;
+  selectedValidator: Validator;
+  validatorToRedelegate: Validator;
+  modalControl: UseDisclosureReturn;
+  prices: Prices;
+}) => {
+  const { address } = useChain(chainName);
+
+  const [amount, setAmount] = useState<number | undefined>(0);
+  const [isRedelegating, setIsRedelegating] = useState(false);
+  const [, forceUpdate] = useState(0);
+
+  const coin = getCoin(chainName);
+  const exp = getExponent(chainName);
+
+  const { tx } = useTx(chainName);
+
+  const closeRedelegateModal = () => {
+    setAmount(0);
+    setIsRedelegating(false);
+    modalControl.onClose();
+  };
+
+  const onRedelegateClick = async () => {
+    if (!address || !amount) return;
+
+    setIsRedelegating(true);
+
+    const msg = beginRedelegate({
+      delegatorAddress: address,
+      validatorSrcAddress: selectedValidator.address,
+      validatorDstAddress: validatorToRedelegate.address,
+      amount: {
+        denom: coin.base,
+        amount: shiftDigits(amount, exp),
+      },
+    });
+
+    await tx([msg], {
+      onSuccess: () => {
+        updateData();
+        closeRedelegateModal();
+      },
+    });
+
+    setIsRedelegating(false);
+  };
+
+  const maxAmount = selectedValidator.delegation;
+
+  return (
+    <BasicModal
+      title="Redelegate"
+      isOpen={modalControl.isOpen}
+      onClose={closeRedelegateModal}
+    >
+      <Box width={{ mobile: '100%', tablet: '$containerSm' }} mt="$6">
+        <RedelegateLabel
+          type="from"
+          validatorName={selectedValidator?.name}
+          mb="20px"
+        />
+
+        <StakingDelegateCard
+          label="Your Delegation"
+          tokenAmount={selectedValidator?.delegation}
+          tokenName={coin.symbol}
+          attributes={{ mb: '$12' }}
+        />
+
+        <RedelegateLabel
+          type="to"
+          validatorName={validatorToRedelegate.name}
+          mb="20px"
+        />
+
+        <StakingDelegateInput
+          inputToken={{
+            tokenName: coin.symbol,
+            tokenIconUrl: getAssetLogoUrl(coin),
+          }}
+          value={amount}
+          notionalValue={
+            amount ? calcDollarValue(coin.base, amount, prices) : undefined
+          }
+          onValueInput={(val) => {
+            if (!val) {
+              setAmount(undefined);
+              return;
+            }
+
+            if (new BigNumber(val).gt(maxAmount)) {
+              setAmount(Number(maxAmount));
+              forceUpdate((n) => n + 1);
+              return;
+            }
+
+            setAmount(Number(val));
+          }}
+          partials={[
+            {
+              label: '1/2',
+              onClick: () => {
+                setAmount(new BigNumber(maxAmount).dividedBy(2).toNumber());
+              },
+            },
+            {
+              label: '1/3',
+              onClick: () => {
+                setAmount(new BigNumber(maxAmount).dividedBy(3).toNumber());
+              },
+            },
+            {
+              label: 'Max',
+              onClick: () => setAmount(Number(maxAmount)),
+            },
+          ]}
+        />
+      </Box>
+
+      <Box mt="$12">
+        <Button
+          intent="tertiary"
+          onClick={onRedelegateClick}
+          isLoading={isRedelegating}
+          disabled={!isGreaterThanZero(amount) || isRedelegating}
+          fluidWidth
+        >
+          Redelegate
+        </Button>
+      </Box>
+    </BasicModal>
+  );
+};
+
+const RedelegateLabel = ({
+  type,
+  validatorName,
+  mb,
+}: {
+  type: 'from' | 'to';
+  validatorName: string;
+  mb?: string;
+}) => {
+  return (
+    <Text fontSize="$md" attributes={{ mb }}>
+      {type === 'from' ? 'From' : 'To'}&nbsp;
+      <Text as="span" fontSize="$md" fontWeight="$semibold">
+        {validatorName}
+      </Text>
+    </Text>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/SelectValidatorModal.tsx b/examples/telescope-authz/components/staking/SelectValidatorModal.tsx
new file mode 100644
index 000000000..c2be33c67
--- /dev/null
+++ b/examples/telescope-authz/components/staking/SelectValidatorModal.tsx
@@ -0,0 +1,133 @@
+import { useMemo } from 'react';
+import { ChainName } from 'cosmos-kit';
+import {
+  Text,
+  GridColumn,
+  ValidatorNameCell,
+  ValidatorTokenAmountCell,
+  ValidatorList,
+  Button,
+  BasicModal,
+  Box,
+} from '@interchain-ui/react';
+
+import { getCoin } from '@/configs';
+import { UseDisclosureReturn } from '@/hooks';
+import { shiftDigits, type ExtendedValidator as Validator } from '@/utils';
+
+export const SelectValidatorModal = ({
+  allValidators,
+  chainName,
+  logos,
+  handleValidatorClick,
+  modalControl,
+}: {
+  allValidators: Validator[];
+  chainName: ChainName;
+  handleValidatorClick: (validator: Validator) => void;
+  modalControl: UseDisclosureReturn;
+  logos: {
+    [key: string]: string;
+  };
+}) => {
+  const coin = getCoin(chainName);
+
+  const columns = useMemo(() => {
+    const hasApr = !!allValidators[0]?.apr;
+
+    const _columns: GridColumn[] = [
+      {
+        id: 'validator',
+        label: 'Validator',
+        width: '196px',
+        align: 'left',
+        render: (validator: Validator) => (
+          <ValidatorNameCell
+            validatorName={validator.name}
+            validatorImg={logos[validator.address]}
+          />
+        ),
+      },
+      {
+        id: 'voting-power',
+        label: 'Voting Power',
+        width: '196px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <ValidatorTokenAmountCell
+            amount={validator.votingPower}
+            symbol={coin.symbol}
+          />
+        ),
+      },
+      {
+        id: 'commission',
+        label: 'Commission',
+        width: '146px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <Text fontWeight="$semibold">
+            {shiftDigits(validator.commission, 2)}%
+          </Text>
+        ),
+      },
+      {
+        id: 'action',
+        width: '126px',
+        align: 'right',
+        render: (validator) => (
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="flex-end"
+            pr="$8"
+          >
+            <Button
+              size="sm"
+              intent="secondary"
+              variant="solid"
+              onClick={() => handleValidatorClick(validator)}
+            >
+              Select
+            </Button>
+          </Box>
+        ),
+      },
+    ];
+
+    if (hasApr) {
+      _columns.splice(3, 0, {
+        id: 'apr',
+        label: 'APR',
+        width: '106px',
+        align: 'right',
+        render: (validator: Validator) => (
+          <Text fontWeight="$semibold">{validator.apr}%</Text>
+        ),
+      });
+    }
+
+    return _columns;
+  }, [chainName]);
+
+  return (
+    <BasicModal
+      title="Redelegate to"
+      isOpen={modalControl.isOpen}
+      onClose={modalControl.onClose}
+    >
+      <Box
+        width={{ mobile: '100%', tablet: '$containerMd' }}
+        maxHeight="640px"
+        overflowY="scroll"
+      >
+        <ValidatorList
+          columns={columns}
+          data={allValidators}
+          tableProps={{ width: '$full' }}
+          variant="ghost"
+        />
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/StakingSection.tsx b/examples/telescope-authz/components/staking/StakingSection.tsx
new file mode 100644
index 000000000..facc2cd24
--- /dev/null
+++ b/examples/telescope-authz/components/staking/StakingSection.tsx
@@ -0,0 +1,77 @@
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import { Box, Spinner, Text } from '@interchain-ui/react';
+
+import Overview from './Overview';
+import { MyValidators } from './MyValidators';
+import { AllValidators } from './AllValidators';
+import { useStakingData, useValidatorLogos } from '@/hooks';
+
+export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
+  const { isWalletConnected } = useChain(chainName);
+  const { data, isLoading, refetch } = useStakingData(chainName);
+  const { data: logos, isLoading: isFetchingLogos } = useValidatorLogos(
+    chainName,
+    data?.allValidators || []
+  );
+
+  return (
+    <Box my="$16">
+      {!isWalletConnected ? (
+        <Box
+          height="$28"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text fontWeight="$semibold" fontSize="$xl">
+            Please connect the wallet
+          </Text>
+        </Box>
+      ) : isLoading || isFetchingLogos || !data ? (
+        <Box
+          height="$28"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Spinner size="$7xl" />
+        </Box>
+      ) : (
+        <>
+          <Overview
+            balance={data.balance}
+            rewards={data.rewards}
+            staked={data.totalDelegated}
+            updateData={refetch}
+            chainName={chainName}
+            prices={data.prices}
+          />
+
+          {/* {data.myValidators.length > 0 && (
+            <MyValidators
+              myValidators={data.myValidators}
+              allValidators={data.allValidators}
+              balance={data.balance}
+              updateData={refetch}
+              unbondingDays={data.unbondingDays}
+              chainName={chainName}
+              logos={logos}
+              prices={data.prices}
+            />
+          )} */}
+
+          <AllValidators
+            balance={data.balance}
+            validators={data.allValidators}
+            updateData={refetch}
+            unbondingDays={data.unbondingDays}
+            chainName={chainName}
+            logos={logos}
+            prices={data.prices}
+          />
+        </>
+      )}
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/UndelegateModal.tsx b/examples/telescope-authz/components/staking/UndelegateModal.tsx
new file mode 100644
index 000000000..56fd44fc6
--- /dev/null
+++ b/examples/telescope-authz/components/staking/UndelegateModal.tsx
@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import { cosmos } from 'interchain-query';
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import BigNumber from 'bignumber.js';
+import {
+  BasicModal,
+  StakingDelegate,
+  Callout,
+  Box,
+  Button,
+} from '@interchain-ui/react';
+
+import { getCoin, getExponent } from '@/configs';
+import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
+import {
+  calcDollarValue,
+  formatValidatorMetaInfo,
+  getAssetLogoUrl,
+  isGreaterThanZero,
+  shiftDigits,
+  type ExtendedValidator as Validator,
+} from '@/utils';
+
+const { undelegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
+
+export const UndelegateModal = ({
+  updateData,
+  unbondingDays,
+  chainName,
+  logoUrl,
+  selectedValidator,
+  closeOuterModal,
+  modalControl,
+  prices,
+}: {
+  updateData: () => void;
+  unbondingDays: string;
+  chainName: ChainName;
+  selectedValidator: Validator;
+  closeOuterModal: () => void;
+  modalControl: UseDisclosureReturn;
+  logoUrl: string;
+  prices: Prices;
+}) => {
+  const [amount, setAmount] = useState<number | undefined>(0);
+  const [isUndelegating, setIsUndelegating] = useState(false);
+  const [, forceUpdate] = useState(0);
+
+  const { address } = useChain(chainName);
+  const { tx } = useTx(chainName);
+
+  const coin = getCoin(chainName);
+  const exp = getExponent(chainName);
+
+  const closeUndelegateModal = () => {
+    setAmount(0);
+    setIsUndelegating(false);
+    modalControl.onClose();
+  };
+
+  const onUndelegateClick = async () => {
+    if (!address || !amount) return;
+
+    setIsUndelegating(true);
+
+    const msg = undelegate({
+      delegatorAddress: address,
+      validatorAddress: selectedValidator.address,
+      amount: {
+        amount: shiftDigits(amount, exp),
+        denom: coin.base,
+      },
+    });
+
+    await tx([msg], {
+      onSuccess: () => {
+        updateData();
+        closeOuterModal();
+        closeUndelegateModal();
+      },
+    });
+
+    setIsUndelegating(false);
+  };
+
+  const maxAmount = selectedValidator.delegation;
+
+  return (
+    <BasicModal
+      title="Undelegate"
+      isOpen={modalControl.isOpen}
+      onClose={closeUndelegateModal}
+    >
+      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
+        <StakingDelegate
+          header={{
+            title: selectedValidator.name,
+            subtitle: formatValidatorMetaInfo(selectedValidator),
+            avatarUrl: logoUrl,
+          }}
+          headerExtra={
+            unbondingDays && (
+              <Callout
+                title="Once the unbonding period begins you will:"
+                intent="error"
+                iconName="errorWarningLine"
+              >
+                <Box as="ul" ml="$9">
+                  <Box as="li">not receive staking rewards</Box>
+                  <Box as="li">not be able to cancel the unbonding</Box>
+                  <Box as="li">
+                    need to wait {unbondingDays} days for the amount to be
+                    liquid
+                  </Box>
+                </Box>
+              </Callout>
+            )
+          }
+          delegationItems={[
+            {
+              label: 'Your Delegation',
+              tokenAmount: selectedValidator.delegation,
+              tokenName: coin.symbol,
+            },
+          ]}
+          inputProps={{
+            inputToken: {
+              tokenName: coin.symbol,
+              tokenIconUrl: getAssetLogoUrl(coin),
+            },
+            notionalValue: amount
+              ? calcDollarValue(coin.base, amount, prices)
+              : undefined,
+            value: amount,
+            onValueInput: (val) => {
+              if (!val) {
+                setAmount(undefined);
+                return;
+              }
+
+              if (new BigNumber(val).gt(maxAmount)) {
+                setAmount(Number(maxAmount));
+                forceUpdate((n) => n + 1);
+                return;
+              }
+
+              setAmount(Number(val));
+            },
+            partials: [
+              {
+                label: '1/2',
+                onClick: () => {
+                  setAmount(new BigNumber(maxAmount).dividedBy(2).toNumber());
+                },
+              },
+              {
+                label: '1/3',
+                onClick: () => {
+                  setAmount(new BigNumber(maxAmount).dividedBy(3).toNumber());
+                },
+              },
+              {
+                label: 'Max',
+                onClick: () => setAmount(Number(maxAmount)),
+              },
+            ],
+          }}
+          footer={
+            <Button
+              intent="tertiary"
+              onClick={onUndelegateClick}
+              disabled={!isGreaterThanZero(amount) || isUndelegating}
+              isLoading={isUndelegating}
+            >
+              Undelegate
+            </Button>
+          }
+        />
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx b/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
new file mode 100644
index 000000000..9a7de1bb6
--- /dev/null
+++ b/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
@@ -0,0 +1,95 @@
+import { getCoin } from '@/configs';
+import { ChainName } from 'cosmos-kit';
+import {
+  formatValidatorMetaInfo,
+  type ExtendedValidator as Validator,
+} from '@/utils';
+import {
+  BasicModal,
+  Box,
+  Button,
+  StakingDelegate,
+  Text,
+} from '@interchain-ui/react';
+import { UseDisclosureReturn } from '@/hooks';
+
+export const ValidatorInfoModal = ({
+  chainName,
+  logoUrl,
+  handleClick,
+  modalControl,
+  selectedValidator,
+}: {
+  chainName: ChainName;
+  modalControl: UseDisclosureReturn;
+  selectedValidator: Validator;
+  handleClick: {
+    openDelegateModal: () => void;
+    openUndelegateModal: () => void;
+    openSelectValidatorModal: () => void;
+  };
+  logoUrl: string;
+}) => {
+  const coin = getCoin(chainName);
+
+  const { isOpen, onClose } = modalControl;
+  const { openDelegateModal, openSelectValidatorModal, openUndelegateModal } =
+    handleClick;
+
+  return (
+    <BasicModal title="Validator" isOpen={isOpen} onClose={onClose}>
+      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
+        <StakingDelegate
+          header={{
+            title: selectedValidator.name,
+            subtitle: formatValidatorMetaInfo(selectedValidator),
+            avatarUrl: logoUrl,
+          }}
+          headerExtra={
+            selectedValidator.description && (
+              <Text fontSize="$md">{selectedValidator.description}</Text>
+            )
+          }
+          delegationItems={[
+            {
+              label: 'Your Delegation',
+              tokenAmount: selectedValidator.delegation,
+              tokenName: coin.symbol,
+            },
+          ]}
+          footer={
+            <Box display="flex" justifyContent="flex-end" gap="$8">
+              <Button
+                intent="secondary"
+                onClick={() => {
+                  onClose();
+                  openUndelegateModal();
+                }}
+              >
+                Undelegate
+              </Button>
+              <Button
+                intent="secondary"
+                onClick={() => {
+                  onClose();
+                  openSelectValidatorModal();
+                }}
+              >
+                Redelegate
+              </Button>
+              <Button
+                intent="tertiary"
+                onClick={() => {
+                  onClose();
+                  openDelegateModal();
+                }}
+              >
+                Delegate
+              </Button>
+            </Box>
+          }
+        />
+      </Box>
+    </BasicModal>
+  );
+};
diff --git a/examples/telescope-authz/components/staking/index.ts b/examples/telescope-authz/components/staking/index.ts
new file mode 100644
index 000000000..4deb7bee7
--- /dev/null
+++ b/examples/telescope-authz/components/staking/index.ts
@@ -0,0 +1 @@
+export * from './StakingSection';
diff --git a/examples/telescope-authz/components/wallet/ChainCard.tsx b/examples/telescope-authz/components/wallet/ChainCard.tsx
new file mode 100644
index 000000000..7d4bdcb1c
--- /dev/null
+++ b/examples/telescope-authz/components/wallet/ChainCard.tsx
@@ -0,0 +1,43 @@
+import Image from 'next/image';
+import { Text, Box, useTheme } from '@interchain-ui/react';
+
+interface IChainCard {
+  prettyName: string;
+  icon?: string;
+}
+
+export const ChainCard = (props: IChainCard) => {
+  const { theme } = useTheme();
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap="$4"
+      overflow="hidden"
+      wordBreak="break-word"
+      color={theme === 'light' ? '$blackAlpha800' : '$whiteAlpha800'}
+      width="100%"
+    >
+      <Box
+        borderWidth="1px"
+        borderStyle="solid"
+        borderColor={theme === 'light' ? '$blackAlpha200' : '$whiteAlpha200'}
+        border="1px solid"
+        borderRadius="$full"
+        overflow="hidden"
+      >
+        <Image
+          width="30"
+          height="30"
+          alt="chain icon"
+          src={props.icon ?? 'https://dummyimage.com/150/9e9e9e/ffffff&text=☒'}
+        />
+      </Box>
+
+      <Text fontSize="$xl" fontWeight="$semibold">
+        {props.prettyName}
+      </Text>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
index 1e6aaea1f..9aa6576b0 100644
--- a/examples/telescope-authz/components/wallet/Wallet.tsx
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -6,7 +6,7 @@ import {
   useColorModeValue,
 } from '@interchain-ui/react';
 import { WalletStatus } from '@cosmos-kit/core';
-import { useChain } from '@cosmos-kit/react';
+import { useChain, useManager } from '@cosmos-kit/react';
 import { chains } from 'chain-registry';
 import { User } from './User';
 import { Chain } from './Chain';
@@ -20,17 +20,20 @@ import {
   ButtonNotExist,
   ButtonRejected,
 } from './Connect';
+import { ChainCard } from './ChainCard';
 
 export const DEFAULT_CHAIN_NAME = 'cosmoshub';
 export const CHAIN_NAME_STORAGE_KEY = 'selected-chain';
 
 export type WalletProps = {
   chainName?: string;
+  isMultiChain?: boolean;
   onChainChange?: (chainName?: string) => void;
 };
 
 export function Wallet({
   chainName = DEFAULT_CHAIN_NAME,
+  isMultiChain = false,
   onChainChange = () => {},
 }: WalletProps) {
   const {
@@ -43,6 +46,7 @@ export function Wallet({
     connect,
     openView,
   } = useChain(chainName);
+  const { getChainLogo } = useManager();
 
   const ConnectButton = {
     [WalletStatus.Connected]: <ButtonConnected onClick={openView} />,
@@ -71,11 +75,18 @@ export function Wallet({
   return (
     <Box py="$16">
       <Box mx="auto" maxWidth="28rem" attributes={{ mb: '$12' }}>
-        <Chain
-          name={chain.chain_name}
-          chains={chains}
-          onChainChange={handleChainChange}
-        />
+        {isMultiChain ? (
+          <Chain
+            name={chain.chain_name}
+            chains={chains}
+            onChainChange={handleChainChange}
+          />
+        ) : (
+          <ChainCard
+            prettyName={chain.pretty_name}
+            icon={getChainLogo(chainName)}
+          />
+        )}
       </Box>
       <Stack
         direction="vertical"
diff --git a/examples/telescope-authz/context/authz-context.tsx b/examples/telescope-authz/context/authz-context.tsx
new file mode 100644
index 000000000..ed144a28a
--- /dev/null
+++ b/examples/telescope-authz/context/authz-context.tsx
@@ -0,0 +1,35 @@
+import { createContext, useContext, useState } from 'react';
+import { PrettyPermission } from '@/utils';
+
+type AuthzProviderProps = { children: React.ReactNode };
+
+type TAuthzContext = {
+  permission: PrettyPermission | undefined;
+  setPermission: (permission: PrettyPermission) => void;
+  chainName: string | undefined;
+  setChainName: (chainName: string | undefined) => void;
+};
+
+const AuthzContext = createContext<TAuthzContext | undefined>(undefined);
+
+const AuthzProvider = ({ children }: AuthzProviderProps) => {
+  const [permission, setPermission] = useState<PrettyPermission>();
+  const [chainName, setChainName] = useState<string>();
+  const value = { permission, setPermission, chainName, setChainName };
+
+  return (
+    <AuthzContext.Provider value={value}>{children}</AuthzContext.Provider>
+  );
+};
+
+const useAuthzContext = () => {
+  const context = useContext(AuthzContext);
+
+  if (context === undefined) {
+    throw new Error('useAuthzContext must be used within a AuthzProvider');
+  }
+
+  return context;
+};
+
+export { AuthzProvider, useAuthzContext };
diff --git a/examples/telescope-authz/context/index.ts b/examples/telescope-authz/context/index.ts
new file mode 100644
index 000000000..b4a06dd89
--- /dev/null
+++ b/examples/telescope-authz/context/index.ts
@@ -0,0 +1 @@
+export * from './authz-context';
diff --git a/examples/telescope-authz/hooks/index.ts b/examples/telescope-authz/hooks/index.ts
index 00c48afb1..6503e5040 100644
--- a/examples/telescope-authz/hooks/index.ts
+++ b/examples/telescope-authz/hooks/index.ts
@@ -4,3 +4,6 @@ export * from './usePrices';
 export * from './useGrants';
 export * from './useAuthzTx';
 export * from './useValidators';
+export * from './useDisclosure';
+export * from './useStakingData';
+export * from './useValidatorLogos';
diff --git a/examples/telescope-authz/hooks/useAuthzTx.ts b/examples/telescope-authz/hooks/useAuthzTx.ts
index c6d4e4aef..8acab4e9f 100644
--- a/examples/telescope-authz/hooks/useAuthzTx.ts
+++ b/examples/telescope-authz/hooks/useAuthzTx.ts
@@ -28,7 +28,8 @@ import {
   MsgUndelegate,
 } from '@/src/codegen/cosmos/staking/v1beta1/tx';
 
-const { grant, revoke } = cosmos.authz.v1beta1.MessageComposer.fromPartial;
+const { grant, revoke, exec } =
+  cosmos.authz.v1beta1.MessageComposer.fromPartial;
 
 // ==========================================
 
@@ -127,6 +128,14 @@ export const createRevokeMsg = (permission: PrettyPermission) => {
 
 // ==========================================
 
+type CreateExecMsgOptions = Parameters<typeof exec>[0];
+
+export const createExecMsg = ({ grantee, msgs }: CreateExecMsgOptions) => {
+  return exec({ grantee, msgs });
+};
+
+// ==========================================
+
 const txRaw = cosmos.tx.v1beta1.TxRaw;
 
 enum TxStatus {
@@ -233,5 +242,5 @@ export const useAuthzTx = (chainName: string) => {
     if (onComplete) onComplete();
   };
 
-  return { authzTx, createGrantMsg, createRevokeMsg };
+  return { authzTx, createGrantMsg, createRevokeMsg, createExecMsg };
 };
diff --git a/examples/telescope-authz/hooks/useDisclosure.ts b/examples/telescope-authz/hooks/useDisclosure.ts
new file mode 100644
index 000000000..cb14407a5
--- /dev/null
+++ b/examples/telescope-authz/hooks/useDisclosure.ts
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export const useDisclosure = (initialState = false) => {
+  const [isOpen, setIsOpen] = useState(initialState);
+
+  const onClose = () => setIsOpen(false);
+  const onOpen = () => setIsOpen(true);
+  const onToggle = () => setIsOpen((prev) => !prev);
+
+  return {
+    isOpen,
+    onClose,
+    onOpen,
+    onToggle,
+  };
+};
+
+export type UseDisclosureReturn = ReturnType<typeof useDisclosure>;
diff --git a/examples/telescope-authz/hooks/useStakingData.ts b/examples/telescope-authz/hooks/useStakingData.ts
new file mode 100644
index 000000000..6459ae61c
--- /dev/null
+++ b/examples/telescope-authz/hooks/useStakingData.ts
@@ -0,0 +1,269 @@
+import { useEffect, useMemo } from 'react';
+import { useChain } from '@cosmos-kit/react';
+import BigNumber from 'bignumber.js';
+import {
+  cosmos,
+  useRpcClient,
+  useRpcEndpoint,
+  createRpcQueryHooks,
+} from 'interchain-query';
+
+import { usePrices } from './usePrices';
+import { getCoin, getExponent } from '@/configs';
+import {
+  shiftDigits,
+  calcTotalDelegation,
+  extendValidators,
+  parseAnnualProvisions,
+  parseDelegations,
+  parseRewards,
+  parseUnbondingDays,
+  parseValidators,
+} from '@/utils';
+import { useAuthzContext } from '@/context';
+
+(BigInt.prototype as any).toJSON = function () {
+  return this.toString();
+};
+
+export const useStakingData = (chainName: string) => {
+  const { getRpcEndpoint } = useChain(chainName);
+
+  const { permission } = useAuthzContext();
+
+  const address = permission?.granter;
+
+  const coin = getCoin(chainName);
+  const exp = getExponent(chainName);
+
+  const rpcEndpointQuery = useRpcEndpoint({
+    getter: getRpcEndpoint,
+    options: {
+      enabled: !!address,
+      staleTime: Infinity,
+      queryKeyHashFn: (queryKey) => {
+        return JSON.stringify([...queryKey, chainName]);
+      },
+    },
+  });
+
+  const rpcClientQuery = useRpcClient({
+    rpcEndpoint: rpcEndpointQuery.data || '',
+    options: {
+      enabled: !!address && !!rpcEndpointQuery.data,
+      staleTime: Infinity,
+    },
+  });
+
+  const { cosmos: cosmosQuery } = createRpcQueryHooks({
+    rpc: rpcClientQuery.data,
+  });
+
+  const isDataQueryEnabled = !!address && !!rpcClientQuery.data;
+
+  const balanceQuery = cosmosQuery.bank.v1beta1.useBalance({
+    request: {
+      address: address || '',
+      denom: coin.base,
+    },
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp),
+    },
+  });
+
+  const myValidatorsQuery = cosmosQuery.staking.v1beta1.useDelegatorValidators({
+    request: {
+      delegatorAddr: address || '',
+      pagination: undefined,
+    },
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ validators }) => parseValidators(validators),
+    },
+  });
+
+  const rewardsQuery =
+    cosmosQuery.distribution.v1beta1.useDelegationTotalRewards({
+      request: {
+        delegatorAddress: address || '',
+      },
+      options: {
+        enabled: isDataQueryEnabled,
+        select: (data) => parseRewards(data, coin.base, -exp),
+      },
+    });
+
+  const validatorsQuery = cosmosQuery.staking.v1beta1.useValidators({
+    request: {
+      status: cosmos.staking.v1beta1.bondStatusToJSON(
+        cosmos.staking.v1beta1.BondStatus.BOND_STATUS_BONDED
+      ),
+      pagination: {
+        key: new Uint8Array(),
+        offset: 0n,
+        limit: 200n,
+        countTotal: true,
+        reverse: false,
+      },
+    },
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ validators }) => {
+        const sorted = validators.sort((a, b) =>
+          new BigNumber(b.tokens).minus(a.tokens).toNumber()
+        );
+        return parseValidators(sorted);
+      },
+    },
+  });
+
+  const delegationsQuery = cosmosQuery.staking.v1beta1.useDelegatorDelegations({
+    request: {
+      delegatorAddr: address || '',
+      pagination: {
+        key: new Uint8Array(),
+        offset: 0n,
+        limit: 100n,
+        countTotal: true,
+        reverse: false,
+      },
+    },
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ delegationResponses }) =>
+        parseDelegations(delegationResponses, -exp),
+    },
+  });
+
+  const unbondingDaysQuery = cosmosQuery.staking.v1beta1.useParams({
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ params }) => parseUnbondingDays(params),
+    },
+  });
+
+  const annualProvisionsQuery = cosmosQuery.mint.v1beta1.useAnnualProvisions({
+    options: {
+      enabled: isDataQueryEnabled,
+      select: parseAnnualProvisions,
+      retry: false,
+    },
+  });
+
+  const poolQuery = cosmosQuery.staking.v1beta1.usePool({
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ pool }) => pool,
+    },
+  });
+
+  const communityTaxQuery = cosmosQuery.distribution.v1beta1.useParams({
+    options: {
+      enabled: isDataQueryEnabled,
+      select: ({ params }) => shiftDigits(params?.communityTax || '0', -18),
+    },
+  });
+
+  const pricesQuery = usePrices();
+
+  const allQueries = {
+    balance: balanceQuery,
+    myValidators: myValidatorsQuery,
+    rewards: rewardsQuery,
+    allValidators: validatorsQuery,
+    delegations: delegationsQuery,
+    unbondingDays: unbondingDaysQuery,
+    annualProvisions: annualProvisionsQuery,
+    pool: poolQuery,
+    communityTax: communityTaxQuery,
+    prices: pricesQuery,
+  };
+
+  const queriesWithUnchangingKeys = [
+    allQueries.unbondingDays,
+    allQueries.annualProvisions,
+    allQueries.pool,
+    allQueries.communityTax,
+    allQueries.allValidators,
+  ];
+
+  const updatableQueriesAfterMutation = [
+    allQueries.balance,
+    allQueries.myValidators,
+    allQueries.rewards,
+    allQueries.allValidators,
+    allQueries.delegations,
+  ];
+
+  useEffect(() => {
+    queriesWithUnchangingKeys.forEach((query) => query.remove());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chainName]);
+
+  const isInitialFetching = Object.values(allQueries).some(
+    ({ isLoading }) => isLoading
+  );
+
+  const isRefetching = Object.values(allQueries).some(
+    ({ isRefetching }) => isRefetching
+  );
+
+  const isLoading = isInitialFetching || isRefetching;
+
+  type AllQueries = typeof allQueries;
+
+  type QueriesData = {
+    [Key in keyof AllQueries]: NonNullable<AllQueries[Key]['data']>;
+  };
+
+  const data = useMemo(() => {
+    if (isLoading) return;
+
+    const queriesData = Object.fromEntries(
+      Object.entries(allQueries).map(([key, query]) => [key, query.data])
+    ) as QueriesData;
+
+    const {
+      allValidators,
+      delegations,
+      rewards,
+      myValidators,
+      annualProvisions,
+      communityTax,
+      pool,
+    } = queriesData;
+
+    const chainMetadata = { annualProvisions, communityTax, pool };
+
+    const extendedAllValidators = extendValidators({
+      validators: allValidators,
+      delegations,
+      rewards: rewards?.byValidators,
+      chainMetadata,
+    });
+
+    const extendedMyValidators = extendValidators({
+      validators: myValidators,
+      delegations,
+      rewards: rewards?.byValidators,
+      chainMetadata,
+    });
+
+    const totalDelegated = calcTotalDelegation(delegations);
+
+    return {
+      ...queriesData,
+      allValidators: extendedAllValidators,
+      myValidators: extendedMyValidators,
+      totalDelegated,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  const refetch = () => {
+    updatableQueriesAfterMutation.forEach((query) => query.refetch());
+  };
+
+  return { data, isLoading, refetch };
+};
diff --git a/examples/telescope-authz/hooks/useToast.tsx b/examples/telescope-authz/hooks/useToast.tsx
index e348d89b3..7fafd08e5 100644
--- a/examples/telescope-authz/hooks/useToast.tsx
+++ b/examples/telescope-authz/hooks/useToast.tsx
@@ -1,4 +1,4 @@
-import { toast, Text, ToastType } from '@interchain-ui/react';
+import { toast, Text, ToastType, Spinner } from '@interchain-ui/react';
 
 export type CustomToast = {
   type: ToastType;
@@ -25,6 +25,7 @@ export const useToast = () => {
     return toast.custom(type, <ToastTitle title={title} />, {
       duration,
       description,
+      icon: type === 'loading' && <Spinner size="$xl" />,
     });
   };
 
diff --git a/examples/telescope-authz/hooks/useValidatorLogos.ts b/examples/telescope-authz/hooks/useValidatorLogos.ts
new file mode 100644
index 000000000..01deb5012
--- /dev/null
+++ b/examples/telescope-authz/hooks/useValidatorLogos.ts
@@ -0,0 +1,13 @@
+import { ExtendedValidator, getLogoUrls } from '@/utils';
+import { useQuery } from '@tanstack/react-query';
+
+export const useValidatorLogos = (
+  chainName: string,
+  validators: ExtendedValidator[]
+) => {
+  return useQuery({
+    queryKey: ['validatorLogos', chainName, validators.length],
+    queryFn: () => getLogoUrls(validators, chainName),
+    staleTime: Infinity,
+  });
+};
diff --git a/examples/telescope-authz/pages/_app.tsx b/examples/telescope-authz/pages/_app.tsx
index e440b258a..ec1be1717 100644
--- a/examples/telescope-authz/pages/_app.tsx
+++ b/examples/telescope-authz/pages/_app.tsx
@@ -19,12 +19,14 @@ import {
   useColorModeValue,
   ThemeProvider,
 } from '@interchain-ui/react';
+import { AuthzProvider } from '@/context';
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: 2,
       refetchOnWindowFocus: false,
+      staleTime: Infinity,
     },
   },
 });
@@ -71,14 +73,16 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
         signerOptions={signerOptions}
       >
         <QueryClientProvider client={queryClient}>
-          <Box
-            className={themeClass}
-            minHeight="100dvh"
-            backgroundColor={useColorModeValue('$white', '$background')}
-          >
-            <Component {...pageProps} />
-            <Toaster position="top-right" closeButton={true} />
-          </Box>
+          <AuthzProvider>
+            <Box
+              className={themeClass}
+              minHeight="100dvh"
+              backgroundColor={useColorModeValue('$white', '$background')}
+            >
+              <Component {...pageProps} />
+              <Toaster position="top-right" closeButton={true} />
+            </Box>
+          </AuthzProvider>
           <ReactQueryDevtools />
         </QueryClientProvider>
       </ChainProvider>
diff --git a/examples/telescope-authz/pages/index.tsx b/examples/telescope-authz/pages/index.tsx
index 8dbc7f0cc..a18803e20 100644
--- a/examples/telescope-authz/pages/index.tsx
+++ b/examples/telescope-authz/pages/index.tsx
@@ -2,14 +2,23 @@ import { useState } from 'react';
 import { Divider } from '@interchain-ui/react';
 import { ChainName } from 'cosmos-kit';
 
+import { useAuthzContext } from '@/context';
 import { Layout, Wallet, AuthzSection } from '@/components';
 
 export default function Home() {
   const [selectedChain, setSelectedChain] = useState<ChainName>();
+  const { setChainName } = useAuthzContext();
 
   return (
     <Layout>
-      <Wallet chainName={selectedChain} onChainChange={setSelectedChain} />
+      <Wallet
+        chainName={selectedChain}
+        isMultiChain
+        onChainChange={(chainName) => {
+          setSelectedChain(chainName);
+          setChainName(chainName);
+        }}
+      />
       <Divider height="0.1px" mt="$12" mb="$17" />
       {selectedChain && <AuthzSection chainName={selectedChain} />}
     </Layout>
diff --git a/examples/telescope-authz/pages/stake.tsx b/examples/telescope-authz/pages/stake.tsx
new file mode 100644
index 000000000..565f62f4d
--- /dev/null
+++ b/examples/telescope-authz/pages/stake.tsx
@@ -0,0 +1,31 @@
+import { Box, Divider, Icon, Text } from '@interchain-ui/react';
+import { useAuthzContext } from '@/context';
+import { Layout, StakingSection, Wallet } from '@/components';
+
+export default function SingleChain() {
+  const { chainName, permission } = useAuthzContext();
+
+  return (
+    <Layout>
+      <Wallet chainName={chainName} />
+      <Divider height="0.1px" mt="$12" />
+      <Box
+        width="$fit"
+        height="$14"
+        backgroundColor="$cardBg"
+        borderRadius="$md"
+        display="flex"
+        alignItems="center"
+        gap="$4"
+        px="$6"
+        my="$16"
+        mx="auto"
+      >
+        <Icon name="errorWarningLine" size="$xl" />
+        <Text>You are now logged in as</Text>
+        <Text fontWeight="$semibold">{permission?.granter}</Text>
+      </Box>
+      {chainName && <StakingSection chainName={chainName} />}
+    </Layout>
+  );
+}

From 44431e44aadf1efb9c9b5ee14aea53eeab35910b Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Fri, 16 Feb 2024 21:51:55 +0800
Subject: [PATCH 12/16] feat: exec claim rewards grants

---
 .../components/authz/GrantCard.tsx            |  13 +-
 .../components/authz/LoginInfoBanner.tsx      |  35 ++++
 .../telescope-authz/components/authz/index.ts |   1 +
 .../claim-rewards/ClaimRewardsSection.tsx     |  50 +++++
 .../components/claim-rewards/Overview.tsx     | 102 ++++++++++
 .../components/claim-rewards/index.ts         |   1 +
 examples/telescope-authz/components/index.tsx |   1 +
 .../components/staking/MyValidators.tsx       | 134 -------------
 .../components/staking/MyValidatorsList.tsx   |  97 ---------
 .../components/staking/RedelegateModal.tsx    | 188 ------------------
 .../staking/SelectValidatorModal.tsx          | 133 -------------
 .../components/staking/StakingSection.tsx     |  14 --
 .../components/staking/UndelegateModal.tsx    | 183 -----------------
 .../components/staking/ValidatorInfoModal.tsx |  95 ---------
 .../telescope-authz/configs/permissions.ts    |   7 +
 examples/telescope-authz/hooks/useGrants.ts   |  10 +-
 .../telescope-authz/pages/claim-rewards.tsx   |  30 +++
 examples/telescope-authz/pages/stake.tsx      |  32 ++-
 18 files changed, 259 insertions(+), 867 deletions(-)
 create mode 100644 examples/telescope-authz/components/authz/LoginInfoBanner.tsx
 create mode 100644 examples/telescope-authz/components/claim-rewards/ClaimRewardsSection.tsx
 create mode 100644 examples/telescope-authz/components/claim-rewards/Overview.tsx
 create mode 100644 examples/telescope-authz/components/claim-rewards/index.ts
 delete mode 100644 examples/telescope-authz/components/staking/MyValidators.tsx
 delete mode 100644 examples/telescope-authz/components/staking/MyValidatorsList.tsx
 delete mode 100644 examples/telescope-authz/components/staking/RedelegateModal.tsx
 delete mode 100644 examples/telescope-authz/components/staking/SelectValidatorModal.tsx
 delete mode 100644 examples/telescope-authz/components/staking/UndelegateModal.tsx
 delete mode 100644 examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
 create mode 100644 examples/telescope-authz/pages/claim-rewards.tsx

diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index a642f684e..fd50f6630 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -15,7 +15,7 @@ import {
   PrettyGrant,
   PrettyPermission,
 } from '@/utils';
-import { getCoin } from '@/configs';
+import { getCoin, permissionNameToRouteMap } from '@/configs';
 import { useAuthzContext } from '@/context';
 import { useAuthzTx, useGrants } from '@/hooks';
 
@@ -151,8 +151,11 @@ export const GrantCard = ({
             >
               {permission.name}
             </Button>
-          ) : (
-            <Link href="/stake" style={{ textDecoration: 'none' }}>
+          ) : permissionNameToRouteMap[permission.name] ? (
+            <Link
+              href={permissionNameToRouteMap[permission.name]}
+              style={{ textDecoration: 'none' }}
+            >
               <Button
                 key={permission.name}
                 size="sm"
@@ -164,6 +167,10 @@ export const GrantCard = ({
                 {permission.name}
               </Button>
             </Link>
+          ) : (
+            <Button key={permission.name} size="sm" intent="secondary">
+              {permission.name}
+            </Button>
           )
         )}
       </Box>
diff --git a/examples/telescope-authz/components/authz/LoginInfoBanner.tsx b/examples/telescope-authz/components/authz/LoginInfoBanner.tsx
new file mode 100644
index 000000000..f4277d117
--- /dev/null
+++ b/examples/telescope-authz/components/authz/LoginInfoBanner.tsx
@@ -0,0 +1,35 @@
+import { useChain } from '@cosmos-kit/react';
+import { Box, Icon, Text } from '@interchain-ui/react';
+
+type LoginInfoBannerProps = {
+  loginAddress: string;
+  chainName: string;
+};
+
+export const LoginInfoBanner = ({
+  loginAddress,
+  chainName,
+}: LoginInfoBannerProps) => {
+  const { isWalletConnected } = useChain(chainName);
+
+  if (!isWalletConnected) return null;
+
+  return (
+    <Box
+      width="$fit"
+      height="$14"
+      backgroundColor="$cardBg"
+      borderRadius="$md"
+      display="flex"
+      alignItems="center"
+      gap="$4"
+      px="$6"
+      my="$16"
+      mx="auto"
+    >
+      <Icon name="errorWarningLine" size="$xl" />
+      <Text>You are now logged in as</Text>
+      <Text fontWeight="$semibold">{loginAddress}</Text>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/authz/index.ts b/examples/telescope-authz/components/authz/index.ts
index 50f8ea527..fe0758403 100644
--- a/examples/telescope-authz/components/authz/index.ts
+++ b/examples/telescope-authz/components/authz/index.ts
@@ -1 +1,2 @@
 export * from './AuthzSection';
+export * from './LoginInfoBanner';
diff --git a/examples/telescope-authz/components/claim-rewards/ClaimRewardsSection.tsx b/examples/telescope-authz/components/claim-rewards/ClaimRewardsSection.tsx
new file mode 100644
index 000000000..27dea72cf
--- /dev/null
+++ b/examples/telescope-authz/components/claim-rewards/ClaimRewardsSection.tsx
@@ -0,0 +1,50 @@
+import { useChain } from '@cosmos-kit/react';
+import { ChainName } from 'cosmos-kit';
+import { Box, Spinner, Text } from '@interchain-ui/react';
+
+import { useStakingData } from '@/hooks';
+import Overview from './Overview';
+
+export const ClaimRewardsSection = ({
+  chainName,
+}: {
+  chainName: ChainName;
+}) => {
+  const { isWalletConnected } = useChain(chainName);
+  const { data, isLoading, refetch } = useStakingData(chainName);
+
+  return (
+    <Box mt="$16" mb="$26">
+      {!isWalletConnected ? (
+        <Box
+          height="$28"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text fontWeight="$semibold" fontSize="$xl">
+            Please connect the wallet
+          </Text>
+        </Box>
+      ) : isLoading || !data ? (
+        <Box
+          height="$28"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Spinner size="$7xl" />
+        </Box>
+      ) : (
+        <Overview
+          balance={data.balance}
+          rewards={data.rewards}
+          staked={data.totalDelegated}
+          updateData={refetch}
+          chainName={chainName}
+          prices={data.prices}
+        />
+      )}
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/claim-rewards/Overview.tsx b/examples/telescope-authz/components/claim-rewards/Overview.tsx
new file mode 100644
index 000000000..d0a24d79d
--- /dev/null
+++ b/examples/telescope-authz/components/claim-rewards/Overview.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import {
+  Box,
+  StakingAssetHeader,
+  StakingClaimHeader,
+} from '@interchain-ui/react';
+import { ChainName } from 'cosmos-kit';
+
+import { getCoin } from '@/configs';
+import { Prices, useAuthzTx } from '@/hooks';
+import {
+  sum,
+  calcDollarValue,
+  isGreaterThanZero,
+  type ParsedRewards as Rewards,
+} from '@/utils';
+import { MsgWithdrawDelegatorReward } from '@/src/codegen/cosmos/distribution/v1beta1/tx';
+import { useAuthzContext } from '@/context';
+
+const Overview = ({
+  balance,
+  rewards,
+  staked,
+  updateData,
+  chainName,
+  prices,
+}: {
+  balance: string;
+  rewards: Rewards;
+  staked: string;
+  updateData: () => void;
+  chainName: ChainName;
+  prices: Prices;
+}) => {
+  const [isClaiming, setIsClaiming] = useState(false);
+
+  const { permission } = useAuthzContext();
+  const { authzTx, createExecMsg } = useAuthzTx(chainName);
+
+  const totalAmount = sum(balance, staked, rewards?.total ?? 0);
+  const coin = getCoin(chainName);
+
+  const onClaimRewardClick = () => {
+    if (!permission) return;
+
+    setIsClaiming(true);
+
+    const { grantee, granter } = permission;
+
+    const msgs = rewards.byValidators.map(({ validatorAddress }) =>
+      MsgWithdrawDelegatorReward.toProtoMsg(
+        MsgWithdrawDelegatorReward.fromPartial({
+          delegatorAddress: granter,
+          validatorAddress,
+        })
+      )
+    );
+
+    authzTx({
+      msgs: [createExecMsg({ msgs, grantee })],
+      onSuccess: () => {
+        updateData();
+      },
+      onComplete: () => {
+        setIsClaiming(false);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Box mb={{ mobile: '$8', tablet: '$12' }}>
+        <StakingAssetHeader
+          imgSrc={
+            coin.logo_URIs?.png ||
+            coin.logo_URIs?.svg ||
+            coin.logo_URIs?.jpeg ||
+            ''
+          }
+          symbol={coin.symbol}
+          totalAmount={Number(totalAmount) || 0}
+          totalPrice={calcDollarValue(coin.base, totalAmount, prices)}
+          available={Number(balance) || 0}
+          availablePrice={calcDollarValue(coin.base, balance, prices)}
+        />
+      </Box>
+
+      <Box mb={{ mobile: '$12', tablet: '$14' }}>
+        <StakingClaimHeader
+          symbol={coin.symbol}
+          rewardsAmount={Number(rewards.total) || 0}
+          stakedAmount={Number(staked) || 0}
+          onClaim={onClaimRewardClick}
+          isLoading={isClaiming}
+          isDisabled={!isGreaterThanZero(rewards.total)}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default Overview;
diff --git a/examples/telescope-authz/components/claim-rewards/index.ts b/examples/telescope-authz/components/claim-rewards/index.ts
new file mode 100644
index 000000000..68a0b4a8a
--- /dev/null
+++ b/examples/telescope-authz/components/claim-rewards/index.ts
@@ -0,0 +1 @@
+export * from './ClaimRewardsSection';
diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index 17a77110a..f70e0873a 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -2,3 +2,4 @@ export * from './authz';
 export * from './common';
 export * from './wallet';
 export * from './staking';
+export * from './claim-rewards';
diff --git a/examples/telescope-authz/components/staking/MyValidators.tsx b/examples/telescope-authz/components/staking/MyValidators.tsx
deleted file mode 100644
index 58b560715..000000000
--- a/examples/telescope-authz/components/staking/MyValidators.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useState } from 'react';
-import { Text } from '@interchain-ui/react';
-import { ChainName } from 'cosmos-kit';
-
-import MyValidatorsList from './MyValidatorsList';
-import { ValidatorInfoModal } from './ValidatorInfoModal';
-import { UndelegateModal } from './UndelegateModal';
-import { SelectValidatorModal } from './SelectValidatorModal';
-import { RedelegateModal } from './RedelegateModal';
-import { type ExtendedValidator as Validator } from '@/utils';
-import { DelegateModal } from './DelegateModal';
-import { Prices, useDisclosure } from '@/hooks';
-
-export const MyValidators = ({
-  myValidators,
-  allValidators,
-  balance,
-  updateData,
-  unbondingDays,
-  chainName,
-  logos,
-  prices,
-}: {
-  myValidators: Validator[];
-  allValidators: Validator[];
-  balance: string;
-  updateData: () => void;
-  unbondingDays: string;
-  chainName: ChainName;
-  prices: Prices;
-  logos: {
-    [key: string]: string;
-  };
-}) => {
-  const [selectedValidator, setSelectedValidator] = useState<Validator>();
-  const [validatorToRedelegate, setValidatorToRedelegate] =
-    useState<Validator>();
-
-  const validatorInfoModalControl = useDisclosure();
-  const delegateModalControl = useDisclosure();
-  const undelegateModalControl = useDisclosure();
-  const selectValidatorModalControl = useDisclosure();
-  const redelegateModalControl = useDisclosure();
-
-  return (
-    <>
-      <Text
-        color="$textSecondary"
-        fontSize="$lg"
-        fontWeight="$semibold"
-        attributes={{ mt: '$14', mb: '$6' }}
-      >
-        My Validators
-      </Text>
-
-      <MyValidatorsList
-        logos={logos}
-        myValidators={myValidators}
-        chainName={chainName}
-        openModal={validatorInfoModalControl.onOpen}
-        setSelectedValidator={setSelectedValidator}
-      />
-
-      {selectedValidator && validatorInfoModalControl.isOpen && (
-        <ValidatorInfoModal
-          chainName={chainName}
-          logoUrl={logos[selectedValidator.address]}
-          modalControl={validatorInfoModalControl}
-          selectedValidator={selectedValidator}
-          handleClick={{
-            openDelegateModal: delegateModalControl.onOpen,
-            openSelectValidatorModal: selectValidatorModalControl.onOpen,
-            openUndelegateModal: undelegateModalControl.onOpen,
-          }}
-        />
-      )}
-
-      {selectedValidator && delegateModalControl.isOpen && (
-        <DelegateModal
-          balance={balance}
-          chainName={chainName}
-          closeOuterModal={validatorInfoModalControl.onClose}
-          modalControl={delegateModalControl}
-          selectedValidator={selectedValidator}
-          logoUrl={logos[selectedValidator.address]}
-          unbondingDays={unbondingDays}
-          updateData={updateData}
-          showDescription={false}
-          prices={prices}
-        />
-      )}
-
-      {selectedValidator && undelegateModalControl.isOpen && (
-        <UndelegateModal
-          chainName={chainName}
-          closeOuterModal={validatorInfoModalControl.onClose}
-          modalControl={undelegateModalControl}
-          selectedValidator={selectedValidator}
-          logoUrl={logos[selectedValidator.address]}
-          unbondingDays={unbondingDays}
-          updateData={updateData}
-          prices={prices}
-        />
-      )}
-
-      {selectValidatorModalControl.isOpen && (
-        <SelectValidatorModal
-          chainName={chainName}
-          modalControl={selectValidatorModalControl}
-          logos={logos}
-          allValidators={allValidators}
-          handleValidatorClick={(validator) => {
-            redelegateModalControl.onOpen();
-            selectValidatorModalControl.onClose();
-            setValidatorToRedelegate(validator);
-          }}
-        />
-      )}
-
-      {selectedValidator &&
-        validatorToRedelegate &&
-        redelegateModalControl.isOpen && (
-          <RedelegateModal
-            chainName={chainName}
-            modalControl={redelegateModalControl}
-            selectedValidator={selectedValidator}
-            validatorToRedelegate={validatorToRedelegate}
-            updateData={updateData}
-            prices={prices}
-          />
-        )}
-    </>
-  );
-};
diff --git a/examples/telescope-authz/components/staking/MyValidatorsList.tsx b/examples/telescope-authz/components/staking/MyValidatorsList.tsx
deleted file mode 100644
index 2d0ed7086..000000000
--- a/examples/telescope-authz/components/staking/MyValidatorsList.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { Dispatch, SetStateAction } from 'react';
-import {
-  Button,
-  ValidatorList,
-  ValidatorNameCell,
-  ValidatorTokenAmountCell,
-} from '@interchain-ui/react';
-import { ChainName } from 'cosmos-kit';
-import { getCoin } from '@/configs';
-import { type ExtendedValidator as Validator } from '@/utils';
-
-const MyValidatorsList = ({
-  myValidators,
-  openModal,
-  chainName,
-  logos,
-  setSelectedValidator,
-}: {
-  myValidators: Validator[];
-  chainName: ChainName;
-  openModal: () => void;
-  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
-  logos: {
-    [key: string]: string;
-  };
-}) => {
-  const coin = getCoin(chainName);
-
-  return (
-    <ValidatorList
-      columns={[
-        {
-          id: 'validator',
-          label: 'Validator',
-          width: '196px',
-          align: 'left',
-          render: (validator: Validator) => (
-            <ValidatorNameCell
-              validatorName={validator.name}
-              validatorImg={logos[validator.address]}
-            />
-          ),
-        },
-        {
-          id: 'amount-staked',
-          label: 'Amount Staked',
-          width: '196px',
-          align: 'right',
-          render: (validator: Validator) => (
-            <ValidatorTokenAmountCell
-              amount={validator.delegation}
-              symbol={coin.symbol}
-            />
-          ),
-        },
-        {
-          id: 'claimable-rewards',
-          label: 'Claimable Rewards',
-          width: '196px',
-          align: 'right',
-          render: (validator: Validator) => (
-            <ValidatorTokenAmountCell
-              amount={validator.reward}
-              symbol={coin.symbol}
-            />
-          ),
-        },
-        {
-          id: 'action',
-          width: '196px',
-          align: 'right',
-          render: (validator) => (
-            <Button
-              variant="solid"
-              intent="tertiary"
-              size="sm"
-              onClick={() => {
-                openModal();
-                setSelectedValidator(validator);
-              }}
-              attributes={{ ml: 'auto' }}
-            >
-              Manage
-            </Button>
-          ),
-        },
-      ]}
-      data={myValidators}
-      tableProps={{
-        width: '$full',
-      }}
-    />
-  );
-};
-
-export default React.memo(MyValidatorsList);
diff --git a/examples/telescope-authz/components/staking/RedelegateModal.tsx b/examples/telescope-authz/components/staking/RedelegateModal.tsx
deleted file mode 100644
index 8f1222f64..000000000
--- a/examples/telescope-authz/components/staking/RedelegateModal.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useState } from 'react';
-import { cosmos } from 'interchain-query';
-import { useChain } from '@cosmos-kit/react';
-import { ChainName } from 'cosmos-kit';
-import {
-  BasicModal,
-  Box,
-  Button,
-  StakingDelegateCard,
-  StakingDelegateInput,
-  Text,
-} from '@interchain-ui/react';
-import BigNumber from 'bignumber.js';
-
-import {
-  calcDollarValue,
-  getAssetLogoUrl,
-  isGreaterThanZero,
-  shiftDigits,
-  type ExtendedValidator as Validator,
-} from '@/utils';
-import { getCoin, getExponent } from '@/configs';
-import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
-
-const { beginRedelegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
-
-export const RedelegateModal = ({
-  updateData,
-  chainName,
-  modalControl,
-  selectedValidator,
-  validatorToRedelegate,
-  prices,
-}: {
-  updateData: () => void;
-  chainName: ChainName;
-  selectedValidator: Validator;
-  validatorToRedelegate: Validator;
-  modalControl: UseDisclosureReturn;
-  prices: Prices;
-}) => {
-  const { address } = useChain(chainName);
-
-  const [amount, setAmount] = useState<number | undefined>(0);
-  const [isRedelegating, setIsRedelegating] = useState(false);
-  const [, forceUpdate] = useState(0);
-
-  const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
-
-  const { tx } = useTx(chainName);
-
-  const closeRedelegateModal = () => {
-    setAmount(0);
-    setIsRedelegating(false);
-    modalControl.onClose();
-  };
-
-  const onRedelegateClick = async () => {
-    if (!address || !amount) return;
-
-    setIsRedelegating(true);
-
-    const msg = beginRedelegate({
-      delegatorAddress: address,
-      validatorSrcAddress: selectedValidator.address,
-      validatorDstAddress: validatorToRedelegate.address,
-      amount: {
-        denom: coin.base,
-        amount: shiftDigits(amount, exp),
-      },
-    });
-
-    await tx([msg], {
-      onSuccess: () => {
-        updateData();
-        closeRedelegateModal();
-      },
-    });
-
-    setIsRedelegating(false);
-  };
-
-  const maxAmount = selectedValidator.delegation;
-
-  return (
-    <BasicModal
-      title="Redelegate"
-      isOpen={modalControl.isOpen}
-      onClose={closeRedelegateModal}
-    >
-      <Box width={{ mobile: '100%', tablet: '$containerSm' }} mt="$6">
-        <RedelegateLabel
-          type="from"
-          validatorName={selectedValidator?.name}
-          mb="20px"
-        />
-
-        <StakingDelegateCard
-          label="Your Delegation"
-          tokenAmount={selectedValidator?.delegation}
-          tokenName={coin.symbol}
-          attributes={{ mb: '$12' }}
-        />
-
-        <RedelegateLabel
-          type="to"
-          validatorName={validatorToRedelegate.name}
-          mb="20px"
-        />
-
-        <StakingDelegateInput
-          inputToken={{
-            tokenName: coin.symbol,
-            tokenIconUrl: getAssetLogoUrl(coin),
-          }}
-          value={amount}
-          notionalValue={
-            amount ? calcDollarValue(coin.base, amount, prices) : undefined
-          }
-          onValueInput={(val) => {
-            if (!val) {
-              setAmount(undefined);
-              return;
-            }
-
-            if (new BigNumber(val).gt(maxAmount)) {
-              setAmount(Number(maxAmount));
-              forceUpdate((n) => n + 1);
-              return;
-            }
-
-            setAmount(Number(val));
-          }}
-          partials={[
-            {
-              label: '1/2',
-              onClick: () => {
-                setAmount(new BigNumber(maxAmount).dividedBy(2).toNumber());
-              },
-            },
-            {
-              label: '1/3',
-              onClick: () => {
-                setAmount(new BigNumber(maxAmount).dividedBy(3).toNumber());
-              },
-            },
-            {
-              label: 'Max',
-              onClick: () => setAmount(Number(maxAmount)),
-            },
-          ]}
-        />
-      </Box>
-
-      <Box mt="$12">
-        <Button
-          intent="tertiary"
-          onClick={onRedelegateClick}
-          isLoading={isRedelegating}
-          disabled={!isGreaterThanZero(amount) || isRedelegating}
-          fluidWidth
-        >
-          Redelegate
-        </Button>
-      </Box>
-    </BasicModal>
-  );
-};
-
-const RedelegateLabel = ({
-  type,
-  validatorName,
-  mb,
-}: {
-  type: 'from' | 'to';
-  validatorName: string;
-  mb?: string;
-}) => {
-  return (
-    <Text fontSize="$md" attributes={{ mb }}>
-      {type === 'from' ? 'From' : 'To'}&nbsp;
-      <Text as="span" fontSize="$md" fontWeight="$semibold">
-        {validatorName}
-      </Text>
-    </Text>
-  );
-};
diff --git a/examples/telescope-authz/components/staking/SelectValidatorModal.tsx b/examples/telescope-authz/components/staking/SelectValidatorModal.tsx
deleted file mode 100644
index c2be33c67..000000000
--- a/examples/telescope-authz/components/staking/SelectValidatorModal.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useMemo } from 'react';
-import { ChainName } from 'cosmos-kit';
-import {
-  Text,
-  GridColumn,
-  ValidatorNameCell,
-  ValidatorTokenAmountCell,
-  ValidatorList,
-  Button,
-  BasicModal,
-  Box,
-} from '@interchain-ui/react';
-
-import { getCoin } from '@/configs';
-import { UseDisclosureReturn } from '@/hooks';
-import { shiftDigits, type ExtendedValidator as Validator } from '@/utils';
-
-export const SelectValidatorModal = ({
-  allValidators,
-  chainName,
-  logos,
-  handleValidatorClick,
-  modalControl,
-}: {
-  allValidators: Validator[];
-  chainName: ChainName;
-  handleValidatorClick: (validator: Validator) => void;
-  modalControl: UseDisclosureReturn;
-  logos: {
-    [key: string]: string;
-  };
-}) => {
-  const coin = getCoin(chainName);
-
-  const columns = useMemo(() => {
-    const hasApr = !!allValidators[0]?.apr;
-
-    const _columns: GridColumn[] = [
-      {
-        id: 'validator',
-        label: 'Validator',
-        width: '196px',
-        align: 'left',
-        render: (validator: Validator) => (
-          <ValidatorNameCell
-            validatorName={validator.name}
-            validatorImg={logos[validator.address]}
-          />
-        ),
-      },
-      {
-        id: 'voting-power',
-        label: 'Voting Power',
-        width: '196px',
-        align: 'right',
-        render: (validator: Validator) => (
-          <ValidatorTokenAmountCell
-            amount={validator.votingPower}
-            symbol={coin.symbol}
-          />
-        ),
-      },
-      {
-        id: 'commission',
-        label: 'Commission',
-        width: '146px',
-        align: 'right',
-        render: (validator: Validator) => (
-          <Text fontWeight="$semibold">
-            {shiftDigits(validator.commission, 2)}%
-          </Text>
-        ),
-      },
-      {
-        id: 'action',
-        width: '126px',
-        align: 'right',
-        render: (validator) => (
-          <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="flex-end"
-            pr="$8"
-          >
-            <Button
-              size="sm"
-              intent="secondary"
-              variant="solid"
-              onClick={() => handleValidatorClick(validator)}
-            >
-              Select
-            </Button>
-          </Box>
-        ),
-      },
-    ];
-
-    if (hasApr) {
-      _columns.splice(3, 0, {
-        id: 'apr',
-        label: 'APR',
-        width: '106px',
-        align: 'right',
-        render: (validator: Validator) => (
-          <Text fontWeight="$semibold">{validator.apr}%</Text>
-        ),
-      });
-    }
-
-    return _columns;
-  }, [chainName]);
-
-  return (
-    <BasicModal
-      title="Redelegate to"
-      isOpen={modalControl.isOpen}
-      onClose={modalControl.onClose}
-    >
-      <Box
-        width={{ mobile: '100%', tablet: '$containerMd' }}
-        maxHeight="640px"
-        overflowY="scroll"
-      >
-        <ValidatorList
-          columns={columns}
-          data={allValidators}
-          tableProps={{ width: '$full' }}
-          variant="ghost"
-        />
-      </Box>
-    </BasicModal>
-  );
-};
diff --git a/examples/telescope-authz/components/staking/StakingSection.tsx b/examples/telescope-authz/components/staking/StakingSection.tsx
index facc2cd24..d3ffc69f9 100644
--- a/examples/telescope-authz/components/staking/StakingSection.tsx
+++ b/examples/telescope-authz/components/staking/StakingSection.tsx
@@ -3,7 +3,6 @@ import { ChainName } from 'cosmos-kit';
 import { Box, Spinner, Text } from '@interchain-ui/react';
 
 import Overview from './Overview';
-import { MyValidators } from './MyValidators';
 import { AllValidators } from './AllValidators';
 import { useStakingData, useValidatorLogos } from '@/hooks';
 
@@ -48,19 +47,6 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
             prices={data.prices}
           />
 
-          {/* {data.myValidators.length > 0 && (
-            <MyValidators
-              myValidators={data.myValidators}
-              allValidators={data.allValidators}
-              balance={data.balance}
-              updateData={refetch}
-              unbondingDays={data.unbondingDays}
-              chainName={chainName}
-              logos={logos}
-              prices={data.prices}
-            />
-          )} */}
-
           <AllValidators
             balance={data.balance}
             validators={data.allValidators}
diff --git a/examples/telescope-authz/components/staking/UndelegateModal.tsx b/examples/telescope-authz/components/staking/UndelegateModal.tsx
deleted file mode 100644
index 56fd44fc6..000000000
--- a/examples/telescope-authz/components/staking/UndelegateModal.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useState } from 'react';
-import { cosmos } from 'interchain-query';
-import { useChain } from '@cosmos-kit/react';
-import { ChainName } from 'cosmos-kit';
-import BigNumber from 'bignumber.js';
-import {
-  BasicModal,
-  StakingDelegate,
-  Callout,
-  Box,
-  Button,
-} from '@interchain-ui/react';
-
-import { getCoin, getExponent } from '@/configs';
-import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
-import {
-  calcDollarValue,
-  formatValidatorMetaInfo,
-  getAssetLogoUrl,
-  isGreaterThanZero,
-  shiftDigits,
-  type ExtendedValidator as Validator,
-} from '@/utils';
-
-const { undelegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
-
-export const UndelegateModal = ({
-  updateData,
-  unbondingDays,
-  chainName,
-  logoUrl,
-  selectedValidator,
-  closeOuterModal,
-  modalControl,
-  prices,
-}: {
-  updateData: () => void;
-  unbondingDays: string;
-  chainName: ChainName;
-  selectedValidator: Validator;
-  closeOuterModal: () => void;
-  modalControl: UseDisclosureReturn;
-  logoUrl: string;
-  prices: Prices;
-}) => {
-  const [amount, setAmount] = useState<number | undefined>(0);
-  const [isUndelegating, setIsUndelegating] = useState(false);
-  const [, forceUpdate] = useState(0);
-
-  const { address } = useChain(chainName);
-  const { tx } = useTx(chainName);
-
-  const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
-
-  const closeUndelegateModal = () => {
-    setAmount(0);
-    setIsUndelegating(false);
-    modalControl.onClose();
-  };
-
-  const onUndelegateClick = async () => {
-    if (!address || !amount) return;
-
-    setIsUndelegating(true);
-
-    const msg = undelegate({
-      delegatorAddress: address,
-      validatorAddress: selectedValidator.address,
-      amount: {
-        amount: shiftDigits(amount, exp),
-        denom: coin.base,
-      },
-    });
-
-    await tx([msg], {
-      onSuccess: () => {
-        updateData();
-        closeOuterModal();
-        closeUndelegateModal();
-      },
-    });
-
-    setIsUndelegating(false);
-  };
-
-  const maxAmount = selectedValidator.delegation;
-
-  return (
-    <BasicModal
-      title="Undelegate"
-      isOpen={modalControl.isOpen}
-      onClose={closeUndelegateModal}
-    >
-      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
-        <StakingDelegate
-          header={{
-            title: selectedValidator.name,
-            subtitle: formatValidatorMetaInfo(selectedValidator),
-            avatarUrl: logoUrl,
-          }}
-          headerExtra={
-            unbondingDays && (
-              <Callout
-                title="Once the unbonding period begins you will:"
-                intent="error"
-                iconName="errorWarningLine"
-              >
-                <Box as="ul" ml="$9">
-                  <Box as="li">not receive staking rewards</Box>
-                  <Box as="li">not be able to cancel the unbonding</Box>
-                  <Box as="li">
-                    need to wait {unbondingDays} days for the amount to be
-                    liquid
-                  </Box>
-                </Box>
-              </Callout>
-            )
-          }
-          delegationItems={[
-            {
-              label: 'Your Delegation',
-              tokenAmount: selectedValidator.delegation,
-              tokenName: coin.symbol,
-            },
-          ]}
-          inputProps={{
-            inputToken: {
-              tokenName: coin.symbol,
-              tokenIconUrl: getAssetLogoUrl(coin),
-            },
-            notionalValue: amount
-              ? calcDollarValue(coin.base, amount, prices)
-              : undefined,
-            value: amount,
-            onValueInput: (val) => {
-              if (!val) {
-                setAmount(undefined);
-                return;
-              }
-
-              if (new BigNumber(val).gt(maxAmount)) {
-                setAmount(Number(maxAmount));
-                forceUpdate((n) => n + 1);
-                return;
-              }
-
-              setAmount(Number(val));
-            },
-            partials: [
-              {
-                label: '1/2',
-                onClick: () => {
-                  setAmount(new BigNumber(maxAmount).dividedBy(2).toNumber());
-                },
-              },
-              {
-                label: '1/3',
-                onClick: () => {
-                  setAmount(new BigNumber(maxAmount).dividedBy(3).toNumber());
-                },
-              },
-              {
-                label: 'Max',
-                onClick: () => setAmount(Number(maxAmount)),
-              },
-            ],
-          }}
-          footer={
-            <Button
-              intent="tertiary"
-              onClick={onUndelegateClick}
-              disabled={!isGreaterThanZero(amount) || isUndelegating}
-              isLoading={isUndelegating}
-            >
-              Undelegate
-            </Button>
-          }
-        />
-      </Box>
-    </BasicModal>
-  );
-};
diff --git a/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx b/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
deleted file mode 100644
index 9a7de1bb6..000000000
--- a/examples/telescope-authz/components/staking/ValidatorInfoModal.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { getCoin } from '@/configs';
-import { ChainName } from 'cosmos-kit';
-import {
-  formatValidatorMetaInfo,
-  type ExtendedValidator as Validator,
-} from '@/utils';
-import {
-  BasicModal,
-  Box,
-  Button,
-  StakingDelegate,
-  Text,
-} from '@interchain-ui/react';
-import { UseDisclosureReturn } from '@/hooks';
-
-export const ValidatorInfoModal = ({
-  chainName,
-  logoUrl,
-  handleClick,
-  modalControl,
-  selectedValidator,
-}: {
-  chainName: ChainName;
-  modalControl: UseDisclosureReturn;
-  selectedValidator: Validator;
-  handleClick: {
-    openDelegateModal: () => void;
-    openUndelegateModal: () => void;
-    openSelectValidatorModal: () => void;
-  };
-  logoUrl: string;
-}) => {
-  const coin = getCoin(chainName);
-
-  const { isOpen, onClose } = modalControl;
-  const { openDelegateModal, openSelectValidatorModal, openUndelegateModal } =
-    handleClick;
-
-  return (
-    <BasicModal title="Validator" isOpen={isOpen} onClose={onClose}>
-      <Box width={{ mobile: '100%', tablet: '$containerSm' }}>
-        <StakingDelegate
-          header={{
-            title: selectedValidator.name,
-            subtitle: formatValidatorMetaInfo(selectedValidator),
-            avatarUrl: logoUrl,
-          }}
-          headerExtra={
-            selectedValidator.description && (
-              <Text fontSize="$md">{selectedValidator.description}</Text>
-            )
-          }
-          delegationItems={[
-            {
-              label: 'Your Delegation',
-              tokenAmount: selectedValidator.delegation,
-              tokenName: coin.symbol,
-            },
-          ]}
-          footer={
-            <Box display="flex" justifyContent="flex-end" gap="$8">
-              <Button
-                intent="secondary"
-                onClick={() => {
-                  onClose();
-                  openUndelegateModal();
-                }}
-              >
-                Undelegate
-              </Button>
-              <Button
-                intent="secondary"
-                onClick={() => {
-                  onClose();
-                  openSelectValidatorModal();
-                }}
-              >
-                Redelegate
-              </Button>
-              <Button
-                intent="tertiary"
-                onClick={() => {
-                  onClose();
-                  openDelegateModal();
-                }}
-              >
-                Delegate
-              </Button>
-            </Box>
-          }
-        />
-      </Box>
-    </BasicModal>
-  );
-};
diff --git a/examples/telescope-authz/configs/permissions.ts b/examples/telescope-authz/configs/permissions.ts
index 07266a048..b214e700e 100644
--- a/examples/telescope-authz/configs/permissions.ts
+++ b/examples/telescope-authz/configs/permissions.ts
@@ -40,3 +40,10 @@ export const isPermissionCustomizable = (permissionId: string) => {
   const permission = permissions.find((p) => p.id === permissionId);
   return permission?.isCustomizable ?? false;
 };
+
+export const permissionNameToRouteMap: Record<string, string> = {
+  Vote: '/vote',
+  Send: '/send',
+  Delegate: '/stake',
+  WithdrawDelegatorReward: '/claim-rewards',
+};
diff --git a/examples/telescope-authz/hooks/useGrants.ts b/examples/telescope-authz/hooks/useGrants.ts
index 26ae8701f..5cd71fa62 100644
--- a/examples/telescope-authz/hooks/useGrants.ts
+++ b/examples/telescope-authz/hooks/useGrants.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useChain } from '@cosmos-kit/react';
 import { useQuery } from '@tanstack/react-query';
 
@@ -7,6 +7,7 @@ import { prettyGrants } from '@/utils';
 
 export const useGrants = (chainName: string) => {
   const { address, getRpcEndpoint } = useChain(chainName);
+  const prevAddressRef = useRef(address);
 
   const rpcEndpointQuery = useQuery({
     queryKey: ['rpcEndpoint', chainName],
@@ -64,6 +65,13 @@ export const useGrants = (chainName: string) => {
     queriesToRefetch.forEach((query) => query.refetch());
   };
 
+  useEffect(() => {
+    if (prevAddressRef.current !== address) {
+      refetch();
+      prevAddressRef.current = address;
+    }
+  }, [address]);
+
   const isInitialFetching = Object.values(dataQueries).some(
     ({ isLoading }) => isLoading
   );
diff --git a/examples/telescope-authz/pages/claim-rewards.tsx b/examples/telescope-authz/pages/claim-rewards.tsx
new file mode 100644
index 000000000..6202c1b61
--- /dev/null
+++ b/examples/telescope-authz/pages/claim-rewards.tsx
@@ -0,0 +1,30 @@
+import { Divider } from '@interchain-ui/react';
+import { useAuthzContext } from '@/context';
+import {
+  Layout,
+  Wallet,
+  LoginInfoBanner,
+  ClaimRewardsSection,
+} from '@/components';
+
+export default function SingleChain() {
+  const { chainName, permission } = useAuthzContext();
+
+  return (
+    <Layout>
+      <Wallet chainName={chainName} />
+      <Divider height="0.1px" mt="$12" />
+      {chainName && (
+        <>
+          {permission && (
+            <LoginInfoBanner
+              chainName={chainName}
+              loginAddress={permission.granter}
+            />
+          )}
+          <ClaimRewardsSection chainName={chainName} />
+        </>
+      )}
+    </Layout>
+  );
+}
diff --git a/examples/telescope-authz/pages/stake.tsx b/examples/telescope-authz/pages/stake.tsx
index 565f62f4d..4b9ae914a 100644
--- a/examples/telescope-authz/pages/stake.tsx
+++ b/examples/telescope-authz/pages/stake.tsx
@@ -1,6 +1,6 @@
-import { Box, Divider, Icon, Text } from '@interchain-ui/react';
+import { Divider } from '@interchain-ui/react';
 import { useAuthzContext } from '@/context';
-import { Layout, StakingSection, Wallet } from '@/components';
+import { Layout, LoginInfoBanner, StakingSection, Wallet } from '@/components';
 
 export default function SingleChain() {
   const { chainName, permission } = useAuthzContext();
@@ -9,23 +9,17 @@ export default function SingleChain() {
     <Layout>
       <Wallet chainName={chainName} />
       <Divider height="0.1px" mt="$12" />
-      <Box
-        width="$fit"
-        height="$14"
-        backgroundColor="$cardBg"
-        borderRadius="$md"
-        display="flex"
-        alignItems="center"
-        gap="$4"
-        px="$6"
-        my="$16"
-        mx="auto"
-      >
-        <Icon name="errorWarningLine" size="$xl" />
-        <Text>You are now logged in as</Text>
-        <Text fontWeight="$semibold">{permission?.granter}</Text>
-      </Box>
-      {chainName && <StakingSection chainName={chainName} />}
+      {chainName && (
+        <>
+          {permission && (
+            <LoginInfoBanner
+              chainName={chainName}
+              loginAddress={permission.granter}
+            />
+          )}
+          <StakingSection chainName={chainName} />
+        </>
+      )}
     </Layout>
   );
 }

From f2fca96903f01e474089fc7bd799cf962a4e4ff0 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Mon, 19 Feb 2024 17:36:24 +0800
Subject: [PATCH 13/16] feat: exec vote grants

---
 examples/telescope-authz/components/index.tsx |   1 +
 .../components/voting/Proposal.tsx            | 377 ++++++++++++++++++
 .../components/voting/Voting.tsx              | 155 +++++++
 .../components/voting/index.ts                |   2 +
 examples/telescope-authz/hooks/index.ts       |   4 +
 examples/telescope-authz/hooks/useGrants.ts   |  36 +-
 examples/telescope-authz/hooks/useModal.ts    |  13 +
 .../telescope-authz/hooks/useQueryHooks.ts    |  42 ++
 .../hooks/useRpcQueryClient.ts                |  21 +
 .../telescope-authz/hooks/useStakingData.ts   |  60 +--
 .../telescope-authz/hooks/useValidators.ts    |  48 +--
 .../telescope-authz/hooks/useVotingData.ts    | 153 +++++++
 .../telescope-authz/pages/claim-rewards.tsx   |   2 +-
 examples/telescope-authz/pages/stake.tsx      |   2 +-
 examples/telescope-authz/pages/vote.tsx       |  25 ++
 examples/telescope-authz/utils/index.ts       |   1 +
 examples/telescope-authz/utils/vote.ts        |  94 +++++
 17 files changed, 927 insertions(+), 109 deletions(-)
 create mode 100644 examples/telescope-authz/components/voting/Proposal.tsx
 create mode 100644 examples/telescope-authz/components/voting/Voting.tsx
 create mode 100644 examples/telescope-authz/components/voting/index.ts
 create mode 100644 examples/telescope-authz/hooks/useModal.ts
 create mode 100644 examples/telescope-authz/hooks/useQueryHooks.ts
 create mode 100644 examples/telescope-authz/hooks/useRpcQueryClient.ts
 create mode 100644 examples/telescope-authz/hooks/useVotingData.ts
 create mode 100644 examples/telescope-authz/pages/vote.tsx
 create mode 100644 examples/telescope-authz/utils/vote.ts

diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index f70e0873a..fad8859c1 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -3,3 +3,4 @@ export * from './common';
 export * from './wallet';
 export * from './staking';
 export * from './claim-rewards';
+export * from './voting';
diff --git a/examples/telescope-authz/components/voting/Proposal.tsx b/examples/telescope-authz/components/voting/Proposal.tsx
new file mode 100644
index 000000000..60d175599
--- /dev/null
+++ b/examples/telescope-authz/components/voting/Proposal.tsx
@@ -0,0 +1,377 @@
+import {
+  Box,
+  Button,
+  GovernanceRadio,
+  GovernanceRadioGroup,
+  GovernanceResultCard,
+  GovernanceVoteBreakdown,
+  GovernanceVoteType,
+  Icon,
+  Stack,
+  Text,
+} from '@interchain-ui/react';
+import {
+  Proposal as IProposal,
+  ProposalStatus,
+} from 'interchain-query/cosmos/gov/v1beta1/gov';
+import {
+  exponentiate,
+  formatDate,
+  getCoin,
+  getExponent,
+  percent,
+} from '@/utils';
+import Markdown from 'react-markdown';
+import { useEffect, useState } from 'react';
+import { useAuthzTx, Votes } from '@/hooks';
+import { useAuthzContext } from '@/context';
+import { MsgVote } from '@/src/codegen/cosmos/gov/v1beta1/tx';
+
+// export declare enum VoteOption {
+//   /** VOTE_OPTION_UNSPECIFIED - VOTE_OPTION_UNSPECIFIED defines a no-op vote option. */
+//   VOTE_OPTION_UNSPECIFIED = 0,
+//   /** VOTE_OPTION_YES - VOTE_OPTION_YES defines a yes vote option. */
+//   VOTE_OPTION_YES = 1,
+//   /** VOTE_OPTION_ABSTAIN - VOTE_OPTION_ABSTAIN defines an abstain vote option. */
+//   VOTE_OPTION_ABSTAIN = 2,
+//   /** VOTE_OPTION_NO - VOTE_OPTION_NO defines a no vote option. */
+//   VOTE_OPTION_NO = 3,
+//   /** VOTE_OPTION_NO_WITH_VETO - VOTE_OPTION_NO_WITH_VETO defines a no with veto vote option. */
+//   VOTE_OPTION_NO_WITH_VETO = 4,
+//   UNRECOGNIZED = -1
+// }
+
+const VoteTypes = ['', 'yes', 'abstain', 'no', 'noWithVeto'];
+
+export type ProposalProps = {
+  proposal: IProposal;
+  votes?: Votes;
+  quorum?: number;
+  bondedTokens?: string;
+  chainName: string;
+  onVoteSuccess?: () => void;
+};
+
+export function Proposal({
+  votes,
+  quorum,
+  proposal,
+  chainName,
+  bondedTokens,
+  onVoteSuccess = () => {},
+}: ProposalProps) {
+  const vote = votes?.[proposal.proposalId.toString()];
+
+  const [showMore, setShowMore] = useState(false);
+  const [voteType, setVoteType] = useState<GovernanceVoteType>();
+  const [isVoting, setIsVoting] = useState(false);
+
+  const coin = getCoin(chainName);
+  const exponent = getExponent(chainName);
+
+  const { authzTx, createExecMsg } = useAuthzTx(chainName);
+  const { permission } = useAuthzContext();
+
+  const toggleShowMore = () => setShowMore((v) => !v);
+
+  useEffect(() => {
+    if (typeof vote === 'number') {
+      setVoteType(VoteTypes[vote] as GovernanceVoteType);
+    }
+  }, [vote]);
+
+  const isChanged =
+    (vote === undefined && voteType) ||
+    (typeof vote === 'number' && voteType && voteType !== VoteTypes[vote]);
+
+  const isPassed = proposal.status === ProposalStatus.PROPOSAL_STATUS_PASSED;
+
+  const isRejected =
+    proposal.status === ProposalStatus.PROPOSAL_STATUS_REJECTED;
+
+  const isDepositPeriod =
+    proposal.status === ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD;
+
+  const isVotingPeriod =
+    proposal.status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD;
+
+  const total = proposal.finalTallyResult
+    ? Object.values(proposal.finalTallyResult).reduce(
+        (sum, val) => sum + Number(val),
+        0
+      )
+    : 0;
+
+  const turnout = total / Number(bondedTokens);
+
+  // @ts-ignore
+  const description = proposal?.content?.description || '';
+  const renderedDescription =
+    description.length > 200
+      ? showMore
+        ? description
+        : `${description.slice(0, 200)}...`
+      : description || '';
+
+  const minStakedTokens =
+    quorum && exponentiate(quorum * Number(bondedTokens), -exponent).toFixed(6);
+
+  const timepoints = [
+    {
+      label: 'Submit Time',
+      timestamp: formatDate(proposal?.submitTime!) || '',
+    },
+    {
+      label: 'Voting Starts',
+      timestamp: isDepositPeriod
+        ? 'Not Specified Yet'
+        : formatDate(proposal.votingStartTime) || '',
+    },
+    {
+      label: 'Voting Ends',
+      timestamp: isDepositPeriod
+        ? 'Not Specified Yet'
+        : formatDate(proposal?.votingEndTime!) || '',
+    },
+  ];
+
+  function onVoteTypeChange(selected: string) {
+    setVoteType(selected as GovernanceVoteType);
+  }
+
+  function onVoteButtonClick() {
+    if (!voteType || !permission) return;
+
+    setIsVoting(true);
+
+    const { grantee, granter } = permission;
+
+    const msg = MsgVote.toProtoMsg(
+      MsgVote.fromPartial({
+        voter: granter,
+        option: VoteTypes.indexOf(voteType),
+        proposalId: proposal.proposalId,
+      })
+    );
+
+    authzTx({
+      msgs: [createExecMsg({ msgs: [msg], grantee })],
+      onSuccess: () => {
+        onVoteSuccess();
+      },
+      onComplete: () => {
+        setIsVoting(false);
+      },
+    });
+  }
+
+  return (
+    <Box py="$12" minWidth="40rem" maxWidth="40rem">
+      <Box
+        backgroundColor="$cardBg"
+        display="flex"
+        flexDirection="column"
+        gap="$10"
+        p={{
+          mobile: '$9',
+          tablet: '$10',
+          desktop: '$10',
+        }}
+        borderRadius="$lg"
+      >
+        <Box display="flex" justifyContent="space-between">
+          {timepoints.map((timepoint) => (
+            <Stack direction="vertical" space="$1">
+              <Text
+                color="$textSecondary"
+                fontSize="$sm"
+                fontWeight="$semibold"
+              >
+                {timepoint.label}
+              </Text>
+              <Text color="$textSecondary" fontSize="$sm" fontWeight="$normal">
+                {timepoint.timestamp}
+              </Text>
+            </Stack>
+          ))}
+        </Box>
+        <Box display={!isVotingPeriod && !vote ? 'none' : 'block'}>
+          <GovernanceRadioGroup
+            value={voteType}
+            isDisabled={isVoting}
+            onChange={onVoteTypeChange}
+          >
+            <Box
+              display="flex"
+              flexDirection={{
+                mobile: 'column',
+                tablet: 'row',
+                desktop: 'row',
+              }}
+              justifyContent={{
+                mobile: 'flex-start',
+                tablet: 'space-between',
+                desktop: 'space-between',
+              }}
+              gap="$6"
+            >
+              <GovernanceRadio value="yes">Yes</GovernanceRadio>
+              <GovernanceRadio value="no">No</GovernanceRadio>
+              <GovernanceRadio value="noWithVeto">No with veto</GovernanceRadio>
+              <GovernanceRadio value="abstain">Abstain</GovernanceRadio>
+            </Box>
+          </GovernanceRadioGroup>
+        </Box>
+        <Button
+          intent="tertiary"
+          isLoading={isVoting}
+          disabled={
+            !isVotingPeriod || isVoting || (isVotingPeriod && !isChanged)
+          }
+          onClick={onVoteButtonClick}
+        >
+          {vote ? 'Update Vote' : 'Vote'}
+        </Button>
+      </Box>
+      <Stack
+        direction="vertical"
+        space="$6"
+        attributes={{
+          marginY: '$12',
+        }}
+      >
+        <Text color="$textSecondary" fontSize="$lg" fontWeight="$semibold">
+          Vote Details
+        </Text>
+        {quorum ? (
+          <Text
+            color="$textSecondary"
+            fontSize="$xs"
+            fontWeight="$normal"
+            attributes={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Icon
+              name="informationLine"
+              color="$textSecondary"
+              size="$sm"
+              attributes={{
+                marginRight: '$2',
+              }}
+            />
+            <Text
+              as="span"
+              color="inherit"
+              fontWeight="$semibold"
+              fontSize="$xs"
+              attributes={{
+                px: '$2',
+              }}
+            >
+              {`Minimum of staked ${minStakedTokens} ${coin.symbol}(${
+                quorum * 100
+              }%) need to vote
+            for this proposal to pass.`}
+            </Text>
+          </Text>
+        ) : null}
+      </Stack>
+
+      <Box display="flex" gap="$17" marginBottom="$12">
+        <Box display="flex" flex="1" flexDirection="column" gap="$4">
+          <GovernanceVoteBreakdown
+            voteType="yes"
+            title="Yes"
+            votePercentage={percent(proposal.finalTallyResult?.yes, total)}
+            description={`${exponentiate(
+              proposal.finalTallyResult?.yes,
+              -exponent
+            ).toFixed(2)} ${coin.symbol}`}
+          />
+          <GovernanceVoteBreakdown
+            voteType="abstain"
+            title="Abstain"
+            votePercentage={percent(proposal.finalTallyResult?.abstain, total)}
+            description={`${exponentiate(
+              proposal.finalTallyResult?.abstain,
+              -exponent
+            ).toFixed(2)} ${coin.symbol}`}
+          />
+          <GovernanceVoteBreakdown
+            voteType="no"
+            title="No"
+            votePercentage={percent(proposal.finalTallyResult?.no, total)}
+            description={`${exponentiate(
+              proposal.finalTallyResult?.no,
+              -exponent
+            ).toFixed(2)} ${coin.symbol}`}
+          />
+          <GovernanceVoteBreakdown
+            voteType="noWithVeto"
+            title="No with veto"
+            votePercentage={percent(
+              proposal.finalTallyResult?.noWithVeto,
+              total
+            )}
+            description={`${exponentiate(
+              proposal.finalTallyResult?.noWithVeto,
+              -exponent
+            ).toFixed(2)} ${coin.symbol}`}
+          />
+        </Box>
+        <Box display="flex" flexDirection="column" gap="$12">
+          {isPassed ? (
+            <GovernanceResultCard
+              resultType="passed"
+              label="Passed"
+              votePercentage={percent(proposal.finalTallyResult?.yes, total)}
+            />
+          ) : null}
+          {isRejected ? (
+            <GovernanceResultCard
+              resultType="rejected"
+              label="Rejected"
+              votePercentage={
+                +(
+                  percent(proposal.finalTallyResult?.no, total) +
+                  percent(proposal.finalTallyResult?.noWithVeto, total)
+                ).toFixed(2)
+              }
+            />
+          ) : null}
+          <GovernanceResultCard
+            resultType="info"
+            label="Turnout"
+            votePercentage={+(turnout * 100).toFixed(2)}
+          />
+        </Box>
+      </Box>
+
+      {/* Description */}
+      <Box>
+        <Text
+          color="$textSecondary"
+          fontSize="$lg"
+          fontWeight="$semibold"
+          attributes={{
+            marginBottom: '$8',
+          }}
+        >
+          Description
+        </Text>
+
+        <Text fontSize="$sm" fontWeight="$normal" color="$textSecondary">
+          {showMore ? <Markdown>{description}</Markdown> : renderedDescription}
+        </Text>
+
+        <Box mt="$8" width="100%" display="flex" justifyContent="center">
+          <Button intent="secondary" variant="ghost" onClick={toggleShowMore}>
+            {showMore ? 'Show less' : 'Show more'}
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/examples/telescope-authz/components/voting/Voting.tsx b/examples/telescope-authz/components/voting/Voting.tsx
new file mode 100644
index 000000000..e5ad9787d
--- /dev/null
+++ b/examples/telescope-authz/components/voting/Voting.tsx
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { useChain } from "@cosmos-kit/react";
+import {
+  Proposal as IProposal,
+  ProposalStatus,
+  TallyResult,
+} from "interchain-query/cosmos/gov/v1beta1/gov";
+import {
+  BasicModal,
+  Box,
+  GovernanceProposalItem,
+  Spinner,
+  Text,
+  useColorModeValue,
+} from "@interchain-ui/react";
+import { useModal, useVotingData } from "@/hooks";
+import { Proposal } from "@/components";
+import { formatDate } from "@/utils";
+
+function status(s: ProposalStatus) {
+  switch (s) {
+    case ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED:
+      return "pending";
+    case ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD:
+      return "pending";
+    case ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD:
+      return "pending";
+    case ProposalStatus.PROPOSAL_STATUS_PASSED:
+      return "passed";
+    case ProposalStatus.PROPOSAL_STATUS_REJECTED:
+      return "rejected";
+    case ProposalStatus.PROPOSAL_STATUS_FAILED:
+      return "rejected";
+    default:
+      return "pending";
+  }
+}
+
+function votes(result: TallyResult) {
+  return {
+    yes: Number(result.yes) || 0,
+    no: Number(result.no) || 0,
+    abstain: Number(result.abstain) || 0,
+    noWithVeto: Number(result.noWithVeto) || 0,
+  };
+}
+
+export type VotingProps = {
+  chainName: string;
+};
+
+export function Voting({ chainName }: VotingProps) {
+  const { address } = useChain(chainName);
+  const [proposal, setProposal] = useState<IProposal>();
+  const { data, isLoading, refetch } = useVotingData(chainName);
+  const { modal, open: openModal, close: closeModal, setTitle } = useModal("");
+
+  function onClickProposal(index: number) {
+    const proposal = data.proposals![index];
+    openModal();
+    setProposal(proposal);
+    setTitle(`#${proposal.proposalId?.toString()} ${proposal.content?.title}`);
+  }
+
+  const content = (
+    <Box mt="$12">
+      {data.proposals?.map((proposal, index) => (
+        <Box
+          my="$8"
+          key={proposal.proposalId?.toString() || index}
+          position="relative"
+          attributes={{ onClick: () => onClickProposal(index) }}
+        >
+          {data.votes[proposal.proposalId.toString()]
+            ? (
+              <Box
+                position="absolute"
+                px="$4"
+                py="$2"
+                top="$4"
+                right="$6"
+                borderRadius="$md"
+                backgroundColor="$green400"
+              >
+                <Text color="$white" fontSize="$xs" fontWeight="$bold">
+                  Voted
+                </Text>
+              </Box>
+            )
+            : null}
+          <GovernanceProposalItem
+            id={`# ${proposal.proposalId?.toString()}`}
+            key={proposal.submitTime?.getTime()}
+            title={proposal.content?.title || ""}
+            status={status(proposal.status)}
+            votes={votes(proposal.finalTallyResult!)}
+            endTime={formatDate(proposal.votingEndTime)!}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+
+  const connect = (
+    <Box mt="$8" display="flex" alignItems="center" justifyContent="center">
+      <Text fontSize="$lg">
+        Please connect to your wallet to see the proposals.
+      </Text>
+    </Box>
+  );
+
+  const Loading = (
+    <Box
+      p="$8"
+      borderRadius="$md"
+      justifyContent="center"
+      display={isLoading ? "flex" : "none"}
+    >
+      <Spinner
+        size="$5xl"
+        color={useColorModeValue("$blackAlpha800", "$whiteAlpha900")}
+      />
+    </Box>
+  );
+
+  return (
+    <Box mb="$20" position="relative">
+      <Text fontWeight="600" fontSize="$2xl">Proposals</Text>
+
+      {address ? Loading : null}
+
+      {address ? content : connect}
+
+      <BasicModal
+        title={
+          <Box maxWidth="40rem">
+            <Text fontSize="$xl" fontWeight="$bold">{modal.title}</Text>
+          </Box>
+        }
+        isOpen={modal.open}
+        onOpen={openModal}
+        onClose={closeModal}
+      >
+        <Proposal
+          votes={data.votes}
+          proposal={proposal!}
+          quorum={data.quorum!}
+          bondedTokens={data.bondedTokens!}
+          chainName={chainName}
+          onVoteSuccess={refetch}
+        />
+      </BasicModal>
+    </Box>
+  );
+}
diff --git a/examples/telescope-authz/components/voting/index.ts b/examples/telescope-authz/components/voting/index.ts
new file mode 100644
index 000000000..75bcca3d8
--- /dev/null
+++ b/examples/telescope-authz/components/voting/index.ts
@@ -0,0 +1,2 @@
+export * from './Voting';
+export * from './Proposal';
\ No newline at end of file
diff --git a/examples/telescope-authz/hooks/index.ts b/examples/telescope-authz/hooks/index.ts
index 6503e5040..e62dd2f47 100644
--- a/examples/telescope-authz/hooks/index.ts
+++ b/examples/telescope-authz/hooks/index.ts
@@ -7,3 +7,7 @@ export * from './useValidators';
 export * from './useDisclosure';
 export * from './useStakingData';
 export * from './useValidatorLogos';
+export * from './useQueryHooks';
+export * from './useRpcQueryClient';
+export * from './useVotingData';
+export * from './useModal';
diff --git a/examples/telescope-authz/hooks/useGrants.ts b/examples/telescope-authz/hooks/useGrants.ts
index 5cd71fa62..c543f499e 100644
--- a/examples/telescope-authz/hooks/useGrants.ts
+++ b/examples/telescope-authz/hooks/useGrants.ts
@@ -2,40 +2,23 @@ import { useEffect, useMemo, useRef } from 'react';
 import { useChain } from '@cosmos-kit/react';
 import { useQuery } from '@tanstack/react-query';
 
-import { cosmos } from '@/src/codegen';
 import { prettyGrants } from '@/utils';
+import { useRpcQueryClient } from './useRpcQueryClient';
 
 export const useGrants = (chainName: string) => {
-  const { address, getRpcEndpoint } = useChain(chainName);
+  const { address } = useChain(chainName);
   const prevAddressRef = useRef(address);
 
-  const rpcEndpointQuery = useQuery({
-    queryKey: ['rpcEndpoint', chainName],
-    queryFn: () => getRpcEndpoint(),
-    enabled: !!address,
-    staleTime: Infinity,
-  });
-
-  const rpcQueryClientQuery = useQuery({
-    queryKey: ['rpcQueryClient', chainName],
-    queryFn: () =>
-      cosmos.ClientFactory.createRPCQueryClient({
-        rpcEndpoint: rpcEndpointQuery.data || '',
-      }),
-    enabled: !!rpcEndpointQuery.data,
-    staleTime: Infinity,
-  });
-
-  const queryClient = rpcQueryClientQuery.data;
-  const hasQueryClient = !!queryClient;
+  const { rpcQueryClient, isLoading: isRpcQueryClientLoading } =
+    useRpcQueryClient(chainName);
 
   const granterGrantsQuery = useQuery({
     queryKey: ['granterGrants', address],
     queryFn: () =>
-      queryClient?.cosmos.authz.v1beta1.granterGrants({
+      rpcQueryClient?.cosmos.authz.v1beta1.granterGrants({
         granter: address || '',
       }),
-    enabled: !!address && hasQueryClient,
+    enabled: !!rpcQueryClient && !!address,
     select: (data) => data?.grants,
     staleTime: Infinity,
   });
@@ -43,10 +26,10 @@ export const useGrants = (chainName: string) => {
   const granteeGrantsQuery = useQuery({
     queryKey: ['granteeGrants', address],
     queryFn: () =>
-      queryClient?.cosmos.authz.v1beta1.granteeGrants({
+      rpcQueryClient?.cosmos.authz.v1beta1.granteeGrants({
         grantee: address || '',
       }),
-    enabled: !!address && hasQueryClient,
+    enabled: !!rpcQueryClient && !!address,
     select: (data) => data?.grants,
     staleTime: Infinity,
   });
@@ -80,7 +63,8 @@ export const useGrants = (chainName: string) => {
     ({ isRefetching }) => isRefetching
   );
 
-  const isLoading = isInitialFetching || isRefetching;
+  const isLoading =
+    isRpcQueryClientLoading || isInitialFetching || isRefetching;
 
   type DataQueries = typeof dataQueries;
 
diff --git a/examples/telescope-authz/hooks/useModal.ts b/examples/telescope-authz/hooks/useModal.ts
new file mode 100644
index 000000000..a0d02c107
--- /dev/null
+++ b/examples/telescope-authz/hooks/useModal.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export function useModal(title = '') {
+  const [modal, setModal] = useState({ open: false, title });
+
+  const open = () => setModal(modal => ({ ...modal, open: true }));
+  const close = () => setModal(modal => ({ ...modal, open: false }));
+  const toggle = () => setModal(modal => ({ ...modal, open: !modal.open }));
+
+  const setTitle = (title: string) => setModal(modal => ({ ...modal, title }));
+
+  return { modal, open, close, toggle, setTitle }
+}
\ No newline at end of file
diff --git a/examples/telescope-authz/hooks/useQueryHooks.ts b/examples/telescope-authz/hooks/useQueryHooks.ts
new file mode 100644
index 000000000..d4f72a54b
--- /dev/null
+++ b/examples/telescope-authz/hooks/useQueryHooks.ts
@@ -0,0 +1,42 @@
+import { useChain } from '@cosmos-kit/react';
+import {
+  useRpcEndpoint,
+  useRpcClient,
+  createRpcQueryHooks,
+} from 'interchain-query';
+
+export const useQueryHooks = (chainName: string) => {
+  const { getRpcEndpoint } = useChain(chainName);
+
+  const rpcEndpointQuery = useRpcEndpoint({
+    getter: getRpcEndpoint,
+    options: {
+      staleTime: Infinity,
+      queryKeyHashFn: (queryKey) => {
+        return JSON.stringify([...queryKey, chainName]);
+      },
+    },
+  });
+
+  const rpcClientQuery = useRpcClient({
+    rpcEndpoint: rpcEndpointQuery.data || '',
+    options: {
+      enabled: Boolean(rpcEndpointQuery.data),
+      staleTime: Infinity,
+    },
+  });
+
+  const { cosmos } = createRpcQueryHooks({
+    rpc: rpcClientQuery.data,
+  });
+
+  const isReady = Boolean(rpcClientQuery.data);
+  const isFetching = rpcEndpointQuery.isFetching || rpcClientQuery.isFetching;
+
+  return {
+    cosmos,
+    isReady,
+    isFetching,
+    rpcEndpoint: rpcEndpointQuery.data,
+  };
+};
diff --git a/examples/telescope-authz/hooks/useRpcQueryClient.ts b/examples/telescope-authz/hooks/useRpcQueryClient.ts
new file mode 100644
index 000000000..d4e53ecb4
--- /dev/null
+++ b/examples/telescope-authz/hooks/useRpcQueryClient.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { cosmos } from '@/src/codegen';
+import { useQueryHooks } from './useQueryHooks';
+
+const { createRPCQueryClient } = cosmos.ClientFactory;
+
+export const useRpcQueryClient = (chainName: string) => {
+  const { rpcEndpoint } = useQueryHooks(chainName);
+
+  const rpcQueryClientQuery = useQuery({
+    queryKey: ['rpcQueryClient', rpcEndpoint],
+    queryFn: () => createRPCQueryClient({ rpcEndpoint: rpcEndpoint || '' }),
+    enabled: Boolean(rpcEndpoint),
+    staleTime: Infinity,
+  });
+
+  return {
+    isLoading: rpcQueryClientQuery.isLoading,
+    rpcQueryClient: rpcQueryClientQuery.data,
+  };
+};
diff --git a/examples/telescope-authz/hooks/useStakingData.ts b/examples/telescope-authz/hooks/useStakingData.ts
index 6459ae61c..2bc4d424a 100644
--- a/examples/telescope-authz/hooks/useStakingData.ts
+++ b/examples/telescope-authz/hooks/useStakingData.ts
@@ -1,12 +1,6 @@
 import { useEffect, useMemo } from 'react';
-import { useChain } from '@cosmos-kit/react';
 import BigNumber from 'bignumber.js';
-import {
-  cosmos,
-  useRpcClient,
-  useRpcEndpoint,
-  createRpcQueryHooks,
-} from 'interchain-query';
+import { cosmos } from 'interchain-query';
 
 import { usePrices } from './usePrices';
 import { getCoin, getExponent } from '@/configs';
@@ -21,14 +15,13 @@ import {
   parseValidators,
 } from '@/utils';
 import { useAuthzContext } from '@/context';
+import { useQueryHooks } from './useQueryHooks';
 
 (BigInt.prototype as any).toJSON = function () {
   return this.toString();
 };
 
 export const useStakingData = (chainName: string) => {
-  const { getRpcEndpoint } = useChain(chainName);
-
   const { permission } = useAuthzContext();
 
   const address = permission?.granter;
@@ -36,30 +29,11 @@ export const useStakingData = (chainName: string) => {
   const coin = getCoin(chainName);
   const exp = getExponent(chainName);
 
-  const rpcEndpointQuery = useRpcEndpoint({
-    getter: getRpcEndpoint,
-    options: {
-      enabled: !!address,
-      staleTime: Infinity,
-      queryKeyHashFn: (queryKey) => {
-        return JSON.stringify([...queryKey, chainName]);
-      },
-    },
-  });
-
-  const rpcClientQuery = useRpcClient({
-    rpcEndpoint: rpcEndpointQuery.data || '',
-    options: {
-      enabled: !!address && !!rpcEndpointQuery.data,
-      staleTime: Infinity,
-    },
-  });
-
-  const { cosmos: cosmosQuery } = createRpcQueryHooks({
-    rpc: rpcClientQuery.data,
-  });
-
-  const isDataQueryEnabled = !!address && !!rpcClientQuery.data;
+  const {
+    cosmos: cosmosQuery,
+    isReady: isQueryHooksReady,
+    isFetching: isQueryHooksFetching,
+  } = useQueryHooks(chainName);
 
   const balanceQuery = cosmosQuery.bank.v1beta1.useBalance({
     request: {
@@ -67,7 +41,7 @@ export const useStakingData = (chainName: string) => {
       denom: coin.base,
     },
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady && !!address,
       select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp),
     },
   });
@@ -78,7 +52,7 @@ export const useStakingData = (chainName: string) => {
       pagination: undefined,
     },
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady && !!address,
       select: ({ validators }) => parseValidators(validators),
     },
   });
@@ -89,7 +63,7 @@ export const useStakingData = (chainName: string) => {
         delegatorAddress: address || '',
       },
       options: {
-        enabled: isDataQueryEnabled,
+        enabled: isQueryHooksReady && !!address,
         select: (data) => parseRewards(data, coin.base, -exp),
       },
     });
@@ -108,7 +82,7 @@ export const useStakingData = (chainName: string) => {
       },
     },
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: ({ validators }) => {
         const sorted = validators.sort((a, b) =>
           new BigNumber(b.tokens).minus(a.tokens).toNumber()
@@ -130,7 +104,7 @@ export const useStakingData = (chainName: string) => {
       },
     },
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady && !!address,
       select: ({ delegationResponses }) =>
         parseDelegations(delegationResponses, -exp),
     },
@@ -138,14 +112,14 @@ export const useStakingData = (chainName: string) => {
 
   const unbondingDaysQuery = cosmosQuery.staking.v1beta1.useParams({
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: ({ params }) => parseUnbondingDays(params),
     },
   });
 
   const annualProvisionsQuery = cosmosQuery.mint.v1beta1.useAnnualProvisions({
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: parseAnnualProvisions,
       retry: false,
     },
@@ -153,14 +127,14 @@ export const useStakingData = (chainName: string) => {
 
   const poolQuery = cosmosQuery.staking.v1beta1.usePool({
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: ({ pool }) => pool,
     },
   });
 
   const communityTaxQuery = cosmosQuery.distribution.v1beta1.useParams({
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: ({ params }) => shiftDigits(params?.communityTax || '0', -18),
     },
   });
@@ -209,7 +183,7 @@ export const useStakingData = (chainName: string) => {
     ({ isRefetching }) => isRefetching
   );
 
-  const isLoading = isInitialFetching || isRefetching;
+  const isLoading = isQueryHooksFetching || isInitialFetching || isRefetching;
 
   type AllQueries = typeof allQueries;
 
diff --git a/examples/telescope-authz/hooks/useValidators.ts b/examples/telescope-authz/hooks/useValidators.ts
index 1529189d6..b68449f5f 100644
--- a/examples/telescope-authz/hooks/useValidators.ts
+++ b/examples/telescope-authz/hooks/useValidators.ts
@@ -1,15 +1,10 @@
 import { useMemo } from 'react';
-import { useChain } from '@cosmos-kit/react';
 import { useQuery } from '@tanstack/react-query';
-import {
-  cosmos,
-  useRpcClient,
-  useRpcEndpoint,
-  createRpcQueryHooks,
-} from 'interchain-query';
+import { cosmos } from 'interchain-query';
 import BigNumber from 'bignumber.js';
 
 import { extendValidators, getLogoUrls, parseValidators } from '@/utils';
+import { useQueryHooks } from './useQueryHooks';
 
 (BigInt.prototype as any).toJSON = function () {
   return this.toString();
@@ -23,32 +18,11 @@ export const useValidators = (
   chainName: string,
   { fetchLogos = true }: UseValidatorsConfig = {}
 ) => {
-  const { address, getRpcEndpoint } = useChain(chainName);
-
-  const rpcEndpointQuery = useRpcEndpoint({
-    getter: getRpcEndpoint,
-    options: {
-      enabled: !!address,
-      staleTime: Infinity,
-      queryKeyHashFn: (queryKey) => {
-        return JSON.stringify([...queryKey, chainName]);
-      },
-    },
-  });
-
-  const rpcClientQuery = useRpcClient({
-    rpcEndpoint: rpcEndpointQuery.data || '',
-    options: {
-      enabled: !!address && !!rpcEndpointQuery.data,
-      staleTime: Infinity,
-    },
-  });
-
-  const { cosmos: cosmosQuery } = createRpcQueryHooks({
-    rpc: rpcClientQuery.data,
-  });
-
-  const isDataQueryEnabled = !!address && !!rpcClientQuery.data;
+  const {
+    cosmos: cosmosQuery,
+    isReady: isQueryHooksReady,
+    isFetching: isQueryHooksFetching,
+  } = useQueryHooks(chainName);
 
   const validatorsQuery = cosmosQuery.staking.v1beta1.useValidators({
     request: {
@@ -64,7 +38,7 @@ export const useValidators = (
       },
     },
     options: {
-      enabled: isDataQueryEnabled,
+      enabled: isQueryHooksReady,
       select: ({ validators }) => {
         const sorted = validators.sort((a, b) =>
           new BigNumber(b.tokens).minus(a.tokens).toNumber()
@@ -81,13 +55,11 @@ export const useValidators = (
   const validatorLogosQuery = useQuery({
     queryKey: ['validatorLogos', chainName],
     queryFn: () => getLogoUrls(validatorsQuery.data || [], chainName),
-    enabled: isDataQueryEnabled && !!validatorsQuery.data && fetchLogos,
+    enabled: !!validatorsQuery.data && fetchLogos,
     staleTime: Infinity,
   });
 
   const allQueries = {
-    rpcEndpoint: rpcEndpointQuery,
-    rpcClient: rpcClientQuery,
     validators: validatorsQuery,
     validatorLogos: validatorLogosQuery,
   };
@@ -106,7 +78,7 @@ export const useValidators = (
     ({ isRefetching }) => isRefetching
   );
 
-  const isLoading = isInitialFetching || isRefetching;
+  const isLoading = isQueryHooksFetching || isInitialFetching || isRefetching;
 
   type AllQueries = typeof allQueries;
 
diff --git a/examples/telescope-authz/hooks/useVotingData.ts b/examples/telescope-authz/hooks/useVotingData.ts
new file mode 100644
index 000000000..76b2d2915
--- /dev/null
+++ b/examples/telescope-authz/hooks/useVotingData.ts
@@ -0,0 +1,153 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { ProposalStatus } from 'interchain-query/cosmos/gov/v1beta1/gov';
+
+import { paginate, parseQuorum, processProposals } from '@/utils';
+import { useRpcQueryClient } from './useRpcQueryClient';
+import { useQueryHooks } from './useQueryHooks';
+import { useAuthzContext } from '@/context';
+
+(BigInt.prototype as any).toJSON = function () {
+  return this.toString();
+};
+
+export interface Votes {
+  [key: string]: number;
+}
+
+export function useVotingData(chainName: string) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { permission } = useAuthzContext();
+
+  const address = permission?.granter;
+
+  const { rpcQueryClient } = useRpcQueryClient(chainName);
+  const { cosmos, isReady, isFetching } = useQueryHooks(chainName);
+
+  const proposalsQuery = cosmos.gov.v1beta1.useProposals({
+    request: {
+      voter: '',
+      depositor: '',
+      pagination: paginate(50n, true),
+      proposalStatus: ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED,
+    },
+    options: {
+      enabled: isReady,
+      staleTime: Infinity,
+      select: ({ proposals }) => processProposals(proposals),
+    },
+  });
+
+  const bondedTokensQuery = cosmos.staking.v1beta1.usePool({
+    options: {
+      enabled: isReady,
+      staleTime: Infinity,
+      select: ({ pool }) => pool?.bondedTokens,
+    },
+  });
+
+  const quorumQuery = cosmos.gov.v1beta1.useParams({
+    request: { paramsType: 'tallying' },
+    options: {
+      enabled: isReady,
+      staleTime: Infinity,
+      select: ({ tallyParams }) => parseQuorum(tallyParams?.quorum),
+    },
+  });
+
+  const votedProposalsQuery = cosmos.gov.v1beta1.useProposals({
+    request: {
+      voter: address || '/', // use '/' to differentiate from proposalsQuery
+      depositor: '',
+      pagination: paginate(50n, true),
+      proposalStatus: ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED,
+    },
+    options: {
+      enabled: isReady && Boolean(address),
+      select: ({ proposals }) => proposals,
+      keepPreviousData: true,
+    },
+  });
+
+  const votesQueries = useQueries({
+    queries: (votedProposalsQuery.data || []).map(({ proposalId }) => ({
+      queryKey: ['voteQuery', proposalId, address],
+      queryFn: () =>
+        rpcQueryClient?.cosmos.gov.v1beta1.vote({
+          proposalId,
+          voter: address || '',
+        }),
+      enabled:
+        Boolean(rpcQueryClient) &&
+        Boolean(address) &&
+        Boolean(votedProposalsQuery.data),
+      keepPreviousData: true,
+    })),
+  });
+
+  const singleQueries = {
+    quorum: quorumQuery,
+    proposals: proposalsQuery,
+    bondedTokens: bondedTokensQuery,
+    votedProposals: votedProposalsQuery,
+  };
+
+  const staticQueries = [
+    singleQueries.quorum,
+    singleQueries.proposals,
+    singleQueries.bondedTokens,
+  ];
+
+  const dynamicQueries = [singleQueries.votedProposals];
+
+  useEffect(() => {
+    staticQueries.forEach((query) => query.remove());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chainName]);
+
+  const isStaticQueriesFetching = staticQueries.some(
+    ({ isFetching }) => isFetching
+  );
+
+  const isDynamicQueriesFetching =
+    singleQueries.votedProposals.isFetching ||
+    votesQueries.some(({ isFetching }) => isFetching);
+
+  const loading =
+    isFetching || isStaticQueriesFetching || isDynamicQueriesFetching;
+
+  useEffect(() => {
+    // no loading when refetching
+    if (isFetching || isStaticQueriesFetching) setIsLoading(true);
+    if (!loading) setIsLoading(false);
+  }, [isStaticQueriesFetching, loading]);
+
+  type SingleQueries = typeof singleQueries;
+
+  type SingleQueriesData = {
+    [Key in keyof SingleQueries]: NonNullable<SingleQueries[Key]['data']>;
+  };
+
+  const singleQueriesData = useMemo(() => {
+    if (isStaticQueriesFetching || !isReady) return;
+
+    return Object.fromEntries(
+      Object.entries(singleQueries).map(([key, query]) => [key, query.data])
+    ) as SingleQueriesData;
+  }, [isStaticQueriesFetching, isReady]);
+
+  const votes = useMemo(() => {
+    const votesEntries = votesQueries
+      .map((query) => query.data)
+      .map((data) => [data?.vote?.proposalId, data?.vote?.options[0].option]);
+
+    return Object.fromEntries(votesEntries) as Votes;
+  }, [votesQueries]);
+
+  const refetch = () => {
+    votesQueries.forEach((query) => query.remove());
+    dynamicQueries.forEach((query) => query.refetch());
+  };
+
+  return { data: { ...singleQueriesData, votes }, isLoading, refetch };
+}
diff --git a/examples/telescope-authz/pages/claim-rewards.tsx b/examples/telescope-authz/pages/claim-rewards.tsx
index 6202c1b61..dc876282c 100644
--- a/examples/telescope-authz/pages/claim-rewards.tsx
+++ b/examples/telescope-authz/pages/claim-rewards.tsx
@@ -7,7 +7,7 @@ import {
   ClaimRewardsSection,
 } from '@/components';
 
-export default function SingleChain() {
+export default function ClaimRewards() {
   const { chainName, permission } = useAuthzContext();
 
   return (
diff --git a/examples/telescope-authz/pages/stake.tsx b/examples/telescope-authz/pages/stake.tsx
index 4b9ae914a..1ba00ffd4 100644
--- a/examples/telescope-authz/pages/stake.tsx
+++ b/examples/telescope-authz/pages/stake.tsx
@@ -2,7 +2,7 @@ import { Divider } from '@interchain-ui/react';
 import { useAuthzContext } from '@/context';
 import { Layout, LoginInfoBanner, StakingSection, Wallet } from '@/components';
 
-export default function SingleChain() {
+export default function Stake() {
   const { chainName, permission } = useAuthzContext();
 
   return (
diff --git a/examples/telescope-authz/pages/vote.tsx b/examples/telescope-authz/pages/vote.tsx
new file mode 100644
index 000000000..3682ff906
--- /dev/null
+++ b/examples/telescope-authz/pages/vote.tsx
@@ -0,0 +1,25 @@
+import { Divider } from '@interchain-ui/react';
+import { useAuthzContext } from '@/context';
+import { Layout, Wallet, LoginInfoBanner, Voting } from '@/components';
+
+export default function Vote() {
+  const { chainName, permission } = useAuthzContext();
+
+  return (
+    <Layout>
+      <Wallet chainName={chainName} />
+      <Divider height="0.1px" mt="$12" />
+      {chainName && (
+        <>
+          {permission && (
+            <LoginInfoBanner
+              chainName={chainName}
+              loginAddress={permission.granter}
+            />
+          )}
+          <Voting chainName={chainName} />
+        </>
+      )}
+    </Layout>
+  );
+}
diff --git a/examples/telescope-authz/utils/index.ts b/examples/telescope-authz/utils/index.ts
index 0cfdbd023..70809f7d0 100644
--- a/examples/telescope-authz/utils/index.ts
+++ b/examples/telescope-authz/utils/index.ts
@@ -3,3 +3,4 @@ export * from './chain';
 export * from './logos';
 export * from './authz';
 export * from './staking';
+export * from './vote';
diff --git a/examples/telescope-authz/utils/vote.ts b/examples/telescope-authz/utils/vote.ts
new file mode 100644
index 000000000..52b9ff336
--- /dev/null
+++ b/examples/telescope-authz/utils/vote.ts
@@ -0,0 +1,94 @@
+import dayjs from 'dayjs';
+import BigNumber from 'bignumber.js';
+import { Chain, Asset } from '@chain-registry/types';
+import {
+  Proposal,
+  ProposalStatus,
+} from 'interchain-query/cosmos/gov/v1beta1/gov';
+import { getChainAssets } from './chain';
+
+export function getChainLogo(chain: Chain) {
+  return chain.logo_URIs?.svg || chain.logo_URIs?.png || chain.logo_URIs?.jpeg;
+}
+
+export function formatDate(date?: Date) {
+  if (!date) return null;
+  return dayjs(date).format('YYYY-MM-DD hh:mm:ss');
+}
+
+export function paginate(limit: bigint, reverse: boolean = false) {
+  return {
+    limit,
+    reverse,
+    key: new Uint8Array(),
+    offset: 0n,
+    countTotal: true,
+  };
+}
+
+export function percent(num: number | string = 0, total: number, decimals = 2) {
+  return total
+    ? new BigNumber(num)
+        .dividedBy(total)
+        .multipliedBy(100)
+        .decimalPlaces(decimals)
+        .toNumber()
+    : 0;
+}
+
+export const getCoin = (chainName: string) => {
+  const chainAssets = getChainAssets(chainName);
+  return chainAssets.assets[0] as Asset;
+};
+
+export const getExponent = (chainName: string) => {
+  return getCoin(chainName).denom_units.find(
+    (unit) => unit.denom === getCoin(chainName).display
+  )?.exponent as number;
+};
+
+export const exponentiate = (num: number | string | undefined, exp: number) => {
+  if (!num) return 0;
+  return new BigNumber(num)
+    .multipliedBy(new BigNumber(10).exponentiatedBy(exp))
+    .toNumber();
+};
+
+export function decodeUint8Array(value?: Uint8Array) {
+  return value ? new TextDecoder('utf-8').decode(value) : '';
+}
+
+export function getTitle(value?: Uint8Array) {
+  return decodeUint8Array(value)
+    .slice(0, 250)
+    .match(/[A-Z][A-Za-z].*(?=\u0012)/)?.[0];
+}
+
+export function parseQuorum(value?: Uint8Array) {
+  const quorum = decodeUint8Array(value);
+  return new BigNumber(quorum).shiftedBy(-quorum.length).toNumber();
+}
+
+export function processProposals(proposals: Proposal[]) {
+  const sorted = proposals.sort(
+    (a, b) => Number(b.proposalId) - Number(a.proposalId)
+  );
+
+  proposals.forEach((proposal) => {
+    // @ts-ignore
+    if (!proposal.content?.title && proposal.content?.value) {
+      // @ts-ignore
+      proposal.content.title = getTitle(proposal.content?.value);
+    }
+  });
+
+  return sorted
+    .filter(
+      ({ status }) => status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD
+    )
+    .concat(
+      sorted.filter(
+        ({ status }) => status !== ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD
+      )
+    );
+}

From d2803607802511e5b834ddb49af5b644e2d23ed1 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Tue, 20 Feb 2024 14:55:50 +0800
Subject: [PATCH 14/16] feat: exec send grants

---
 examples/telescope-authz/components/index.tsx |   1 +
 .../telescope-authz/components/send/index.ts  |   1 +
 .../telescope-authz/components/send/send.tsx  | 146 ++++++++++++++++++
 examples/telescope-authz/hooks/index.ts       |   1 +
 examples/telescope-authz/hooks/useSendData.ts |  74 +++++++++
 examples/telescope-authz/pages/send.tsx       |  25 +++
 6 files changed, 248 insertions(+)
 create mode 100644 examples/telescope-authz/components/send/index.ts
 create mode 100644 examples/telescope-authz/components/send/send.tsx
 create mode 100644 examples/telescope-authz/hooks/useSendData.ts
 create mode 100644 examples/telescope-authz/pages/send.tsx

diff --git a/examples/telescope-authz/components/index.tsx b/examples/telescope-authz/components/index.tsx
index fad8859c1..e751a4da9 100644
--- a/examples/telescope-authz/components/index.tsx
+++ b/examples/telescope-authz/components/index.tsx
@@ -4,3 +4,4 @@ export * from './wallet';
 export * from './staking';
 export * from './claim-rewards';
 export * from './voting';
+export * from './send';
diff --git a/examples/telescope-authz/components/send/index.ts b/examples/telescope-authz/components/send/index.ts
new file mode 100644
index 000000000..d1ab99c82
--- /dev/null
+++ b/examples/telescope-authz/components/send/index.ts
@@ -0,0 +1 @@
+export * from './send';
diff --git a/examples/telescope-authz/components/send/send.tsx b/examples/telescope-authz/components/send/send.tsx
new file mode 100644
index 000000000..fc9cc950d
--- /dev/null
+++ b/examples/telescope-authz/components/send/send.tsx
@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import { useChain } from '@cosmos-kit/react';
+import {
+  Box,
+  Button,
+  Spinner,
+  Text,
+  TextField,
+  TokenInput,
+} from '@interchain-ui/react';
+import BigNumber from 'bignumber.js';
+
+import { useAuthzTx, useSendData, useToast } from '@/hooks';
+import {
+  getCoin,
+  getExponent,
+  getChainLogoByChainName,
+  shiftDigits,
+} from '@/utils';
+import { useAuthzContext } from '@/context';
+import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
+import { MsgSend } from '@/src/codegen/cosmos/bank/v1beta1/tx';
+
+type SendSectionProps = {
+  chainName: string;
+};
+
+export const SendSection = ({ chainName }: SendSectionProps) => {
+  const [recipientAddress, setRecipientAddress] = useState('');
+  const [amount, setAmount] = useState<number | undefined>(undefined);
+  const [isSending, setIsSending] = useState(false);
+
+  const { isWalletConnected } = useChain(chainName);
+  const { data, isLoading, refetch } = useSendData(chainName);
+  const { authzTx, createExecMsg } = useAuthzTx(chainName);
+  const { permission } = useAuthzContext();
+  const { toast } = useToast();
+
+  const coin = getCoin(chainName);
+  const exponent = getExponent(chainName);
+
+  const onSendClick = () => {
+    if (!amount || !recipientAddress || !permission) return;
+
+    const { grantee, granter, authorization } = permission;
+
+    const sendAmount = shiftDigits(amount, exponent);
+
+    if (SendAuthorization.is(authorization)) {
+      const limitAmount = authorization?.spendLimit?.[0]?.amount;
+      if (limitAmount && new BigNumber(sendAmount).gt(limitAmount)) {
+        toast({
+          type: 'error',
+          title: 'Amount exceeds the spending limit',
+        });
+        return;
+      }
+    }
+
+    setIsSending(true);
+
+    const msg = MsgSend.toProtoMsg({
+      amount: [
+        {
+          amount: sendAmount,
+          denom: coin.base,
+        },
+      ],
+      fromAddress: granter,
+      toAddress: recipientAddress,
+    });
+
+    authzTx({
+      msgs: [createExecMsg({ msgs: [msg], grantee })],
+      onSuccess: () => {
+        refetch();
+        setAmount(undefined);
+        setRecipientAddress('');
+      },
+      onComplete: () => {
+        setIsSending(false);
+      },
+    });
+  };
+
+  if (!isWalletConnected) {
+    return (
+      <Text
+        color="$textSecondary"
+        fontWeight="$semibold"
+        fontSize="$xl"
+        textAlign="center"
+        attributes={{ mt: '$20', mb: '$22' }}
+      >
+        Please connect the wallet
+      </Text>
+    );
+  }
+
+  if (isLoading || !data) {
+    return (
+      <Box mt="$20" mb="$22" display="flex" justifyContent="center">
+        <Spinner size="$7xl" />
+      </Box>
+    );
+  }
+
+  return (
+    <Box mt="$18" mb="$22" width="$containerSm" mx="auto">
+      <Text fontSize="$2xl" fontWeight="$semibold" attributes={{ mb: '$12' }}>
+        Send
+      </Text>
+
+      <TextField
+        id="recipient-address"
+        value={recipientAddress}
+        onChange={(e) => setRecipientAddress(e.target.value)}
+        label="Recipient Address"
+        placeholder="Enter recipient address"
+        attributes={{ mb: '$12' }}
+      />
+
+      <TokenInput
+        title="Amount"
+        symbol={coin.symbol}
+        amount={amount}
+        onAmountChange={setAmount}
+        available={Number(data.balance)}
+        priceDisplayAmount={data.prices[coin.base]}
+        tokenIcon={getChainLogoByChainName(chainName)}
+        attributes={{ mb: '$15' }}
+        hasProgressBar={false}
+        availableAsMax
+      />
+
+      <Button
+        intent="tertiary"
+        disabled={!amount || !recipientAddress || isSending}
+        onClick={onSendClick}
+        fluidWidth
+      >
+        Send
+      </Button>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/hooks/index.ts b/examples/telescope-authz/hooks/index.ts
index e62dd2f47..b0db4a978 100644
--- a/examples/telescope-authz/hooks/index.ts
+++ b/examples/telescope-authz/hooks/index.ts
@@ -11,3 +11,4 @@ export * from './useQueryHooks';
 export * from './useRpcQueryClient';
 export * from './useVotingData';
 export * from './useModal';
+export * from './useSendData';
diff --git a/examples/telescope-authz/hooks/useSendData.ts b/examples/telescope-authz/hooks/useSendData.ts
new file mode 100644
index 000000000..0e89b5670
--- /dev/null
+++ b/examples/telescope-authz/hooks/useSendData.ts
@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+
+import { usePrices } from './usePrices';
+import { shiftDigits } from '@/utils';
+import { useAuthzContext } from '@/context';
+import { getCoin, getExponent } from '@/configs';
+import { useQueryHooks } from './useQueryHooks';
+
+export const useSendData = (chainName: string) => {
+  const { permission } = useAuthzContext();
+
+  const address = permission?.granter;
+
+  const coin = getCoin(chainName);
+  const exp = getExponent(chainName);
+
+  const {
+    cosmos: cosmosQuery,
+    isReady: isQueryHooksReady,
+    isFetching: isQueryHooksFetching,
+  } = useQueryHooks(chainName);
+
+  const balanceQuery = cosmosQuery.bank.v1beta1.useBalance({
+    request: {
+      address: address || '',
+      denom: coin.base,
+    },
+    options: {
+      enabled: isQueryHooksReady && !!address,
+      select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp),
+      staleTime: 0,
+    },
+  });
+
+  const pricesQuery = usePrices();
+
+  const allQueries = {
+    prices: pricesQuery,
+    balance: balanceQuery,
+  };
+
+  const updatableQueries = [allQueries.balance];
+
+  const refetch = () => {
+    updatableQueries.forEach((query) => query.refetch());
+  };
+
+  const isInitialFetching = Object.values(allQueries).some(
+    ({ isLoading }) => isLoading
+  );
+
+  const isRefetching = Object.values(allQueries).some(
+    ({ isRefetching }) => isRefetching
+  );
+
+  const isLoading = isQueryHooksFetching || isInitialFetching || isRefetching;
+
+  type AllQueries = typeof allQueries;
+
+  type QueriesData = {
+    [Key in keyof AllQueries]: NonNullable<AllQueries[Key]['data']>;
+  };
+
+  const data = useMemo(() => {
+    if (isLoading) return;
+
+    return Object.fromEntries(
+      Object.entries(allQueries).map(([key, query]) => [key, query.data])
+    ) as QueriesData;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return { data, isLoading, refetch };
+};
diff --git a/examples/telescope-authz/pages/send.tsx b/examples/telescope-authz/pages/send.tsx
new file mode 100644
index 000000000..b78cbd736
--- /dev/null
+++ b/examples/telescope-authz/pages/send.tsx
@@ -0,0 +1,25 @@
+import { Divider } from '@interchain-ui/react';
+import { useAuthzContext } from '@/context';
+import { Layout, Wallet, LoginInfoBanner, SendSection } from '@/components';
+
+export default function Send() {
+  const { chainName, permission } = useAuthzContext();
+
+  return (
+    <Layout>
+      <Wallet chainName={chainName} />
+      <Divider height="0.1px" mt="$12" />
+      {chainName && (
+        <>
+          {permission && (
+            <LoginInfoBanner
+              chainName={chainName}
+              loginAddress={permission.granter}
+            />
+          )}
+          <SendSection chainName={chainName} />
+        </>
+      )}
+    </Layout>
+  );
+}

From 5d22efd9c6ceaf2320f51635e4bbbe04e1016a54 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Thu, 22 Feb 2024 16:09:30 +0800
Subject: [PATCH 15/16] feat: optimize

---
 .../components/authz/GrantCard.tsx            |  10 +-
 .../components/authz/GrantDetailsModal.tsx    |   7 +-
 .../components/authz/GrantModal.tsx           |  28 +--
 .../components/authz/Grants.tsx               |   8 +-
 .../components/authz/LoginInfoBanner.tsx      |   8 +-
 .../components/authz/PermissionDetailCard.tsx |  76 +++++---
 .../components/claim-rewards/Overview.tsx     |  13 +-
 .../components/common/AddressInput.tsx        |  63 +++++++
 .../components/common/index.ts                |   1 +
 .../telescope-authz/components/send/send.tsx  |  29 ++-
 .../components/staking/DelegateModal.tsx      | 174 +++++-------------
 .../components/voting/Proposal.tsx            |  15 +-
 .../components/voting/Voting.tsx              | 164 +++++++++--------
 .../components/wallet/Chain.tsx               | 152 ++++++++++++---
 .../components/wallet/Wallet.tsx              |   6 +-
 .../telescope-authz/configs/permissions.ts    |   5 -
 examples/telescope-authz/hooks/useAuthzTx.ts  |  28 ++-
 .../telescope-authz/pages/claim-rewards.tsx   |   3 +
 examples/telescope-authz/pages/send.tsx       |   3 +
 examples/telescope-authz/pages/stake.tsx      |   3 +
 examples/telescope-authz/pages/vote.tsx       |   3 +
 examples/telescope-authz/utils/authz.ts       |  16 ++
 examples/telescope-authz/utils/chain.ts       |   2 -
 23 files changed, 489 insertions(+), 328 deletions(-)
 create mode 100644 examples/telescope-authz/components/common/AddressInput.tsx

diff --git a/examples/telescope-authz/components/authz/GrantCard.tsx b/examples/telescope-authz/components/authz/GrantCard.tsx
index fd50f6630..a9e70ff1c 100644
--- a/examples/telescope-authz/components/authz/GrantCard.tsx
+++ b/examples/telescope-authz/components/authz/GrantCard.tsx
@@ -9,15 +9,16 @@ import {
   Text,
   TextField,
 } from '@interchain-ui/react';
+import { useChain } from '@cosmos-kit/react';
 
 import {
   getChainLogoByChainName,
   PrettyGrant,
   PrettyPermission,
 } from '@/utils';
-import { getCoin, permissionNameToRouteMap } from '@/configs';
 import { useAuthzContext } from '@/context';
 import { useAuthzTx, useGrants } from '@/hooks';
+import { getCoin, permissionNameToRouteMap } from '@/configs';
 
 import styles from '@/styles/custom.module.css';
 
@@ -39,6 +40,7 @@ export const GrantCard = ({
   const [revokingPermission, setRevokingPermission] =
     useState<PrettyPermission>();
 
+  const { chain } = useChain(chainName);
   const { refetch } = useGrants(chainName);
   const { setPermission } = useAuthzContext();
   const { authzTx, createRevokeMsg } = useAuthzTx(chainName);
@@ -82,7 +84,7 @@ export const GrantCard = ({
       py="$11"
       backgroundColor="$cardBg"
       borderRadius="$lg"
-      width="496px"
+      width="$full"
     >
       <Stack space="$4" attributes={{ alignItems: 'center', mb: '$10' }}>
         <Image
@@ -93,7 +95,7 @@ export const GrantCard = ({
           sizes="100vw"
         />
         <Text fontWeight="$semibold" fontSize="$lg">
-          {token.name}
+          {chain.pretty_name}
         </Text>
       </Stack>
 
@@ -175,7 +177,7 @@ export const GrantCard = ({
         )}
       </Box>
 
-      <Button intent="tertiary" onClick={onViewDetails} fluidWidth>
+      <Button intent="tertiary" onClick={onViewDetails}>
         View Details
       </Button>
     </Box>
diff --git a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
index 2814956da..592498149 100644
--- a/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantDetailsModal.tsx
@@ -46,20 +46,17 @@ export const GrantDetailsModal = ({
     });
   };
 
-  const isScrollable = permissions.length > 4;
-
   return (
     <BasicModal title="All Permissions" isOpen={isOpen} onClose={onClose}>
       <Box width={{ mobile: '100%', tablet: '$containerMd' }}>
         <Box
           mt="$7"
-          mb="$12"
+          mb={isGranter ? '$12' : '$2'}
           display="grid"
           gridTemplateColumns={{ mobile: '1fr', tablet: '1fr 1fr' }}
           gap="$10"
-          maxHeight="480px"
+          maxHeight="500px"
           overflowY="auto"
-          pr={isScrollable ? '$4' : '0'}
         >
           {permissions.map((permission) => (
             <PermissionDetailCard
diff --git a/examples/telescope-authz/components/authz/GrantModal.tsx b/examples/telescope-authz/components/authz/GrantModal.tsx
index 66e3cb2c1..d96671def 100644
--- a/examples/telescope-authz/components/authz/GrantModal.tsx
+++ b/examples/telescope-authz/components/authz/GrantModal.tsx
@@ -21,7 +21,6 @@ import dayjs from 'dayjs';
 
 import {
   getExponent,
-  isPermissionCustomizable,
   PermissionId,
   PermissionItem,
   permissions,
@@ -30,6 +29,7 @@ import { AuthorizationType } from '@/src/codegen/cosmos/staking/v1beta1/authz';
 import { GrantMsg, useAuthzTx, useGrants } from '@/hooks';
 import { getTokenByChainName, shiftDigits } from '@/utils';
 import { CustomizationField } from './CustomizationField';
+import { AddressInput } from '@/components';
 
 import styles from '@/styles/custom.module.css';
 
@@ -49,6 +49,7 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
 
   const [granteeAddress, setGranteeAddress] = useState('');
+  const [addressErrorMsg, setAddressErrorMsg] = useState('');
   const [expiryDate, setExpiryDate] = useState<Date | null>(null);
   const [selectedPermission, setSelectedPermission] =
     useState<PermissionItem | null>(null);
@@ -136,9 +137,6 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
     });
   };
 
-  const isCustomizable =
-    selectedPermission && isPermissionCustomizable(selectedPermission.id);
-
   return (
     <BasicModal
       title="Create Grant"
@@ -153,12 +151,13 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
         gap="$9"
         pt="$4"
       >
-        <TextField
-          id="grantee-address"
-          value={granteeAddress}
-          onChange={(e) => setGranteeAddress(e.target.value)}
-          label="Grantee address"
+        <AddressInput
+          label="Grantee Address"
           placeholder="Enter grantee address"
+          chainName={chainName}
+          address={granteeAddress}
+          onAddressChange={setGranteeAddress}
+          onInvalidAddress={setAddressErrorMsg}
         />
 
         <Box>
@@ -237,6 +236,7 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
             value={expiryDate ? dayjs(expiryDate).format('MM/DD/YYYY') : ''}
             label="Expiry Date"
             placeholder="Select expiry date"
+            autoComplete="off"
           />
           <Box position="absolute" bottom="7px" right="10px">
             <Popover
@@ -252,7 +252,7 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
                 <Calendar
                   locale="en-US"
                   value={expiryDate}
-                  minDate={new Date()}
+                  minDate={dayjs().add(1, 'day').startOf('day').toDate()}
                   onChange={(val) => {
                     if (Array.isArray(val)) {
                       setExpiryDate(val[1]);
@@ -274,7 +274,13 @@ export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => {
             fluidWidth
             intent="tertiary"
             isLoading={isGranting}
-            disabled={isGranting}
+            disabled={
+              isGranting ||
+              !!addressErrorMsg ||
+              !granteeAddress ||
+              !expiryDate ||
+              !selectedPermission
+            }
             onClick={onGrantClick}
           >
             Grant
diff --git a/examples/telescope-authz/components/authz/Grants.tsx b/examples/telescope-authz/components/authz/Grants.tsx
index d5448a724..76c0151ae 100644
--- a/examples/telescope-authz/components/authz/Grants.tsx
+++ b/examples/telescope-authz/components/authz/Grants.tsx
@@ -24,7 +24,13 @@ export const Grants = ({ chainName, role }: GrantsProps) => {
       {isLoading ? (
         <Spinner size="$6xl" />
       ) : grants && grants.length > 0 ? (
-        <Box width="$full" alignSelf="flex-start">
+        <Box
+          width="$full"
+          alignSelf="flex-start"
+          display="grid"
+          gridTemplateColumns={{ mobile: '1fr', tablet: '1fr 1fr' }}
+          gap="$10"
+        >
           {grants.map((grant) => (
             <GrantCard
               key={grant.address}
diff --git a/examples/telescope-authz/components/authz/LoginInfoBanner.tsx b/examples/telescope-authz/components/authz/LoginInfoBanner.tsx
index f4277d117..7644b375b 100644
--- a/examples/telescope-authz/components/authz/LoginInfoBanner.tsx
+++ b/examples/telescope-authz/components/authz/LoginInfoBanner.tsx
@@ -28,8 +28,12 @@ export const LoginInfoBanner = ({
       mx="auto"
     >
       <Icon name="errorWarningLine" size="$xl" />
-      <Text>You are now logged in as</Text>
-      <Text fontWeight="$semibold">{loginAddress}</Text>
+      <Text>
+        You are now logged in as&nbsp;
+        <Text as="span" fontWeight="$semibold">
+          {loginAddress}
+        </Text>
+      </Text>
     </Box>
   );
 };
diff --git a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
index 66789d780..a58804b57 100644
--- a/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
+++ b/examples/telescope-authz/components/authz/PermissionDetailCard.tsx
@@ -1,7 +1,10 @@
-import { Box, Button, Skeleton, Text } from '@interchain-ui/react';
+import Link from 'next/link';
+import { Box, Button, Icon, Skeleton, Text } from '@interchain-ui/react';
 
 import { useValidators } from '@/hooks';
+import { permissionNameToRouteMap } from '@/configs';
 import { getAttributePairs, PrettyGrant } from '@/utils';
+import { useAuthzContext } from '@/context';
 
 type PermissionDetailCardProps = {
   role: 'granter' | 'grantee';
@@ -21,6 +24,7 @@ export const PermissionDetailCard = ({
   const { name, expiration, expiry, authorization } = permission;
   const isGranter = role === 'granter';
 
+  const { setPermission } = useAuthzContext();
   const { data, isLoading } = useValidators(chainName, { fetchLogos: false });
   const attributes = getAttributePairs(authorization, data || []);
 
@@ -33,29 +37,47 @@ export const PermissionDetailCard = ({
       width="100%"
       height={{ mobile: 'auto', tablet: '100%' }}
     >
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        gap="$6"
-        mb="$10"
-      >
-        <Text fontWeight="$semibold" fontSize="$md">
-          {name}
-        </Text>
-        {isGranter && (
-          <Button
-            intent="tertiary"
-            size="sm"
-            onClick={onRevoke}
-            disabled={isRevoking}
+      <Box mb="$10">
+        {isGranter ? (
+          <Box display="flex" justifyContent="space-between" gap="$6">
+            <Text fontWeight="$semibold" fontSize="$lg">
+              {name}
+            </Text>
+            <Button
+              intent="tertiary"
+              size="sm"
+              onClick={onRevoke}
+              disabled={isRevoking}
+            >
+              Revoke
+            </Button>
+          </Box>
+        ) : permissionNameToRouteMap[name] ? (
+          <Link
+            href={permissionNameToRouteMap[name]}
+            style={{ textDecoration: 'none' }}
           >
-            Revoke
-          </Button>
+            <Box
+              display="flex"
+              alignItems="center"
+              gap="$4"
+              attributes={{ onClick: () => setPermission(permission) }}
+            >
+              <Text fontWeight="$semibold" fontSize="$lg">
+                {name}
+              </Text>
+              <Icon name="arrowRightRounded" size="$xs" />
+            </Box>
+          </Link>
+        ) : (
+          <Text fontWeight="$semibold" fontSize="$lg">
+            {name}
+          </Text>
         )}
       </Box>
 
       <Box display="flex" flexDirection="column" gap="$7">
+        {expiration && <PermissionAttribute label="Expiry" value={expiry} />}
         {attributes.map((attr) => (
           <PermissionAttribute
             {...attr}
@@ -66,7 +88,6 @@ export const PermissionDetailCard = ({
             }
           />
         ))}
-        {expiration && <PermissionAttribute label="Expiry" value={expiry} />}
       </Box>
     </Box>
   );
@@ -84,14 +105,23 @@ const PermissionAttribute = ({
   isLoading = false,
 }: PermissionAttributeProps) => {
   return (
-    <Box display="flex" alignItems="center" justifyContent="space-between">
-      <Text fontWeight="$normal" fontSize="$sm">
+    <Box display="flex" justifyContent="space-between">
+      <Text
+        fontWeight="$normal"
+        fontSize="$sm"
+        attributes={{ maxWidth: '30%' }}
+      >
         {label}
       </Text>
       {isLoading ? (
         <Skeleton width="$20" height="$9" />
       ) : (
-        <Text fontWeight="$semibold" fontSize="$sm">
+        <Text
+          fontWeight="$semibold"
+          fontSize="$sm"
+          textAlign="right"
+          attributes={{ maxWidth: '65%' }}
+        >
           {value}
         </Text>
       )}
diff --git a/examples/telescope-authz/components/claim-rewards/Overview.tsx b/examples/telescope-authz/components/claim-rewards/Overview.tsx
index d0a24d79d..4ba470c26 100644
--- a/examples/telescope-authz/components/claim-rewards/Overview.tsx
+++ b/examples/telescope-authz/components/claim-rewards/Overview.tsx
@@ -45,19 +45,18 @@ const Overview = ({
 
     setIsClaiming(true);
 
-    const { grantee, granter } = permission;
+    const { grantee, granter, expiration } = permission;
 
     const msgs = rewards.byValidators.map(({ validatorAddress }) =>
-      MsgWithdrawDelegatorReward.toProtoMsg(
-        MsgWithdrawDelegatorReward.fromPartial({
-          delegatorAddress: granter,
-          validatorAddress,
-        })
-      )
+      MsgWithdrawDelegatorReward.toProtoMsg({
+        delegatorAddress: granter,
+        validatorAddress,
+      })
     );
 
     authzTx({
       msgs: [createExecMsg({ msgs, grantee })],
+      execExpiration: expiration,
       onSuccess: () => {
         updateData();
       },
diff --git a/examples/telescope-authz/components/common/AddressInput.tsx b/examples/telescope-authz/components/common/AddressInput.tsx
new file mode 100644
index 000000000..1d3bad918
--- /dev/null
+++ b/examples/telescope-authz/components/common/AddressInput.tsx
@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useChain } from '@cosmos-kit/react';
+import { fromBech32 } from '@cosmjs/encoding';
+import { TextField, Text, Box, BoxProps } from '@interchain-ui/react';
+
+type AddressInputProps = {
+  chainName: string;
+  address: string;
+  onAddressChange: (address: string) => void;
+  mb?: BoxProps['mb'];
+  label?: string;
+  placeholder?: string;
+  onInvalidAddress?: (error: string) => void;
+};
+
+export const AddressInput = ({
+  chainName,
+  address,
+  onAddressChange,
+  label,
+  mb,
+  onInvalidAddress,
+  placeholder,
+}: AddressInputProps) => {
+  const { chain } = useChain(chainName);
+
+  const errorMessage = useMemo(() => {
+    let errorMsg = '';
+
+    if (!address) {
+      onInvalidAddress && onInvalidAddress(errorMsg);
+      return errorMsg;
+    }
+
+    try {
+      const res = fromBech32(address);
+      if (!address.startsWith(chain.bech32_prefix)) {
+        errorMsg = `Invalid address: Unexpected prefix (expected: ${chain.bech32_prefix}, actual: ${res.prefix})`;
+      }
+    } catch (error) {
+      errorMsg = 'Invalid address';
+    } finally {
+      onInvalidAddress && onInvalidAddress(errorMsg);
+      return errorMsg;
+    }
+  }, [address]);
+
+  return (
+    <Box mb={mb}>
+      <TextField
+        id={label || 'address'}
+        value={address}
+        onChange={(e) => onAddressChange(e.target.value)}
+        label={label}
+        placeholder={placeholder}
+        attributes={{ mb: errorMessage ? '$2' : '0' }}
+        intent={errorMessage ? 'error' : 'default'}
+      />
+
+      {errorMessage && <Text color="$textDanger">{errorMessage}</Text>}
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/common/index.ts b/examples/telescope-authz/components/common/index.ts
index 9877e7f4a..595791106 100644
--- a/examples/telescope-authz/components/common/index.ts
+++ b/examples/telescope-authz/components/common/index.ts
@@ -1 +1,2 @@
 export * from './Layout';
+export * from './AddressInput';
diff --git a/examples/telescope-authz/components/send/send.tsx b/examples/telescope-authz/components/send/send.tsx
index fc9cc950d..72de11961 100644
--- a/examples/telescope-authz/components/send/send.tsx
+++ b/examples/telescope-authz/components/send/send.tsx
@@ -1,13 +1,6 @@
 import { useState } from 'react';
 import { useChain } from '@cosmos-kit/react';
-import {
-  Box,
-  Button,
-  Spinner,
-  Text,
-  TextField,
-  TokenInput,
-} from '@interchain-ui/react';
+import { Box, Button, Spinner, Text, TokenInput } from '@interchain-ui/react';
 import BigNumber from 'bignumber.js';
 
 import { useAuthzTx, useSendData, useToast } from '@/hooks';
@@ -18,8 +11,9 @@ import {
   shiftDigits,
 } from '@/utils';
 import { useAuthzContext } from '@/context';
-import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
+import { AddressInput } from '@/components';
 import { MsgSend } from '@/src/codegen/cosmos/bank/v1beta1/tx';
+import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
 
 type SendSectionProps = {
   chainName: string;
@@ -29,6 +23,7 @@ export const SendSection = ({ chainName }: SendSectionProps) => {
   const [recipientAddress, setRecipientAddress] = useState('');
   const [amount, setAmount] = useState<number | undefined>(undefined);
   const [isSending, setIsSending] = useState(false);
+  const [errorMsg, setErrorMsg] = useState('');
 
   const { isWalletConnected } = useChain(chainName);
   const { data, isLoading, refetch } = useSendData(chainName);
@@ -42,7 +37,7 @@ export const SendSection = ({ chainName }: SendSectionProps) => {
   const onSendClick = () => {
     if (!amount || !recipientAddress || !permission) return;
 
-    const { grantee, granter, authorization } = permission;
+    const { grantee, granter, authorization, expiration } = permission;
 
     const sendAmount = shiftDigits(amount, exponent);
 
@@ -72,6 +67,7 @@ export const SendSection = ({ chainName }: SendSectionProps) => {
 
     authzTx({
       msgs: [createExecMsg({ msgs: [msg], grantee })],
+      execExpiration: expiration,
       onSuccess: () => {
         refetch();
         setAmount(undefined);
@@ -111,13 +107,14 @@ export const SendSection = ({ chainName }: SendSectionProps) => {
         Send
       </Text>
 
-      <TextField
-        id="recipient-address"
-        value={recipientAddress}
-        onChange={(e) => setRecipientAddress(e.target.value)}
+      <AddressInput
         label="Recipient Address"
         placeholder="Enter recipient address"
-        attributes={{ mb: '$12' }}
+        chainName={chainName}
+        address={recipientAddress}
+        onAddressChange={setRecipientAddress}
+        onInvalidAddress={setErrorMsg}
+        mb="$12"
       />
 
       <TokenInput
@@ -135,7 +132,7 @@ export const SendSection = ({ chainName }: SendSectionProps) => {
 
       <Button
         intent="tertiary"
-        disabled={!amount || !recipientAddress || isSending}
+        disabled={!amount || !recipientAddress || isSending || !!errorMsg}
         onClick={onSendClick}
         fluidWidth
       >
diff --git a/examples/telescope-authz/components/staking/DelegateModal.tsx b/examples/telescope-authz/components/staking/DelegateModal.tsx
index 6828896bc..38021aa1d 100644
--- a/examples/telescope-authz/components/staking/DelegateModal.tsx
+++ b/examples/telescope-authz/components/staking/DelegateModal.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react';
-import { StdFee } from '@cosmjs/amino';
-import { useChain } from '@cosmos-kit/react';
 import { ChainName } from 'cosmos-kit';
 import BigNumber from 'bignumber.js';
 import {
@@ -22,25 +20,11 @@ import {
   calcDollarValue,
 } from '@/utils';
 import { getCoin, getExponent } from '@/configs';
-import {
-  Prices,
-  useAuthzTx,
-  UseDisclosureReturn,
-  useToast,
-  useTx,
-} from '@/hooks';
-import { cosmos } from '@/src/codegen';
 import { useAuthzContext } from '@/context';
+import { Prices, useAuthzTx, UseDisclosureReturn, useToast } from '@/hooks';
 import { MsgDelegate } from '@/src/codegen/cosmos/staking/v1beta1/tx';
 import { StakeAuthorization } from '@/src/codegen/cosmos/staking/v1beta1/authz';
 
-const { delegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
-
-export type MaxAmountAndFee = {
-  maxAmount: number;
-  fee: StdFee;
-};
-
 export const DelegateModal = ({
   balance,
   updateData,
@@ -67,17 +51,14 @@ export const DelegateModal = ({
   showDescription?: boolean;
 }) => {
   const { isOpen, onClose } = modalControl;
-  const { address, estimateFee } = useChain(chainName);
 
   const [amount, setAmount] = useState<number | undefined>(0);
   const [isDelegating, setIsDelegating] = useState(false);
-  const [isSimulating, setIsSimulating] = useState(false);
-  const [maxAmountAndFee, setMaxAmountAndFee] = useState<MaxAmountAndFee>();
   const [, forceUpdate] = useState(0);
 
   const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
-  // const { tx } = useTx(chainName);
+  const exponent = getExponent(chainName);
+
   const { authzTx, createExecMsg } = useAuthzTx(chainName);
   const { permission } = useAuthzContext();
   const { toast } = useToast();
@@ -86,68 +67,58 @@ export const DelegateModal = ({
     onClose();
     setAmount(0);
     setIsDelegating(false);
-    setIsSimulating(false);
   };
 
   const onDelegateClick = async () => {
     if (!amount || !permission) return;
 
-    const { grantee, granter, authorization } = permission;
-
-    const stakeAuthz = authorization as StakeAuthorization;
-
-    const allowList = stakeAuthz.allowList?.address || [];
-    const denyList = stakeAuthz.denyList?.address || [];
-
-    // TODO: check generic stake authz
-
-    if (
-      !allowList.includes(selectedValidator.address) ||
-      denyList.includes(selectedValidator.address)
-    ) {
-      toast({
-        title: 'Unauthorized Delegation',
-        description:
-          'You are not allowed to delegate to this validator from this account.',
-        type: 'error',
-      });
-      return;
+    const { grantee, granter, authorization, expiration } = permission;
+
+    const delegateAmount = shiftDigits(amount, exponent);
+
+    if (StakeAuthorization.is(authorization)) {
+      const maxAmount = authorization?.maxTokens?.amount;
+
+      if (maxAmount && new BigNumber(delegateAmount).gt(maxAmount)) {
+        toast({
+          type: 'error',
+          title: 'Amount exceeds max tokens',
+        });
+        return;
+      }
+
+      const allowList = authorization?.allowList?.address;
+      const denyList = authorization?.denyList?.address;
+
+      if (
+        (allowList && !allowList.includes(selectedValidator.address)) ||
+        (denyList && denyList.includes(selectedValidator.address))
+      ) {
+        toast({
+          type: 'error',
+          title: 'Unauthorized Delegation',
+          description:
+            'You are not allowed to delegate to this validator from this account.',
+        });
+        return;
+      }
     }
 
     setIsDelegating(true);
 
-    // const msg = delegate({
-    //   delegatorAddress: granter,
-    //   validatorAddress: selectedValidator.address,
-    //   amount: {
-    //     amount: shiftDigits(amount, exp),
-    //     denom: coin.base,
-    //   },
-    // });
-
-    const isMaxAmountAndFeeExists =
-      maxAmountAndFee &&
-      new BigNumber(amount).isEqualTo(maxAmountAndFee.maxAmount);
-
-    const msg = MsgDelegate.toProtoMsg(
-      MsgDelegate.fromPartial({
-        delegatorAddress: granter,
-        validatorAddress: selectedValidator.address,
-        amount: {
-          amount: shiftDigits(amount, exp),
-          denom: coin.base,
-        },
-      })
-    );
-
-    const msgs = [createExecMsg({ msgs: [msg], grantee })];
-    console.log('msgs', msgs);
+    const msg = MsgDelegate.toProtoMsg({
+      delegatorAddress: granter,
+      validatorAddress: selectedValidator.address,
+      amount: {
+        amount: delegateAmount,
+        denom: coin.base,
+      },
+    });
 
-    // return;
     authzTx({
-      msgs,
+      msgs: [createExecMsg({ msgs: [msg], grantee })],
+      execExpiration: expiration,
       onSuccess: () => {
-        setMaxAmountAndFee(undefined);
         closeOuterModal && closeOuterModal();
         updateData();
         onModalClose();
@@ -156,52 +127,6 @@ export const DelegateModal = ({
         setIsDelegating(false);
       },
     });
-
-    // await tx([msg], {
-    //   fee: isMaxAmountAndFeeExists ? maxAmountAndFee.fee : null,
-    //   onSuccess: () => {
-    //     setMaxAmountAndFee(undefined);
-    //     closeOuterModal && closeOuterModal();
-    //     updateData();
-    //     onModalClose();
-    //   },
-    // });
-
-    // setIsDelegating(false);
-  };
-
-  const handleMaxClick = async () => {
-    if (!address) return;
-
-    if (Number(balance) === 0) {
-      setAmount(0);
-      return;
-    }
-
-    setIsSimulating(true);
-
-    const msg = delegate({
-      delegatorAddress: address,
-      validatorAddress: selectedValidator.address,
-      amount: {
-        amount: shiftDigits(balance, exp),
-        denom: coin.base,
-      },
-    });
-
-    try {
-      const fee = await estimateFee([msg]);
-      const feeAmount = new BigNumber(fee.amount[0].amount).shiftedBy(-exp);
-      const balanceAfterFee = new BigNumber(balance)
-        .minus(feeAmount)
-        .toNumber();
-      setMaxAmountAndFee({ fee, maxAmount: balanceAfterFee });
-      setAmount(balanceAfterFee);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setIsSimulating(false);
-    }
   };
 
   const headerExtra = (
@@ -254,10 +179,8 @@ export const DelegateModal = ({
                 return;
               }
 
-              const max = maxAmountAndFee?.maxAmount || balance;
-
-              if (new BigNumber(val).gt(max)) {
-                setAmount(Number(max));
+              if (new BigNumber(val).gt(balance)) {
+                setAmount(Number(balance));
                 forceUpdate((n) => n + 1);
                 return;
               }
@@ -325,8 +248,7 @@ export const DelegateModal = ({
               },
               {
                 label: 'Max',
-                onClick: handleMaxClick,
-                isLoading: isSimulating,
+                onClick: () => setAmount(Number(balance)),
               },
             ],
           }}
@@ -334,9 +256,7 @@ export const DelegateModal = ({
             <Button
               intent="tertiary"
               onClick={onDelegateClick}
-              disabled={
-                !isGreaterThanZero(amount) || isDelegating || isSimulating
-              }
+              disabled={!isGreaterThanZero(amount) || isDelegating}
               isLoading={isDelegating}
             >
               Delegate
diff --git a/examples/telescope-authz/components/voting/Proposal.tsx b/examples/telescope-authz/components/voting/Proposal.tsx
index 60d175599..f8df5d381 100644
--- a/examples/telescope-authz/components/voting/Proposal.tsx
+++ b/examples/telescope-authz/components/voting/Proposal.tsx
@@ -144,18 +144,17 @@ export function Proposal({
 
     setIsVoting(true);
 
-    const { grantee, granter } = permission;
+    const { grantee, granter, expiration } = permission;
 
-    const msg = MsgVote.toProtoMsg(
-      MsgVote.fromPartial({
-        voter: granter,
-        option: VoteTypes.indexOf(voteType),
-        proposalId: proposal.proposalId,
-      })
-    );
+    const msg = MsgVote.toProtoMsg({
+      voter: granter,
+      option: VoteTypes.indexOf(voteType),
+      proposalId: proposal.proposalId,
+    });
 
     authzTx({
       msgs: [createExecMsg({ msgs: [msg], grantee })],
+      execExpiration: expiration,
       onSuccess: () => {
         onVoteSuccess();
       },
diff --git a/examples/telescope-authz/components/voting/Voting.tsx b/examples/telescope-authz/components/voting/Voting.tsx
index e5ad9787d..b8775a63d 100644
--- a/examples/telescope-authz/components/voting/Voting.tsx
+++ b/examples/telescope-authz/components/voting/Voting.tsx
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { useChain } from "@cosmos-kit/react";
+import { useState } from 'react';
+import { useChain } from '@cosmos-kit/react';
 import {
   Proposal as IProposal,
   ProposalStatus,
   TallyResult,
-} from "interchain-query/cosmos/gov/v1beta1/gov";
+} from 'interchain-query/cosmos/gov/v1beta1/gov';
 import {
   BasicModal,
   Box,
@@ -12,27 +12,27 @@ import {
   Spinner,
   Text,
   useColorModeValue,
-} from "@interchain-ui/react";
-import { useModal, useVotingData } from "@/hooks";
-import { Proposal } from "@/components";
-import { formatDate } from "@/utils";
+} from '@interchain-ui/react';
+import { useModal, useVotingData } from '@/hooks';
+import { Proposal } from '@/components';
+import { formatDate } from '@/utils';
 
 function status(s: ProposalStatus) {
   switch (s) {
     case ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_PASSED:
-      return "passed";
+      return 'passed';
     case ProposalStatus.PROPOSAL_STATUS_REJECTED:
-      return "rejected";
+      return 'rejected';
     case ProposalStatus.PROPOSAL_STATUS_FAILED:
-      return "rejected";
+      return 'rejected';
     default:
-      return "pending";
+      return 'pending';
   }
 }
 
@@ -53,7 +53,9 @@ export function Voting({ chainName }: VotingProps) {
   const { address } = useChain(chainName);
   const [proposal, setProposal] = useState<IProposal>();
   const { data, isLoading, refetch } = useVotingData(chainName);
-  const { modal, open: openModal, close: closeModal, setTitle } = useModal("");
+  const { modal, open: openModal, close: closeModal, setTitle } = useModal('');
+
+  const spinnerColor = useColorModeValue('$blackAlpha800', '$whiteAlpha900');
 
   function onClickProposal(index: number) {
     const proposal = data.proposals![index];
@@ -62,79 +64,83 @@ export function Voting({ chainName }: VotingProps) {
     setTitle(`#${proposal.proposalId?.toString()} ${proposal.content?.title}`);
   }
 
-  const content = (
-    <Box mt="$12">
-      {data.proposals?.map((proposal, index) => (
-        <Box
-          my="$8"
-          key={proposal.proposalId?.toString() || index}
-          position="relative"
-          attributes={{ onClick: () => onClickProposal(index) }}
-        >
-          {data.votes[proposal.proposalId.toString()]
-            ? (
-              <Box
-                position="absolute"
-                px="$4"
-                py="$2"
-                top="$4"
-                right="$6"
-                borderRadius="$md"
-                backgroundColor="$green400"
-              >
-                <Text color="$white" fontSize="$xs" fontWeight="$bold">
-                  Voted
-                </Text>
-              </Box>
-            )
-            : null}
-          <GovernanceProposalItem
-            id={`# ${proposal.proposalId?.toString()}`}
-            key={proposal.submitTime?.getTime()}
-            title={proposal.content?.title || ""}
-            status={status(proposal.status)}
-            votes={votes(proposal.finalTallyResult!)}
-            endTime={formatDate(proposal.votingEndTime)!}
-          />
-        </Box>
-      ))}
-    </Box>
-  );
-
-  const connect = (
-    <Box mt="$8" display="flex" alignItems="center" justifyContent="center">
-      <Text fontSize="$lg">
-        Please connect to your wallet to see the proposals.
-      </Text>
-    </Box>
-  );
+  if (!address) {
+    return (
+      <Box my="$20" display="flex" alignItems="center" justifyContent="center">
+        <Text fontSize="$lg" fontWeight="$semibold" color="$textSecondary">
+          Please connect to your wallet to see the proposals.
+        </Text>
+      </Box>
+    );
+  }
 
-  const Loading = (
-    <Box
-      p="$8"
-      borderRadius="$md"
-      justifyContent="center"
-      display={isLoading ? "flex" : "none"}
-    >
-      <Spinner
-        size="$5xl"
-        color={useColorModeValue("$blackAlpha800", "$whiteAlpha900")}
-      />
-    </Box>
-  );
+  if (isLoading) {
+    return (
+      <Box my="$22" display="flex" justifyContent="center">
+        <Spinner size="$5xl" color={spinnerColor} />
+      </Box>
+    );
+  }
 
   return (
     <Box mb="$20" position="relative">
-      <Text fontWeight="600" fontSize="$2xl">Proposals</Text>
-
-      {address ? Loading : null}
+      <Text fontWeight="600" fontSize="$2xl">
+        Proposals
+      </Text>
 
-      {address ? content : connect}
+      <Box mt="$12">
+        {data.proposals && data.proposals.length > 0 ? (
+          data.proposals.map((proposal, index) => (
+            <Box
+              my="$8"
+              key={proposal.proposalId?.toString() || index}
+              position="relative"
+              attributes={{ onClick: () => onClickProposal(index) }}
+            >
+              {data.votes[proposal.proposalId.toString()] ? (
+                <Box
+                  position="absolute"
+                  px="$4"
+                  py="$2"
+                  top="$4"
+                  right="$6"
+                  borderRadius="$md"
+                  backgroundColor="$green400"
+                >
+                  <Text color="$white" fontSize="$xs" fontWeight="$bold">
+                    Voted
+                  </Text>
+                </Box>
+              ) : null}
+              <GovernanceProposalItem
+                id={`# ${proposal.proposalId?.toString()}`}
+                key={proposal.submitTime?.getTime()}
+                title={proposal.content?.title || ''}
+                status={status(proposal.status)}
+                votes={votes(proposal.finalTallyResult!)}
+                endTime={formatDate(proposal.votingEndTime)!}
+              />
+            </Box>
+          ))
+        ) : (
+          <Text
+            fontSize="$lg"
+            fontWeight="$semibold"
+            color="$textSecondary"
+            textAlign="center"
+            attributes={{ mt: '$8' }}
+          >
+            No proposals found
+          </Text>
+        )}
+      </Box>
 
       <BasicModal
         title={
           <Box maxWidth="40rem">
-            <Text fontSize="$xl" fontWeight="$bold">{modal.title}</Text>
+            <Text fontSize="$xl" fontWeight="$bold">
+              {modal.title}
+            </Text>
           </Box>
         }
         isOpen={modal.open}
diff --git a/examples/telescope-authz/components/wallet/Chain.tsx b/examples/telescope-authz/components/wallet/Chain.tsx
index 178e0133b..9397000d3 100644
--- a/examples/telescope-authz/components/wallet/Chain.tsx
+++ b/examples/telescope-authz/components/wallet/Chain.tsx
@@ -1,34 +1,130 @@
-import { Chain as TChain } from '@chain-registry/types';
-import { ChangeChainCombobox } from '@interchain-ui/react';
-import { getChainLogoFromChain } from '@/utils';
-
-export type ChainProps = {
-  name: string;
-  chains: TChain[];
-  onChainChange?: (chainName?: string) => void;
+import * as React from 'react';
+import { chains } from 'chain-registry';
+import {
+  Box,
+  Combobox,
+  Text,
+  Stack,
+  Avatar,
+  useTheme,
+} from '@interchain-ui/react';
+
+type Option = {
+  label: string;
+  value: string;
 };
 
-export function Chain({
-  name,
-  chains = [],
-  onChainChange = () => {},
-}: ChainProps) {
-  const options = chains.map((chain) => ({
-    label: chain.pretty_name,
-    value: chain.chain_name,
-    iconUrl: getChainLogoFromChain(chain),
-  }));
+export type ChainInfo = typeof chains[number];
 
-  const value = options.find((chain) => chain.value === name)!;
+export interface ChooseChainProps {
+  chainName?: string;
+  chainInfos: ChainInfo[];
+  onChange: (selectedItem: string | undefined) => void;
+}
 
+const ChainOption = (props: Option & { iconUrl: string }) => {
   return (
-    <ChangeChainCombobox
-      size="md"
-      maxHeight={360}
-      options={options}
-      valueItem={value}
-      appearance="bold"
-      onItemSelected={(option) => onChainChange(option?.value)}
-    />
+    <Stack
+      direction="horizontal"
+      space="$4"
+      attributes={{ alignItems: 'center' }}
+    >
+      <Avatar
+        name={props.label}
+        getInitials={(name) => name[0]}
+        size="xs"
+        src={props.iconUrl}
+        fallbackMode="bg"
+      />
+
+      <Text fontSize="$md" fontWeight="$normal" color="$text">
+        {props.label}
+      </Text>
+    </Stack>
   );
-}
+};
+
+export const Chain = (props: ChooseChainProps) => {
+  const { chainName, chainInfos, onChange } = props;
+  const [selectedKey, setSelectedKey] = React.useState<React.Key>();
+  const { themeClass } = useTheme();
+
+  React.useEffect(() => {
+    // Init selected key to provided chainName
+    if (chainName && chainInfos.length > 0) {
+      const initKey = chainInfos.filter(
+        (option) => option.chain_name === chainName
+      )[0].chain_name;
+
+      return setSelectedKey(initKey);
+    }
+
+    if (!chainName) setSelectedKey(undefined);
+  }, [chainInfos, chainName]);
+
+  const chainOptions = chainInfos
+    .map((chainInfo) => ({
+      iconUrl: chainInfo.logo_URIs?.png ?? '',
+      label: chainInfo.pretty_name,
+      value: chainInfo.chain_name,
+    }))
+    .filter((chainInfo) => chainInfo.label && chainInfo.value);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      className={themeClass}
+    >
+      <Combobox
+        selectedKey={selectedKey as string}
+        onSelectionChange={(item) => {
+          if (item) {
+            setSelectedKey(item);
+
+            const found =
+              chainInfos.find((options) => options.chain_name === item) ?? null;
+
+            if (found) {
+              onChange?.(found.chain_name);
+            }
+          }
+        }}
+        inputAddonStart={
+          selectedKey ? (
+            <Avatar
+              name={selectedKey as string}
+              getInitials={(name) => name[0]}
+              size="xs"
+              src={
+                chainOptions.find((i) => i.value === selectedKey)?.iconUrl ??
+                undefined
+              }
+              fallbackMode="bg"
+              attributes={{
+                paddingX: '$4',
+              }}
+            />
+          ) : null
+        }
+        styleProps={{
+          width: {
+            mobile: '100%',
+            mdMobile: '420px',
+          },
+        }}
+      >
+        {chainOptions.map((option) => (
+          <Combobox.Item key={option.value} textValue={option.label}>
+            <ChainOption
+              iconUrl={option.iconUrl ?? ''}
+              label={option.label}
+              value={option.value}
+            />
+          </Combobox.Item>
+        ))}
+      </Combobox>
+    </Box>
+  );
+};
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
index 9aa6576b0..f4bcb35df 100644
--- a/examples/telescope-authz/components/wallet/Wallet.tsx
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -77,9 +77,9 @@ export function Wallet({
       <Box mx="auto" maxWidth="28rem" attributes={{ mb: '$12' }}>
         {isMultiChain ? (
           <Chain
-            name={chain.chain_name}
-            chains={chains}
-            onChainChange={handleChainChange}
+            chainName={chain.chain_name}
+            chainInfos={chains}
+            onChange={handleChainChange}
           />
         ) : (
           <ChainCard
diff --git a/examples/telescope-authz/configs/permissions.ts b/examples/telescope-authz/configs/permissions.ts
index b214e700e..51796d13a 100644
--- a/examples/telescope-authz/configs/permissions.ts
+++ b/examples/telescope-authz/configs/permissions.ts
@@ -36,11 +36,6 @@ export const permissions: PermissionItem[] = [
   },
 ];
 
-export const isPermissionCustomizable = (permissionId: string) => {
-  const permission = permissions.find((p) => p.id === permissionId);
-  return permission?.isCustomizable ?? false;
-};
-
 export const permissionNameToRouteMap: Record<string, string> = {
   Vote: '/vote',
   Send: '/send',
diff --git a/examples/telescope-authz/hooks/useAuthzTx.ts b/examples/telescope-authz/hooks/useAuthzTx.ts
index 8acab4e9f..ea6cfb21e 100644
--- a/examples/telescope-authz/hooks/useAuthzTx.ts
+++ b/examples/telescope-authz/hooks/useAuthzTx.ts
@@ -4,11 +4,7 @@ import { isDeliverTxSuccess, StdFee } from '@cosmjs/stargate';
 import { cosmos, getSigningCosmosClient } from '@/src/codegen';
 import { MsgVote } from '@/src/codegen/cosmos/gov/v1beta1/tx';
 import { MsgWithdrawDelegatorReward } from '@/src/codegen/cosmos/distribution/v1beta1/tx';
-import {
-  MsgExec,
-  MsgGrant,
-  MsgRevoke,
-} from '@/src/codegen/cosmos/authz/v1beta1/tx';
+import { MsgGrant } from '@/src/codegen/cosmos/authz/v1beta1/tx';
 import { EncodeObject } from '@/src/codegen/types';
 import { SendAuthorization } from '@/src/codegen/cosmos/bank/v1beta1/authz';
 import {
@@ -18,7 +14,7 @@ import {
 import { GenericAuthorization } from '@/src/codegen/cosmos/authz/v1beta1/authz';
 
 import { getTokenByChainName, PrettyPermission } from '@/utils';
-import { Permission, PermissionId } from '@/configs';
+import { Permission } from '@/configs';
 import { useToast, type CustomToast } from './useToast';
 import { coin } from '@cosmjs/amino';
 import { MsgSend } from '@/src/codegen/cosmos/bank/v1beta1/tx';
@@ -27,6 +23,7 @@ import {
   MsgBeginRedelegate,
   MsgUndelegate,
 } from '@/src/codegen/cosmos/staking/v1beta1/tx';
+import dayjs from 'dayjs';
 
 const { grant, revoke, exec } =
   cosmos.authz.v1beta1.MessageComposer.fromPartial;
@@ -150,6 +147,7 @@ type AuthzTxOptions = {
   toast?: Partial<CustomToast>;
   onSuccess?: () => void;
   onComplete?: () => void;
+  execExpiration?: Date | undefined;
 };
 
 export const useAuthzTx = (chainName: string) => {
@@ -158,7 +156,23 @@ export const useAuthzTx = (chainName: string) => {
     useChain(chainName);
 
   const authzTx = async (options: AuthzTxOptions) => {
-    const { msgs, fee, onSuccess, onComplete, toast: customToast } = options;
+    const {
+      msgs,
+      fee,
+      onSuccess,
+      onComplete,
+      execExpiration,
+      toast: customToast,
+    } = options;
+
+    if (execExpiration && dayjs().isAfter(execExpiration)) {
+      toast({
+        type: 'error',
+        title: 'Permission Expired',
+      });
+      if (onComplete) onComplete();
+      return;
+    }
 
     if (!address) {
       toast({
diff --git a/examples/telescope-authz/pages/claim-rewards.tsx b/examples/telescope-authz/pages/claim-rewards.tsx
index dc876282c..bf13c0316 100644
--- a/examples/telescope-authz/pages/claim-rewards.tsx
+++ b/examples/telescope-authz/pages/claim-rewards.tsx
@@ -6,6 +6,9 @@ import {
   LoginInfoBanner,
   ClaimRewardsSection,
 } from '@/components';
+import { withServerSideRedirect } from '@/utils';
+
+export const getServerSideProps = withServerSideRedirect({ to: '/' });
 
 export default function ClaimRewards() {
   const { chainName, permission } = useAuthzContext();
diff --git a/examples/telescope-authz/pages/send.tsx b/examples/telescope-authz/pages/send.tsx
index b78cbd736..f5dec598e 100644
--- a/examples/telescope-authz/pages/send.tsx
+++ b/examples/telescope-authz/pages/send.tsx
@@ -1,7 +1,10 @@
 import { Divider } from '@interchain-ui/react';
 import { useAuthzContext } from '@/context';
+import { withServerSideRedirect } from '@/utils';
 import { Layout, Wallet, LoginInfoBanner, SendSection } from '@/components';
 
+export const getServerSideProps = withServerSideRedirect({ to: '/' });
+
 export default function Send() {
   const { chainName, permission } = useAuthzContext();
 
diff --git a/examples/telescope-authz/pages/stake.tsx b/examples/telescope-authz/pages/stake.tsx
index 1ba00ffd4..b0723969d 100644
--- a/examples/telescope-authz/pages/stake.tsx
+++ b/examples/telescope-authz/pages/stake.tsx
@@ -1,7 +1,10 @@
 import { Divider } from '@interchain-ui/react';
 import { useAuthzContext } from '@/context';
+import { withServerSideRedirect } from '@/utils';
 import { Layout, LoginInfoBanner, StakingSection, Wallet } from '@/components';
 
+export const getServerSideProps = withServerSideRedirect({ to: '/' });
+
 export default function Stake() {
   const { chainName, permission } = useAuthzContext();
 
diff --git a/examples/telescope-authz/pages/vote.tsx b/examples/telescope-authz/pages/vote.tsx
index 3682ff906..24ff75e16 100644
--- a/examples/telescope-authz/pages/vote.tsx
+++ b/examples/telescope-authz/pages/vote.tsx
@@ -1,7 +1,10 @@
 import { Divider } from '@interchain-ui/react';
 import { useAuthzContext } from '@/context';
+import { withServerSideRedirect } from '@/utils';
 import { Layout, Wallet, LoginInfoBanner, Voting } from '@/components';
 
+export const getServerSideProps = withServerSideRedirect({ to: '/' });
+
 export default function Vote() {
   const { chainName, permission } = useAuthzContext();
 
diff --git a/examples/telescope-authz/utils/authz.ts b/examples/telescope-authz/utils/authz.ts
index 21fe4b757..45eecebac 100644
--- a/examples/telescope-authz/utils/authz.ts
+++ b/examples/telescope-authz/utils/authz.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { Coin } from '@cosmjs/amino';
+import { GetServerSideProps } from 'next';
 
 import {
   GenericAuthorization,
@@ -141,3 +142,18 @@ export const getAttributePairs = (
 
   return pair;
 };
+
+interface RedirectOptions {
+  to: string;
+}
+
+export const withServerSideRedirect = (options: RedirectOptions) => {
+  const getServerSideProps: GetServerSideProps = async (context) => {
+    context.res.writeHead(301, { Location: options.to });
+    context.res.end();
+
+    return { props: {} };
+  };
+
+  return getServerSideProps;
+};
diff --git a/examples/telescope-authz/utils/chain.ts b/examples/telescope-authz/utils/chain.ts
index d67a80914..bc8173d6b 100644
--- a/examples/telescope-authz/utils/chain.ts
+++ b/examples/telescope-authz/utils/chain.ts
@@ -1,8 +1,6 @@
 import { assets } from 'chain-registry';
 import { Asset, AssetList, Chain } from '@chain-registry/types';
 
-// TODO: refactor this, create getAssetByChainName and getAssetByDenom as base functions
-
 export const getChainLogoByChainName = (chainName: string): string => {
   const asset = assets.find(({ chain_name }) => chain_name === chainName)
     ?.assets?.[0];

From 25a2d38da787b7d78a434a09aa4840b3d48f93d9 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Thu, 22 Feb 2024 16:33:25 +0800
Subject: [PATCH 16/16] fix: cleanup

---
 examples/telescope-authz/components/voting/Voting.tsx | 9 +++++++--
 examples/telescope-authz/components/wallet/Wallet.tsx | 2 +-
 examples/telescope-authz/package.json                 | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/telescope-authz/components/voting/Voting.tsx b/examples/telescope-authz/components/voting/Voting.tsx
index b8775a63d..b6115f74e 100644
--- a/examples/telescope-authz/components/voting/Voting.tsx
+++ b/examples/telescope-authz/components/voting/Voting.tsx
@@ -4,6 +4,7 @@ import {
   Proposal as IProposal,
   ProposalStatus,
   TallyResult,
+  TextProposal,
 } from 'interchain-query/cosmos/gov/v1beta1/gov';
 import {
   BasicModal,
@@ -61,7 +62,11 @@ export function Voting({ chainName }: VotingProps) {
     const proposal = data.proposals![index];
     openModal();
     setProposal(proposal);
-    setTitle(`#${proposal.proposalId?.toString()} ${proposal.content?.title}`);
+    setTitle(
+      `#${proposal.proposalId?.toString()} ${
+        (proposal.content as TextProposal)?.title
+      }`
+    );
   }
 
   if (!address) {
@@ -115,7 +120,7 @@ export function Voting({ chainName }: VotingProps) {
               <GovernanceProposalItem
                 id={`# ${proposal.proposalId?.toString()}`}
                 key={proposal.submitTime?.getTime()}
-                title={proposal.content?.title || ''}
+                title={(proposal.content as TextProposal)?.title || ''}
                 status={status(proposal.status)}
                 votes={votes(proposal.finalTallyResult!)}
                 endTime={formatDate(proposal.votingEndTime)!}
diff --git a/examples/telescope-authz/components/wallet/Wallet.tsx b/examples/telescope-authz/components/wallet/Wallet.tsx
index f4bcb35df..8052a3c71 100644
--- a/examples/telescope-authz/components/wallet/Wallet.tsx
+++ b/examples/telescope-authz/components/wallet/Wallet.tsx
@@ -5,7 +5,7 @@ import {
   Stack,
   useColorModeValue,
 } from '@interchain-ui/react';
-import { WalletStatus } from '@cosmos-kit/core';
+import { WalletStatus } from 'cosmos-kit';
 import { useChain, useManager } from '@cosmos-kit/react';
 import { chains } from 'chain-registry';
 import { User } from './User';
diff --git a/examples/telescope-authz/package.json b/examples/telescope-authz/package.json
index acab615bf..6167fe10a 100644
--- a/examples/telescope-authz/package.json
+++ b/examples/telescope-authz/package.json
@@ -63,6 +63,7 @@
     "react-calendar": "4.8.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",
+    "react-markdown": "9.0.1",
     "react-no-ssr": "1.1.0"
   },
   "devDependencies": {