Introduce a example-reactnative (port of existing)

[jacogr]

Background:

This repos is a set of UI libraries that can be used across frameworks. For some frameworks (React, React Native & Vue), we do have specific components available, but there are some specific framework-specific things to take care of.

Recently we have introduced a very simple key generator example for both React as well as Vue. Functionality wise (and even UI wise), these are equivalent.

There are some "tricks" to getting React Native to operate properly, especially with the WASM libs (RN has an asm.js fallback), which has yielded example repos such as https://github.com/jacogr/rn-wasm-crypto in the past

Goals:

We would like a port of the above example for React Native. For inclusion here we would like a clean example that is runnable via yarn run example:rn:ios & yarn run example:rn:android

This means it should be able to -

• generate a seed
• display the seed
• generate an address from this seed
• allow the user to generate more
• display the address with an icon (as supported, currently only the polkadot theme is available)

Additionally it needs to -

• use @polkadot/ui-settings
• use @polkadot/ui-keyring
• be written in TypeScript

Functionality-wise (excluding the icons where not all themes are available), it should be equivalent to the existing examples. Additionally, we really want to set a "best practice" example, i.e. we really don't want to do this - https://github.com/jacogr/rn-wasm-crypto/blob/master/package.json#L18 that means setup should be done such that "hacks" are not needed, rather fallbacks to proper RN equivalents where applicable.

Lastly, if any issues do pop up in using the @polkadot/* dependencies, log issues, indicate here and it will be addressed. (Part of the reason for doing this is making sure the road is clear for others)

Additional reading:

• Support React Native wasm#19 (WASM, which options work)

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 300.0 DAI (300.0 USD @ $1.0/DAI) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $148,189.10 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 2 weeks, 6 days from now.
Please review their action plans below:

1) cameronfr has been approved to start work.

I'm willing to take a crack at this.

FYI, to get the React example to build I had to set aliasFields: ['browser'] in the react example's webpack.config.js as well as change the alias fields in the package.json of the ui-keyring package to have ./src/... appended to them -- maybe it has something to do with the order of the build s.t. it's not using what's in the build directory.

I'll be able to follow the best practices as well as provide good documentation so that people who land at the repo can easily get a working and non hack-y react-native app.

Learn more on the Gitcoin Issue Details page.

[jacogr]

@cameronfr There is def. an issue that snuck in lately, the ui-keyring got some additional functionality that plays a bit of havoc here it would seem. The browser fields in the package.json doesn't quite seem to yield the desired results inside this workspaced repo.(Externally it seems to behave fine)

Will get that sorted.

[gitcoinbot]

@cameronfr Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• reminder (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[cameronfr]

Sorry for the delay. I've got a relatively clean configuration going without rn-nodeify etc. that can generate the mnemonic etc. Currently working on somehow replacing the synchronous "store" package with something asynchronous (react-native only has asynchronous storage). I'll probably use something that syncs an in-memory storage to react-native's AsyncStorage.

[Web3Foundation]

np thanks for the update here @cameronfr

[gitcoinbot]

@cameronfr Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• reminder (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[jacogr]

@gitcoinbot We are close :) PR is there, last dangling bits. #223

@cameronfr You probably just need to link it on Gitcoin.

[jacogr]

Thank you! @Web3Foundation Can you please schedule payment on this bounty?

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 300.0 DAI (300.0 USD @ $1.0/DAI) has been submitted by:

1. @cameronfr

@Web3Foundation please take a look at the submitted work:

• PR by @cameronfr

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $159,329.05 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

The funding of 300.0 DAI (300.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @cameronfr.

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $158,728.10 more funded OSS Work available on the Gitcoin Issue Explorer

[Web3Foundation]

Thanks for completing this bounty @cameronfr do you mind taking this 2 minute survey about your experience with this issue! https://forms.gle/QgWdQoTykMKH2Q3B8

[polkadot-js-bot]

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.