chore(rwa): listen to transactions via the graph

.changeset/silly-bobcats-wink.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/rwa-demo/src/components/AssetInfo/AssetInfo.tsx

@@ -4,6 +4,8 @@ import { MonoPause, MonoPlayArrow, MonoVpnLock } from '@kadena/kode-icons';
 import { Button, Heading, Stack } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import { CopyButton } from '../CopyButton/CopyButton';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
 
 export const AssetInfo: FC = () => {
   const { paused, asset } = useAsset();
@@ -18,17 +20,22 @@ export const AssetInfo: FC = () => {
           value={`${env.URL}/assets/create/${asset?.namespace}/${asset?.contractName}`}
         />
         <Button isCompact variant="transparent" isDisabled>
-          {paused ? (
-            <Stack gap="sm" alignItems="center">
-              <MonoPause />
-              paused
-            </Stack>
-          ) : (
-            <Stack gap="sm" alignItems="center">
-              <MonoPlayArrow />
-              active
-            </Stack>
-          )}
+          <TransactionTypeSpinner
+            type={TXTYPES.PAUSECONTRACT}
+            fallbackIcon={
+              paused ? (
+                <Stack gap="sm" alignItems="center">
+                  <MonoPause />
+                  paused
+                </Stack>
+              ) : (
+                <Stack gap="sm" alignItems="center">
+                  <MonoPlayArrow />
+                  active
+                </Stack>
+              )
+            }
+          />
         </Button>
       </Stack>
     </Stack>

packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx

@@ -2,8 +2,9 @@
 import type { IWalletAccount } from '@/components/AccountProvider/AccountType';
 import { useAccount } from '@/hooks/account';
 import { useNetwork } from '@/hooks/networks';
-import { getClient } from '@/utils/client';
+import { transactionsQuery } from '@/services/graph/transactionSubscription.graph';
 import { store } from '@/utils/store';
+import { useApolloClient } from '@apollo/client';
 import type { ICommandResult } from '@kadena/client';
 import { useNotifications } from '@kadena/kode-ui/patterns';
 import type { FC, PropsWithChildren } from 'react';
@@ -51,7 +52,7 @@ export interface ITransaction {
   uuid: string;
   requestKey: string;
   type: ITxType;
-  listener?: Promise<void | ICommandResult>;
+  listener?: any;
   accounts: string[];
   result?: ICommandResult['result'];
 }
@@ -103,6 +104,7 @@ export const interpretErrorMessage = (
 };
 
 export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
+  const client = useApolloClient();
   const { addNotification } = useNotifications();
   const { account } = useAccount();
   const [transactions, setTransactions] = useState<ITransaction[]>([]);
@@ -115,34 +117,38 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const addListener = useCallback(
     (data: ITransaction, account: IWalletAccount) => {
-      return getClient()
-        .listen({
-          requestKey: data.requestKey,
-          chainId: activeNetwork.chainId,
-          networkId: activeNetwork.networkId,
-        })
-        .then((result) => {
-          if (result.result.status === 'failure') {
+      const r = client.subscribe({
+        query: transactionsQuery,
+        variables: { requestKey: data.requestKey },
+      });
+
+      r.subscribe(
+        (nextData: any) => {
+          if (nextData?.errors?.length !== undefined) {
             addNotification({
               intent: 'negative',
               label: 'there was an error',
-              message: interpretErrorMessage(result, data),
+              message: JSON.stringify(nextData?.errors),
               url: `https://explorer.kadena.io/${activeNetwork.networkId}/transaction/${data.requestKey}`,
             });
+            return;
           }
-        })
-        .catch((e) => {
+        },
+        (errorData) => {
           addNotification({
             intent: 'negative',
             label: 'there was an error',
-            message: JSON.stringify(e),
+            message: JSON.stringify(errorData),
             url: `https://explorer.kadena.io/${activeNetwork.networkId}/transaction/${data.requestKey}`,
           });
-        })
-        .finally(() => {
+        },
+        () => {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           store.removeTransaction(data);
-        });
+        },
+      );
+
+      return true;
     },
     [],
   );

packages/apps/rwa-demo/src/services/graph/agent.graph.ts

@@ -4,7 +4,6 @@ import { CORE_EVENTS_FIELDS } from './fragments/events.graph';
 
 export const coreEvents: DocumentNode = gql`
   ${CORE_EVENTS_FIELDS}
-
   query events($qualifiedName: String!) {
     events(qualifiedEventName: $qualifiedName) {
       edges {

packages/apps/rwa-demo/src/services/graph/eventSubscription.graph.ts

@@ -1,10 +1,7 @@
 import { gql } from '@apollo/client';
 import type { DocumentNode } from 'graphql';
-import { CORE_EVENTS_FIELDS } from './fragments/events.graph';
 
 export const coreEvents: DocumentNode = gql`
-  ${CORE_EVENTS_FIELDS}
-
   subscription eventSubscription($qualifiedName: String!) {
     events(qualifiedEventName: $qualifiedName) {
       parameters

packages/apps/rwa-demo/src/services/graph/transactionSubscription.graph.ts

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+export const transactionsQuery: DocumentNode = gql`
+  subscription transaction($requestKey: String!) {
+    transaction(requestKey: $requestKey) {
+      result {
+        ... on TransactionResult {
+          badResult
+          goodResult
+        }
+      }
+    }
+  }
+`;