### Install Viem and Accounts Packages

Source: https://wagmi.sh/tempo/getting-started

Install the Viem and Accounts packages with the specified versions using your preferred package manager.

```bash
pnpm add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
npm install viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
yarn add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
bun add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

--------------------------------

### React App Setup with Wagmi and TanStack Query

Source: https://wagmi.sh/tempo/getting-started

Basic React application structure using WagmiProvider and QueryClientProvider from TanStack Query to manage state and enable Wagmi hooks.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { TokenMetadata } from './tokenMetadata'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TokenMetadata />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

--------------------------------

### Get Token Metadata with Tempo Actions (Core)

Source: https://wagmi.sh/tempo/getting-started

Use `Actions.token.getMetadata` from `@wagmi/core/tempo` to fetch token metadata without React dependencies. This requires a Wagmi core configuration object.

```ts
import { Actions } from '@wagmi/core/tempo'
import { config } from './config'

const alphaUsd = '0x20c0000000000000000000000000000000000001'

const metadata = await Actions.token.getMetadata(config, {
  token: alphaUsd,
})

console.log('Token:', metadata.name, `(${metadata.symbol})`)
```

```ts
import { createConfig, http } from '@wagmi/core'
import { tempo } from '@wagmi/core/chains'
import { tempoWallet } from '@wagmi/core/tempo'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

--------------------------------

### Get Token Metadata with Tempo Actions (React)

Source: https://wagmi.sh/tempo/getting-started

Use `Actions.token.getMetadata` from `wagmi/tempo` to directly fetch token metadata. This requires a Wagmi configuration object.

```ts
import { Actions } from 'wagmi/tempo'
import { config } from './config'

const alphaUsd = '0x20c0000000000000000000000000000000000001'

const metadata = await Actions.token.getMetadata(config, {
  token: alphaUsd,
})

console.log('Token:', metadata.name, `(${metadata.symbol})`)
```

```ts
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

--------------------------------

### Wagmi Provider Configuration for Tempo

Source: https://wagmi.sh/tempo/getting-started

Sets up the Wagmi configuration with the Tempo chain and the tempoWallet connector. Ensure `multiInjectedProviderDiscovery` is set to `false` when using Tempo.

```tsx
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

--------------------------------

### Fetch Token Metadata with Tempo Hooks

Source: https://wagmi.sh/tempo/getting-started

Use `useGetMetadata` hook from `wagmi/tempo` to fetch token metadata. Ensure `@tanstack/react-query` and `wagmi` are set up with a `WagmiProvider` and `QueryClientProvider`.

```tsx
import { Hooks } from 'wagmi/tempo'

const alphaUsd = '0x20c0000000000000000000000000000000000001'

export function TokenMetadata() {
  const { data: metadata, ...metadataQuery } = Hooks.token.useGetMetadata({
    token: alphaUsd
  })

  if (metadataQuery.isError)
    return <div>Error fetching metadata: {metadataQuery.error.message}</div>
  if (metadataQuery.isLoading) return <div>Loading metadata...</div>
  return <div>{metadata.name} ({metadata.symbol})</div>
}
```

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { TokenMetadata } from './tokenMetadata'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TokenMetadata />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

```ts
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

--------------------------------

### Use Wagmi useSendTransactionSync Hook with Tempo Properties

Source: https://wagmi.sh/tempo/getting-started

Demonstrates using the `useSendTransactionSync` hook from Wagmi to send a transaction with Tempo-specific properties like `calls`, `feePayer`, and `nonceKey` for batching, fee sponsorship, and concurrent transactions.

```tsx
import { useSendTransactionSync } from 'wagmi'

export function TokenMetadata() {
  const sendTransactionSync = useSendTransactionSync()

  return (
    <button
      onClick={() =>
        sendTransactionSync.mutate({
          calls: [
            {
              data: '0xcafebabe00000000000000000000000000000001',
              to: '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef'
            },
            {
              data: '0xdeadbeef00000000000000000000000000000002',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
            {
              data: '0xfeedface00000000000000000000000000000003',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
          ],
          feePayer: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
          nonceKey: 1337n,
        })
      }
    >
      Send transaction
    </button>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.