@bitte-ai/react

Author: rubenmarcus

.eslintrc.js

@@ -0,0 +1,7 @@
+const path = require('path');
+module.exports = {
+  "extends": "../../.eslintrc.json",
+  "parserOptions": {
+    "project": path.resolve(__dirname, "../../tsconfig.lint.json"),
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,95 @@
+[//]: # `{ "title": "@mintbase-js/react", "order": "3" }`
+
+# @mintbase-js/react
+
+This package contains React helpers for interacting with Mintbase JS.
+
+<p align="center">
+
+<img  src='https://img.shields.io/npm/dw/@mintbase-js/react'  />
+
+<img  src='https://img.shields.io/bundlephobia/min/@mintbase-js/react'>
+
+</p>
+
+Example:
+You can check a [quick example of Simple Login](https://github.com/Mintbase/examples/tree/main/starter) using Next.js 14 and @mintbase-js/react
+
+
+[Check our Templates repository for Mintbase.js](https://github.com/Mintbase/templates)
+
+[Live Demo](https://starter.mintbase.xyz/)
+
+## Summary
+
+- [Installing](#Installing)
+
+- [BitteWalletContextProvider (default)](#bittewalletcontextprovider) : The default Bitte Wallet provider
+
+
+# Installing
+
+`@mintbase-js/react relies on React and React Dom version v18.2.0 due to @near-wallet-selector/modal-ui`
+
+### NPM:
+
+```
+npm install @mintbase-js/react
+npm install @near-wallet-selector/modal-ui
+```
+
+### Yarn:
+
+```
+yarn add @mintbase-js/react
+yarn add @near-wallet-selector/modal-ui
+```
+
+### PNPM:
+
+```
+pnpm install @mintbase-js/react
+pnpm install @near-wallet-selector/modal-ui
+```
+
+# BitteWalletContextProvider
+
+the default way of interacting with Mintbase Wallet is using the BitteWalletContextProvider
+
+{% code title="app.tsx" overflow="wrap" lineNumbers="true" %}
+
+## properties:
+
+**contractAddress** (optional): `If you set this it will connect the user using Limited Access Keys, set with your near contract address / your mintbase store address`
+
+**network** : ` mainnet | testnet`
+
+**callbackUrl** : `a valid https/http address to the user be sent after the transaction`
+
+**onlyMbWallet** : `boolean, it sets up only MintbaseWallet or if false(default) MintbaseWallet + default wallets`
+
+**additionalWallets** : `WalletModuleFactory[] extra wallets setup`
+
+```typescript
+import "@near-wallet-selector/modal-ui/styles.css";
+import { BitteWalletContextProvider } from  '@mintbase-js/react'
+
+<BitteWalletContextProvider
+  contractAddress="mycontract.mintbase1.near"
+  network="mainnet"
+  callbackUrl="https://www.mywebsite.com/callback"
+>
+   <Component {...pageProps} />
+</BitteWalletContextProvider>
+
+```
+
+# Troubleshooting
+The wallet runs only on client-side.
+
+Any other questions or issues you can contact support on our [Telegram Channel](https://telegram.me/mintdev).
+
+
+## License
+
+This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0).

dist/index.d.mts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { WalletSelector, AccountState, VerifyOwnerParams, VerifiedOwner, WalletModuleFactory } from '@near-wallet-selector/core';
+export { Account, BrowserWallet, Wallet, WalletBehaviourFactory, WalletModule, WalletModuleFactory } from '@near-wallet-selector/core';
+import { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
+
+interface ContextProviderType {
+    children: React.ReactNode;
+    callbackUrl?: string;
+    network?: string;
+    onlyMbWallet?: boolean;
+    contractAddress?: string;
+    additionalWallets?: Array<WalletModuleFactory>;
+    successUrl?: string;
+    failureUrl?: string;
+    onlyBitteWallet?: boolean;
+}
+type BitteWalletContext = {
+    selector: WalletSelector | undefined;
+    modal: WalletSelectorModal | undefined;
+    accounts: AccountState[];
+    activeAccountId: string | null;
+    isConnected: boolean;
+    isWaitingForConnection: boolean;
+    isWalletSelectorSetup: boolean;
+    errorMessage: string | null;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
+};
+declare const BitteWalletContext: React.Context<BitteWalletContext | null>;
+declare const BitteWalletContextProvider: React.FC<ContextProviderType>;
+declare const useBitteWallet: () => BitteWalletContext;
+
+type UseNearPriceReturn = {
+    nearPrice: number;
+    error: string | null;
+};
+declare const useNearPrice: () => UseNearPriceReturn;
+
+export { BitteWalletContext, BitteWalletContextProvider, useBitteWallet, useNearPrice };

dist/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { WalletSelector, AccountState, VerifyOwnerParams, VerifiedOwner, WalletModuleFactory } from '@near-wallet-selector/core';
+export { Account, BrowserWallet, Wallet, WalletBehaviourFactory, WalletModule, WalletModuleFactory } from '@near-wallet-selector/core';
+import { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
+
+interface ContextProviderType {
+    children: React.ReactNode;
+    callbackUrl?: string;
+    network?: string;
+    onlyMbWallet?: boolean;
+    contractAddress?: string;
+    additionalWallets?: Array<WalletModuleFactory>;
+    successUrl?: string;
+    failureUrl?: string;
+    onlyBitteWallet?: boolean;
+}
+type BitteWalletContext = {
+    selector: WalletSelector | undefined;
+    modal: WalletSelectorModal | undefined;
+    accounts: AccountState[];
+    activeAccountId: string | null;
+    isConnected: boolean;
+    isWaitingForConnection: boolean;
+    isWalletSelectorSetup: boolean;
+    errorMessage: string | null;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
+};
+declare const BitteWalletContext: React.Context<BitteWalletContext | null>;
+declare const BitteWalletContextProvider: React.FC<ContextProviderType>;
+declare const useBitteWallet: () => BitteWalletContext;
+
+type UseNearPriceReturn = {
+    nearPrice: number;
+    error: string | null;
+};
+declare const useNearPrice: () => UseNearPriceReturn;
+
+export { BitteWalletContext, BitteWalletContextProvider, useBitteWallet, useNearPrice };