# Passport Dropdown component

This component is a layer of interaction with Passport API in form of Dropdown
component. It allows to establish the session and interact with the API.

## Props

- `onSignIn` (`() => void`) - The callback to be executed on trigger click when
  the state is disconnected. It's optional since by default it triggers the
  [Rainbow Kit's wallet connection modal](https://www.rainbowkit.com/docs/modal-hooks).
  If the callback is not provided it will automatically establish the Passport
  Session. If not, you have to handle it manually using `useSignInWithWallet`
  hook. - **optional**
- `onSignOut` (`() => void`) - The callback to be executed on click of the
  **Sign out** button. It's optional since by default it disconnects the current
  wallet connector and closes the Passport session. - **optional**
- `triggerProps.signedIn` (`ButtonProps`) - Props to be passed to the trigger
  button in signed-in state.
- `triggerProps.signedOut` (`ButtonProps`) - Props to be passed to the trigger
  button in signed-out state

Besides that, component allows
[Clay's `StatefulPopover` props](https://baseweb.design/components/popover/)
excluding the `children` and `content`.

## Overview

The component has two distinguishable states - disconnected and connected. In
disconnected state the component offers the trigger to initiate the connection
flow. It can be fully customizable by providing your own one. As long as it's
compliant with Wagmi/RainbowKit it will work. Component will automatically
detect connected connector and change the state of component displaying the
avatar thumbnail instead of button.

Component has the following features:

- displays wallet address that can be copied,
- displays total balance in USD,
- displays partial balances per asset with token amounts and USD conversions,
- serves _Log out_ button which disconnects the wallet connector and closes
  Passport API session.