@monerium/sdk-react-provider 0.0.1

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# sdk-react-provider
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test sdk-react-provider` to execute the unit tests via [Vitest](https://vitest.dev/).

package/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'sdk-react-provider',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/sdk-react-provider',
+};

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@monerium/sdk-react-provider",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

package/project.json

@@ -0,0 +1,46 @@
+{
+  "name": "sdk-react-provider",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/sdk-react-provider/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/sdk-react-provider/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/sdk-react-provider"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/sdk-react-provider/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/provider';
+export * from './lib/context';
+export * from './lib/hook';

package/src/lib/context.tsx

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+import {
+  Profile,
+  Balances,
+  LinkAddress,
+  Order,
+  NewOrder,
+  Token,
+} from '@monerium/sdk';
+
+interface MoneriumContextValue {
+  authorize: () => Promise<void>;
+  isAuthorized: boolean;
+  profile: Profile | null;
+  balances: Balances[] | null;
+  loading: boolean;
+  loadingPlaceOrder: boolean;
+  loadingLinkAddress: boolean;
+  loadingBalances: boolean;
+  getBalances: () => Promise<void>;
+  linkAddress: (addressDetails: LinkAddress) => Promise<unknown>;
+  placeOrder: (
+    orderDetails: NewOrder,
+    supportingDocument?: File
+  ) => Promise<void>;
+  orders: Order[];
+  tokens: Token[];
+  error: unknown;
+}
+
+export const MoneriumContext = createContext<MoneriumContextValue | null>(null);

package/src/lib/hook.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useMonerium } from './hook';
+import { MoneriumProvider } from './provider';
+import { MoneriumClient } from '@monerium/sdk';
+
+jest.mock('@monerium/sdk', () => {
+  const mockMoneriumClient = {
+    authorize: jest.fn().mockResolvedValue(true),
+    connect: jest.fn().mockResolvedValue(true),
+    disconnect: jest.fn(),
+    getAuthContext: jest
+      .fn()
+      .mockResolvedValue({ defaultProfile: 'defaultProfile' }),
+    getProfile: jest.fn().mockResolvedValue({
+      name: 'John Doe',
+    }),
+    getBalances: jest.fn().mockResolvedValue([
+      /* mock balance data */
+    ]),
+    getOrders: jest.fn().mockResolvedValue([
+      /* mock order data */
+    ]),
+    getTokens: jest.fn().mockResolvedValue([
+      /* mock token data */
+    ]),
+  };
+
+  return {
+    MoneriumClient: jest.fn(() => mockMoneriumClient),
+    MoneriumContext: jest.fn(() => null),
+    // mock other exports as needed
+  };
+});
+
+// Mock Test Consumer Component
+const TestConsumerComponent = () => {
+  const context = useMonerium();
+
+  return (
+    <div>
+      <p data-testid="context">{JSON.stringify(context)}</p>
+    </div>
+  );
+};
+
+describe('useMonerium', () => {
+  test('returns the context value when used within a MoneriumProvider', async () => {
+    await act(async () => {
+      render(
+        <MoneriumProvider>
+          <TestConsumerComponent />
+        </MoneriumProvider>
+      );
+    });
+
+    await waitFor(() =>
+      expect(screen.getByTestId('context')).toHaveTextContent(
+        JSON.stringify({
+          isAuthorized: true,
+          profile: { name: 'John Doe' },
+          balances: [],
+          loading: false,
+          loadingPlaceOrder: false,
+          loadingLinkAddress: false,
+          loadingBalances: false,
+          orders: [],
+          tokens: [],
+          error: null,
+        })
+      )
+    );
+  });
+
+  test('throws an error when used outside a MoneriumProvider', () => {
+    // Suppress console error for this test
+    const consoleError = console.error;
+    console.error = jest.fn();
+
+    expect(() => render(<TestConsumerComponent />)).toThrow(
+      'useMonerium must be used within a MoneriumProvider'
+    );
+
+    // Restore console error
+    console.error = consoleError;
+  });
+});

package/src/lib/hook.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { MoneriumContext } from './context';
+
+export function useMonerium() {
+  const context = useContext(MoneriumContext);
+  if (context === null) {
+    throw new Error('useMonerium must be used within a MoneriumProvider');
+  }
+  return context;
+}

package/src/lib/provider.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MoneriumProvider } from './provider';
+import { useMonerium } from './hook';
+import { MoneriumClient } from '@monerium/sdk';
+
+jest.mock('@monerium/sdk', () => {
+  const mockMoneriumClient = {
+    authorize: jest.fn().mockResolvedValue(true),
+    connect: jest.fn().mockResolvedValue(true),
+    disconnect: jest.fn(),
+    getAuthContext: jest
+      .fn()
+      .mockResolvedValue({ defaultProfile: 'defaultProfile' }),
+    getProfile: jest.fn().mockResolvedValue({
+      name: 'John Doe',
+    }),
+    getBalances: jest.fn().mockResolvedValue([
+      /* mock balance data */
+    ]),
+    getOrders: jest.fn().mockResolvedValue([
+      /* mock order data */
+    ]),
+    getTokens: jest.fn().mockResolvedValue([
+      /* mock token data */
+    ]),
+    // mock other methods as needed
+  };
+
+  return {
+    MoneriumClient: jest.fn(() => mockMoneriumClient),
+    // mock other exports as needed
+  };
+});
+// Mock Test Consumer Component
+const TestConsumerComponent = () => {
+  const {
+    authorize,
+    isAuthorized,
+    profile,
+    // include other pieces of context you want to test
+  } = useMonerium();
+
+  return (
+    <div>
+      <button onClick={authorize}>Authorize</button>
+      {isAuthorized && <p>Authorized!</p>}
+      {profile && <p data-testid="profile">{profile.name}</p>}
+      {/* You can add more elements for other context values */}
+    </div>
+  );
+};
+
+describe('MoneriumProvider', () => {
+  test('provides context to consumer and allows function calls', async () => {
+    render(
+      <MoneriumProvider>
+        <TestConsumerComponent />
+      </MoneriumProvider>
+    );
+
+    // Test initial state
+    expect(screen.queryByText('Authorized!')).toBeNull();
+
+    // Simulate button click to authorize
+    screen.getByRole('button', { name: /authorize/i }).click();
+
+    // Test if authorize function has been called
+    await waitFor(() =>
+      expect(screen.getByText('Authorized!')).toBeInTheDocument()
+    );
+
+    // Test if profile data is present
+    await waitFor(() => {
+      expect(screen.getByTestId('profile')).toBeInTheDocument();
+      expect(screen.getByTestId('profile')).toHaveTextContent('John Doe');
+    });
+  });
+
+  // Add more tests for other functions and state changes
+});

package/src/lib/provider.tsx

@@ -0,0 +1,188 @@
+import React, { useCallback, FC, useEffect, useState, ReactNode } from 'react';
+
+import { MoneriumContext } from './context';
+
+import {
+  MoneriumClient,
+  LinkAddress,
+  Profile,
+  Balances,
+  Order,
+  NewOrder,
+  Token,
+} from '@monerium/sdk';
+
+interface MoneriumProviderProps {
+  children: ReactNode;
+  clientId?: string;
+  redirectUrl?: string;
+}
+
+export const MoneriumProvider: FC<MoneriumProviderProps> = ({
+  children,
+  clientId = 'f99e629b-6dca-11ee-8aa6-5273f65ed05b',
+  redirectUrl = 'http://localhost:5173',
+}) => {
+  const [monerium, setMonerium] = useState<MoneriumClient>();
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(false);
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [balances, setBalances] = useState<Balances[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingPlaceOrder, setLoadingPlaceOrder] = useState(false);
+  const [loadingLinkAddress, setLoadingLinkAddress] = useState(false);
+  const [loadingBalances, setLoadingBalances] = useState(false);
+  const [error, setError] = useState<Error | unknown | null>(null);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [tokens, setTokens] = useState<Token[]>([]);
+
+  // Initialize the SDK
+  useEffect(() => {
+    const sdk = new MoneriumClient({
+      clientId,
+      redirectUrl,
+    });
+    setMonerium(sdk);
+  }, []);
+
+  useEffect(() => {
+    const connect = async () => {
+      if (monerium) {
+        setIsAuthorized(await monerium.connect());
+      }
+    };
+
+    connect();
+
+    return () => {
+      if (monerium) {
+        monerium.disconnect();
+      }
+    };
+  }, [monerium]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (monerium && isAuthorized) {
+        try {
+          setLoading(true);
+          const authCtx = await monerium.getAuthContext();
+          const profileData = await monerium.getProfile(authCtx.defaultProfile);
+          const balanceData = await monerium.getBalances();
+          const ordersData = await monerium.getOrders();
+          const tokensData = await monerium.getTokens();
+          setProfile(profileData);
+          setBalances(balanceData);
+          setOrders(ordersData);
+          setTokens(tokensData);
+        } catch (err) {
+          console.error('Error fetching data:', err);
+          setError(err);
+        } finally {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchData();
+  }, [monerium, isAuthorized]);
+
+  const authorize = useCallback(async () => {
+    try {
+      if (monerium) {
+        await monerium.authorize();
+      }
+    } catch (err) {
+      console.error('Error during authorization:', err);
+      setError(err);
+    }
+  }, [monerium]);
+
+  const getBalances = useCallback(async () => {
+    if (monerium && isAuthorized) {
+      try {
+        setLoadingBalances(true);
+        const balances = await monerium.getBalances();
+        setBalances(balances);
+      } catch (err) {
+        console.error('Error getting balances:', err);
+        setError(err);
+      } finally {
+        setLoadingBalances(false);
+      }
+    }
+  }, [monerium, isAuthorized]);
+
+  const placeOrder = useCallback(
+    async (orderDetails: NewOrder, supportingDocument?: File) => {
+      if (monerium && isAuthorized) {
+        try {
+          setLoadingPlaceOrder(true);
+
+          let documentId;
+          if (parseInt(orderDetails.amount) > 15000 && supportingDocument) {
+            const uploadedDocument = await monerium.uploadSupportingDocument(
+              supportingDocument
+            );
+            documentId = uploadedDocument.id;
+          }
+
+          const newOrderDetails = {
+            ...orderDetails,
+            documentId: documentId,
+          };
+
+          const newOrder = await monerium.placeOrder(newOrderDetails);
+          setOrders((prevOrders) => [...prevOrders, newOrder]);
+        } catch (err) {
+          console.error('Error placing order:', err);
+          setError(err);
+        } finally {
+          setLoadingPlaceOrder(false);
+        }
+      }
+    },
+    [monerium, isAuthorized]
+  );
+
+  const linkAddress = useCallback(
+    async (addressDetails: LinkAddress) => {
+      if (monerium && isAuthorized && profile) {
+        try {
+          setLoadingLinkAddress(true);
+          return await monerium.linkAddress(profile.id, addressDetails);
+
+          // Update your state or do something with linkedAddress
+        } catch (err) {
+          console.error('Error linking address:', err);
+          setError(err);
+        } finally {
+          setLoadingLinkAddress(false);
+        }
+      }
+    },
+    [monerium, isAuthorized, profile]
+  );
+
+  return (
+    <MoneriumContext.Provider
+      value={{
+        authorize,
+        isAuthorized,
+        profile,
+        balances,
+        loading,
+        loadingPlaceOrder,
+        loadingLinkAddress,
+        loadingBalances,
+        getBalances,
+        linkAddress,
+        placeOrder,
+        orders,
+        tokens,
+        error,
+      }}
+    >
+      {children}
+    </MoneriumContext.Provider>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/sdk-react-provider',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'sdk-react-provider',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});