@kryptos_connect/mobile-sdk 0.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Kryptos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,268 @@
+# @kryptos_connect/mobile-sdk
+
+Kryptos Connect Mobile SDK for React Native - Works with both **Expo** and **React Native CLI**. Simplifies Web3 finance integration for mobile apps.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @kryptos_connect/mobile-sdk react-native-svg
+```
+
+### Using yarn
+
+```bash
+yarn add @kryptos_connect/mobile-sdk react-native-svg
+```
+
+### For Expo
+
+```bash
+npx expo install @kryptos_connect/mobile-sdk react-native-svg
+```
+
+### iOS (React Native CLI only)
+
+```bash
+cd ios && pod install
+```
+
+## Core library (all-in-one)
+
+For Expo or bare React Native, install the core WalletConnect/AppKit deps together:
+
+```bash
+npx expo install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat react-native-safe-area-context expo-application
+```
+
+## Platform Setup
+
+### Expo (managed or prebuild)
+
+- Install the required peer deps (AppKit + WalletConnect) in one go:
+
+  ```bash
+  npx expo install @kryptos_connect/mobile-sdk react-native-svg @react-native-async-storage/async-storage @react-native-community/netinfo react-native-get-random-values @walletconnect/react-native-compat @reown/appkit-react-native @reown/appkit-ethers-react-native expo-application
+  ```
+
+- Expo SDK 53+: add `babel.config.js` to enable `unstable_transformImportMeta` for `valtio`:
+  ```js
+  // babel.config.js
+  module.exports = function (api) {
+    api.cache(true);
+    return {
+      presets: [["babel-preset-expo", { unstable_transformImportMeta: true }]],
+    };
+  };
+  ```
+
+### React Native CLI
+
+- Install peer deps:
+  ```bash
+  npm install @kryptos_connect/mobile-sdk react-native-svg @react-native-async-storage/async-storage @react-native-community/netinfo react-native-get-random-values @walletconnect/react-native-compat @reown/appkit-react-native @reown/appkit-ethers-react-native viem
+  ```
+- iOS: `cd ios && pod install`.
+
+## Quick Start
+
+### 1. Wrap your app with the Provider
+
+```tsx
+import { KryptosConnectProvider } from "@kryptos_connect/mobile-sdk";
+
+const config = {
+  appName: "Your App Name",
+  appLogo: "https://your-logo-url.com/logo.png", // or require('./logo.png')
+  clientId: "your-client-id",
+  theme: "light", // or 'dark'
+};
+
+export default function App() {
+  return (
+    <KryptosConnectProvider config={config}>
+      <YourApp />
+    </KryptosConnectProvider>
+  );
+}
+```
+
+### 2. Add the Connect Button
+
+```tsx
+import { KryptosConnectButton } from "@kryptos_connect/mobile-sdk";
+
+function YourComponent() {
+  const generateLinkToken = async () => {
+    // Call your backend API to generate a link token
+    const response = await fetch("https://your-api.com/generate-link-token");
+    const data = await response.json();
+    return data.link_token;
+  };
+
+  const handleSuccess = (userConsent) => {
+    console.log("Connection successful!", userConsent);
+    // Handle the public_token
+    const publicToken = userConsent?.public_token;
+  };
+
+  const handleError = () => {
+    console.log("Connection failed");
+  };
+
+  return (
+    <KryptosConnectButton
+      generateLinkToken={generateLinkToken}
+      onSuccess={handleSuccess}
+      onError={handleError}
+    />
+  );
+}
+```
+
+## WalletConnect / Reown AppKit configuration
+
+Passing a `walletConnectProjectId` to `KryptosConnectProvider` enables the built-in AppKit (WalletConnect v2) flow used by the `WalletConnectComponent`:
+
+```tsx
+import "@walletconnect/react-native-compat";
+import "react-native-get-random-values";
+import { KryptosConnectProvider } from "@kryptos_connect/mobile-sdk";
+
+const config = {
+  appName: "Your App",
+  appLogo: "https://your-logo.png",
+  clientId: "<kryptos-client-id>",
+  walletConnectProjectId: "<walletconnect-cloud-project-id>",
+};
+
+export default function App() {
+  return (
+    <KryptosConnectProvider config={config}>
+      <YourApp />
+    </KryptosConnectProvider>
+  );
+}
+```
+
+Behind the scenes the SDK creates an AppKit instance (see `src/wallet-connect/AppKitConfig.ts`) with Ethers adapter, common EVM chains, and persistent storage. If you need to customize chains, metadata, or features, copy that file into your app and adjust it following the Reown AppKit guide: https://docs.reown.com/appkit/overview
+
+### 3. Custom Button (Optional)
+
+You can also use a custom button:
+
+```tsx
+import { KryptosConnectButton } from "@kryptos_connect/mobile-sdk";
+import { Text, View } from "react-native";
+
+function CustomButton() {
+  return (
+    <KryptosConnectButton
+      generateLinkToken={generateLinkToken}
+      onSuccess={handleSuccess}
+      onError={handleError}
+    >
+      <View style={styles.customButton}>
+        <Text style={styles.customText}>Connect Your Wallet</Text>
+      </View>
+    </KryptosConnectButton>
+  );
+}
+```
+
+## API Reference
+
+### KryptosConnectProvider
+
+The provider component that wraps your app and provides the Kryptos context.
+
+#### Props
+
+| Prop       | Type            | Required | Description          |
+| ---------- | --------------- | -------- | -------------------- |
+| `config`   | `KryptosConfig` | Yes      | Configuration object |
+| `children` | `ReactNode`     | Yes      | Child components     |
+
+#### KryptosConfig
+
+```typescript
+type KryptosConfig = {
+  appName: string; // Your app name
+  appLogo?: ReactNode | string; // Logo URL or React Native Image source
+  theme?: "light" | "dark"; // Theme mode (default: 'light')
+  clientId: string; // Your Kryptos client ID
+  walletConnectProjectId?: string; // Optional WalletConnect project ID
+};
+```
+
+### KryptosConnectButton
+
+The main button component that triggers the connection flow.
+
+#### Props
+
+| Prop                | Type                             | Required | Description                       |
+| ------------------- | -------------------------------- | -------- | --------------------------------- |
+| `generateLinkToken` | `() => Promise<string>`          | Yes      | Function to generate a link token |
+| `onSuccess`         | `(consent: UserConsent) => void` | No       | Called on successful connection   |
+| `onError`           | `() => void`                     | No       | Called on connection failure      |
+| `children`          | `ReactNode`                      | No       | Custom button content             |
+| `style`             | `ViewStyle`                      | No       | Custom button container style     |
+| `textStyle`         | `TextStyle`                      | No       | Custom button text style          |
+
+### KryptosConnectModal
+
+If you need more control, you can use the modal component directly:
+
+```tsx
+import { KryptosConnectModal } from "@kryptos_connect/mobile-sdk";
+import { useState } from "react";
+
+function YourComponent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity onPress={() => setOpen(true)}>
+        <Text>Open Modal</Text>
+      </TouchableOpacity>
+
+      <KryptosConnectModal
+        open={open}
+        setOpen={setOpen}
+        generateLinkToken={generateLinkToken}
+        onSuccess={handleSuccess}
+        onError={handleError}
+      />
+    </>
+  );
+}
+```
+
+## Supported Platforms
+
+- ✅ iOS 12.0+
+- ✅ Android 5.0+ (API 21+)
+- ✅ Expo SDK 48+
+- ✅ React Native 0.60+
+
+## Peer Dependencies
+
+```json
+{
+  "react": ">=16.8.0",
+  "react-native": ">=0.60.0",
+  "react-native-svg": ">=12.0.0"
+}
+```
+
+## License
+
+MIT © Kryptos
+
+## Support
+
+- 📧 Email: support@kryptos.io
+- 📚 Documentation: https://docs.kryptos.io
+- 🐛 Issues: https://github.com/Kryptoskatt/kryptos-connect-mobile-package/issues

package/dist/index.d.mts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
+
+type KryptosConfig = {
+    appName: string;
+    appLogo?: ReactNode | string | ImageSourcePropType;
+    theme?: "light" | "dark";
+    clientId: string;
+    walletConnectProjectId?: string;
+};
+type KryptosUser = {
+    message: string;
+    user: {
+        uid: string;
+        email: string;
+        baseCurrency: string;
+        costbasisType: string;
+        country: string;
+        userType: string;
+        isConnect: boolean;
+        timezone: string;
+        createdAt: number;
+        updatedAt: number;
+        lastUsage: number;
+        connectMeta: {
+            lastUsage: number;
+            isAnonymous: boolean;
+            clientId: string;
+        };
+    };
+};
+type UserConsent = {
+    public_token: string;
+};
+
+interface KryptosConnectButtonProps {
+    onSuccess?: (userConsent: UserConsent | null) => void;
+    onError?: (error?: any) => void;
+    generateLinkToken: () => Promise<string>;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+declare const KryptosConnectButton: React.FC<KryptosConnectButtonProps>;
+interface KryptosConnectModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onSuccess?: (userConsent: UserConsent | null) => void;
+    onError?: (error?: any) => void;
+    generateLinkToken: () => Promise<string>;
+}
+declare const KryptosConnectModal: React.FC<KryptosConnectModalProps>;
+
+type KryptosContextType = KryptosConfig & {
+    isInitialized: boolean;
+    setIsInitialized: (value: boolean) => void;
+    linkToken: string;
+    setLinkToken: (value: string) => void;
+    user: KryptosUser | null;
+    setUser: (value: KryptosUser | null) => void;
+    email: string;
+    setEmail: (value: string) => void;
+    userConsent: UserConsent | null;
+    setUserConsent: (value: UserConsent | null) => void;
+};
+declare const KryptosConnectProvider: React.FC<{
+    children: React.ReactNode;
+    config: KryptosConfig;
+}>;
+declare const useKryptosConnect: () => KryptosContextType;
+
+export { KryptosConnectButton, type KryptosConnectButtonProps, KryptosConnectModal, KryptosConnectProvider, useKryptosConnect };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
+
+type KryptosConfig = {
+    appName: string;
+    appLogo?: ReactNode | string | ImageSourcePropType;
+    theme?: "light" | "dark";
+    clientId: string;
+    walletConnectProjectId?: string;
+};
+type KryptosUser = {
+    message: string;
+    user: {
+        uid: string;
+        email: string;
+        baseCurrency: string;
+        costbasisType: string;
+        country: string;
+        userType: string;
+        isConnect: boolean;
+        timezone: string;
+        createdAt: number;
+        updatedAt: number;
+        lastUsage: number;
+        connectMeta: {
+            lastUsage: number;
+            isAnonymous: boolean;
+            clientId: string;
+        };
+    };
+};
+type UserConsent = {
+    public_token: string;
+};
+
+interface KryptosConnectButtonProps {
+    onSuccess?: (userConsent: UserConsent | null) => void;
+    onError?: (error?: any) => void;
+    generateLinkToken: () => Promise<string>;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+declare const KryptosConnectButton: React.FC<KryptosConnectButtonProps>;
+interface KryptosConnectModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onSuccess?: (userConsent: UserConsent | null) => void;
+    onError?: (error?: any) => void;
+    generateLinkToken: () => Promise<string>;
+}
+declare const KryptosConnectModal: React.FC<KryptosConnectModalProps>;
+
+type KryptosContextType = KryptosConfig & {
+    isInitialized: boolean;
+    setIsInitialized: (value: boolean) => void;
+    linkToken: string;
+    setLinkToken: (value: string) => void;
+    user: KryptosUser | null;
+    setUser: (value: KryptosUser | null) => void;
+    email: string;
+    setEmail: (value: string) => void;
+    userConsent: UserConsent | null;
+    setUserConsent: (value: UserConsent | null) => void;
+};
+declare const KryptosConnectProvider: React.FC<{
+    children: React.ReactNode;
+    config: KryptosConfig;
+}>;
+declare const useKryptosConnect: () => KryptosContextType;
+
+export { KryptosConnectButton, type KryptosConnectButtonProps, KryptosConnectModal, KryptosConnectProvider, useKryptosConnect };