Closed SanaJamm closed 8 months ago
@benefacto - any idea why we have 2 buttons on desktop and just 1 on mobile? Does Walletconnect on mobile support Metamask?
@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.
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:
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.
Update State Management: Add a new state variable to manage the selected wallet option.
const [selectedWallet, setSelectedWallet] = useState(null);
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>
)}
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);
}}
Styling:
Add or modify styles for the dropdown component (styles.walletConnectDropdown
and styles.walletPicker
) to match your application's design.
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.
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.
Import Necessary Components (1 hour):
Picker
from @react-native-picker/picker
.Update State Management (1 hour):
Modify Wallet Connection Buttons (2-3 hours):
TouchableOpacity
components and introducing the Picker
component for both desktop and mobile resolutions.Update Connect Logic (2-3 hours):
onValueChange
function for the Picker
to initiate a connection when a wallet is selected.Styling the Dropdown (1-2 hours):
Remove Unused Code (1 hour):
Testing and Validation (2-3 hours):
Review and Refinement (1 hour):
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.
@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
This is likely why MetaMask is not showing on mobile:
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.
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.
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: