neu-fi / orangekit Goto Github PK

View Code? Open in Web Editor NEW

8.0 2.0 2.0 651 KB

OrangeKit is a React library built for streamlining the process of connecting a Bitcoin wallet to a web apps.

Home Page: https://orangekit.xyz

JavaScript 5.99% CSS 2.84% TypeScript 49.70% Astro 27.68% MDX 13.79%

orangekit's Introduction

🍊 OrangeKit

OrangeKit is a React library built for web applications, designed to seamlessly integrate them with Bitcoin wallets.

🚀 Features

OrangeKit currently provides the following:

A "Connect Wallet" button component that supports signing in with:
- Xverse
- Unisat
- OrdinalSafe
- Other (Via manual message signing)
Read connected wallet address
BIP322 utilities:
- Signing
- Verify

🛠 Installation

npm install orangekit
# or
pnpm install orangekit
# or
yarn add orangekit
# or
bun install orangekit

🖥 Usage

App

import React from "react";
import { OrangeKitProvider } from "orangekit";
import "orangekit/dist/index.css";

export default function App() {
    return (
        <OrangeKitProvider>
            <YourApp />
        </OrangeKitProvider>
    );
}

ConnectButton

import { ConnectButton } from "orangekit";

export default function YourApp() {
    return <ConnectButton />;
}

📚 Reference

OrangeKitProvider

Properties:

children: The components to render inside the provider.
options: wallets: An array of wallet objects which the user can connect. Available wallets: {ordinalSafe, unisat, xverse, other} from "orangekit"

OrangeKitProvider({ children, options }: {
    children: React.ReactNode;
    options?: {
        wallets?: Wallet[];
    };
}):

ConnectButton

A component that triggers wallet connection.

useOrangeKit Hook

A custom hook that returns an object with various wallet functions and properties.

Methods & Properties:

account: An object of type Account.
signBip322: A function to sign a message using BIP322.

useOrangeKit(): {
	account: Account;
	signBip322: (message: string) => Promise<string>;
	};

Account Type

Properties:

connected: A boolean to check if a wallet is connected.
address: The wallet address or null.
balance: The balance of the wallet.
network: Either 'livenet', 'testnet', or null. authenticated: A boolean to check if the account has been authenticated.

type Account = {
	connected: boolean;
	address: string | null;
	balance: number;
	network: "livenet" | "testnet" | null;
	isAuthenticated: boolean;
};

🤝 Contribution Guidelines

We welcome all contributors to OrangeKit. Check out our CONTRIBUTING.md for guidelines on how to contribute to this project.

❓ Support and Questions

For any questions or support, please open an issue in this repository.

📜 License

OrangeKit is licensed under the MIT License.

orangekit's People

Contributors

Stargazers

Watchers

Forkers

daggerhashimoto alexcs24

orangekit's Issues

Create a modal for the connected state

Once a wallet is connected, the button should open a new modal.

It should display the following:

Shorthanded bitcoin address with the first and the last 5 characters.
Address copy icon button
Open the mempool.space link in new tab icon button
Disconnect button
Close modal icon button on top right
A backlink to orangekit.xyz with the logo on the left of it

Optional:

Unique image generated from the address:
- identicon
- jazzicon
- Deterministic emojis (as in Rainbow)
- OrangeKit logo
Bitcoin balance

Make the button and modals orange

Enable live reload for example when orangekit changes

When packages/example is running with pnpm dev, the changes on packages/orangekit should be live reloaded.

Add development instructions to the README

This library should be easy to contribute to. For that, we need extensive documentation on how to set up the development environment as well.

The package.json specifies pnpm and has pnpm scripts. For that, the developers need to have pnpm.

Handle Unisat address changes

Unisat emits an event on address change, show a toast to user on address changes and change the current shown address

Cannot handle external error when signing

const sign = async (message: string): Promise => { return new Promise((resolve, reject) => { try { (window as any).unisat .signMessage(message, "bip322-simple") .then((signature: string) => { resolve(signature); }); } catch (e) { reject(e); } }); };`

please change code

const sign = async (message: string): Promise<string> => {
  const signature = await (window as any).unisat.signMessage(
    message,
    "bip322-simple"
  );
  return signature;
};

Remove orangekit/public/index.html

I don't think the library needs the following file: https://github.com/neu-fi/orangekit/blob/main/packages/orangekit/public/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" content="#000000" />
		<meta
			name="description"
			content="Web site created using create-react-app"
		/>
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
		<!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
		<title>React App</title>
	</head>
	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
		<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
	</body>
</html>

Make toasts optional with a variant

Popping up toasts should be optional. However, we should dispatch events for what we display toasts for.

Provide events

Provide events for the toasts we show up. The toast functionality should consume these events.

neu-fi / orangekit Goto Github PK

orangekit's Introduction

🍊 OrangeKit

📌 Table of Contents

🚀 Features

🛠 Installation

🖥 Usage

App

ConnectButton

📚 Reference

OrangeKitProvider

ConnectButton

useOrangeKit Hook

Methods & Properties:

Account Type

🤝 Contribution Guidelines

❓ Support and Questions

📜 License

orangekit's People

Contributors

Stargazers

Watchers

Forkers

orangekit's Issues

Recommend Projects

Recommend Topics

Recommend Org