---
# System prepended metadata

title: v3 Connect Wallet Sync (4/25/22)
tags: [' dragons', ' connect wallet', v3]

---

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