[bug]: In the modal for connecting a wallet, it is not possible to create a wallet using email or social login.

[GentaObata]

Description

In the modal for connecting a wallet, submitting an email after entering it or tapping on a social login icon does not proceed further.

For email login, an error message appears as shown in the screenshot.
For social login, it remains stuck in a loading state and does not progress.

The issue has been identified.

In the onEmailSubmit method of ConnectEmailInput, authProvider.connectEmail is executed, but authProvider is undefined at that point.

In ConnectEmailInput, authProvider is retrieved as follows:

const { connectors } = useSnapshot(ConnectorController.state);
const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;

const { connectors } = useSnapshot(ConnectorController.state);
const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;

state.connectors.push(ref(connector));

This is the root cause of the issue.
When using push to add an item to a valtio array, useSnapshot does not trigger a re-render.

To fix this, changing the code to:

state.connectors = [
  ...state.connectors,
  ref(connector)
];

ensures that snap triggers a re-render, allowing email-based wallet creation to proceed as expected.

However, I am not very familiar with the specifications of Valtio.
There may be a more correct solution.

I appreciate your support.

AppKit SDK version

@reown/[email protected]

Output of npx react-native info

System:
OS: macOS 15.0
CPU: (8) x64 Apple M1
Memory: 29.89 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.16.0
path: ~/.asdf/installs/nodejs/20.16.0/bin/node
Yarn:
version: 1.22.22
path: /usr/local/bin/yarn
npm:
version: 10.8.1
path: ~/.asdf/plugins/nodejs/shims/npm
Watchman:
version: 2024.10.14.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.0
- iOS 18.0
- macOS 15.0
- tvOS 18.0
- visionOS 2.0
- watchOS 11.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 16.0/16A242d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.2
path: /Users/tilda/.asdf/shims/javac
Ruby:
version: 2.6.10
path: /opt/homebrew/opt/rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Expo Version (if applies)

No response

Steps to reproduce

• Set the wallet to a disconnected state.
• Reload the Expo Dev Client.
• Execute the open method obtained from useAppKit() to display the connect modal.
• Enter an email and tap the > button on the right side of the input field, or tap the Apple icon.
• An issue occurs.

Snack, code example, screenshot, or link to a repository

import { Text, TouchableOpacity } from 'react-native';
import { useAppKit } from '@reown/appkit-wagmi-react-native';
import { SafeAreaView } from '@/components/SafeAreaView';

export default function SiweScreen() {
  const { open } = useAppKit();

  return (
    <SafeAreaView>
      <TouchableOpacity
        onPress={() => {
          open();
        }}
      >
        <Text>Open</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

[ignaciosantise]

hey @GentaObata 👋 Thanks for reporting and for taking the time to check the code 🙏

I've never had this issue but you're right, push is not the best approach to add the connector. I'll change it and release a test version so you can check if it works

[ignaciosantise]

@GentaObata can you check if this canary works?

"@reown/appkit-wagmi-react-native": "0.0.0-fix-valtio-arrays-20250212140557",
"@reown/appkit-auth-wagmi-react-native": "0.0.0-fix-valtio-arrays-20250212140557"