@coinflowlabs/react-native 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# Coinflow React Native
+
+## Withdraw Usage
+```
+import {useWallet} from '@solana/wallet-adapter-react';
+const wallet = useWallet();
+const connection = useConnection();
+
+<CoinflowWithdraw wallet={wallet} merchantId='<YOUR MERCHANT ID>' env='prod|sandbox|staging' connection={connection} />;
+```
+
+Props:
+* `wallet`: The Solana Wallet Adapter Wallet
+* `merchantId`: Your Merchant ID (Contact Coinflow support for this)
+* `connection`: Solana Connection
+* `env` (optional): This defaults to `prod`
+    - For testing set to `staging`
+* `onSuccess` (optional): function to run when the withdrawal process is successful
+
+## Purchase Usage
+```
+import {useWallet} from '@solana/wallet-adapter-react';
+const wallet = useWallet();
+const connection = useConnection();
+
+<CoinflowPurchase wallet={wallet} merchantId='<YOUR MERCHANT ID>' env='prod|sandbox|staging' connection={connection} />;
+```
+
+Props:
+* `wallet`: The Solana Wallet Adapter Wallet
+* `merchantId`: Your Merchant ID (Contact Coinflow support for this)
+* `connection`: Solana Connection
+* `env` (optional): This defaults to `prod`
+  - For testing set to `staging`
+* `onSuccess` (optional): function to run when the purchase process is successful
+* `transaction` (optional): transaction for the user to run which redeems their credits with your smart contract. Create this transaction just like you would for a normal user who has USDC in their account.
+* `partialSigners` (optional): Keypairs of Partial Signers to sign the transaction with, this is necessary when initializing new accounts as the new account Keypair must sign the transaction.
+* `debugTx` (optional): Setting this to `true` will sign the transaction with the wallet, and send the transaction with no preflight checks allowing for easier debug of any issues.
+
+## Utils
+
+`CoinflowUtils`
+
+* `getFeePayer` - Return the `PublicKey` of the Coinflow Fee Payer
+
+# Changelog
+
+# 0.1.0
+ Genesis 1:1

package/build/CoinflowPurchase.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CoinflowPurchaseProps } from '@coinflowlabs/react';
+import { WithStyles } from './CoinflowWebView';
+export declare function CoinflowPurchase({ wallet, merchantId, env, connection, onSuccess, transaction, amount, partialSigners, debugTx, style, }: CoinflowPurchaseProps & WithStyles): JSX.Element | null;

package/build/CoinflowPurchase.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CoinflowWebView } from './CoinflowWebView';
+import { useIframeWallet } from './useIframeWallet';
+export function CoinflowPurchase({ wallet, merchantId, env, connection, onSuccess, transaction, amount, partialSigners, debugTx = false, style, }) {
+    const { WebViewRef, handleIframeMessages } = useIframeWallet({
+        wallet,
+        connection,
+        onSuccess,
+        partialSigners,
+        debugTx,
+    });
+    if (!wallet.publicKey || !wallet.connected)
+        return null;
+    return (React.createElement(CoinflowWebView, { publicKey: wallet.publicKey.toString(), WebViewRef: WebViewRef, route: `/purchase/${merchantId}`, env: env, transaction: transaction, amount: amount, handleIframeMessages: handleIframeMessages, style: style }));
+}
+//# sourceMappingURL=CoinflowPurchase.js.map

package/build/CoinflowPurchase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../src/CoinflowPurchase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAa,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAU,EACV,GAAG,EACH,UAAU,EACV,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAC8B;IACnC,MAAM,EAAC,UAAU,EAAE,oBAAoB,EAAC,GAAG,eAAe,CAAC;QACzD,MAAM;QACN,UAAU;QACV,SAAS;QACT,cAAc;QACd,OAAO;KACR,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAExD,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EACtC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,aAAa,UAAU,EAAE,EAChC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,oBAAoB,EAAE,oBAAoB,EAC1C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC"}

package/build/CoinflowWebView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import WebView from 'react-native-webview';
+import { CoinflowIFrameProps } from '@coinflowlabs/react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type CoinflowWebViewProps = Omit<CoinflowIFrameProps, 'IFrameRef'> & {
+    handleIframeMessages: ({ data }: {
+        data: string;
+    }) => Promise<void>;
+    WebViewRef: React.RefObject<WebView>;
+};
+export type WithStyles = {
+    style?: StyleProp<ViewStyle>;
+};
+export declare function CoinflowWebView({ publicKey, env, route, transaction, amount, handleIframeMessages, WebViewRef, style, }: CoinflowWebViewProps & WithStyles): JSX.Element;

package/build/CoinflowWebView.js

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import WebView from 'react-native-webview';
+import { CoinflowUtils } from '@coinflowlabs/react';
+export function CoinflowWebView({ publicKey, env, route, transaction, amount, handleIframeMessages, WebViewRef, style, }) {
+    const url = useMemo(() => {
+        return CoinflowUtils.getCoinflowUrl({
+            amount,
+            env,
+            publicKey,
+            route,
+            transaction,
+        });
+    }, [amount, env, publicKey, route, transaction]);
+    return useMemo(() => (React.createElement(WebView, { style: [
+            {
+                flex: 1,
+            },
+            style,
+        ], ref: WebViewRef, source: { uri: url }, onMessage: event => handleIframeMessages({ data: event.nativeEvent.data }) })), [url]);
+}
+//# sourceMappingURL=CoinflowWebView.js.map

package/build/CoinflowWebView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoinflowWebView.js","sourceRoot":"","sources":["../src/CoinflowWebView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAsB,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAUvE,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,EACH,KAAK,EACL,WAAW,EACX,MAAM,EACN,oBAAoB,EACpB,UAAU,EACV,KAAK,GAC6B;IAClC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE;QACvB,OAAO,aAAa,CAAC,cAAc,CAAC;YAClC,MAAM;YACN,GAAG;YACH,SAAS;YACT,KAAK;YACL,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjD,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CACJ,oBAAC,OAAO,IACN,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,CAAC;aACR;YACD,KAAK;SACN,EACD,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,EAAC,GAAG,EAAE,GAAG,EAAC,EAClB,SAAS,EAAE,KAAK,CAAC,EAAE,CACjB,oBAAoB,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAC,CAAC,GAEtD,CACH,EACD,CAAC,GAAG,CAAC,CACN,CAAC;AACJ,CAAC"}

package/build/CoinflowWithdraw.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CoinflowWithdrawProps } from '@coinflowlabs/react';
+import { WithStyles } from './CoinflowWebView';
+export declare function CoinflowWithdraw({ wallet, merchantId, env, connection, onSuccess, style, }: CoinflowWithdrawProps & WithStyles): JSX.Element | null;

package/build/CoinflowWithdraw.js

@@ -0,0 +1,14 @@
+import { CoinflowWebView } from './CoinflowWebView';
+import React from 'react';
+import { useIframeWallet } from './useIframeWallet';
+export function CoinflowWithdraw({ wallet, merchantId, env, connection, onSuccess, style, }) {
+    const { WebViewRef, handleIframeMessages } = useIframeWallet({
+        wallet,
+        connection,
+        onSuccess,
+    });
+    if (!wallet.publicKey || !wallet.connected)
+        return null;
+    return (React.createElement(CoinflowWebView, { publicKey: wallet.publicKey.toString(), WebViewRef: WebViewRef, handleIframeMessages: handleIframeMessages, route: `/withdraw/${merchantId}`, env: env, style: style }));
+}
+//# sourceMappingURL=CoinflowWithdraw.js.map

package/build/CoinflowWithdraw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoinflowWithdraw.js","sourceRoot":"","sources":["../src/CoinflowWithdraw.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAa,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAU,EACV,GAAG,EACH,UAAU,EACV,SAAS,EACT,KAAK,GAC8B;IACnC,MAAM,EAAC,UAAU,EAAE,oBAAoB,EAAC,GAAG,eAAe,CAAC;QACzD,MAAM;QACN,UAAU;QACV,SAAS;KACV,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAExD,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EACtC,UAAU,EAAE,UAAU,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,KAAK,EAAE,aAAa,UAAU,EAAE,EAChC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC"}

package/build/index.d.ts

@@ -0,0 +1,4 @@
+import { CoinflowUtils } from '@coinflowlabs/react';
+export { CoinflowUtils };
+export * from './CoinflowWithdraw';
+export * from './CoinflowPurchase';

package/build/index.js

@@ -0,0 +1,5 @@
+import { CoinflowUtils } from '@coinflowlabs/react';
+export { CoinflowUtils };
+export * from './CoinflowWithdraw';
+export * from './CoinflowPurchase';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/build/useIframeWallet.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WebView } from 'react-native-webview';
+import { IFrameWalletProps } from '@coinflowlabs/react';
+export declare function useIframeWallet({ wallet, connection, onSuccess, partialSigners, debugTx, }: IFrameWalletProps): {
+    WebViewRef: import("react").RefObject<WebView<{}>>;
+    handleIframeMessages: ({ data }: {
+        data: string;
+    }) => Promise<void>;
+};

package/build/useIframeWallet.js

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from 'react';
+import { useHandleIFrameMessages } from '@coinflowlabs/react';
+export function useIframeWallet({ wallet, connection, onSuccess, partialSigners, debugTx = false, }) {
+    const WebViewRef = useRef(null);
+    const sendIFrameMessage = useCallback((message) => {
+        if (!(WebViewRef === null || WebViewRef === void 0 ? void 0 : WebViewRef.current))
+            throw new Error('WebViewRef not defined');
+        WebViewRef.current.postMessage(message);
+    }, [WebViewRef]);
+    const { handleIframeMessages } = useHandleIFrameMessages({
+        wallet,
+        connection,
+        onSuccess,
+        partialSigners,
+        debugTx,
+        sendIFrameMessage,
+    });
+    return { WebViewRef, handleIframeMessages };
+}
+//# sourceMappingURL=useIframeWallet.js.map

package/build/useIframeWallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIframeWallet.js","sourceRoot":"","sources":["../src/useIframeWallet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAC,uBAAuB,EAAoB,MAAM,qBAAqB,CAAC;AAE/E,MAAM,UAAU,eAAe,CAAC,EAC9B,MAAM,EACN,UAAU,EACV,SAAS,EACT,cAAc,EACd,OAAO,GAAG,KAAK,GACG;IAClB,MAAM,UAAU,GAAG,MAAM,CAAU,IAAI,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAe,EAAE,EAAE;QAClB,IAAI,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAA;YAAE,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QACpE,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,EAAC,oBAAoB,EAAC,GAAG,uBAAuB,CAAC;QACrD,MAAM;QACN,UAAU;QACV,SAAS;QACT,cAAc;QACd,OAAO;QACP,iBAAiB;KAClB,CAAC,CAAC;IAEH,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,CAAC;AAC5C,CAAC"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@coinflowlabs/react-native",
+  "version": "0.1.0",
+  "description": "React Native Component for Coinflow Withdraw",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "react-native",
+    "react",
+    "typescript",
+    "solana",
+    "web3"
+  ],
+  "files": [
+    "build/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rimraf build",
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-native": ">=0.66.0"
+  },
+  "dependencies": {
+    "@coinflowlabs/react": "*",
+    "react-native-webview": "^11.25.0",
+    "bs58": "^5.0.0",
+    "@solana/web3.js": "^1.69.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-native": "^0.70.8",
+    "eslint-config-react-app": "^7.0.1",
+    "typescript": "^4.9.3"
+  }
+}