web3modal-react-native
web3modal-react-native copied to clipboard
[bug]: How to reset createAppKit's includeWalletIds? I'm passing id from backscreen but's not reseting once back
When navigating between different wallets in the app, the user encounters an issue that affects the expected display and verification of wallet details. i.e after opening the second wallet the first wallet is getting displayed.
https://github.com/user-attachments/assets/ed3babad-71bd-41f4-a2b2-d6daba243cdc
AppKit SDK version
"@reown/appkit-wagmi-react-native": "^1.0.0",
Output of npx react-native info
System: OS: macOS 14.5 CPU: (8) x64 Apple M1 Memory: 38.38 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 22.5.1 path: ~/.nvm/versions/node/v22.5.1/bin/node Yarn: version: 1.22.22 path: ~ npm: version: 10.8.2 path: ~ Watchman: version: 2023.09.18.00 path: Managers: CocoaPods: version: 1.12.1 path: SDKs: iOS SDK: Platforms: - DriverKit 23.5 - iOS 17.5 - macOS 14.5 - tvOS 17.5 - visionOS 1.2 - watchOS 10.5 Android SDK: Not Found IDEs: Android Studio: 2023.3 AI-233.14808.21.2331.11709847 Xcode: version: 15.4/15F31d path: /usr/bin/xcodebuild Languages: Java: version: 17.0.12 path: /usr/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.9 wanted: 0.73.9 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false
Expo Version (if applies)
No response
Steps to reproduce
-
Open the App: Launch the app on your device.
-
Navigate to the First Wallet: Select the first wallet from the wallet list.
-
Open AppKit Screen: Access the AppKit screen associated with the first wallet.
-
Go Back: Use the back button or gesture to return to the previous screen.
-
Select the Second Wallet: Click on the second wallet in the wallet list.
Expected Outcome ->
- The second wallet should be displayed when selected.
Snack, code example, screenshot, or link to a repository
const WalletConnectScreen = () => { const projectId = Config.WALLET_CONNECT_PROJECT_ID; const queryClient = new QueryClient(); const [appKitState, setAppKitState] = useState(null); const chains = [mainnet, polygon, arbitrum]; const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
// Set initial state for Wagmi (if needed) const initialState = null; // You can customize this based on your needs
useEffect(() => { Logger.log('Initializing AppKit...');
const modal = createAppKit({
projectId,
wagmiConfig,
includeWalletIds: [route?.params?.data?.walletConnectId],
enableAnalytics: false,
});
setAppKitState(modal);
return () => {
Logger.log('Destroying AppKit...');
modal.resetWcConnection();
modal.resetAccount();
setAppKitState(null);
queryClient.clear(); // Clear QueryClient to reset state
queryClient.unmount(); // Unmount QueryClient to reset state
};
}, [isDarkTheme, projectId, route?.params?.data?.walletConnectId, wagmiConfig, queryClient]);
// Function to handle disconnection
const disconnectWallet = async () => { if (appKitState) { await appKitState.resetWcConnection(); await appKitState.resetAccount(); Logger.log('Disconnected from WalletConnect', appKitState); setAppKitState(null); } };
return (
<WagmiProvider config={wagmiConfig} initialState={initialState} reconnectOnMount={true}>
<QueryClientProvider client={queryClient}>
{appKitState && (
<>
<WalletConnectScreenChild
route={route}
AppKitState={appKitState}
id={route?.params?.data?.walletConnectId}
onDisconnect={disconnectWallet} // Pass disconnect function
/>
<AppKit />
</>
)}
</QueryClientProvider>
</WagmiProvider>
);
};
export default WalletConnectScreen;