코스모스 블록체인에 프런트엔드를 연결하는 방법

먼저 코스모스 생태계와 교류하기 위해서는 지갑이 필요합니다. 사용 가능한 지갑을 찾을 수 있습니다here. Keplr wallet은 가장 널리 사용되는 지갑으로 그들의 API integration은 사용하기 쉽고 입력이 잘 되어 있습니다.

브라우저에 Keplr 지갑 확장 프로그램을 설치하고 아직 등록하지 않은 경우 계정을 만드십시오.

이미 typescript, eslint, prettier 및 chakra UI가 있는 템플릿strangelove's starter을 사용하여 웹 사이트를 부트스트랩해 보겠습니다.

git clone https://github.com/strangelove-ventures/strangestarter.git cosmos-frontend

pnpm를 사용하여 패키지 설치

cd ./cosmos-frontend
pnpm install
pnpm dev

자 이제 리포지토리를 부트스트랩한 후 지갑과 대시보드에 연결하기 위한 간단한 UI를 만들어 보겠습니다.

// 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>Disconnected</TagLabel>
          </Tag>
        </HStack>
        <Text>
          Active chain id: <b>Chain</b>
        </Text>
        <Text>
          Name: <b>Kiki</b>
        </Text>
        <Text noOfLines={1} wordBreak="break-all">
          Address: <b>...</b>
        </Text>
        <HStack align="end" pt={4}>
          <Button>Connect Wallet</Button>
        </HStack>
      </Stack>
    </Center>
  );
}

당신은 다음과 같은 것을 갖게 될 것입니다 :



Keplr의 API를 사용하려면 해당 APIAPI documentation를 참조할 수 있습니다. 사용자가 이미 연결된 경우와 같이 상태를 관리해야 합니다. offlineSigner 및 기타 복잡한 상태를 생성합니다.

다행히 Strangelove는 Keplr API의 복잡성을 추상화하고 이를 React 후크로 래핑하는 패키지graz를 만들었습니다. documentation website에는 다음과 같은 기능이 있습니다.

🪝 지갑, 클라이언트, 서명자 등과 인터페이스하기 위한 20개 이상의 후크(연결, 잔액 보기, 토큰 보내기 등)

💳 다중 지갑 지원(Keplr & Leap 지갑)

⚙️ 메인넷 및 테스트넷 생성ChainInfo

📚 내장 캐싱, 요청 중복 제거 및 @tanstack/react-query 및 zustand의 모든 유용한 기능

🔄 지갑 및 네트워크 변경 시 자동 새로 고침

👏 완전 입력 및 트리 쉐이킹 가능

이제 프로젝트에 graz를 설치해 보겠습니다.

pnpm website install graz

GrazProvider로 앱을 래핑하고 기본 체인을 cosmoshub 또는 원하는 것으로 설정합니다.

// 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>
  );
}

연결 및 연결 해제

graz는 연결 및 연결 해제에 사용할 수 있는 돌연변이 후크를 제공하므로 이러한 함수의 논리를 유지할 필요가 없습니다. 간단히 useConnect() 및 useDisconnect()를 사용하여 연결 기능을 갖습니다.

사용자가 이미 연결되어 있는지 확인하기 위해 graz 라는 후크가 있습니다 useAccount() . 반환 개체 중 하나는 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>
          Active chain id: <b>Chain</b>
        </Text>
        <Text>
          Name: <b>Kiki</b>
        </Text>
        <Text noOfLines={1} wordBreak="break-all">
          Address: <b>...</b>
        </Text>
        <HStack align="end" pt={4}>
          <Button onClick={() => (isConnected ? disconnect() : connect())}>
            {isConnected ? "Disconnect" : "Connect Wallet"}
          </Button>
        </HStack>
      </Stack>
    </Center>
  );
}

연결된 정보 표시

연결 기능이 있으면 연결 정보를 표시해야 합니다. useAccount()에서 연결된 계정 정보를, 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>
          Active chain id: <b>{activeChain?.chainId}</b>
        </Text>
        <Text>
          Name: <b>{account?.name}</b>
        </Text>
        <Text noOfLines={1} wordBreak="break-all">
          Address: <b>{account?.bech32Address}</b>
        </Text>
        <HStack align="end" pt={4}>
          <Button onClick={() => (isConnected ? disconnect() : connect())}>
            {isConnected ? "Disconnect" : "Connect Wallet"}
          </Button>
        </HStack>
      </Stack>
    </Center>
  );
}

축하합니다. 이제 앱이 코스모스 생태계에 연결되었습니다.





Graz의 connect와 함께 useConnect() 하면 자동으로 offlineSigners , Clients , SigningClients 를 생성합니다. 이러한 것들과 상호 작용하려면 useOfflineSigners() , useClients() 및 useSigningClients() 에서 세부 정보를 얻을 수 있습니다.

graz에는 잔액을 보기 위한 useBalances(), 토큰을 전송하기 위한 useSendTokens(), 스테이킹된 토큰 수를 확인하기 위한 useBalanceStaked() 등 많은 유용한 후크가 있습니다! 설명서https://graz.strange.love에서 볼 수 있습니다.

소스 코드: https://github.com/codingki/cosmos-frontend
미리보기: https://cosmos-frontend-graz.vercel.app/