> For the complete documentation index, see [llms.txt](https://superlouis.gitbook.io/tzombies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://superlouis.gitbook.io/tzombies/front-end/inventory/inventory-page.md).

# Inventory page

Now that we have our two dialogs, we can include them in our `./pages/inventory.tsx` page, followed by the owned token list. 

We'll fetch the token list using `inventory` from the `TzombiesContext`.

Here's the breakdown of our component: 

```tsx
import { Alert, Button, Chip, Paper, Snackbar, Typography } from "@mui/material"
import React, { useCallback, useState } from "react"
import SellOutlinedIcon from "@mui/icons-material/SellOutlined"
import SendIcon from "@mui/icons-material/Send"

import { useWalletContext } from "../components/providers/WalletProvider"
import { TokenList } from "../components/Token"
import { useTzombiesContext } from "../components/providers/TzombiesProvider"
import ListingDialog from "../components/ListingDialog"
import { useMarketProviderContext } from "../components/providers/MarketProvider"
import Link from "next/link"
import TransferDialog from "../components/TransferDialog"
```

The states: 

```tsx
const Inventory = () => {
  const { balance, getBalance } = useWalletContext()
  const { inventory, fetchInventory } = useTzombiesContext()
  const { isApproved } = useMarketProviderContext()

  const [listingFormOpen, setListingFormOpen] = useState<number>()
  const [transferFormOpen, setTransferFormOpen] = useState<number>()
  const [error, setError] = useState<string>()
  
  ...
```

Refresh button:

```tsx
const handleRefresh = useCallback(() => {
  try {
    getBalance()
    fetchInventory()
  } catch (e: any) {
    console.error(e)
  }
}, [getBalance, fetchInventory])

```

Custom actions:&#x20;

<pre class="language-tsx"><code class="lang-tsx">const Actions = useCallback(
<strong>  (id: number) => (
</strong>    &#x3C;>
      &#x3C;Button
        onClick={() => setListingFormOpen(id)}
        disabled={!isApproved}
        endIcon={&#x3C;SellOutlinedIcon />}
      >
        Sell
      &#x3C;/Button>
      &#x3C;Button onClick={() => setTransferFormOpen(id)} endIcon={&#x3C;SendIcon />}>
        Transfer
      &#x3C;/Button>
    &#x3C;/>
  ),
  [setListingFormOpen, isApproved]
)
</code></pre>

Let's add the token count as an extra chip:&#x20;

```tsx
const Extra = useCallback(
  (id: number) => (
    <>
      {" "}
      <Chip size="small" label={`x${inventory.get(id)}`} />
    </>
  ),
  [inventory]
)
```

And the page implementation:&#x20;

```tsx
return (
  <>
    <Typography variant="h4">Your inventory</Typography>
    <Button onClick={handleRefresh}>Refresh</Button>

    <Snackbar open={!!error} onClose={() => setError(undefined)}>
      <Alert severity={"error"}>Error: {error}</Alert>
    </Snackbar>

    <Paper sx={{ p: 2, my: 2 }}>
      <Typography variant="h5">Balance</Typography>
      <Typography variant="h6">{balance} ꜩ</Typography>
    </Paper>

    <ListingDialog
      id={listingFormOpen ?? 0}
      onClose={() => setListingFormOpen(undefined)}
    />

    <TransferDialog
      id={transferFormOpen ?? 0}
      onClose={() => setTransferFormOpen(undefined)}
    />

    {!isApproved && (
      <p>
        ℹ️ To sell tokens, please approve the{" "}
        <Link href="/market">marketplace</Link> as an operator.{" "}
      </p>
    )}
    <TokenList
      tokens={[...inventory.keys()].filter((id) => inventory.get(id)! > 0)}
      actions={Actions}
      extra={Extra}
    />
  </>
)
```

Export the component:&#x20;

```tsx
    ...
}

export default Inventory
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://superlouis.gitbook.io/tzombies/front-end/inventory/inventory-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.