Merge pull request #1 from coinbase/master-1696524362

WaaS Sample App

.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.env

@@ -0,0 +1,2 @@
+PROXY_SERVER_HOST=http://localhost
+PROXY_SERVER_PORT=8091

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

.gitignore

@@ -0,0 +1,66 @@
+# 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
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# 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
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright 2023 Coinbase Global, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'react-native-gesture-handler';
+import 'react-native-reanimated';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import { createConfig } from '@gluestack-ui/themed';
+import { config } from './gluestack-ui.config';
+
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+import {
+  GluestackUIProvider,
+  Box,
+} from '@gluestack-ui/themed';
+
+import { Main } from './screens/Main';
+import { ButtonTheme } from './components/themes/Button';
+import { ButtonTextTheme } from './components/themes/ButtonText';
+import { InputTheme } from './components/themes/Input';
+import { InputFieldTheme } from './components/themes/InputField';
+import { TextareaTheme } from './components/themes/Textarea';
+import { TextareaInputTheme } from './components/themes/TextareaInput';
+
+import store from './app/store'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
+import { persistStore } from 'redux-persist'
+
+let persistor = persistStore(store);
+
+const extendedConfig = createConfig({
+  ...config.theme,
+  components: {
+    Button: {
+      theme: ButtonTheme,
+    },
+    ButtonText: {
+      theme: ButtonTextTheme,
+    },
+    Input: {
+      theme: InputTheme,
+    },
+    InputField: {
+      theme: InputFieldTheme,
+    },
+    Textarea: {
+      theme: TextareaTheme,
+    },
+    TextareaInput: {
+      theme: TextareaInputTheme,
+    }
+  },
+})
+
+function App(): JSX.Element {
+
+  const backgroundStyle = {
+    flex: 1,
+    backgroundColor: Colors.black
+  };
+
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+          <SafeAreaView style={backgroundStyle}>
+            <StatusBar
+              barStyle='light-content'
+              backgroundColor={backgroundStyle.backgroundColor}
+            />
+            <GluestackUIProvider config={extendedConfig}>
+            <NavigationContainer>
+              <Box
+                style={backgroundStyle}
+                height="100%">
+                <Main />
+              </Box>
+            </NavigationContainer>
+            </GluestackUIProvider>
+        </SafeAreaView>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export default App;

Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+gem 'cocoapods', '~> 1.12'

README.md

@@ -1 +1,142 @@
-# WaaS Sample App
+# waas-sample-app
+
+A template-ized [sample wallet application](https://github.com/coinbase/waas-sample-app) that is built using the [WaaS React Native SDK](https://docs.cloud.coinbase.com/waas/docs/waas-sdk) and the [WaaS Proxy Server](https://docs.cloud.coinbase.com/waas/docs/proxy-overview).
+
+This sample application serves as an educational resource and foundational scaffold for developers building with the WaaS APIs. It is provided as an example to guide developers in quickly bootstrapping their own applications with the WaaS APIs, while demonstrating best practices.
+
+## Features
+
+The sample application utilizes the WaaS APIs to implement the following features:
+
+- **MPC wallet creation:** Users can sign-up and create an account with an MPC wallet.
+- **Wallet address generation:** Users can generate new wallet addresses for multiple networks.
+- **Send transactions and payments:** Users can send payments via transactions executed on the blockchain.
+- **Transaction history:** Users can view a history of transactions and details associated with payments made between them and their friends.
+- **Wallet backup and recovery:** Users can backup and recover their MPC wallets.
+- **Wallet key export:** Users can export their wallet private keys and import them into other existing wallet solutions of their choice.
+
+## Prerequisites
+
+- [Create an API key](https://docs.cloud.coinbase.com/waas/docs/auth), and ideally test it against the client libraries.
+- Install and run a [proxy server](https://docs.cloud.coinbase.com/waas/docs/proxy-setup).
+
+## Checkout the code
+
+Checkout the sample app:
+
+```bash
+git clone https://github.com/coinbase/waas-sample-app.git
+```
+
+**ℹ️ Info:** The sample app assumes the proxy server is running on `http://localhost:8091` by default. If your proxy server is running on a different host or port, update the `PROXY_SERVER_HOST` and `PROXY_SERVER_PORT` variables within the `.env` file.
+
+## Running the app
+
+You can build and run the sample app using yarn by running the commands below from the root directory of the sample app.
+
+### Build
+
+To build the sample app:
+
+```bash
+yarn install
+cd ios
+pod install
+cd ..
+```
+
+**ℹ️ Info:** If you get an error when you run `pod install`, you may need to pull the latest PodSpecs by running `pod repo update`.
+
+### Run
+
+To run the sample app:
+
+```bash
+yarn start
+```
+
+**ℹ️ Info:** Once metro is running, you can run the app by starting an emulator. To run on iOS, press **`i`**.
+
+**💡 Tip:** If you get a pop up that says, `Unable to boot device in current state: Booted`, you can close it.
+
+**💡 Tip:** If you get a footer message that appears at the bottom of the app, you can close it.
+
+## App customization
+
+A configuration file is provided in the project, allowing you to modify the default styling and theme of the application.
+
+### Theme, colors, title
+
+To modify the theme and colors of the app:
+
+1. Open `app.config.js`.
+2. Update the variables under `config.theme` with your desired color hexcodes and application title.
+
+```js
+export const config = {
+  /* 
+   * Default network of application
+   * (i.e. networks/ethereum-mainnet, networks/ethereum-goerli, networks/base-goerli, networks/base-mainnet)
+  */
+  defaultNetwork: 'networks/base-goerli',
+  defaultChainId: '0x14a33',
+  theme: {
+    appName: 'FRENPAY',
+    colors: {
+        // list of hexcode colors for theme customization
+        background: "#000000",
+        text: "#000000",
+        textSecondary: "#8A919E",
+        textInverse: "#FFFFFF",
+        textPositive: '#27AD75',
+        textNegative: '#F0616D',
+        primary: '#8A96F8',
+        primaryHover: '#848FF0',
+        primaryPressed: '#8A96F8',
+        primaryBackground: '#0A0B0D',
+        primaryForeground: '#0A0B0D',
+        primaryForegroundMuted: '#8A919E',
+        primaryLineHeavy: '#8A919EA8',
+        secondary: '#32353D',
+        secondaryHover: '#3A3D45',
+        secondaryPressed: '#1E2025',
+        secondaryForeground: '#FFFFFF',
+        default: '#F9F9F9',
+        defaultHover: '#F9F9F9',
+        defaultPressed: '#EAEAEB',
+        defaultForeground: '#000000',
+      }
+  }
+};
+```
+
+### Logo
+
+To modify the logo used within the app:
+
+1. Replace `/assets/logo.png`.
+
+## Documentation
+
+For full documentation, refer to [https://docs.cloud.coinbase.com/waas](https://docs.cloud.coinbase.com/waas).
+
+## License
+
+```
+Copyright © 2023 Coinbase, Inc. <https://www.coinbase.com/>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+```
+
+
+

__tests__/App.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});