From 53775d357cbef55192f02213366f46dc3218f95e Mon Sep 17 00:00:00 2001 From: Denis Fadeev Date: Thu, 15 Aug 2024 18:51:13 +0300 Subject: [PATCH] Update UniversalKit docs to v2 (#434) --- .github/workflows/check-links.yaml | 9 -- .../developers/frontend/universalkit.mdx | 93 ++++++------------- 2 files changed, 30 insertions(+), 72 deletions(-) diff --git a/.github/workflows/check-links.yaml b/.github/workflows/check-links.yaml index 1b20a29b..8ff7d29a 100644 --- a/.github/workflows/check-links.yaml +++ b/.github/workflows/check-links.yaml @@ -1,7 +1,4 @@ name: Check Broken Links -env: - VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} - VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} on: push: branches: @@ -25,12 +22,6 @@ jobs: - name: Install dependencies run: yarn - - name: Install Vercel CLI - run: npm install --global vercel@latest - - - name: Pull Vercel Environment Information - run: vercel env pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} - - name: Build project run: EXPORT=true yarn build diff --git a/src/pages/developers/frontend/universalkit.mdx b/src/pages/developers/frontend/universalkit.mdx index 27b7b951..2cc14bf0 100644 --- a/src/pages/developers/frontend/universalkit.mdx +++ b/src/pages/developers/frontend/universalkit.mdx @@ -7,8 +7,8 @@ import { Alert } from "~/components/shared"; # Start Here -UniversalKit by ZetaChain provides a set of React components designed to make -building universal applications easier. +[UniversalKit](https://github.com/zeta-chain/universalkit/) provides a set of +React components designed to make building universal applications easier. The components are expected to work with [Next.js](https://github.com/vercel/next.js), @@ -37,50 +37,46 @@ UniversalKit Provider is a React context provider that initializes and provides shared state between components. To initialize the provider, wrap your application with the -`UniversalKitProvider`: +`UniversalKitProvider` and pass wagmi config and query client: ```tsx filename="src/app/providers.tsx" import { UniversalKitProvider } from "@zetachain/universalkit"; -{children}; + + {children} +; ``` If you're using the [template](https://github.com/zeta-chain/template), the provider is already initialized. -## ZetaChain Client +## ZetaChain Client Config ZetaChain Client is a client that provides access to useful methods for interacting with ZetaChain. The client is powered by the [Toolkit](https://github.com/zeta-chain/toolkit) library. -Some of the components require a ZetaChain Client to be passed as a prop. To -initialize the client, use the `useZetaChainClient` hook: +To provide custom RPC endpoints to the UniversalKit pass the `zetaChainConfig` +prop -```tsx filename="src/app/page.tsx" -import { useZetaChainClient } from "@zetachain/universalkit"; - -const client = useZetaChainClient({ network: "testnet", signer }); -``` - -Instantiating a client manually allows you to configure it, for example, -specifying a different RPC endpoint: - -```ts -const client = useZetaChainClient({ - signer, +```tsx filename="src/app/providers.tsx" +const zetaChainConfig = { network: "testnet", chains: { zeta_testnet: { api: [ { - url: `https://zetachain-athens.g.allthatnode.com/archive/evm/${process.env.KEY}`, + url: "https://zetachain-athens.g.allthatnode.com/archive/evm", type: "evm", }, ], }, }, -}); +}; + + + {children} +; ``` ## Bitcoin Wallet Provider @@ -144,26 +140,19 @@ The Swap component provides the following functionality: - Transfer native gas and ERC-20 tokens on connected chains For cross-chain swaps the component depends on a universal swap contract. -Complete [the swap tutorial](/developers/tutorials/swap-any) and deploy your own contract, or use the contract address from the example below. -contract or use the contract address from the example below. +Complete [the swap tutorial](/developers/tutorials/swap-any) and deploy your own +contract, or use the contract address from the example below. contract or use +the contract address from the example below. ```tsx filename="src/app/page.tsx" "use client"; import { ConnectButton } from "@rainbow-me/rainbowkit"; -import { Swap, useEthersSigner, useZetaChainClient, ConnectBitcoin, useBitcoinWallet } from "@zetachain/universalkit"; -import { useAccount, useChainId, useWalletClient } from "wagmi"; +import { Swap, ConnectBitcoin } from "@zetachain/universalkit"; const contract = "0xb459F14260D1dc6484CE56EB0826be317171e91F"; // universal swap contract const Page = () => { - const account = useAccount(); - const chainId = useChainId(); - const { data: walletClient } = useWalletClient({ chainId }); - const signer = useEthersSigner({ walletClient }); - const client = useZetaChainClient({ network: "testnet", signer }); - const { address: bitcoinAddress } = useBitcoinWallet(); - return (
@@ -172,7 +161,7 @@ const Page = () => {
- {client && } +
@@ -193,23 +182,9 @@ to ZetaChain, with the ability to search the list and filter tokens by chain. "use client"; import { ConnectButton } from "@rainbow-me/rainbowkit"; -import { - Balances, - useEthersSigner, - useZetaChainClient, - ConnectBitcoin, - useBitcoinWallet, -} from "@zetachain/universalkit"; -import { useAccount, useChainId, useWalletClient } from "wagmi"; +import { Balances, ConnectBitcoin } from "@zetachain/universalkit"; const Page = () => { - const account = useAccount(); - const chainId = useChainId(); - const { data: walletClient } = useWalletClient({ chainId }); - const signer = useEthersSigner({ walletClient }); - const client = useZetaChainClient({ network: "testnet", signer }); - const { address: bitcoinAddress } = useBitcoinWallet(); - return (
@@ -218,7 +193,7 @@ const Page = () => {
- {client && } +
@@ -245,6 +220,7 @@ import { useAccount } from "wagmi"; const Page = () => { const account = useAccount(); + return (
@@ -275,22 +251,11 @@ claim staking rewards. "use client"; import { ConnectButton } from "@rainbow-me/rainbowkit"; -import { - StakingRewards, - useEthersSigner, - useZetaChainClient, - ConnectBitcoin, - useBitcoinWallet, -} from "@zetachain/universalkit"; -import { useAccount, useChainId, useWalletClient } from "wagmi"; +import { StakingRewards, ConnectBitcoin } from "@zetachain/universalkit"; +import { useAccount } from "wagmi"; const Page = () => { const account = useAccount(); - const chainId = useChainId(); - const { data: walletClient } = useWalletClient({ chainId }); - const signer = useEthersSigner({ walletClient }); - const client = useZetaChainClient({ network: "testnet", signer }); - const { address: bitcoinAddress } = useBitcoinWallet(); return (
@@ -299,7 +264,9 @@ const Page = () => {
-
{client && }
+
+ +
);