diff --git a/package.json b/package.json index 922d68a6..c994d8d8 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,9 @@ "clean": "polkadot-dev-clean-build", "demo:identicon:react": "yarn build:ts && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080", "demo:identicon:vue": "yarn build:ts && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080", + "example:rn:packager": "yarn build:split:code && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start", + "example:rn:ios": "cd packages/exampleReactNative && cd ios && pod install && cd .. && yarn ios", + "example:rn:android": "cd packages/exampleReactNative && yarn android", "example:react": "yarn build:ts && cd packages/example-react && webpack --config webpack.config.js", "example:vue": "yarn build:ts && cd packages/example-vue && webpack --config webpack.config.js", "postinstall": "polkadot-dev-yarn-only", diff --git a/packages/exampleReactNative/.gitignore b/packages/exampleReactNative/.gitignore new file mode 100755 index 00000000..aadce1a1 --- /dev/null +++ b/packages/exampleReactNative/.gitignore @@ -0,0 +1,64 @@ +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +project.xcworkspace + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml + +# Visual Studio Code +# +.vscode/ + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + +# BUCK +buck-out/ +\.buckd/ +*.keystore +!debug.keystore + +# fastlane +# +# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the +# screenshots whenever they are needed. +# For more information about the recommended setup visit: +# https://docs.fastlane.tools/best-practices/source-control/ + +*/fastlane/report.xml +*/fastlane/Preview.html +*/fastlane/screenshots + +# Bundle artifact +*.jsbundle + +# CocoaPods +/ios/Pods/ diff --git a/packages/exampleReactNative/App.tsx b/packages/exampleReactNative/App.tsx new file mode 100644 index 00000000..58add3d4 --- /dev/null +++ b/packages/exampleReactNative/App.tsx @@ -0,0 +1,153 @@ +// Copyright 2017-2019 @polkadot/example-react authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React, { useEffect, useState } from 'react'; +import { + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + Button +} from 'react-native'; + +import { + Colors +} from 'react-native/Libraries/NewAppScreen'; + +import Identicon from '@polkadot/reactnative-identicon'; +import settings from '@polkadot/ui-settings'; +import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto'; +import keyring from '@polkadot/ui-keyring'; + +const styles = StyleSheet.create({ + scrollView: { + backgroundColor: Colors.lighter + }, + body: { + backgroundColor: Colors.white + }, + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24 + }, + sectionTitle: { + fontSize: 24, + fontWeight: '600', + color: Colors.black + }, + mainTitle: { + fontSize: 28, + fontWeight: '600', + color: Colors.black + }, + sectionDescription: { + marginTop: 8, + fontSize: 18, + fontWeight: '400', + color: Colors.dark + }, + buttonContainer: { + flex: 1, + flexDirection: 'column', + alignItems: 'flex-start' + } +}); + +const globalAny: any = global; + +const App = () => { + const [ready, setReady] = useState(false); + const [address, setAddress] = useState(null); + const [phrase, setPhrase] = useState(null); + const [ss58Format, setSS58Format] = useState(42); + + const _onClickNew = (): void => { + const phrase = mnemonicGenerate(12); + const { address } = keyring.createFromUri(phrase); + + setAddress(keyring.encodeAddress(address, ss58Format)); + setPhrase(phrase); + }; + + const _onChangeSS58Format = (value: string): void => { + setSS58Format(parseInt(value, 10)); + }; + + useEffect((): void => { + ready && _onClickNew(); + }, []); + + useEffect((): void => { + ready && address && setAddress(keyring.encodeAddress(address, ss58Format)); + }, [address, ss58Format]); + + const initialize = async (): Promise => { + try { + keyring.loadAll({ ss58Format: 42, type: 'sr25519' }); + } catch (e) { + console.log('Error loading keyring ', e); + } + await globalAny.localStorage.init(); + await cryptoWaitReady(); + setReady(true); + _onClickNew(); + }; + + if (!ready) { + initialize(); + } + + if (!ready || !address || !phrase) { + return null; + } + + return ( + <> + + + + + + React-Native Example + + + + + + Phrase + + {phrase} + + + + Icons + + + + Address + {address} + + + SS58 Format + + {settings.availablePrefixes + .filter((_, index): boolean => index !== 0) + .map(({ text, value }): React.ReactNode => ( +