Update UniversalKit docs to v2 (#434)

zeta-chain · Aug 15, 2024 · 53775d3 · 53775d3
1 parent 6d3cfab
commit 53775d3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 72 deletions.
diff --git 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
@@ -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";
 
-<UniversalKitProvider>{children}</UniversalKitProvider>;
+<UniversalKitProvider config={config} client={queryClient}>
+  {children}
+</UniversalKitProvider>;
 ```
 
 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",
         },
       ],
     },
   },
-});
+};
+
+<UniversalKitProvider config={config} client={queryClient} zetaChainConfig={zetaChainConfig}>
+  {children}
+</UniversalKitProvider>;
 ```
 
 ## 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 (
     <div className="m-4">
       <div className="flex justify-end gap-2 mb-10">
@@ -172,7 +161,7 @@ const Page = () => {
       </div>
       <div className="flex justify-center">
         <div className="w-[400px]">
-          {client && <Swap contract={contract} client={client} account={account} bitcoin={bitcoinAddress} />}
+          <Swap contract={contract} />
         </div>
       </div>
     </div>
@@ -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 (
     <div className="m-4">
       <div className="flex justify-end gap-2 mb-10">
@@ -218,7 +193,7 @@ const Page = () => {
       </div>
       <div className="flex justify-center">
         <div className="w-[400px]">
-          {client && <Balances client={client} account={account} bitcoin={bitcoinAddress} />}
+          <Balances />
         </div>
       </div>
     </div>
@@ -245,6 +220,7 @@ import { useAccount } from "wagmi";
 
 const Page = () => {
   const account = useAccount();
+
   return (
     <div className="m-4">
       <div className="flex justify-end gap-2 mb-10">
@@ -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 (
     <div className="m-4">
@@ -299,7 +264,9 @@ const Page = () => {
         <ConnectButton label="Connect EVM" showBalance={false} />
       </div>
       <div className="flex justify-center">
-        <div className="w-[400px]">{client && <StakingRewards client={client} account={account} />}</div>
+        <div className="w-[400px]">
+          <StakingRewards />
+        </div>
       </div>
     </div>
   );