diff --git a/.changeset/silly-bobcats-wink.md b/.changeset/silly-bobcats-wink.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/silly-bobcats-wink.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/rwa-demo/src/__generated__/sdk.ts b/packages/apps/rwa-demo/src/__generated__/sdk.ts index 40d3b466a2..a446c7d8d4 100644 --- a/packages/apps/rwa-demo/src/__generated__/sdk.ts +++ b/packages/apps/rwa-demo/src/__generated__/sdk.ts @@ -194,7 +194,6 @@ export type FungibleAccountTransfersConnection = { __typename?: 'FungibleAccountTransfersConnection'; edges: Array; pageInfo: PageInfo; - totalCount: Scalars['Int']['output']; }; export type FungibleAccountTransfersConnectionEdge = { @@ -253,7 +252,6 @@ export type FungibleChainAccountTransfersConnection = { __typename?: 'FungibleChainAccountTransfersConnection'; edges: Array; pageInfo: PageInfo; - totalCount: Scalars['Int']['output']; }; export type FungibleChainAccountTransfersConnectionEdge = { @@ -276,6 +274,8 @@ export type GraphConfiguration = { __typename?: 'GraphConfiguration'; /** The lowest block-height that is indexed in this endpoint. */ minimumBlockHeight?: Maybe; + /** The version of the @kadena/graph package. */ + version: Scalars['String']['output']; }; export type Guard = IGuard & { @@ -919,7 +919,6 @@ export type TransactionResultTransfersConnection = { __typename?: 'TransactionResultTransfersConnection'; edges: Array>; pageInfo: PageInfo; - totalCount: Scalars['Int']['output']; }; export type TransactionResultTransfersConnectionEdge = { @@ -973,6 +972,13 @@ export type EventSubscriptionSubscription = { __typename?: 'Subscription', event export type CoreEventsFieldsFragment = { __typename?: 'Event', chainId: any, requestKey: string, parameters?: string | null, block: { __typename?: 'Block', height: any, creationTime: any } }; +export type TransactionSubscriptionVariables = Exact<{ + requestKey: Scalars['String']['input']; +}>; + + +export type TransactionSubscription = { __typename?: 'Subscription', transaction?: { __typename?: 'Transaction', result: { __typename?: 'TransactionMempoolInfo' } | { __typename?: 'TransactionResult', badResult?: string | null, goodResult?: string | null } } | null }; + export const CoreEventsFieldsFragmentDoc = gql` fragment CoreEventsFields on Event { chainId @@ -1057,4 +1063,39 @@ export function useEventSubscriptionSubscription(baseOptions: Apollo.Subscriptio return Apollo.useSubscription(EventSubscriptionDocument, options); } export type EventSubscriptionSubscriptionHookResult = ReturnType; -export type EventSubscriptionSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file +export type EventSubscriptionSubscriptionResult = Apollo.SubscriptionResult; +export const TransactionDocument = gql` + subscription transaction($requestKey: String!) { + transaction(requestKey: $requestKey) { + result { + ... on TransactionResult { + badResult + goodResult + } + } + } +} + `; + +/** + * __useTransactionSubscription__ + * + * To run a query within a React component, call `useTransactionSubscription` and pass it any options that fit your needs. + * When your component renders, `useTransactionSubscription` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useTransactionSubscription({ + * variables: { + * requestKey: // value for 'requestKey' + * }, + * }); + */ +export function useTransactionSubscription(baseOptions: Apollo.SubscriptionHookOptions & ({ variables: TransactionSubscriptionVariables; skip?: boolean; } | { skip: boolean; }) ) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSubscription(TransactionDocument, options); + } +export type TransactionSubscriptionHookResult = ReturnType; +export type TransactionSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file diff --git a/packages/apps/rwa-demo/src/components/AssetInfo/AssetInfo.tsx b/packages/apps/rwa-demo/src/components/AssetInfo/AssetInfo.tsx index 343ef1cbe2..e9435582c6 100644 --- a/packages/apps/rwa-demo/src/components/AssetInfo/AssetInfo.tsx +++ b/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}`} /> diff --git a/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx b/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx index 908c159734..752b4f2ec5 100644 --- a/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx +++ b/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; + listener?: any; accounts: string[]; result?: ICommandResult['result']; } @@ -103,6 +104,7 @@ export const interpretErrorMessage = ( }; export const TransactionsProvider: FC = ({ children }) => { + const client = useApolloClient(); const { addNotification } = useNotifications(); const { account } = useAccount(); const [transactions, setTransactions] = useState([]); @@ -115,34 +117,38 @@ export const TransactionsProvider: FC = ({ 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; }, [], ); diff --git a/packages/apps/rwa-demo/src/services/graph/agent.graph.ts b/packages/apps/rwa-demo/src/services/graph/agent.graph.ts index 11f0bb86ce..38e906204d 100644 --- a/packages/apps/rwa-demo/src/services/graph/agent.graph.ts +++ b/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 { diff --git a/packages/apps/rwa-demo/src/services/graph/eventSubscription.graph.ts b/packages/apps/rwa-demo/src/services/graph/eventSubscription.graph.ts index c8b00b3dd8..7b35eee269 100644 --- a/packages/apps/rwa-demo/src/services/graph/eventSubscription.graph.ts +++ b/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 diff --git a/packages/apps/rwa-demo/src/services/graph/transactionSubscription.graph.ts b/packages/apps/rwa-demo/src/services/graph/transactionSubscription.graph.ts new file mode 100644 index 0000000000..5cda5d6939 --- /dev/null +++ b/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 + } + } + } + } +`;