[Design QA] Top Nav bar/Mobile + Desktop

[SanaJamm]

I see that in the top nav bar on Desktop, there's two buttons: WalletConnect and MetaMask, and on mobile it only shows WalletConnect, why is that?

and instead of two buttons side by side, can we add a dropdown button that says Connect Wallet and from there to pick one of them?

Devs:

Design idea:

[decentralauren]

@benefacto - any idea why we have 2 buttons on desktop and just 1 on mobile? Does Walletconnect on mobile support Metamask?

[benefacto]

@benefacto - any idea why we have 2 buttons on desktop and just 1 on mobile? Does Walletconnect on mobile support Metamask?

@decentralauren It seems like it was implemented to have as many buttons as there are connectors (code reference for developer context) and it supports two: Metamask & Walletconnect (code reference). Why there is one on mobile and two on desktop is unclear at the moment but I'm reaching out to Josh. It's also unclear if WalletConnect 1.x (the version used) supports MetaMask on mobile or whether the reason only one button is displayed is a responsiveness problem. I'm reaching out to Josh for some clarification though.

[benefacto]

Technical Implementation

To implement the requested change in your React Native code for the header component, you'll need to modify the component to use a dropdown menu for wallet connection options instead of separate buttons. Here's a step-by-step guide on how to make these changes:

1. Import Necessary Components: First, ensure that you have imported all necessary components for creating a dropdown menu. You might need a component like Picker from @react-native-picker/picker or a similar library.

2. Update State Management: Add a new state variable to manage the selected wallet option.

   const [selectedWallet, setSelectedWallet] = useState(null);

3. Modify Wallet Connection Buttons: Replace the existing wallet connection buttons with a dropdown menu. This involves removing the TouchableOpacity components for WalletConnect and MetaMask buttons and replacing them with a single dropdown component.

   For desktop resolution:

   {isDesktopResolution && (
    <View style={styles.walletConnectDropdown}>
      <Picker
        selectedValue={selectedWallet}
        onValueChange={(itemValue, itemIndex) => setSelectedWallet(itemValue)}
        style={styles.walletPicker}
      >
        <Picker.Item label="Connect Wallet" value="default" />
        {connectors.map((connector) => (
          <Picker.Item key={connector.id} label={connector.name} value={connector.id} />
        ))}
      </Picker>
    </View>
   )}

   For mobile resolution:

   {!isDesktopResolution && (
    <View style={styles.walletConnectDropdown}>
      <Picker
        selectedValue={selectedWallet}
        onValueChange={(itemValue, itemIndex) => setSelectedWallet(itemValue)}
        style={styles.walletPicker}
      >
        <Picker.Item label="WalletConnect" value="walletConnect" />
      </Picker>
    </View>
   )}

4. Update Connect Logic: Modify the wallet connection logic to use the selected wallet from the dropdown. This involves updating the onValueChange function of the Picker to initiate a connection when a wallet is selected.

   const handleWalletConnect = (connectorId) => {
    const connector = connectors.find(c => c.id === connectorId);
    if (connector) {
      connect({ connector });
    }
   };
   
   // Inside Picker's onValueChange
   onValueChange={(itemValue) => {
    setSelectedWallet(itemValue);
    handleWalletConnect(itemValue);
   }}

5. Styling: Add or modify styles for the dropdown component (styles.walletConnectDropdown and styles.walletPicker) to match your application's design.

6. Remove Unused Code: Since the individual buttons for WalletConnect and MetaMask are no longer needed, remove any related code, including styles that are specifically for those buttons.

This is a basic implementation. Depending on the specific libraries and components you are using, you may need to adjust the code accordingly. Also, ensure that you test the functionality thoroughly on both desktop and mobile resolutions to ensure a smooth user experience.

Estimate

Implementing a dropdown menu for wallet connection options in the header component of a React Native application involves several steps, including importing necessary components, updating state management, modifying the UI, and adjusting the connection logic.

1. Import Necessary Components (1 hour):

   • Ensuring all required components for creating a dropdown menu are imported, such as Picker from @react-native-picker/picker.

2. Update State Management (1 hour):

   • Adding a new state variable to manage the selected wallet option.

3. Modify Wallet Connection Buttons (2-3 hours):

   • Replacing existing wallet connection buttons with a dropdown menu.
   • Removing TouchableOpacity components and introducing the Picker component for both desktop and mobile resolutions.

4. Update Connect Logic (2-3 hours):

   • Modifying the wallet connection logic to use the selected wallet from the dropdown.
   • Implementing onValueChange function for the Picker to initiate a connection when a wallet is selected.

5. Styling the Dropdown (1-2 hours):

   • Adding or modifying styles for the dropdown component to align with the application's design.
   • Ensuring that the dropdown is visually appealing and functional across different screen sizes.

6. Remove Unused Code (1 hour):

   • Removing any redundant code, including styles related to the previous individual wallet connect buttons.

7. Testing and Validation (2-3 hours):

   • Thoroughly testing the functionality on both desktop and mobile resolutions.
   • Ensuring that the wallet connection process is smooth and user-friendly.

8. Review and Refinement (1 hour):

   • Addressing any feedback and making necessary refinements.

Adding these up, the total estimated time could be around 11-16 hours. This estimate assumes that the developer is proficient with React Native and has experience with implementing UI components like dropdown menus.

[sirpy]

@patpedrosa @sanajamm @decentralauren @benefacto Why can't the "connect wallet" button open the existing frameworks modal that shows different wallet options. That's a standard and would require less effort

[krisbitney]

This is likely why MetaMask is not showing on mobile:

1. The iOS Info.plist and Android AndroidManifest.xml configuration files have not yet been configured to allow the GoodCollective app to detect whether wallet apps like MetaMask are installed.

2. While the “wagmi” package being used works with React Native, it might not include native connectors for MetaMask out of the box. According to a discussion on the wagmi GitHub, there was no MetaMask connector available for iOS and Android as of October 9, 2023.

It might make more sense to use a UI component built on top of wagmi to simplify wallet integration. For example, Web3Modal (https://web3modal.com/), a UI SDK made by WalletConnect, has React Native support and works with MetaMask.