-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support React Native #19
Comments
here is a working polyfill.
I'm not sure if we need to include it in here, or just update README and let the user include it in their codebase. |
Ooooh... nice! I have been playing with asm.js to have RN support (Polkawallet also needs it), but that ends up with a sometimes-working-sometimes-not-working 13MB bundle. So generally would add the polyfill in util-crypto. Would require some testing by somebody with a RN environment though (manually adding it), but you could be right docs may be the only thing needed? cc @jiangfuyao |
@jacogr Today work together? |
Deep inside schnorrkel :( If the interpreter has issues dealing with i64, not sure how to get around it. Made sure in the impl to actually only have u32 to the external world, since JS doesn’t have real 64-bit integers. However, in this case not sure what can be done. |
i tried all the old versions, all failed. That's really weird, it did once work. |
The Centrality mobile app does currently work (for me) - could we maybe see which version of @polkadot/wasm-crypto & webassemblyjs that uses? (As I recall, the only versions bumps lately has been due to deps, not actual Rust code changes - but that may help to try and track it?) 0.9 -> 0.10 - only tests added with schnorrkel bumped from 0.1.0 -> 0.1.1 (aligning with substrate) |
Any updates on this? |
+1 |
When crypto is ported to tradle/react-native-crypto and react-native-randombytes for randombytes.. |
It would be good if contributions to getting it working is actually done upstream, i.e. here, as well, instead of trying to manage 2 interfaces. The original reason Either way, if that can get to a point of passing, will integrate this further upstream in EDIT: Actually, it seems like that for the last run, the test did pass for asm.js - https://travis-ci.com/polkadot-js/wasm/jobs/217138856#L1021 |
What we did in our fork was a work around and I saw there was a asmjs output but for some reason was disabled, so I didn't contribute back(and be busy with something else). Btw to minify the js output or loaded it in jest requires large memory, which is not very friendly |
I need schnorrkelKeypairFromSeed in react native. None of these libraries are working Somehow it only works when debug mode is on i.e dev=true. |
KeyPairType - ed25519 is working |
Is that on 0.13.0-beta.1? You need to pass an env variable, (Not sure on metro, know how to expose the process.env in webpack, i.e. like here https://github.com/polkadot-js/apps/blob/master/packages/apps/webpack.config.js#L173 - so there The tests pass running asm.js (for those tests The env var is not nice, but the best initial solution to make sure that the normal webpack builds (anything non-RN) don't pull in an extra 7MB that is the asm.js output EDIT: Actually with a webpack config, you don't need to pass the variable on the command-line, doing this should be sufficient - plugins: [
new webpack.DefinePlugin({
'process.env': {
CRYPTO_ASM: '1' // any truth-y value will do
}
}),
... |
Passed CRYPTO_ASM=1
This hangs metro build process at 99% which is very unusual. |
This may be useful? https://medium.com/@skiptomyhue/setting-up-environment-variables-for-react-native-builds-b66a2576a218 EDIT: If there are any other ideas to only include the asm.js stuff for RN, would like to hear them. |
I can confirm about env flags as I have followed those steps and consoled out CRYPTO_ASM=1. Only sr25519 has issues. ed25519 is working fine Could node's crypto replacement - react-native-crypto and react-native-randombytes be causing any issue? |
It could very well be. In sr25519 it is used a bit more, i.e. even the signatures are non-deterministic. So I'm guessing first testing some other ones with random (i.e. bip39), should show if that could be the issue. |
On a certain scenario, sr25519 is working in react-native. |
Ok, so it is most probably the config (babel) that is too agressive and adds something (or doesn't add something), that is actually needed. Do you have steps (ELI5) to create a simple reproduction project or have a trimmed-down version available to play around with? |
I think, its do with https://developer.apple.com/documentation/javascriptcore Can you generate a wasm.js specific to javascriptcore? |
The issue is not with debug mode, shim, CRYPTO_ASM.. Rather about JavaScriptCore In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android. In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc. 😎 |
This seems to be an alternative approach https://github.com/paritytech/parity-signer |
Yes, the Parity Signer is being updated at the moment for Substrate support, so the Rust bindings are actually being turned into real mapping to UI there. (It certainly is a better bridge that relying on Rust -> WASM -> JS) There was another packaging mismatch, so |
And That would be good as a run-though. (Both versions, if the latest doesn't quite work due to a beta-testing mishap) |
There is an experimental way to consume wasm files for react-native mentioned here. https://github.com/ExodusMovement/react-native-wasm Can it help? |
After So, I understand the JSC problem quite well, i.e. this was added specifically for RN Android, https://github.com/polkadot-js/wasm/blob/master/packages/wasm-crypto/src/js/crypto-polyfill.js as well as polyfills in the common repo, ie. around Text{Decoder, Encoder}, Uint8Array fills, Array fills and some I forgot about by now. Quite happy to extend this in any area (assuming we can get there again and can see exactly what is breaking), and really happy to look at anything PR-related that can improve things. As it stands, this is a target I deeply care about, but have no way of actually getting running or testing by myself. So anything related to "trying support" is in the dark. TL;DR Please try, make coffee, make another coffee, go for a stroll and then check back. With explicit "it breaks here" info, can look at addressing, and always happy to look at specific approaches that works across envs. |
Will share a react-native setup in a while. Here is what I got waiting for more than 15 minutes
|
A reproducing setup would be excellent. Ok, cool, so it is failing the packaging. Ian had this first, but basically try passing the following ENV flags to increase the memory - the asm.js file is huge, almost 7MB.
Then... more coffee and strolling around... :) |
Here is a clean setup with crypto, fs, randombytes RN polyfills for reproducing this issue. First, run the setup as per Readme and run in iOS. Then, go to App.js and remove commented lines under Error Scenario: Success Scenario: Every time you update polkadot-js/wasm library version, run p.s I don't drink coffee |
import { bip39Generate, waitReady } from '@polkadot/wasm-crypto';
const App = () => {
const [phrase, setPhrase] = useState();
useEffect(() => {
// crypto needs to be ready
waitReady()
.then(() => {
// follow index.d.ts - pass in the number of words
setPhrase(bip39Generate(12));
})
.catch((error) => setPhrase(`error: ${error.message}`));;
}, []);
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>phrase</Text>
<Text style={styles.sectionDescription}>
{phrase || '--none--'}
</Text>
... |
running Have you got remote debugger on? Cmd + D -> Debug JS Remotely? ( the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. ) Without debugger on. The JavascriptCore mode (On iOS/Android simulators and devices React Native uses JavaScriptCore) It should work in Without debugger on. i.e with JavaScriptCore currently, its not |
There seems to be a crate for that https://crates.io/crates/javascriptcore |
No remote debugging, I wouldn't know where to start with that at all, not a RN expert. I only followed the instructions in the README. So 2 commands only -
|
@jacogr Thanks for your efficient and awesome work. Have integrated the latest version to polkawallet. Both dev and release version work perfect. |
I'll do the following in the next 30-odd minutes as CI completes all it's tasks -
|
@jacogr That's great. BTW, I also create a sample RN code to provide details that have to use crypto and other browser or node specific libs in RN. I prefer using If you don't mind, I can provide the sample repo. |
Sample here for |
@huanday Please do, it can certainly help others. I am clueless when it comes to RN, so no idea around best practices. It is not that I can't learn, it is just that I have more than enough work and pet projects as it is. |
|
I would love to get to a setup where I can get rid of these things with a proper RN way of doing things - https://github.com/polkadot-js/common/blob/master/packages/util/src/polyfill/fill.ts That whole directory was (mostly) driven by Android issues on polkawallet. (Array, Uint8Array, TextEncoder/TextDecoder, setPrototypeOf, etc) |
Closing this based on #19 (comment)
If anything else does pop up -
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query. |
in RN environment, there's no global WebAssembly.
Can we have a polyfill for it?
https://www.npmjs.com/package/webassembly
looks promising.The text was updated successfully, but these errors were encountered: