diff --git a/examples/authz/.eslintrc.json b/examples/authz/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/examples/authz/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/authz/.gitignore b/examples/authz/.gitignore new file mode 100644 index 00000000..15e93ee8 --- /dev/null +++ b/examples/authz/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build +/main + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/authz/.yarnrc.yml b/examples/authz/.yarnrc.yml new file mode 100644 index 00000000..3186f3f0 --- /dev/null +++ b/examples/authz/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/examples/authz/CHANGELOG.md b/examples/authz/CHANGELOG.md new file mode 100644 index 00000000..197e0668 --- /dev/null +++ b/examples/authz/CHANGELOG.md @@ -0,0 +1,50 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# 1.1.0 (2024-10-08) + + +### Bug Fixes + +* deps ([b2aa70b](https://github.com/hyperweb-io/create-cosmos-app/commit/b2aa70ba9ef34fd96954c033220ff160d2c8ece7)) +* old ci job yarn4 issues ([#182](https://github.com/hyperweb-io/create-cosmos-app/issues/182)) ([2bb19f7](https://github.com/hyperweb-io/create-cosmos-app/commit/2bb19f75fcc6ffaa4bcb63ecf071009d2f9d7e76)) +* rename telescope-authz to authz ([9ba95fd](https://github.com/hyperweb-io/create-cosmos-app/commit/9ba95fd9d2e23620b1997e87f780460602507d60)) +* try locks update script ([000aa5f](https://github.com/hyperweb-io/create-cosmos-app/commit/000aa5fc73faa0182a23f50a6402e8b2351a587c)) +* upgrade deps and fix multi chain dropdown ([eecbcaa](https://github.com/hyperweb-io/create-cosmos-app/commit/eecbcaad5e7729f00f9121250c04eb40d201ed80)) + + + + + +# 1.0.0 (2024-04-06) + + +### Bug Fixes + +* rename telescope-authz to authz ([e30689d](https://github.com/hyperweb-io/create-cosmos-app/commit/e30689d1ff5f5c42a1c962aecc8b568511e0d0c2)) + + + + + +## [0.0.4](https://github.com/hyperweb-io/create-cosmos-app/compare/@cosmology/telescope-authz-example@0.0.3...@cosmology/telescope-authz-example@0.0.4) (2024-01-20) + +**Note:** Version bump only for package @cosmology/telescope-authz-example + + + + + +## [0.0.3](https://github.com/hyperweb-io/create-cosmos-app/compare/@cosmology/telescope-authz-example@0.0.2...@cosmology/telescope-authz-example@0.0.3) (2024-01-20) + +**Note:** Version bump only for package @cosmology/telescope-authz-example + + + + + +## 0.0.2 (2024-01-19) + +**Note:** Version bump only for package @cosmology/telescope-authz-example diff --git a/examples/authz/README.md b/examples/authz/README.md new file mode 100644 index 00000000..2ea966b1 --- /dev/null +++ b/examples/authz/README.md @@ -0,0 +1,88 @@ +This is a Cosmos App project bootstrapped with [`create-cosmos-app`](https://github.com/hyperweb-io/create-cosmos-app). + +## Getting Started + +First, install the packages and run the development server: + +```bash +yarn && yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +## Learn More + +### Chain Registry + +The npm package for the Official Cosmos chain registry. Get chain and token data for you application. + +* https://github.com/hyperweb-io/chain-registry + +### Cosmology Videos + +Checkout more videos for how to use various frontend tooling in the Cosmos! + +* https://cosmology.zone/learn + +### Interchain Kit + +A wallet connector for the Cosmos ⚛️ + +* https://github.com/hyperweb-io/interchain-kit + +### Telescope + +A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain. + +* https://github.com/hyperweb-io/telescope + +🎥 [Checkout the Telescope video playlist](https://www.youtube.com/watch?v=n82MsLe82mk&list=PL-lMkVv7GZwyQaK6bp6kMdOS5mzosxytC) to learn how to use `telescope`! + +### CosmWasm TS Codegen + +The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code. + +* https://github.com/CosmWasm/ts-codegen + +🎥 [Checkout the CosmWasm/ts-codegen video playlist](https://www.youtube.com/watch?v=D_A5V2PfNLA&list=PL-lMkVv7GZwz1KO3jANwr5W4MoziruXwK) to learn how to use `ts-codegen`! + + +## Learn More about Next.js + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +## Related + +Checkout these related projects: + +* [@cosmology/telescope](https://github.com/hyperweb-io/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. +* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. +* [chain-registry](https://github.com/hyperweb-io/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. +* [interchain-kit](https://github.com/hyperweb-io/interchain-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. +* [create-cosmos-app](https://github.com/hyperweb-io/create-cosmos-app) Set up a modern Cosmos app by running one command. +* [interchain-ui](https://github.com/hyperweb-io/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. +* [starship](https://github.com/hyperweb-io/starship) Unified Testing and Development for the Interchain. + +## Credits + +🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator) + + +## Disclaimer + +AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. + +No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value. diff --git a/examples/authz/components/authz/AuthzSection.tsx b/examples/authz/components/authz/AuthzSection.tsx new file mode 100644 index 00000000..3413c780 --- /dev/null +++ b/examples/authz/components/authz/AuthzSection.tsx @@ -0,0 +1,70 @@ +// TODO fix type issues +// @ts-nocheck + +import { useState } from 'react'; +import { useChain } from '@interchain-kit/react'; +import { Box, Button, Tabs, Text } from '@interchain-ui/react'; + +import { Grants } from './Grants'; +import { GrantModal } from './GrantModal'; + +export const AuthzSection = ({ chainName }: { chainName: string }) => { + const [isOpen, setIsOpen] = useState(false); + const [activeTab, setActiveTab] = useState(0); + const { address } = useChain(chainName); + + if (!address) { + return ( + + Please connect your wallet to view and create grants + + ); + } + + return ( + + + setActiveTab(tabId)} + attributes={{ width: '$min' }} + /> + + + + + + setIsOpen(false)} + chainName={chainName} + /> + + ); +}; diff --git a/examples/authz/components/authz/CustomizationField.tsx b/examples/authz/components/authz/CustomizationField.tsx new file mode 100644 index 00000000..de233e7d --- /dev/null +++ b/examples/authz/components/authz/CustomizationField.tsx @@ -0,0 +1,135 @@ +// TODO fix type issues +// @ts-nocheck + +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 { SelectValidatorsModal } from './SelectValidatorsModal'; +import { AccessList } from './GrantModal'; + +// ============================================== + +type SendCustomizationProps = { + value: number | undefined; + onChange: (value: string) => void; +}; + +const SendCustomization = ({ value, onChange }: SendCustomizationProps) => { + return ( + { + // @ts-ignore + onChange(e.target.value); + }} + formatOptions={{ + maximumFractionDigits: 6, + }} + /> + ); +}; + +// ============================================== + +type DelegateCustomizationProps = { + value: number | undefined; + onChange: (value: string) => void; + chainName: string; + accessList: AccessList; + setAccessList: Dispatch>; +}; + +const DelegateCustomization = ({ + value, + onChange, + chainName, + accessList, + setAccessList, +}: DelegateCustomizationProps) => { + const [isOpen, setIsOpen] = useState(false); + + const { data } = useValidators(chainName); + + const validatorNames = data + ? accessList.addresses.map( + (address) => data.find((v) => v.address === address)!.name + ) + : []; + + return ( + <> + { + // @ts-ignore + onChange(e.target.value); + }} + formatOptions={{ + maximumFractionDigits: 6, + }} + /> + setIsOpen(true)} + /> + 0 ? 'block' : 'none'} + mt="$2" + px="$2" + > + + + {accessList.type === 'allowList' ? 'Allow List' : 'Deny List'} + :  + + {validatorNames.join(', ')} + + + setIsOpen(false)} + /> + + ); +}; + +// ============================================== + +type CustomizationFieldProps = + | ({ + permissionType: typeof Permission['Send']; + } & SendCustomizationProps) + | ({ + permissionType: typeof Permission['Delegate']; + } & DelegateCustomizationProps); + +export const CustomizationField = ({ + permissionType, + ...rest +}: CustomizationFieldProps): JSX.Element | null => { + const fields: Partial> = { + send: + permissionType === 'send' ? ( + + ) : null, + delegate: + permissionType === 'delegate' ? ( + + ) : null, + }; + + return fields[permissionType] ?? null; +}; diff --git a/examples/authz/components/authz/GrantCard.tsx b/examples/authz/components/authz/GrantCard.tsx new file mode 100644 index 00000000..ab631477 --- /dev/null +++ b/examples/authz/components/authz/GrantCard.tsx @@ -0,0 +1,219 @@ +// TODO fix type issues +// @ts-nocheck + +import Link from 'next/link'; +import Image from 'next/image'; +import { useState } from 'react'; +import { + Box, + Button, + IconButton, + Stack, + Text, + TextField, +} from '@interchain-ui/react'; +import { useChain } from '@interchain-kit/react'; + +import { + getChainLogoByChainName, + PrettyGrant, + PrettyPermission, +} from '@/utils'; +import { useAuthzContext } from '@/context'; +import { useAuthzTx, useGrants, useSigningClient } from '@/hooks'; +import { getCoin, permissionNameToRouteMap } from '@/configs'; + +import styles from '@/styles/custom.module.css'; +import { useRevoke } from '@interchainjs/react/cosmos/authz/v1beta1/tx.rpc.react'; +import { defaultContext } from '@tanstack/react-query'; + +type GrantCardProps = { + role: 'granter' | 'grantee'; + grant: PrettyGrant; + chainName: string; + onViewDetails: () => void; +}; + +export const GrantCard = ({ + role, + grant, + chainName, + onViewDetails, +}: GrantCardProps) => { + const [isCopied, setIsCopied] = useState(false); + const [isRevoking, setIsRevoking] = useState(false); + const [revokingPermission, setRevokingPermission] = + useState(); + + const { + address: signerAddress, + chain, + getSigningClient, + } = useChain(chainName); + const { refetch } = useGrants(chainName); + const { setPermission } = useAuthzContext(); + const { createRevokeMsg } = useAuthzTx(chainName); + const { data: client } = useSigningClient(chainName); + + const { mutate: revoke } = useRevoke({ + clientResolver: client, + options: { + context: defaultContext, + }, + }); + + const { address, permissions } = grant; + + const isGranter = role === 'granter'; + const token = getCoin(chainName); + + 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); + }); + }; + + const handleRevoke = (permission: PrettyPermission) => { + setIsRevoking(true); + + const fee = { + amount: [ + { + denom: token.base, + amount: '2500', + }, + ], + gas: '1000000', + }; + + revoke( + { + signerAddress, + message: createRevokeMsg(permission), + fee: fee, + memo: 'revoking permission', + }, + { + onSuccess: () => { + refetch(); + }, + onComplete: () => { + setIsRevoking(false); + }, + } + ); + }; + + return ( + + + {token.name} + + {chain.pretty_name} + + + + + + + copy(address)} + /> + + + + + Permissions + + + + {permissions.map((permission) => + isGranter ? ( + + ) : permissionNameToRouteMap[permission.name] ? ( + + + + ) : ( + + ) + )} + + + + + ); +}; diff --git a/examples/authz/components/authz/GrantDetailsModal.tsx b/examples/authz/components/authz/GrantDetailsModal.tsx new file mode 100644 index 00000000..db1bd5f0 --- /dev/null +++ b/examples/authz/components/authz/GrantDetailsModal.tsx @@ -0,0 +1,127 @@ +// TODO fix type issues +// @ts-nocheck + +import { useState } from 'react'; +import { BasicModal, Box, Button } from '@interchain-ui/react'; + +import { useAuthzTx, useGrants, useSigningClient } from '@/hooks'; +import { PrettyGrant, PrettyPermission } from '@/utils'; +import { PermissionDetailCard } from './PermissionDetailCard'; +import { useRevoke } from '@interchainjs/react/cosmos/authz/v1beta1/tx.rpc.react'; +import { defaultContext } from '@tanstack/react-query'; +import { useChain } from '@interchain-kit/react'; + +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] = + useState(); + + const { address: signerAddress } = useChain(chainName); + const { refetch } = useGrants(chainName); + const { createRevokeMsg } = useAuthzTx(chainName); + + const { data: client } = useSigningClient(chainName); + + const { mutate: revoke } = useRevoke({ + clientResolver: client, + options: { + context: defaultContext, + }, + }); + + const handleRevoke = (permissions: PrettyPermission[]) => { + setIsRevoking(true); + + const fee = { + amount: [ + { + denom: token.base, + amount: '2500', + }, + ], + gas: '1000000', + }; + + revoke( + { + signerAddress, + message: permissions.map(createRevokeMsg), + fee: fee, + memo: 'revoking permission', + }, + { + onSuccess: () => { + refetch(); + onClose(); + }, + onError: () => { + setIsRevoking(false); + setRevokingPermission(undefined); + }, + } + ); + }; + + return ( + + + + {permissions.map((permission) => ( + { + handleRevoke([permission]); + setRevokingPermission(permission); + }} + isRevoking={ + isRevoking && permission.name === revokingPermission?.name + } + chainName={chainName} + permission={permission} + /> + ))} + + + {isGranter && ( + + )} + + + ); +}; diff --git a/examples/authz/components/authz/GrantModal.tsx b/examples/authz/components/authz/GrantModal.tsx new file mode 100644 index 00000000..80e3db2b --- /dev/null +++ b/examples/authz/components/authz/GrantModal.tsx @@ -0,0 +1,322 @@ +// TODO fix type issues +// @ts-nocheck + +import { useState } from 'react'; +import { + BasicModal, + Box, + TextField, + Button, + Popover, + PopoverTrigger, + PopoverContent, + SelectButton, + ListItem, + Stack, + FieldLabel, +} from '@interchain-ui/react'; +import { coin } from '@cosmjs/amino'; +import { useChain } from '@interchain-kit/react'; +import { IoMdCalendar } from 'react-icons/io'; +import Calendar from 'react-calendar'; +import dayjs from 'dayjs'; + +import { + getExponent, + PermissionId, + PermissionItem, + permissions, +} from '@/configs'; +import { AuthorizationType } from '@interchainjs/react/cosmos/staking/v1beta1/authz'; +import { GrantMsg, useAuthzTx, useGrants, useSigningClient } from '@/hooks'; +import { getTokenByChainName, shiftDigits } from '@/utils'; +import { CustomizationField } from './CustomizationField'; +import { AddressInput } from '@/components'; + +import styles from '@/styles/custom.module.css'; +import { useGrant } from '@interchainjs/react/cosmos/authz/v1beta1/tx.rpc.react'; +import { defaultContext } from '@tanstack/react-query'; +import { SendAuthorization } from '@interchainjs/react/cosmos/bank/v1beta1/authz'; + +export type AccessList = { + type: 'allowList' | 'denyList'; + addresses: string[]; +}; + +type GrantModalProps = { + isOpen: boolean; + onClose: () => void; + chainName: string; +}; + +export const GrantModal = ({ isOpen, onClose, chainName }: GrantModalProps) => { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isCalendarOpen, setIsCalendarOpen] = useState(false); + + const [granteeAddress, setGranteeAddress] = useState(''); + const [addressErrorMsg, setAddressErrorMsg] = useState(''); + const [expiryDate, setExpiryDate] = useState(null); + const [selectedPermission, setSelectedPermission] = + useState(null); + + const [sendLimit, setSendLimit] = useState(undefined); + const [delegateLimit, setDelegateLimit] = useState( + undefined + ); + const [accessList, setAccessList] = useState({ + type: 'allowList', + addresses: [], + }); + + const [isGranting, setIsGranting] = useState(false); + + const { refetch } = useGrants(chainName); + const { address } = useChain(chainName); + const { createGrantMsg } = useAuthzTx(chainName); + const { data: client } = useSigningClient(chainName); + + const { mutate: grant } = useGrant({ + clientResolver: client, + options: { + context: defaultContext, + }, + }); + + const token = getTokenByChainName(chainName); + const exponent = getExponent(chainName); + const denom = token.base; + + const onModalClose = () => { + setGranteeAddress(''); + setExpiryDate(null); + setSelectedPermission(null); + setSendLimit(undefined); + setDelegateLimit(undefined); + setIsGranting(false); + setAccessList({ type: 'allowList', addresses: [] }); + onClose(); + }; + + const onGrantClick = () => { + if (!address || !granteeAddress || !expiryDate || !selectedPermission) + return; + + setIsGranting(true); + + const sendMsg: GrantMsg = { + grantType: 'send', + customize: sendLimit + ? SendAuthorization.fromPartial({ + spendLimit: [coin(shiftDigits(sendLimit, exponent), denom)], + }) + : undefined, + }; + + const delegateMsg: GrantMsg = { + grantType: 'delegate', + 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 = { + send: sendMsg, + delegate: delegateMsg, + vote: { grantType: 'vote' }, + 'claim-rewards': { grantType: 'claim-rewards' }, + }; + + const msg = createGrantMsg({ + grantee: granteeAddress, + granter: address, + expiration: expiryDate, + ...grantMsg[selectedPermission.id], + }); + + const fee = { + amount: [ + { + denom: token.base, + amount: '2500', + }, + ], + gas: '1000000', + }; + + grant( + { + signerAddress: address, + message: msg, + fee, + memo: 'granting permission', + }, + { + onSuccess: () => { + refetch(); + onModalClose(); + }, + onComplete: () => { + setIsGranting(false); + }, + } + ); + }; + + return ( + + + + + + + + + + + {}} + /> + + + + {permissions.map((p) => ( + { + setSelectedPermission(p); + setIsDropdownOpen(false); + }, + }} + > + {p.name} + + ))} + + + + + {selectedPermission?.id === 'send' && ( + { + if (!val) { + setSendLimit(undefined); + return; + } + setSendLimit(Number(val)); + }} + /> + )} + + {selectedPermission?.id === 'delegate' && ( + { + if (!val) { + setDelegateLimit(undefined); + return; + } + setDelegateLimit(Number(val)); + }} + /> + )} + + + + + + + + + + + + { + if (Array.isArray(val)) { + setExpiryDate(val[1]); + return; + } + setExpiryDate(val); + }} + onClickDay={() => { + setIsCalendarOpen(false); + }} + /> + + + + + + + + + + + ); +}; diff --git a/examples/authz/components/authz/Grants.tsx b/examples/authz/components/authz/Grants.tsx new file mode 100644 index 00000000..8efb08c1 --- /dev/null +++ b/examples/authz/components/authz/Grants.tsx @@ -0,0 +1,87 @@ +// TODO fix type issues +// @ts-nocheck + +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 GrantsProps = { + role: 'granter' | 'grantee'; + chainName: string; +}; + +export const Grants = ({ chainName, role }: GrantsProps) => { + const [isOpen, setIsOpen] = useState(false); + const [viewingGrant, setViewingGrant] = useState(); + const { data, isLoading, isError } = useGrants(chainName); + + const isGranter = role === 'granter'; + const grants = isGranter ? data?.granterGrants : data?.granteeGrants; + + const renderContent = () => { + if (isError) { + return ( + + There was an error fetching grants. Please try again later. + + ); + } + + if (isLoading) { + return ; + } + + if (grants && grants.length > 0) { + return ( + + {grants.map((grant) => ( + { + setIsOpen(true); + setViewingGrant(grant); + }} + /> + ))} + + ); + } + + return ( + + {isGranter + ? "You haven't granted any permission yet" + : "You don't have any grants"} + + ); + }; + + return ( + + {renderContent()} + + {viewingGrant && ( + setIsOpen(false)} + /> + )} + + ); +}; diff --git a/examples/authz/components/authz/LoginInfoBanner.tsx b/examples/authz/components/authz/LoginInfoBanner.tsx new file mode 100644 index 00000000..050a10db --- /dev/null +++ b/examples/authz/components/authz/LoginInfoBanner.tsx @@ -0,0 +1,43 @@ +// TODO fix type issues +// @ts-nocheck + +import { WalletState } from '@interchain-kit/core'; +import { useChain } from '@interchain-kit/react'; +import { Box, Icon, Text } from '@interchain-ui/react'; + +type LoginInfoBannerProps = { + loginAddress: string; + chainName: string; +}; + +export const LoginInfoBanner = ({ + loginAddress, + chainName, +}: LoginInfoBannerProps) => { + const { status } = useChain(chainName); + + if (status === WalletState.Connected) return null; + + return ( + + + + You are now logged in as  + + {loginAddress} + + + + ); +}; diff --git a/examples/authz/components/authz/PermissionDetailCard.tsx b/examples/authz/components/authz/PermissionDetailCard.tsx new file mode 100644 index 00000000..822afcc2 --- /dev/null +++ b/examples/authz/components/authz/PermissionDetailCard.tsx @@ -0,0 +1,133 @@ +// TODO fix type issues +// @ts-nocheck + +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'; + onRevoke: () => void; + isRevoking: boolean; + chainName: string; + permission: PrettyGrant['permissions'][0]; +}; + +export const PermissionDetailCard = ({ + role, + onRevoke, + isRevoking, + chainName, + permission, +}: PermissionDetailCardProps) => { + 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 || []); + + return ( + + + {isGranter ? ( + + + {name} + + + + ) : permissionNameToRouteMap[name] ? ( + + setPermission(permission) }} + > + + {name} + + + + + ) : ( + + {name} + + )} + + + + {expiration && } + {attributes.map((attr) => ( + + ))} + + + ); +}; + +type PermissionAttributeProps = { + label: string; + value: string; + isLoading?: boolean; +}; + +const PermissionAttribute = ({ + label, + value, + isLoading = false, +}: PermissionAttributeProps) => { + return ( + + + {label} + + {isLoading ? ( + + ) : ( + + {value} + + )} + + ); +}; diff --git a/examples/authz/components/authz/SelectValidatorsModal.tsx b/examples/authz/components/authz/SelectValidatorsModal.tsx new file mode 100644 index 00000000..d0f6cbd0 --- /dev/null +++ b/examples/authz/components/authz/SelectValidatorsModal.tsx @@ -0,0 +1,164 @@ +// TODO fix type issues +// @ts-nocheck + +import { Dispatch, SetStateAction, useMemo, useState } from 'react'; +import { + BasicModal, + Box, + Button, + GovernanceRadio, + GovernanceRadioGroup, + GridColumn, + Spinner, + Stack, + Text, + ValidatorList, + ValidatorNameCell, +} from '@interchain-ui/react'; + +import { useValidators } from '@/hooks'; +import { ExtendedValidator as Validator } from '@/utils'; +import { AccessList } from './GrantModal'; + +type SelectValidatorsModalProps = { + isOpen: boolean; + onClose: () => void; + chainName: string; + accessList: AccessList; + setAccessList: Dispatch>; +}; + +type ListType = 'allowList' | 'denyList'; + +export const SelectValidatorsModal = ({ + isOpen, + onClose, + chainName, + accessList, + setAccessList, +}: SelectValidatorsModalProps) => { + const { data, isLoading } = useValidators(chainName); + const listType = accessList.type; + + const columns: GridColumn[] = useMemo(() => { + return [ + { + id: 'validator', + label: 'Validator', + width: '196px', + align: 'left', + render: (validator: Validator) => ( + + ), + }, + { + id: 'action', + width: '126px', + align: 'right', + render: (validator: Validator) => ( + + {accessList.addresses.includes(validator.address) ? ( + + ) : ( + <> + + + )} + + ), + }, + ]; + }, [chainName, accessList]); + + return ( + + + {isLoading ? ( + + ) : data && data.length > 0 ? ( + + + { + setAccessList((prev) => ({ + ...prev, + type: selected as ListType, + })); + }} + > + + + Allow List + + Deny List + + + + + + + ) : ( + + No Validators Found + + )} + + + ); +}; diff --git a/examples/authz/components/authz/index.ts b/examples/authz/components/authz/index.ts new file mode 100644 index 00000000..fe075840 --- /dev/null +++ b/examples/authz/components/authz/index.ts @@ -0,0 +1,2 @@ +export * from './AuthzSection'; +export * from './LoginInfoBanner'; diff --git a/examples/authz/components/claim-rewards/ClaimRewardsSection.tsx b/examples/authz/components/claim-rewards/ClaimRewardsSection.tsx new file mode 100644 index 00000000..edb287f8 --- /dev/null +++ b/examples/authz/components/claim-rewards/ClaimRewardsSection.tsx @@ -0,0 +1,49 @@ +// TODO fix type issues +// @ts-nocheck + +import { useChain } from '@interchain-kit/react'; +import { Box, Spinner, Text } from '@interchain-ui/react'; + +import { useStakingData } from '@/hooks'; +import Overview from './Overview'; +import { WalletState } from '@interchain-kit/core'; + +export const ClaimRewardsSection = ({ chainName }: { chainName: string }) => { + const { status } = useChain(chainName); + const { data, isLoading, refetch } = useStakingData(chainName); + + return ( + + {status !== WalletState.Connected ? ( + + + Please connect the wallet + + + ) : isLoading || !data ? ( + + + + ) : ( + + )} + + ); +}; diff --git a/examples/authz/components/claim-rewards/Overview.tsx b/examples/authz/components/claim-rewards/Overview.tsx new file mode 100644 index 00000000..c0cd8d14 --- /dev/null +++ b/examples/authz/components/claim-rewards/Overview.tsx @@ -0,0 +1,130 @@ +// TODO fix type issues +// @ts-nocheck + +import { useState } from 'react'; +import { + Box, + StakingAssetHeader, + StakingClaimHeader, +} from '@interchain-ui/react'; + +import { getCoin } from '@/configs'; +import { Prices, useAuthzTx, useSigningClient } from '@/hooks'; +import { + sum, + calcDollarValue, + isGreaterThanZero, + type ParsedRewards as Rewards, +} from '@/utils'; +import { MsgWithdrawDelegatorReward } from '@interchainjs/react/cosmos/distribution/v1beta1/tx'; +import { useAuthzContext } from '@/context'; +import { useExec } from '@interchainjs/react/cosmos/authz/v1beta1/tx.rpc.react'; +import { defaultContext } from '@tanstack/react-query'; + +const Overview = ({ + balance, + rewards, + staked, + updateData, + chainName, + prices, +}: { + balance: string; + rewards: Rewards; + staked: string; + updateData: () => void; + chainName: string; + prices: Prices; +}) => { + const [isClaiming, setIsClaiming] = useState(false); + + const { permission } = useAuthzContext(); + const { createExecMsg } = useAuthzTx(chainName); + + const { data: client } = useSigningClient(chainName); + + const { mutate: exec } = useExec({ + clientResolver: client, + options: { + context: defaultContext, + }, + }); + + const totalAmount = sum(balance, staked, rewards?.total ?? 0); + const coin = getCoin(chainName); + + const onClaimRewardClick = () => { + if (!permission) return; + + setIsClaiming(true); + + const { grantee, granter, expiration } = permission; + + const msgs = rewards.byValidators.map(({ validatorAddress }) => + MsgWithdrawDelegatorReward.toProtoMsg({ + delegatorAddress: granter, + validatorAddress, + }) + ); + + const fee = { + amount: [ + { + denom: token.base, + amount: '2500', + }, + ], + gas: '1000000', + }; + + exec( + { + signerAddress: grantee, + message: createExecMsg({ msgs, grantee }), + fee: fee, + memo: 'executing permission', + }, + { + onSuccess: () => { + updateData(); + }, + onError: () => { + setIsClaiming(false); + }, + } + ); + }; + + return ( + <> + + + + + + + + + ); +}; + +export default Overview; diff --git a/examples/authz/components/claim-rewards/index.ts b/examples/authz/components/claim-rewards/index.ts new file mode 100644 index 00000000..68a0b4a8 --- /dev/null +++ b/examples/authz/components/claim-rewards/index.ts @@ -0,0 +1 @@ +export * from './ClaimRewardsSection'; diff --git a/examples/authz/components/common/AddressInput.tsx b/examples/authz/components/common/AddressInput.tsx new file mode 100644 index 00000000..8499239a --- /dev/null +++ b/examples/authz/components/common/AddressInput.tsx @@ -0,0 +1,66 @@ +// TODO fix type issues +// @ts-nocheck + +import { useMemo } from 'react'; +import { useChain } from '@interchain-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.bech32Prefix)) { + errorMsg = `Invalid address: Unexpected prefix (expected: ${chain.bech32Prefix}, actual: ${res.prefix})`; + } + } catch (error) { + errorMsg = 'Invalid address'; + } finally { + onInvalidAddress && onInvalidAddress(errorMsg); + return errorMsg; + } + }, [address]); + + return ( + + onAddressChange(e.target.value)} + label={label} + placeholder={placeholder} + attributes={{ mb: errorMessage ? '$2' : '0' }} + intent={errorMessage ? 'error' : 'default'} + /> + + {errorMessage && {errorMessage}} + + ); +}; diff --git a/examples/authz/components/common/Footer.tsx b/examples/authz/components/common/Footer.tsx new file mode 100644 index 00000000..a1d352e1 --- /dev/null +++ b/examples/authz/components/common/Footer.tsx @@ -0,0 +1,169 @@ +// TODO fix type issues +// @ts-nocheck + +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 ( + + + + {name} → + + + {desc} + + + + ); +} + +function Dependency({ name, desc, link }: Project) { + return ( + + + + + + + + + {name} + + + {desc} + + + + + ); +} + +export function Footer() { + return ( + <> + + {products.map((product) => ( + + ))} + + + {dependencies.map((dependency) => ( + + ))} + + + + + + Built with + + Cosmology + + + + ); +} diff --git a/examples/authz/components/common/Header.tsx b/examples/authz/components/common/Header.tsx new file mode 100644 index 00000000..326a5c95 --- /dev/null +++ b/examples/authz/components/common/Header.tsx @@ -0,0 +1,66 @@ +// TODO fix type issues +// @ts-nocheck + +import { + Box, + Button, + Icon, + Text, + useTheme, + useColorModeValue, +} from '@interchain-ui/react'; + +const stacks = ['Cosmos Kit', 'Next.js']; + +export function Header() { + const { theme, setTheme } = useTheme(); + + const toggleColorMode = () => { + setTheme(theme === 'light' ? 'dark' : 'light'); + }; + + return ( + <> + + + + + + + Create Cosmos App + + + + Welcome to  + + + {stacks.join(' + ')} + + + + + ); +} diff --git a/examples/authz/components/common/Layout.tsx b/examples/authz/components/common/Layout.tsx new file mode 100644 index 00000000..a207f109 --- /dev/null +++ b/examples/authz/components/common/Layout.tsx @@ -0,0 +1,21 @@ +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 ( + + + Create Cosmos App + + + + {/* @ts-ignore */} +
+ {children} + {/* @ts-ignore */} +