Em primeiro lugar, para interagir com o ecossistema da Cosmos, você precisa de uma carteira. Você pode encontrar possíveis carteiras disponíveis aqui. A carteira Keplr é a carteira mais utilizada e sua integração de API é fácil de usar e bem tipada.
Instale a extensão de carteira Keplr em seu navegador e crie uma conta, caso ainda não tenha se registrado.
Vamos inicializar um site usando o modelo inicial do usuário Strangelove que já possui typescript, eslint, prettier e chakra UI.
git clone https://github.com/strangelove-ventures/strangestarter.git cosmos-frontend
Instale os pacotes usando pnpm
cd ./cosmos-frontend
pnpm install
pnpm dev
Ok, agora, depois de inicializarmos nosso repositório, vamos criar uma interface do usuário simples para conectar a uma carteira e a um painel.
// website/pages/index.tsx
import { Box, Button, Center, HStack, Stack, Tag, TagLabel, TagLeftIcon, Text } from "@chakra-ui/react";
export default function HomePage() {
return (
<Center minH="100vh">
<Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
<HStack>
<Tag>
<TagLeftIcon as={Box} bgColor="red.500" boxSize={3} rounded="full" />
<TagLabel>Desconectado</TagLabel>
</Tag>
</HStack>
<Text>
ID da cadeia ativa: <b>Cadeia</b>
</Text>
<Text>
Nome: <b>Kiki</b>
</Text>
<Text noOfLines={1} wordBreak="break-all">
Endereço: <b>...</b>
</Text>
<HStack align="end" pt={4}>
<Button>Conecte a Carteira</Button>
</HStack>
</Stack>
</Center>
);
}
Você terá algo parecido com isso:
Para usar a API do Keplr, você pode consultar a documentação da API. Precisamos gerenciar os estados, como se o usuário já estiver conectado, criar offlineSigner e outros estados complexos.
Felizmente, Strangelove criou um pacote chamado graz, que abstrai a complexidade da API do Keplr e a envolve em ganchos do React. No site da documentação, temos recursos como:
🪝 Mais de 20 ganchos para interface com carteiras, clientes, assinantes, etc. (conectar, visualizar saldos, enviar tokens, etc.)
💳 Vários suportes de carteira (Carteiras Keplr & Leap)
⚙️ Gerar ChainInfo
da rede principal e da rede de testes
📚 Cache integrado, desduplicação de solicitação e todas as coisas boas de @tanstack/react-query e zustand
🔄 Atualização automática na carteira e mudança de rede
👏 Tipagem completa e com capacidade de remoção de código não utilizado (tree-shakeable)
Então vamos instalar o graz
em nosso projeto
pnpm website install graz
Envolva nosso aplicativo com GrazProvider
e defina a cadeia-padrão como cosmoshub ou o nome que você quiser
// website/pages/_app.tsx
import { ChakraProvider } from "@chakra-ui/react";
import type { AppProps } from "next/app";
import { theme } from "styles/theme";
import { Layout } from "ui/layout";
+ import { GrazProvider, mainnetChains } from "graz";
export default function CustomApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider resetCSS theme={theme}>
+ <GrazProvider
+ grazOptions={{
+ defaultChain: mainnetChains.cosmoshub,
+ }}
+ >
<Layout>
<Component {...pageProps} />
</Layout>
+ </GrazProvider>
</ChakraProvider>
);
}
Conectar e desconectar
O graz
fornece um gancho de mutação que podemos usar para conectar e desconectar, para que você não precise manter a lógica dessas funções. Basta usar useConnect()
e useDisconnect()
para ter a funcionalidade de conexão.
Para verificar se o usuário já está conectado ou não, o graz
possui um gancho chamado useAccount()
. Um dos objetos de retorno é isConnected
.
// website/pages/index.tsx
import { Box, Button, Center, HStack, Stack, Tag, TagLabel, TagLeftIcon, Text } from "@chakra-ui/react";
import { useAccount, useConnect, useDisconnect } from "graz";
export default function HomePage() {
const { isConnected } = useAccount();
const { connect } = useConnect();
const { disconnect } = useDisconnect();
return (
<Center minH="100vh">
<Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
<HStack>
<Tag>
<TagLeftIcon as={Box} bgColor={isConnected ? "green.500" : "red.500"} boxSize={3} rounded="full" />
<TagLabel>{isConnected ? "Connected" : "Disconnected"}</TagLabel>
</Tag>
</HStack>
<Text>
ID da cadeia ativa: <b>Cadeia</b>
</Text>
<Text>
Nome: <b>Kiki</b>
</Text>
<Text noOfLines={1} wordBreak="break-all">
Endereço: <b>...</b>
</Text>
<HStack align="end" pt={4}>
<Button onClick={() => (isConnected ? disconnect() : connect())}>
{isConnected ? "Disconnect" : "Connect Wallet"}
</Button>
</HStack>
</Stack>
</Center>
);
}
Mostrar informações de conexão
Depois de termos a funcionalidade de conexão, devemos exibir as informações de conexão. Podemos obter as informações da conta conectada de useAccount()
e a corrente ativa atual de useActiveChain()
.
// website/pages/index.tsx
import { Box, Button, Center, HStack, Stack, Tag, TagLabel, TagLeftIcon, Text } from "@chakra-ui/react";
import { useAccount, useActiveChain, useConnect, useDisconnect } from "graz";
export default function HomePage() {
const { isConnected, data: account } = useAccount();
const { connect } = useConnect();
const { disconnect } = useDisconnect();
const activeChain = useActiveChain();
return (
<Center minH="100vh">
<Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
<HStack>
<Tag>
<TagLeftIcon as={Box} bgColor={isConnected ? "green.500" : "red.500"} boxSize={3} rounded="full" />
<TagLabel>{isConnected ? "Connected" : "Disconnected"}</TagLabel>
</Tag>
</HStack>
<Text>
ID da cadeia ativa: <b>{activeChain?.chainId}</b>
</Text>
<Text>
Nome: <b>{account?.name}</b>
</Text>
<Text noOfLines={1} wordBreak="break-all">
Endereço: <b>{account?.bech32Address}</b>
</Text>
<HStack align="end" pt={4}>
<Button onClick={() => (isConnected ? disconnect() : connect())}>
{isConnected ? "Disconnect" : "Connect Wallet"}
</Button>
</HStack>
</Stack>
</Center>
);
}
Parabéns, agora seu app está conectado ao ecossistema da Cosmos.
https://www.loom.com/share/f6206d7202e24c42b29740039793fcd8?source=embed_watch_on_loom_cta
Quando você se conecta
com o useConnect()
do graz, ele gera automaticamente offlineSigners
, Clients
, SigningClients
. Você pode obter os detalhes de useOfflineSigners()
, useClients()
e useSigningClients()
se quiser interagir com essas coisas.
O graz tem muitos ganchos úteis, como useBalances()
para visualizar saldos, useSendTokens()
para enviar tokens, useBalanceStaked()
para ver quantos tokens estão em stake e muito mais! Você pode ver tudo isso na documentação https://graz.strange.love.
Código fonte: https://github.com/codingki/cosmos-frontend
Prévia: https://cosmos-frontend-graz.vercel.app/
Artigo original publicado por Nur Fikri. Traduzido por Paulinho Giovannini.
Top comments (0)