feat: Refactor web3 interactions to use useInkathon hooks library

.npmrc

@@ -1,4 +1,8 @@
-strict-peer-dependencies = false
+init-author-name=Scio Labs
+init-author-email=hello@scio.xyz
+init-author-url=https://scio.xyz/
+init-license=GPL-3.0
+
 auto-install-peers = true
 enable-pre-post-scripts = true
 

README.md

@@ -43,7 +43,7 @@ This repository is still work-in-progress and there are probably bugs. See the [
 - Package-Manager: `pnpm`
 - Smart Contract Development: `ink!`, `cargo`
 - Frontend: `next`
-  - Contract Interactions: `polkadot-js`
+  - Contract Interactions: `polkadot-js`, [`useInkathon` React Hooks](https://github.com/scio-labs/use-inkathon)
   - Styling: `chakra`, `tailwindcss`, `twin.macro`, `emotion`
 - Misc:
   - Linting & Formatting: `eslint`, `prettier`, `husky`, `lint-staged`
@@ -178,7 +178,7 @@ Setting up a deployment via Vercel is pretty straightforward as build settings a
 | `NEXT_PUBLIC_DEFAULT_CHAIN`   | `alephzero-testnet`            |
 | `NEXT_PUBLIC_DEFAULT_CHAIN`   | `["alephzero-testnet"]`        |
 
-You can find more documentation on those environment variables in [`packages/frontend/.env.local.example`](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/.env.local.example) and all available blockchain network identifiers in [`packages/frontend/src/deployments/chains.ts`](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/src/deployments/chains.ts).
+You can find more documentation on those environment variables in [`packages/frontend/.env.local.example`](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/.env.local.example) and all available blockchain network identifiers in the [`useInkathon` repository](https://github.com/scio-labs/use-inkathon/blob/45db38e/src/chains.ts).
 
 ## FAQs & Troubleshooting
 

packages/frontend/.env.local.example

@@ -1,6 +1,6 @@
 # IMPORTANT: To set-up your project:
 #   → 1. Duplicate this file and rename it to `.env.local`
-#   → 2. Define your preferred networks (also see `src/shared/chains.ts`)
+#   → 2. Define your preferred networks (also see https://github.com/scio-labs/use-inkathon/blob/45db38e/src/chains.ts)
 #   → 3. Make sure to also define those environment variables on your deployment
 #        (i.e. see the *Deployment* section in the root `README.md`) 
 
@@ -16,7 +16,7 @@ NEXT_PUBLIC_URL=http://localhost:3000
 
 # The default network identifer & all the supported ones
 # IMPORTANT: Make sure to add the following for all supported chains:
-#    → 1. Configurations in `src/deployments/chains.ts` 
+#    → 1. Configurations in `src/deployments/chains.ts` (if not pre-defined by `use-inkathon`)
 #    → 2. Deployed Contracts `src/deployments/deployments.ts` 
 #    → 3. ABIs for all contracts in `/packages/contracts/{contract}/deployments/metadata.json` (auto-generated on build)
 #    → 4. Addresses for all contracts in `/packages/contracts/{contract}/deployments/{chain}.json` (has to be saved manually)

packages/frontend/next.config.js

@@ -5,9 +5,7 @@
 /**
  * @type {import('next').NextConfig}
  **/
-let nextConfig = {
-  transpilePackages: ['@inkathon/contracts'],
-}
+let nextConfig = {}
 
 const withTwin = require('./withTwin.js')
 nextConfig = withTwin(nextConfig)

packages/frontend/package.json

@@ -28,13 +28,9 @@
     "@polkadot/api-contract": "^9.11.1",
     "@polkadot/extension-dapp": "^0.44.8",
     "@polkadot/extension-inject": "^0.44.8",
-    "@polkadot/keyring": "^10.2.3",
-    "@polkadot/networks": "^10.2.3",
     "@polkadot/types": "^9.11.1",
-    "@polkadot/ui-keyring": "^2.9.15",
-    "@polkadot/ui-settings": "^2.9.15",
     "@polkadot/util": "^10.2.3",
-    "@polkadot/util-crypto": "^10.2.3",
+    "@scio-labs/use-inkathon": "0.0.1-alpha.9",
     "next": "^13.1.1",
     "next-seo": "^5.15.0",
     "nprogress": "^0.2.0",
@@ -52,13 +48,12 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@emotion/babel-plugin": "^11.10.5",
-    "@polkadot/ts": "^0.4.22",
-    "@polkadot/types-support": "^9.11.1",
     "@testing-library/react": "^13.4.0",
     "@types/downloadjs": "^1.4.3",
     "@types/node": "^16.18.11",
     "@types/nprogress": "^0.2.0",
     "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.48.1",
     "babel-loader": "^9.1.2",
@@ -71,6 +66,7 @@
     "prettier-plugin-twin.macro": "^1.0.11",
     "tailwindcss": "^3.2.4",
     "twin.macro": "^3.1.0",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0"
   }
 }

packages/frontend/src/components/web3/ChainInfo.tsx

@@ -1,12 +1,12 @@
 import { Card, Spinner, Wrap } from '@chakra-ui/react'
+import { useInkathon } from '@scio-labs/use-inkathon'
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
 import { HiOutlineExternalLink } from 'react-icons/hi'
 import 'twin.macro'
-import { usePolkadotProviderContext } from './PolkadotProvider'
 
 export const ChainInfo: FC = () => {
-  const { api, activeChain } = usePolkadotProviderContext()
+  const { api, activeChain } = useInkathon()
   const [chainInfo, setChainInfo] = useState<{ [_: string]: any }>()
 
   // Fetch Chain Info

packages/frontend/src/components/web3/ConnectButton.tsx

@@ -10,51 +10,27 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { supportedChains } from '@deployments/chains'
-import { formatBalance } from '@polkadot/util'
+import { useBalance, useInkathon } from '@scio-labs/use-inkathon'
+import { env } from '@shared/environment'
 import { truncateHash } from '@shared/truncateHash'
-import { FC, useEffect, useState } from 'react'
+import { FC } from 'react'
 import { AiOutlineCheckCircle, AiOutlineDisconnect } from 'react-icons/ai'
 import { FiChevronDown } from 'react-icons/fi'
 import 'twin.macro'
-import { usePolkadotProviderContext } from './PolkadotProvider'
 
 export interface ConnectButtonProps {}
 export const ConnectButton: FC<ConnectButtonProps> = () => {
   const {
     activeChain,
     setActiveChain,
-    api,
     connect,
     disconnect,
     isLoading,
     account,
     accounts,
     setAccount,
-  } = usePolkadotProviderContext()
-
-  // Fetch & update Account Balance
-  const [balanceFormatted, setBalanceFormatted] = useState<string>()
-  const fetchBalance = async () => {
-    if (!api || !account?.address) {
-      setBalanceFormatted(undefined)
-      return
-    }
-
-    const properties = ((await api.rpc.system.properties())?.toHuman() as any) || {}
-    const tokenSymbol = properties?.tokenSymbol?.[0] || 'UNIT'
-    const result: any = await api.query.system.account(account.address)
-    const fullBalance = result?.data?.reserved?.add(result?.data?.free) || 0
-    const balance = formatBalance(fullBalance, {
-      decimals: 12,
-      forceUnit: '-',
-      withUnit: false,
-    }).split('.')[0]
-    setBalanceFormatted(`${balance} ${tokenSymbol}`)
-  }
-  useEffect(() => {
-    fetchBalance()
-  }, [api, account])
+  } = useInkathon()
+  const { tokenSymbol, balance, balanceFormatted } = useBalance(account?.address)
 
   // Connect Button
   if (!account)
@@ -114,7 +90,7 @@ export const ConnectButton: FC<ConnectButtonProps> = () => {
 
           {/* Supported Chains */}
           <MenuDivider />
-          {(supportedChains || []).map((chain) => (
+          {(env.supportedChains || []).map((chain) => (
             <MenuItem
               key={chain.network}
               isDisabled={chain.network === activeChain?.network}

packages/frontend/src/components/web3/GreeterContractInteractions.tsx

@@ -1,14 +1,14 @@
 import { Button, Card, FormControl, FormLabel, Input, Stack, Wrap } from '@chakra-ui/react'
-import { ContractKeys, useDeployment } from '@deployments/deployments'
+import { ContractIds } from '@deployments/deployments'
+import { useInkathon, useRegisteredContract } from '@scio-labs/use-inkathon'
 import { FC, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 import 'twin.macro'
-import { usePolkadotProviderContext } from './PolkadotProvider'
 
 export const GreeterContractInteractions: FC = () => {
-  const { account, signer } = usePolkadotProviderContext()
-  const { contract } = useDeployment(ContractKeys.greeter)
+  const { account, signer } = useInkathon()
+  const { contract } = useRegisteredContract(ContractIds.greeter)
   const [greeterMessage, setGreeterMessage] = useState<string>()
   const [fetchIsLoading, setFetchIsLoading] = useState<boolean>()
   const [updateIsLoading, setUpdateIsLoading] = useState<boolean>()