feat: add support for viewing application local state (#456)

* feat: add support for viewing localstate
* chore: extend the app state integration test
* chore: pr feedback

Author: neilcampbell

src/features/app-interfaces/pages/edit-app-interface-page.test.tsx

@@ -10,6 +10,7 @@ import { EditAppInterfacePage } from './edit-app-interface-page'
 import { fireEvent, render, waitFor } from '@/tests/testing-library'
 import { useParams } from 'react-router-dom'
 import { getButton } from '@/tests/utils/get-button'
+import { NO_RESULTS_TABLE_MESSAGE } from '@/features/common/constants'
 
 describe('edit-app-interface', () => {
   it('can edit an existing app spec', async () => {
@@ -138,7 +139,7 @@ describe('edit-app-interface', () => {
         const confirmButton = await getButton(component, 'Confirm')
         await user.click(confirmButton)
 
-        expect(await component.findByText('No results.')).toBeInTheDocument()
+        expect(await component.findByText(NO_RESULTS_TABLE_MESSAGE)).toBeInTheDocument()
       }
     )
   })

src/features/applications/components/application-details.tsx

@@ -21,10 +21,13 @@ import {
   applicationNameLabel,
   applicationBoxesTabId,
   applicationGlobalStateTabId,
+  applicationLocalStateTabId,
   applicationGlobalStateLabel,
+  applicationLocalStateLabel,
   applicationAbiMethodDefinitionsLabel,
 } from './labels'
-import { ApplicationGlobalStateTable } from './application-global-state-table'
+import { ApplicationStateTable } from './application-state-table'
+import { ApplicationLocalState } from './application-local-state'
 import { ApplicationBoxes } from './application-boxes'
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { ApplicationLiveTransactions } from './application-live-transactions'
@@ -157,12 +160,18 @@ export function ApplicationDetails({ application }: Props) {
               <TabsTrigger className="w-fit px-4" value={applicationGlobalStateTabId}>
                 {applicationGlobalStateLabel}
               </TabsTrigger>
+              <TabsTrigger className="w-fit px-4" value={applicationLocalStateTabId}>
+                {applicationLocalStateLabel}
+              </TabsTrigger>
               <TabsTrigger className="w-fit px-4" value={applicationBoxesTabId}>
                 {applicationBoxesLabel}
               </TabsTrigger>
             </TabsList>
             <OverflowAutoTabsContent value={applicationGlobalStateTabId}>
-              <ApplicationGlobalStateTable application={application} />
+              <ApplicationStateTable data={application.globalState ?? []} />
+            </OverflowAutoTabsContent>
+            <OverflowAutoTabsContent value={applicationLocalStateTabId}>
+              <ApplicationLocalState application={application} />
             </OverflowAutoTabsContent>
             <OverflowAutoTabsContent value={applicationBoxesTabId}>
               <ApplicationBoxes application={application} />

src/features/applications/components/application-local-state.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react'
+import { ApplicationStateTable } from './application-state-table'
+import { useApplicationLocalStateSearch } from '../data/application-local-state'
+import { Application } from '../models'
+import { XIcon } from 'lucide-react'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { Button } from '@/features/common/components/button'
+import { enterAddressToViewLocalStateMessage } from './labels'
+
+type Props = {
+  application: Application
+}
+
+export function ApplicationLocalState({ application }: Props) {
+  const [address, setAddress, loadableResults] = useApplicationLocalStateSearch(application.id)
+
+  const handleInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setAddress(e.target.value.trim())
+    },
+    [setAddress]
+  )
+
+  const handleClear = useCallback(() => address && setAddress(''), [setAddress, address])
+
+  const data = address
+    ? loadableResults
+    : ({ state: 'hasError', error: new Error(enterAddressToViewLocalStateMessage) } satisfies typeof loadableResults)
+
+  return (
+    <div className="space-y-4 overflow-hidden">
+      <div className="max-w-[35rem] rounded-md border border-input bg-popover text-popover-foreground">
+        <div className="flex items-center px-3">
+          <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
+          <input
+            placeholder="Search by Address or NFD"
+            type="text"
+            aria-label="local-state-address"
+            id="local-state-address"
+            value={address}
+            onChange={handleInput}
+            className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          <Button
+            onClick={handleClear}
+            variant="no-style"
+            size="icon"
+            aria-label="Clear local state address search"
+            className="size-4 text-muted-foreground"
+          >
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <ApplicationStateTable data={data} />
+    </div>
+  )
+}