add zkdex integration on frontend side

contracts/deployments/zkdex/alephzero-testnet.ts

@@ -1,2 +1,2 @@
-export const address = '5ErCsaZAN7q71xXMbggu3hvKVTfaLe24ZDNABCiaqGZMZapB'
-export const blockNumber = 52007271
+export const address = '5HoA2DXwfuuJHWmbyXjosuzPyMVsiPPxAVEx6nKD5mKUcq7i'
+export const blockNumber = 52091772

contracts/scripts/deploy.ts

@@ -4,7 +4,7 @@ import { writeContractAddresses } from '@/utils/writeContractAddresses'
 import { deployContract } from '@scio-labs/use-inkathon/helpers'
 
 /**
- * Script that deploys the greeter contract and writes its address to a file.
+ * Script that deploys the zkdex contract and writes its address to a file.
  *
  * Parameters:
  *  - `DIR`: Directory to read contract build artifacts & write addresses to (optional, defaults to `./deployments`)
@@ -18,7 +18,7 @@ const main = async () => {
   const initParams = await initPolkadotJs()
   const { api, chain, account } = initParams
 
-  // Deploy greeter contract
+  // Deploy zkdex contract
   const { abi, wasm } = await getDeploymentData('zkdex')
   const zkdex = await deployContract(api, account, abi, wasm, 'default', [])
 

frontend/src/app/page.tsx

@@ -8,7 +8,7 @@ import { toast } from 'react-hot-toast'
 import { HomePageTitle } from '@/app/components/home-page-title'
 import { ChainInfo } from '@/components/web3/chain-info'
 import { ConnectButton } from '@/components/web3/connect-button'
-import { GreeterContractInteractions } from '@/components/web3/greeter-contract-interactions'
+import { ZKDexContractInteractions } from '@/components/web3/zkdex-contract-interactions'
 
 export default function HomePage() {
   // Display `useInkathon` error messages (optional)
@@ -32,7 +32,7 @@ export default function HomePage() {
           <ChainInfo />
 
           {/* Greeter Read/Write Contract Interactions */}
-          <GreeterContractInteractions />
+          <ZKDexContractInteractions />
         </div>
       </div>
     </>

frontend/src/components/web3/zkdex-contract-interactions.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { FC, useEffect, useState } from 'react'
+
+import { ContractIds } from '@/deployments/deployments'
+import {
+  contractQuery,
+  decodeOutput,
+  useInkathon,
+  useRegisteredContract,
+} from '@scio-labs/use-inkathon'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { contractTxWithToast } from '@/utils/contract-tx-with-toast'
+
+type UpdateGreetingValues = { newMessage: string }
+
+export const ZKDexContractInteractions: FC = () => {
+  const { api, activeAccount, activeSigner } = useInkathon()
+  const { contract, address: contractAddress } = useRegisteredContract(ContractIds.zkdex)
+  const [greeterMessage, setGreeterMessage] = useState<any>()
+  const [fetchIsLoading, setFetchIsLoading] = useState<boolean>()
+  const [updateIsLoading, setUpdateIsLoading] = useState<boolean>()
+  const form = useForm<UpdateGreetingValues>()
+
+  const { register, reset, handleSubmit } = form
+
+  // Fetch Greeting
+  const fetchGreeting = async () => {
+    if (!contract || !api) return
+
+    setFetchIsLoading(true)
+    try {
+      const result = await contractQuery(api, '', contract, 'get_all_orders')
+      const { output, isError, decodedOutput } = decodeOutput(result, contract, 'get_all_orders')
+      if (isError) throw new Error(decodedOutput)
+      setGreeterMessage(JSON.stringify(output))
+    } catch (e) {
+      console.error(e)
+      toast.error('Error while fetching greeting. Try again…')
+      setGreeterMessage(undefined)
+    } finally {
+      setFetchIsLoading(false)
+    }
+  }
+  useEffect(() => {
+    fetchGreeting()
+  }, [contract])
+
+  // Update Greeting
+  const updateGreeting = async ({ newMessage }: UpdateGreetingValues) => {
+    if (!activeAccount || !contract || !activeSigner || !api) {
+      toast.error('Wallet not connected. Try again…')
+      return
+    }
+
+    // Send transaction
+    setUpdateIsLoading(true)
+    try {
+      await contractTxWithToast(api, activeAccount.address, contract, 'setMessage', {}, [
+        newMessage,
+      ])
+      reset()
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setUpdateIsLoading(false)
+      fetchGreeting()
+    }
+  }
+
+  if (!api) return null
+
+  return (
+    <>
+      <div className="flex max-w-[22rem] grow flex-col gap-4">
+        <h2 className="text-center font-mono text-gray-400">ZKDex Smart Contract</h2>
+
+        <Form {...form}>
+          {/* Fetched Greeting */}
+          <Card>
+            <CardContent className="pt-6">
+              <FormItem>
+                <FormLabel className="text-base">Fetched Orders</FormLabel>
+                <FormControl>
+                  <textarea
+                    value={fetchIsLoading || !contract ? 'Loading…' : greeterMessage}
+                  ></textarea>
+                </FormControl>
+              </FormItem>
+            </CardContent>
+          </Card>
+
+          {/* Update Greeting */}
+          <Card>
+            <CardContent className="pt-6">
+              <form
+                onSubmit={handleSubmit(updateGreeting)}
+                className="flex flex-col justify-end gap-2"
+              >
+                <FormItem>
+                  <FormLabel className="text-base">Update Greeting</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input disabled={updateIsLoading} {...register('newMessage')} />
+                      <Button
+                        type="submit"
+                        className="bg-primary font-bold"
+                        disabled={fetchIsLoading || updateIsLoading}
+                        isLoading={updateIsLoading}
+                      >
+                        Submit
+                      </Button>
+                    </div>
+                  </FormControl>
+                </FormItem>
+              </form>
+            </CardContent>
+          </Card>
+        </Form>
+
+        {/* Contract Address */}
+        <p className="text-center font-mono text-xs text-gray-600">
+          {contract ? contractAddress : 'Loading…'}
+        </p>
+      </div>
+    </>
+  )
+}

frontend/src/deployments/deployments.ts

@@ -7,7 +7,8 @@ import { env } from '@/config/environment'
  * DOCS: https://github.com/scio-labs/inkathon#2-custom-contracts
  */
 export enum ContractIds {
-  Greeter = 'greeter',
+  zkdex = 'zkdex',
+  // Greeter = 'greeter',
 }
 
 export const getDeployments = async (): Promise<SubstrateDeployment[]> => {