---
tags: v3, connect wallet, dragons
---

# v3 Connect Wallet Sync (4/25/22)

## Overview

This feature will be used in nearly all (if not all) of our user-facing apps. We're going to build this out and then eventually consider if we want this to break off into a `haus/features-ui` package that is for fully built out components with functionality.

[Figma Link to the Design and Spec Notes](https://www.figma.com/file/9lCwprCNaoAmUDmiMQpFEA/DAOhaus-v3?node-id=3120%3A16017)

## Goals

- Align on the Connect Wallet designs and scope
- Create user stories using Gherkin
- Create the component cards for any that aren't already made
- Check the status of the Button Jord was working on
- Scaffold the `features-ui` package
- Jord to build out some of the UI components
- Keating to build out functionality while building Hub
- Sam to work on the data needs
- `haus/dao-data`

### Functionality

States:
- Not connected
- Connected to unsupported network
- hub flavor = netowrk daohaus doesn't support
- dao flavor = network doesn't match the dao in context
- Connected to supported network
- Network unavailable
- If connected to a network we don't support (Hub Context)
- If connected to a network we don't support (DAO Context)
- Switch to Gnosis

### Components

[Figma Link to the Design and Spec Notes](https://www.figma.com/file/9lCwprCNaoAmUDmiMQpFEA/DAOhaus-v3?node-id=3120%3A16017)

Button

[figma](https://www.figma.com/file/R1a1bwODnzCHHHw0EJALAU/DAOhaus-v3-Pattern-Library-(In-Progress)?node-id=67%3A1122)

DropdownMenu

DropdownButton
- Woth building this now?

- User Name (in Dropdown)
- Pull from Ceramic from the set username?
- Fallback to ENS (if set)
- If no ENS, use truncated address
- Data needs:
- Address data
- User ENS
- Ceramic fetch

- User Avatar (in Dropdown)
- Fallback to Blockie if not set?
- Is there something else besides Blockie that we'd want to use?
- Check out Blockie alternatives (look to Smart Invoice)
- Where does this come from, Ceramic?
- Data needs:
- Address data (for blockie)
- Ceramic fetch

- Chain connected
-

- Address
- If on Mainnet AND ENS, show ENS
- If on Mainnet AND without ENS, show truncated address
- If on non-Mainnet always show truncated address
- Functionality:
- Link out to block explorer for the connected network
- Data needs:
- Address
- ENS
- Chain info

- Connected to chain
- Connected to Chain (shortname)

- Disconnect Button
- If connected, show this as a Disconnect

- There will possibly be navigation in the DropDown
- May need to support Global Nav links as well

- Wrong Network: "Switch to Gnosis" Button
- When clicked, this prompts network change in MetaMask

- Unsupported Network: "Network Unavailable" Button
- When clicked, open a dropdown with all available networks

- Data needs (for the network component):
- Need list of available networks
- Current DAO network

- MenuButton
- https://www.figma.com/file/R1a1bwODnzCHHHw0EJALAU/DAOhaus-v3-Pattern-Library-(In-Progress)?node-id=81%3A1668
- Takes in Menu elements that can be styled however

## Questions

- Are we going to save the user's data or do the fetching within the component?
- Should we cache the user's data (ENS, Ceramic, etc)
- They'll need the data across all of the app, so we'd want this in a state provider
- Can be flexible and allow for independent fetching too
- Prop structure for the Connect Wallet:
- Passing in Networks, do we default to DAOhaus Networks if user doesn't pass something in
- If doesn't receive address from state -> component will fetch
- Structure for the inner HTML on the Button itself (what can be passed in -- icon/avatar, name/user info)
- Do we use `quiver`?
- How do we handle our state store?
- How would we use a single state store?
- May not want to use Redux due to needing more than more than 1 state store