Coder Social home page Coder Social logo

ben-haim / zabo-sdk-react-native Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zabo-api/zabo-sdk-react-native

0.0 0.0 0.0 1.38 MB

Zabo is an API for connecting with cryptocurrency exchanges, wallets and protocols like Bitcoin.

Home Page: https://zabo.com

License: MIT License

JavaScript 31.52% Starlark 0.95% Java 36.98% Ruby 2.46% Objective-C 28.09%

zabo-sdk-react-native's Introduction

What is Zabo? A unified cryptocurrency API.

CircleCI Discord Discourse

Zabo is an API for connecting with cryptocurrency exchanges, wallets and protocols like Bitcoin. Instead of manually integrating with Coinbase API, Binance API, Bitcoin APIs or the hundreds of other cryptocurrency APIs - you can simply use Zabo for them all.

We believe teams and developers should focus on building great products, not worry about the fragmented landscape of exchange APIs and blockchain protocols.

For our updated list of integrations, check out our Zabo integrations.

Zabo API React Native SDK

The Zabo SDK for React Native provides convenient access to the Zabo API for mobile applications.

Please keep in mind that you must register and receive a team id to use in your client application, or if you are using the server side functions, generate an API keypair from your dashboard.

Example

Documentation

See the Zabo API docs.

Requirements

  • React Native >= 0.62

Installation

npm install zabo-sdk-react-native --save

iOS Platform: Install pod

cd ios && pod install && cd ..

Android Platform: You are set!

Configuration

Zabo SDK React Native was inspired in the library React Native In App Browser.

It supports Chrome Custom Tabs for Android and SafariServices/AuthenticationServices for iOS.

Some extra configuration are necessary:

Configure Android Launch Mode (REQUIRED)

Configure Application launch mode as single task:

AndroidManifest.xml

<application
  ...
  android:launchMode="singleTask">
  ...
</application>

Configure Deep Linking (RECOMMENDED)

zabo-sdk-react-native uses websocket to receive the connection success or connection error callbacks in the app. You can configure a custom link scheme to your app in order to have a better user experience.

1. Enable Deep Linking in your app: Follow the instructions at React Native Linking documentation. You can create your own url scheme. We are using zabo-appin our examples.

iOS example: AppDelegate.m

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.myApp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>zabo-app</string>
    </array>
  </dict>
</array>

Android example: AndroidManifest.xml

<activity>
  ...
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="zabo-app" android:host="connected" android:pathPrefix="" />
  </intent-filter>
<activity>

2. Configure Redirect URI: On login success, the Connect Widget will call back the redirect URI zabo-app://connected with the account data. In this case, you should configure this redirect URI in your account on Zabo console: Team Settings -> Developer Settings -> HTTP Redirects tab Redirect URI

Usage

Zabo.init() parameters

Param Default Description Required
clientId App Key acquired when registering a team in Zabo Dashboard. Yes
env sandbox or live Yes
apiVersion v1 v0 or v1 No

zabo.connect() parameters (Optional)

Param Default Description Required
redirect_uri Url to be redirected after login success No
origin zabo-sdk-react-native Identification of connection origin No

Example

import React, { useEffect, useState } from 'react'
import { SafeAreaView, StyleSheet, ScrollView, View, Text, TouchableOpacity } from 'react-native'
import Zabo from 'zabo-sdk-react-native'

const App = () => {
  const [output, setOutput] = useState(null)

  useEffect(() => {
    setOutput('Loading SDk...')

    const init = async () => {
      try {
        await Zabo.init({
          clientId: 'YOUR_CLIENT_ID',
          env: 'sandbox',
          apiVersion: 'v1'
        })

        setOutput('SDk is ready')
      } catch (err) {
        setOutput(`ERROR:\n${JSON.stringify(err)}`)
      }
    }

    init()
  }, [])

  const handleConnect = () => {
    const zabo = Zabo.instance
    const params = {
      redirect_uri: 'zabo-app://connected', // RECOMMENDED
      origin: 'zabo-app'                    // RECOMMENDED
    }
    zabo.connect({ params }).onConnection(account => {
      setOutput(`CONNECTED!\nACCOUNT:\n${JSON.stringify(account)}`)
    }).onError(err => {
      setOutput(`ERROR:\n${JSON.stringify(err)}`)
    })
  }

  return (
    <>
      <SafeAreaView>
        <ScrollView>
          <View style={styles.sectionContainer}>
            <TouchableOpacity onPress={handleConnect} style={styles.button}>
              <Text style={styles.buttonText}>CONNECT</Text>
            </TouchableOpacity>
          </View>
          {output &&
            <View style={styles.sectionContainer}>
              <Text>{output}</Text>
            </View>}
        </ScrollView>
      </SafeAreaView>
    </>
  )
}

const styles = StyleSheet.create({
  sectionContainer: { marginTop: 32, paddingHorizontal: 24 },
  button: { backgroundColor: '#3465E0', marginVertical: 16, padding: 16, alignItems: 'center' },
  buttonText: { fontSize: 16, fontWeight: '600', color: '#fff' }
})

export default App

After connecting

zabo.transactions.getList({ ticker: 'ETH' }).then(history => {
  console.log(history)
}).catch(error => {
  /* User has not yet connected */
  console.error(error)
})

Using Promises

Every method returns a chainable promise which can be used:

zabo.getTeam().then(a => {
  console.log(a)
}).catch(e => {
  console.log(e.message)
})

Or with async/await:

let exchangeRates = await zabo.currencies.exchangeRates()
console.log(exchangeRates)

Help and Further Information

Please read our docs and reach out to us in any or all of the following forums for questions:

Issues

If you notice any issues with our docs, this README, or the SDK, feel free to open an issue and/or a PR. We welcome community contributions!

zabo-sdk-react-native's People

Contributors

marcelodesouza avatar dreinke avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.