feat(init): ༼ つ ◕_◕ ༽つ OpenPix Expo React Native Demo

.env.example

@@ -0,0 +1 @@
+APP_ID=

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+.env

App.tsx

@@ -0,0 +1,37 @@
+import 'react-native-get-random-values'
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { Provider as PaperProvider } from 'react-native-paper';
+import { ThemeProvider } from 'styled-components'
+import { ToastProvider } from 'react-native-styled-toast'
+import 'core-js/stable';
+import OpenPixDemo from './src/OpenPixDemo';
+
+// Toast Theme
+const theme = {
+  space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
+  colors: {
+    text: '#0A0A0A',
+    background: '#FFF',
+    border: '#E2E8F0',
+    muted: '#F0F1F3',
+    success: '#7DBE31',
+    error: '#FC0021',
+    info: '#00FFFF'
+  }
+};
+
+const App = () => {
+  return (
+    <PaperProvider>
+      <ThemeProvider theme={theme}>
+        <ToastProvider>
+          <OpenPixDemo />
+        </ToastProvider>
+      </ThemeProvider>
+      <StatusBar style="auto" />
+    </PaperProvider>
+  );
+}
+
+export default App;

README.md

@@ -0,0 +1,40 @@
+# OpenPix Expo Integration Example
+
+Pix Example Using the [OpenPix](https://openpix.com.br/) Platform. [OpenPix Developers](https://developers.openpix.com.br/)
+
+Basic OpenPix Expo Integration Example
+
+Before QRCode           |  BRCode EMV QRCode
+:-------------------------:|:-------------------------:
+![](img/ios1.png)  |  ![](img/ios2.png)
+
+## Setup
+Generate a [App ID](https://developers.openpix.com.br/docs/plugin/app-id) in your OpenPix Account
+
+Create a .env file with the following data
+
+```jsx
+APP_ID=<your app id>
+```
+
+## How it works?
+
+This code uses [@openpix/react](https://www.npmjs.com/package/@openpix/react) package to generate a new charge and check when the charge is paid
+
+## How to run on Android
+
+```jsx
+yarn android
+```
+
+## How to run on iOS
+
+```jsx
+yarn ios
+```
+
+## How to run on Web
+
+```jsx
+yarn web
+```

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "ExpoOpenPix",
+    "slug": "ExpoOpenPix",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['inline-dotenv'],
+    env: {
+      production: {
+        plugins: ['react-native-paper/babel'],
+      },
+    },
+  };
+};

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "expo-openpix",
+  "version": "0.0.1",
+  "dependencies": {
+    "@openpix/react": "^0.0.2",
+    "expo": "~40.0.0",
+    "expo-status-bar": "~1.0.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-get-random-values": "^1.6.0",
+    "react-native-paper": "^4.7.2",
+    "react-native-qrcode-svg": "^6.1.1",
+    "react-native-styled-toast": "^1.1.1",
+    "react-native-svg": "12.1.0",
+    "react-native-web": "~0.13.12",
+    "styled-components": "^5.2.1",
+    "styled-system": "^5.1.5",
+    "uuid": "^8.3.2",
+    "core-js": "^3.9.1"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0",
+    "@types/babel__core": "~7.1.12",
+    "@types/react": "~16.9.35",
+    "@types/react-dom": "~16.9.8",
+    "@types/react-native": "~0.63.2",
+    "@types/styled-components": "^5.1.7",
+    "@types/styled-system": "^5.1.10",
+    "@types/uuid": "^8.3.0",
+    "babel-plugin-inline-dotenv": "^1.6.0",
+    "typescript": "~4.0.0"
+  },
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "android": "expo start --android",
+    "eject": "expo eject",
+    "ios": "expo start --ios",
+    "start": "expo start",
+    "web": "expo start --web"
+  }
+}

src/OpenPixDemo.tsx

@@ -0,0 +1,118 @@
+import { Text } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import React, { useState } from 'react';
+import { Flex } from './rebass/Flex';
+import { Dimensions } from 'react-native';
+import { Button, ActivityIndicator } from 'react-native-paper';
+import { v4 as uuidv4 } from 'uuid';
+import { ChargePostResponse } from './openpixApi/chargePost';
+import { useOpenPix } from '@openpix/react';
+import { config } from './config';
+import { useToast } from 'react-native-styled-toast'
+
+const windowWidth = Dimensions.get('window').width;
+
+const OpenPixDemo = () => {
+  const [correlationID, setCorrelationID] = useState<string>(uuidv4().toString());
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [charge, setCharge] = useState<ChargePostResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const { toast } = useToast()
+
+  const reset = () => {
+    setCorrelationID(uuidv4().toString());
+    setCharge(null);
+    setError(null);
+  }
+
+  // eslint-disable-next-line
+  const onPay = (charge) => {
+    toast({ message: 'Thank you for your Donation!', });
+
+    reset();
+  };
+
+  const { chargeCreate } = useOpenPix({
+    appID: config.APP_ID,
+    onPay,
+  })
+
+  const createDonation = async () => {
+    setIsLoading(true);
+
+    const payload = {
+      correlationID,
+      value: 1, // one cent
+      comment: 'Donate',
+    }
+    try {
+      const { charge, error } = await chargeCreate(payload);
+
+      setIsLoading(false);
+
+      if (error) {
+        setError(error);
+        return;
+      }
+
+      setCharge(charge);
+    } catch (err) {
+      setIsLoading(false);
+      setError(error);
+    }
+  }
+
+  console.log({
+    charge,
+  });
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <>
+          <Text>Gerando seu QRCode Pix para a Doação</Text>
+          <ActivityIndicator />
+        </>
+      )
+    }
+
+    if (error) {
+      return (
+        <>
+          <Text>Erro ao geracao Doação</Text>
+          <Text>{error.toString()}</Text>
+        </>
+      )
+    }
+
+    if (charge) {
+      return (
+        <>
+          <QRCode
+            value={charge.brCode}
+            size={windowWidth - 20}
+          />
+          <Text mt='10px' mb='10px'>Status: {charge.status}</Text>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <Button mode="contained" onPress={createDonation}>
+          Doar
+        </Button>
+      </>
+    )
+  }
+
+  return (
+    <Flex flex={1} alignItems='center' justifyContent='center' bgColor='#fff'>
+      <Text mb='10px'>OpenPix Demo</Text>
+      {renderContent()}
+    </Flex>
+  )
+};
+
+export default OpenPixDemo;

src/config.tsx

@@ -0,0 +1,3 @@
+export const config = {
+  APP_ID: process.env.APP_ID,
+}

src/rebass/Flex.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native';
+import { flexbox, layout, color, space, typography, border } from 'styled-system';
+
+export const Flex = styled.View`
+  ${space}
+  ${layout}
+  ${color}
+  ${flexbox}
+  ${typography}
+  ${border}
+`;

src/rebass/Text.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native';
+import { color, typography, layout, opacity, space, border } from 'styled-system';
+
+export const Text = styled.Text`
+  ${space}
+  ${opacity}
+  ${layout} 
+  ${typography}
+  ${border}
+  ${color}
+`;

src/rebass/TouchableOpacity.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { flexbox, layout, color, space, typography, border } from 'styled-system';
+
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${space}
+  ${layout}
+  ${color}
+  ${flexbox}
+  ${typography}
+  ${border}
+`;
+
+export default class StyledTouchableOpacity extends React.Component {
+  setNativeProps(nativeProps) {
+    this._root.setNativeProps(nativeProps);
+  }
+
+  render() {
+    return (
+      <TouchableOpacity ref={(component) => (this._root = component)} {...this.props}>
+        {this.props.children}
+      </TouchableOpacity>
+    );
+  }
+}

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true
+  }
+}