feat: use aelf scan and tmrwdao

.env

@@ -4,4 +4,5 @@ SOLIDITY_ENABLED=false
 GA_TAG=
 GITHUB_API_KEY=
 NEXT_PUBLIC_FAUCET_API_URL = 
-NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY = 
+NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY = 
+NEXT_PUBLIC_INDEXER_GRAPHQL_ENDPOINT =

app/deployments/page.tsx

@@ -11,11 +11,12 @@ import {
 } from "@/components/ui/table";
 import { format } from "date-fns";
 import Link from "next/link";
-import { useLogs, useProposalInfo, useTransactions } from "@/data/client";
+import { useLogs, useProposalsInfo, useTransactions } from "@/data/client";
 
 export default function Page() {
   const wallet = useWallet();
   const { data } = useTransactions(wallet?.wallet.address);
+  const contractTransactions = data?.filter(i => i.method === "DeployUserSmartContract");
 
   return (
     <div className="container px-4 py-12 md:px-6 lg:py-16">
@@ -29,9 +30,8 @@ export default function Page() {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {data ? (
-            data
-              .filter((i) => i.method === "DeployUserSmartContract")
+          {contractTransactions ? (
+            contractTransactions
               .map((i) => (
                 <TableRow key={i.id}>
                   <TableCell>{format(i.time, "PPPppp")}</TableCell>
@@ -70,8 +70,8 @@ function Proposal({ id }: { id: string }) {
 
 function ContractAddress({ id }: { id: string }) {
   const { data: logs } = useLogs(id);
-  const { data: info } = useProposalInfo(logs?.proposalId);
-  const { data, isLoading, error } = useLogs(info?.proposal.releasedTxId);
+  const { data: info } = useProposalsInfo(logs?.proposalId ? [logs.proposalId] : []);
+  const { data, isLoading, error } = useLogs(info?.getNetworkDaoProposalReleasedIndex.data?.[0]?.transactionInfo.transactionId);
 
   if (isLoading) return <span>Loading...</span>;
   if (error || !data) return <span>-</span>;
@@ -83,8 +83,8 @@ function ViewAddressOnExplorer({ address }: { address: string }) {
   return (
     <Link
       className="hover:underline"
-      href={`https://explorer-test-side02.aelf.io/address/AELF_${address}_tDVW`}
-      title="View on Explorer"
+      href={`https://testnet.aelfscan.io/tDVW/address/ELF_${address}_tDVW`}
+      title="View on aelf Explorer"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -97,12 +97,12 @@ function ViewProposalOnExplorer({ id }: { id: string }) {
   return (
     <Link
       className="hover:underline"
-      href={`https://explorer-test-side02.aelf.io/proposal/proposalsDetail/${id}`}
-      title="View on Explorer"
+      href={`https://test.tmrwdao.com/network-dao/proposal/${id}?chainId=tDVW`}
+      title="View on TMRWDAO"
       target="_blank"
       rel="noopener noreferrer"
     >
       {id}
     </Link>
   );
-}
+}

components/contract-viewer/index.tsx

@@ -6,7 +6,7 @@ import { useWallet } from "@/data/wallet";
 import { ContractView } from "aelf-smartcontract-viewer";
 import { useTheme } from "next-themes";
 
-const sideChainTestnetRpc = "https://explorer-test-side02.aelf.io/chain";
+const sideChainTestnetRpc = "https://tdvw-test-node.aelf.io";
 
 const ContractViewer = ({ name }: { name: string }) => {
   const searchParams = useSearchParams();

components/providers/apollo-wrapper.tsx

@@ -0,0 +1,42 @@
+"use client";
+// ^ this file needs the "use client" pragma
+// https://github.com/apollographql/apollo-client-nextjs/tree/main?tab=readme-ov-file#in-client-components-and-streaming-ssr
+
+import { HttpLink } from "@apollo/client";
+import {
+  ApolloNextAppProvider,
+  ApolloClient,
+  InMemoryCache,
+} from "@apollo/experimental-nextjs-app-support";
+import { env } from 'next-runtime-env';
+
+// have a function to create a client for you
+function makeClient() {
+  const httpLink = new HttpLink({
+    // this needs to be an absolute url, as relative urls cannot be used in SSR
+    uri: env("NEXT_PUBLIC_INDEXER_GRAPHQL_ENDPOINT"),
+    // you can disable result caching here if you want to
+    // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
+    fetchOptions: { cache: "no-store" },
+    // you can override the default `fetchOptions` on a per query basis
+    // via the `context` property on the options passed as a second argument
+    // to an Apollo Client data fetching hook, e.g.:
+    // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
+  });
+
+  // use the `ApolloClient` from "@apollo/experimental-nextjs-app-support"
+  return new ApolloClient({
+    // use the `InMemoryCache` from "@apollo/experimental-nextjs-app-support"
+    cache: new InMemoryCache(),
+    link: httpLink,
+  });
+}
+
+// you need to create a component to wrap your app in
+export function ApolloWrapper({ children }: React.PropsWithChildren) {
+  return (
+    <ApolloNextAppProvider makeClient={makeClient}>
+      {children}
+    </ApolloNextAppProvider>
+  );
+}

components/providers/index.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "./theme-provider";
 import { InversifyProvider } from "@/di/providers";
 import { TerminalContextProvider } from "react-terminal";
 import WebContainerProvider from "@/components/webcontainer/provider";
+import { ApolloWrapper } from "./apollo-wrapper";
 
 export default function Providers({ children }: PropsWithChildren) {
   return (
@@ -15,11 +16,13 @@ export default function Providers({ children }: PropsWithChildren) {
       disableTransitionOnChange
       storageKey="next-theme"
     >
-      <InversifyProvider>
-        <WebContainerProvider>
-          <TerminalContextProvider>{children}</TerminalContextProvider>
-        </WebContainerProvider>
-      </InversifyProvider>
+      <ApolloWrapper>
+        <InversifyProvider>
+          <WebContainerProvider>
+            <TerminalContextProvider>{children}</TerminalContextProvider>
+          </WebContainerProvider>
+        </InversifyProvider>
+      </ApolloWrapper>
     </ThemeProvider>
   );
 }

components/workspace/use-cli-commands.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useLogs, useProposalInfo, useTransactionResult } from "@/data/client";
+import { useLogs, useProposalsInfo, useTransactionResult } from "@/data/client";
 import { db } from "@/data/db";
 import { useWallet } from "@/data/wallet";
 import { Loader2 } from "lucide-react";
@@ -364,22 +364,22 @@ function CheckProposalId({ id }: { id: string }) {
 }
 
 function CheckProposalInfo({ id }: { id: string }) {
-  const [shouldPoll, setShouldPoll] = useState(true);
+  const [releasedTxId, setReleasedTxId] = useState<string>();
 
-  const { data: proposalInfo } = useProposalInfo(
-    id,
-    shouldPoll ? 1000 : undefined
+  const {data, loading} = useProposalsInfo(
+    [id],
+    releasedTxId ? 1000 : undefined
   );
-  const { status, releasedTxId } = proposalInfo?.proposal || {};
 
   useEffect(() => {
-    if (status === "expired" || status === "released") setShouldPoll(false);
-  }, [status]);
+    const releasedTxId = data?.getNetworkDaoProposalReleasedIndex.data?.[0]?.transactionInfo.transactionId;
+    setReleasedTxId(releasedTxId);
+  }, [loading]);
 
   return (
     <>
-      <p>Proposal status: {status || "pending"}</p>
-      {status === "released" ? (
+      <p>Proposal status: {releasedTxId ? 'released' : 'pending'}</p>
+      {releasedTxId ? (
         <DeployedContractDetails id={releasedTxId} />
       ) : (
         <Deploying />

data/client.ts

@@ -5,6 +5,7 @@ import { db, FileContent } from "./db";
 import { ProposalInfo } from "./proposal-info-types";
 import AElf from "aelf-sdk";
 import { Transactions } from "./transactions-types";
+import { useProposalReleaseInfo } from "./graphql";
 const { deserializeLog } = AElf.pbUtils;
 
 const aelf = new AElf(
@@ -75,17 +76,8 @@ export function useTransactionResult(id?: string, refreshInterval?: number) {
   );
 }
 
-export function useProposalInfo(id?: string, refreshInterval?: number) {
-  return useSWR(
-    id ? `get-proposal-info-${id}` : undefined,
-    async () => {
-      const res = await fetch(`/api/get-proposal-info?id=${id}`);
-      const { data }: ProposalInfo = await res.json();
-
-      return data;
-    },
-    { refreshInterval }
-  );
+export function useProposalsInfo(ids?: string[], refreshInterval?: number) {
+  return useProposalReleaseInfo(ids, refreshInterval);
 }
 
 export function useLogs(id?: string, refreshInterval?: number) {

data/graphql.ts

@@ -0,0 +1,43 @@
+import { useQuery, gql } from '@apollo/client';
+
+interface GetNetworkDaoProposalReleasedIndexResponse {
+    getNetworkDaoProposalReleasedIndex: {
+        data: Array<{
+            proposalId: string
+            orgType: string
+            transactionInfo: {
+                transactionId: string
+            }
+        }>
+    }
+}  
+
+export const useProposalReleaseInfo = (proposalIds: string[] = [], pollInterval: number = 0) => {
+
+    return useQuery<GetNetworkDaoProposalReleasedIndexResponse>(gql`
+        query GetNetworkDaoProposalReleasedIndex($input: GetNetworkDaoProposalReleasedIndexInput!) {
+            getNetworkDaoProposalReleasedIndex(input: $input) {
+                data {
+                    proposalId
+                    orgType
+                    transactionInfo {
+                        transactionId
+                    }
+                }
+            }
+        }
+    `, {
+        variables: {
+            "input": {
+              "startBlockHeight": 1,
+              "endBlockHeight": 4000000000,
+              "orgType": "PARLIAMENT",
+              "skipCount": 0,
+              "maxResultCount": 1,
+              "proposalIds": proposalIds
+            },
+        },
+        pollInterval,
+        skip: proposalIds.length === 0
+    })
+}