web3modal-react-native icon indicating copy to clipboard operation
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

Open pratik-katkar-kryptos opened this issue 1 year ago • 0 comments

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

  1. Open the App: Launch the app on your device.

  2. Navigate to the First Wallet: Select the first wallet from the wallet list.

  3. Open AppKit Screen: Access the AppKit screen associated with the first wallet.

  4. Go Back: Use the back button or gesture to return to the previous screen.

  5. 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;

pratik-katkar-kryptos avatar Sep 30 '24 14:09 pratik-katkar-kryptos