From a53bad7514fd403978fcf060b244550196ef084e Mon Sep 17 00:00:00 2001
From: DavideSegullo <davidesegullo@gmail.com>
Date: Sat, 4 Mar 2023 20:57:10 +0100
Subject: [PATCH] feat(demo-app): :sparkles: add tx trace example

---
 apps/demo-app/src/app/app.tsx | 18 ++++++++++++---
 package.json                  |  1 +
 pnpm-lock.yaml                | 43 +++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/apps/demo-app/src/app/app.tsx b/apps/demo-app/src/app/app.tsx
index 4c45b5e..56166cd 100644
--- a/apps/demo-app/src/app/app.tsx
+++ b/apps/demo-app/src/app/app.tsx
@@ -1,17 +1,29 @@
 import styled from '@emotion/styled';
 
-import NxWelcome from './nx-welcome';
-
 import { Route, Routes, Link } from 'react-router-dom';
+import { useMachine } from '@xstate/react';
+import { txTraceMachine } from '@nabla-studio/txs-tracer-core'
+import { useEffect } from 'react';
 
 const StyledApp = styled.div`
 	// Your style here
 `;
 
 export function App() {
+	const [state, send] = useMachine(txTraceMachine, {
+		context: {
+			...txTraceMachine.context,
+			subscribeTimeout: 10_000,
+			query: "message.action='/osmosis.gamm.v1beta1.MsgSwapExactAmountIn'"
+		},
+	});
+
+	console.log(state.context.txs);
+
 	return (
 		<StyledApp>
-			<NxWelcome title="demo-app" />
+			<p>{state.value.toString()}</p>
+			<button onClick={() => send({ type: 'TRACE' })}>Trace</button>
 
 			{/* START: routes */}
 			{/* These routes and navigation have been generated for you */}
diff --git a/package.json b/package.json
index eb3f357..2b70309 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"@cosmjs/tendermint-rpc": "^0.29.5",
 		"@emotion/react": "11.10.6",
 		"@emotion/styled": "11.10.6",
+		"@xstate/react": "^3.2.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-router-dom": "6.8.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f7c5df..6281eeb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   '@vitejs/plugin-react': ^3.0.0
   '@vitest/coverage-c8': ~0.25.8
   '@vitest/ui': ^0.25.8
+  '@xstate/react': ^3.2.1
   cypress: ^12.2.0
   eslint: ~8.15.0
   eslint-config-prettier: 8.1.0
@@ -54,6 +55,7 @@ dependencies:
   '@cosmjs/tendermint-rpc': 0.29.5
   '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
   '@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
+  '@xstate/react': 3.2.1_o53l3h553defh3ruq4yellezcm
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-router-dom: 6.8.1_biqbaboplfbrettd7655fr4n2y
@@ -2928,6 +2930,26 @@ packages:
       sirv: 2.0.2
     dev: true
 
+  /@xstate/react/3.2.1_o53l3h553defh3ruq4yellezcm:
+    resolution: {integrity: sha512-L/mqYRxyBWVdIdSaXBHacfvS8NKn3sTKbPb31aRADbE9spsJ1p+tXil0GVQHPlzrmjGeozquLrxuYGiXsFNU7g==}
+    peerDependencies:
+      '@xstate/fsm': ^2.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      xstate: ^4.36.0
+    peerDependenciesMeta:
+      '@xstate/fsm':
+        optional: true
+      xstate:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.2_pmekkgnqduwlme35zpnqhenc34
+      use-sync-external-store: 1.2.0_react@18.2.0
+      xstate: 4.37.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@yarnpkg/lockfile/1.1.0:
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
     dev: true
@@ -6829,6 +6851,27 @@ packages:
       requires-port: 1.0.0
     dev: true
 
+  /use-isomorphic-layout-effect/1.1.2_pmekkgnqduwlme35zpnqhenc34:
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.28
+      react: 18.2.0
+    dev: false
+
+  /use-sync-external-store/1.2.0_react@18.2.0:
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true