Your gateway to the world of Zclassic (ZCL) apps.
Panda Crypto Wallet is a Zclassic (ZCL) and Zclassic Simple Ledger Protocol (ZSLP) wallet. The easiest to use mobile wallet for ZCL and ZSLP tokens.
Panda Crypto Wallet mobile app is primarily built on the following technologies.
- react-native
- redux
- react-navigation
- styled-components
- bitbox-sdk
- slp-sdk
- flowjs
- prettier
- yarn
The file structure is as follows...
/
- Config files and project setup
/assets/
- Images and fonts packaged with the app
/atoms/
- Lowest level UI components, such as Text, Buttons, Spacer, etc
/components/
- UI components used throughout the app, should be mainly composed of atoms with additional logic
/data/
-The Redux store, and all data management logic
/navigation/
- The router of the application
/screens/
- Top level screens, these are what the navigation renders
/themes/
- App color files
/utils/
- Utility methods, mainly for Zclassic (ZCL) related logic
/ios/
- iOS specific project files, modify these through xCode
/android/
- Android specific project files
All data which lives longer than a single screen is stored in redux
, the structure of which can be found in the /data
folder.
Only use Functional Components
with React and stick to using the hook
patterns for component lifecycle management.
Keeping to this single pattern will make the code consistent and future-proof as this is the direction React is going.
All styling is done with the styled-components
library.
Most of the base components we reuse should be turned into atoms and put into the /atoms
folder.
To reuse variables throughout the app -like color or spacing - define them in one of the ./themes
.
Navigation is managed with the react-navigation
library. To contain the logic of navigation in a single place, keep all navigation/router setup in the /navigation
folder.
This project use react-native
. Please refer to the React Native documentation to get the iOS or Android emulator installed and running before running panda-mobile
- React Native Getting Started Docs
- Install iOS/Android emulators
- Install cocoapods if running on iOS
- Be sure to set $PATH if running on Android
> yarn install
> cd ios
> pod install
> cd ..
> yarn run ios
To run on a specific device, such as required for taking screenshots for the store (6.5" & 5.5"). Xs Max and iPhone 8 plus are good store screenshot phones.
> yarn run ios --simulator="iPhone 11 Pro Max"
> yarn run ios --simulator="iPhone 11 Pro"
> yarn run ios --simulator="iPhone 8 Plus"
> yarn run ios --simulator="iPhone 6"
> yarn run ios --simulator="iPhone SE"
> yarn run ios --simulator="iPhone X"
- Load project in XCode
- Update version number
- Product > archive project
- Sign with deployment keys
- Go to the Apple web console to create release
-
Generate a debug keystore in
android/app
cd android/app
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
> yarn install
> Start an Android device - either
> Start an Android emulator from Android Studio
> Or plug in an Android device + enable USB debugging
> yarn run jetify
> yarn run android
- Follow the steps at https://facebook.github.io/react-native/docs/signed-apk-android
- generate
panda-mobile-release.keystore
file and put into/android/app
- update
android/gradle.properties
with the keystore filename and password
MYAPP_RELEASE_STORE_FILE=panda-mobile-release.keystore
MYAPP_RELEASE_KEY_ALIAS=panda-mobile-release
MYAPP_RELEASE_STORE_PASSWORD=**********
MYAPP_RELEASE_KEY_PASSWORD=**********
- Suggestion to not commit secrets by mistake:
git update-index --assume-unchanged android/gradle.properties
- Increment
versionCode
in android/app/build.gradle
cd android
./gradlew assembleRelease
or
yarn run android-build
cd android
./gradlew bundleRelease
or
yarn run android-bundle
- Go to Play console
- Upload the
bundle
for release - Launch to Internal Test group
- QA
- Launch to production
- Update the universal
.apk
on panda.zslp.org
- Ensure emulator is running or device is plugged in
react-native run-android --variant=release
react-native log-android
- Android Studio has a built in asset management tool, use that.
- iOS convert icons to appropriate sizes, then upload through xCode
rm -rf node_modules && yarn install && cd ios && pod install && cd .. && yarn run ios