### Install Viem for Tempo (pnpm, npm, yarn, bun)

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

Installs the Viem library, which is required for Tempo integration with Wagmi. Supports multiple package managers including pnpm, npm, yarn, and bun. Ensure your Viem version is compatible.

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

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

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

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

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

### Basic Wagmi React App Setup with Tempo

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

Sets up a basic React application using Wagmi and TanStack Query, integrating with Tempo. This configuration includes defining the Wagmi client configuration with Tempo chain and webAuthn connector.

```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>
  )
}
```

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

### Use Wagmi useSendTransactionSync with Tempo Properties

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

Demonstrates using the `useSendTransactionSync` Wagmi Hook with Tempo-specific transaction properties. This example showcases sending batched transactions with a specified fee payer and nonce key.

```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>
  )
}
```

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

### Configure Wagmi for Tempo Chain and WebAuthn Connector

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

Shows the configuration for Wagmi, specifically setting up the Tempo chain and the WebAuthn connector with local storage key management. It requires imports from 'wagmi' and 'wagmi/tempo'.

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

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

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

### Fetch Token Metadata with Tempo Hooks

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

Demonstrates how to use Wagmi's Tempo hooks to fetch metadata for a specific token. It includes error handling and loading states, requiring the 'wagmi/tempo' import.

```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>
}
```

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

### Wagmi Configuration for Tempo Chain and WebAuthn

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

Configures the Wagmi client for use with the Tempo blockchain. It sets up the Tempo testnet chain and initializes the webAuthn connector with a local storage key manager.

```ts
import { createConfig, http } from 'wagmi'
import { tempoTest } from 'wagmi/chains'
import { KeyManager, webAuthn } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  chains: [tempoTest],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempoTest.id]: http(),
  },
})
```

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