Posted on Dec 24, 2022

Como Conectar seu Frontend à Blockchain Cosmos

#cosmos #blockchain #frontend #typescript

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.