Merge pull request #9 from project-kardeshev/develop

fix(readme): update readme

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
-
+yarn format
+yarn lint
 yarn lint-staged

.prettierignore

@@ -4,4 +4,10 @@ public
 dist
 coverage
 CODEOWNERS
-docs
+docs
+.storybook
+.husky
+CHANGLELOG.md
+LICENSE
+yarn.lock
+storybook-static

README.md

@@ -1,25 +1,62 @@
-# Arweave Wallet Kit
-
-React Hooks and Components for better interaction with Arweave wallets. Modular, can support any Arweave-based wallet.
-
-> The Arweave Wallet Kit is in BETA. Please report bugs at the issues tab.
+# AO Wallet Kit
+
+React Hooks and Components for preconfigured and customizable interactions on AO.
+
+<!-- toc -->
+
+- [Supported wallets](#supported-wallets)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Config](#config)
+  - [App config](#app-config)
+    - [Available options](#available-options)
+  - [Custom theme](#custom-theme)
+    - [Available options](#available-options-1)
+      - [Font](#font)
+- [Terminology of Arweave Wallet Kit](#terminology-of-arweave-wallet-kit)
+- [Connect Button](#connect-button)
+  - [Usage](#usage)
+  - [Config](#config-1)
+- [Hooks](#hooks)
+  - [`useConnection`](#useconnection)
+    - [Usage](#usage-1)
+  - [`useApi`](#useapi)
+    - [Usage](#usage-2)
+  - [`useProfileModal`](#useprofilemodal)
+  - [`useActiveAddress`](#useactiveaddress)
+    - [Usage](#usage-3)
+  - [`usePublicKey`](#usepublickey)
+    - [Usage](#usage-4)
+  - [`usePermissions`](#usepermissions)
+    - [Usage](#usage-5)
+  - [`useAddresses`](#useaddresses)
+    - [Usage](#usage-6)
+  - [`useWalletNames`](#usewalletnames)
+    - [Usage](#usage-7)
+  - [`useStrategy`](#usestrategy)
+    - [Usage](#usage-8)
+
+<!-- tocstop -->
 
 ## Supported wallets
 
 - [ArConnect](https://arconnect.io)
 - [Arweave.app](https://arweave.app)
-- Any extension-based Arweave wallet, that injects it's ArConnect-like API into `window.arweaveWallet`
+- [Metamask](https://metamask.io/)
+- [Phantom](https://phantom.app/)
+- Any wallet that injects the `window.ethereum` or `window.arweaveWallet` API (wagmi is used internally)
+- Allows for custom strategies to be implemented so future integrations can be added!
 
 ## Installation
 
 ```sh
-yarn add arweave-wallet-kit
+yarn add @project-kardeshev/ao-wallet-kit
 ```
 
 or
 
 ```sh
-npm i arweave-wallet-kit
+npm i @project-kardeshev/ao-wallet-kit
 ```
 
 ## Setup
@@ -29,9 +66,9 @@ To use the library, you'll need to wrap your application with the Kit Provider.
 ```tsx
 const App = () => {
   return (
-    <ArweaveWalletKit>
+    <AOWalletKit>
       <YourApp />
-    </ArweaveWalletKit>
+    </AOWalletKit>
   );
 };
 ```
@@ -42,7 +79,7 @@ The Arweave Wallet Kit can be configured with information about your application
 
 ```tsx
 ...
-  <ArweaveWalletKit
+  <AOWalletKit
     config={{
       permissions: ["ACCESS_ADDRESS"],
       ensurePermissions: true,
@@ -54,13 +91,13 @@ The Arweave Wallet Kit can be configured with information about your application
     }}
   >
     <YourApp />
-  </ArweaveWalletKit>
+  </AOWalletKit>
 ...
 ```
 
 ### App config
 
-Using the `config` field of the `<ArweaveWalletKit>` provider component, you can define a name, a logo or the required permissions for your app.
+Using the `config` field of the `<AOWalletKit>` provider component, you can define a name, a logo or the required permissions for your app.
 
 #### Available options
 
@@ -93,7 +130,7 @@ Here's an example of how to use it:
 
 ```tsx
 ...
-<ArweaveWalletKit
+<AOWalletKit
   theme={{
     font: {
       fontFamily: "Arial"
@@ -106,11 +143,11 @@ Here's an example of how to use it:
 
 ## Terminology of Arweave Wallet Kit
 
-Arweave Wallet Kit supports several _strategies_. The word **strategy means an implementation of an Arweave Wallet** in the Kit. These strategies allow the user to communicate with all wallets the same way and with the same API.
+Arweave Wallet Kit supports several _strategies_. The word **strategy means an implementation of a Wallet** in the Kit. These strategies allow the user to communicate with all wallets the same way and with the same API.
 
 ## Connect Button
 
-To quickly integrate the Arweave Wallet Kit, you can use the `<ConnectButton>` component. It is a highly customizable button that supports the [ANS](https://ar.page) protocol to display information about the connected wallet.
+To quickly integrate the Arweave Wallet Kit, you can use the `<ConnectButton>` component. It is a highly customizable button that supports displaying profile information about the connected wallet.
 
 ### Usage
 
@@ -132,12 +169,11 @@ You can configure the Connect Button through it's props.
 | `accent`             | `string`  |  A theme color for the button                                                           |
 | `showBalance`        | `boolean` | Show user balance when connected                                                        |
 | `showProfilePicture` | `boolean` | Show user profile picture when connected                                                |
-| `useAns`             | `boolean` | Use ANS to grab profile information                                                     |
 | `profileModal`       | `boolean` | Show profile modal on click (if disabled, clicking the button will disconnect the user) |
 
 ## Hooks
 
-Inside the [`<ArweaveWalletKit>`](#setup), you can use all kinds of hooks that are reactive to the different [strategies](#terminology-of-arweave-wallet-kit). Some of the hooks / api functions might not be supported by all wallets.
+Inside the [`<AOWalletKit>`](#setup), you can use all kinds of hooks that are reactive to the different [strategies](#terminology-of-arweave-wallet-kit). Some of the hooks / api functions might not be supported by all wallets.
 
 ### `useConnection`
 
@@ -198,7 +234,7 @@ const address = useActiveAddress();
 
 ### `usePublicKey`
 
-Active address hook. Requires the `ACCESS_PUBLIC_KEY` permission.
+Active public key hook. Requires the `ACCESS_PUBLIC_KEY` permission.
 
 #### Usage
 
@@ -228,7 +264,7 @@ const addresses = useAddresses();
 
 ### `useWalletNames`
 
-All addresses hook. Returns the addresses in the connected wallet, known by Arweave Wallet Kit. Requires the `ACCESS_ALL_ADDRESSES` permission.
+All addresses hook. Returns the addresses in the connected wallet, known by Arweave Wallet Kit. Requires the `ACCESS_ALL_ADDRESSES` permission. Note this is note available for Ethereum wallets.
 
 #### Usage
 

package.json

@@ -51,7 +51,9 @@
     "serve-docs": "http-server storybook-static --port 8080",
     "test": "echo \"Warning: no test specified\"",
     "format": "prettier . --write",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "docs:update": "markdown-toc-gen insert README.md",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@ar.io/sdk": "^2.3.2",
@@ -117,6 +119,7 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
+    "lint-staged": "^15.2.10",
     "markdown-toc-gen": "^1.0.1",
     "node-stdlib-browser": "^1.2.1",
     "prettier": "^2.8.8",
@@ -138,10 +141,7 @@
     "react-dom": "^16.8.0 || 17.x || 18.x"
   },
   "lint-staged": {
-    "**/*.{ts,js,mjs,cjs,md,json}": [
-      "prettier --write ."
-    ],
-    "**/README.md": [
+    "./README.md": [
       "markdown-toc-gen insert"
     ]
   }

src/components/Provider.tsx

@@ -17,7 +17,7 @@ import Strategy from '../strategy/Strategy';
 import { Font, ThemeProvider, darkTheme, lightTheme } from '../theme';
 import { rgbToString } from '../utils/arweave';
 
-export function ArweaveWalletKit({
+export function AOWalletKit({
   children,
   theme = defaultTheme,
   config = defaultConfig,

src/hooks/useAns.ts

@@ -3,6 +3,26 @@ import { useEffect, useState } from 'react';
 import useAddress from './active_address';
 import useGatewayURL from './gateway';
 
+interface AnsProfile {
+  user: string;
+  currentLabel: string;
+  ownedLabels?: {
+    domain: string;
+    color: string;
+    subdomains: unknown[];
+    record: string | null;
+    created_at: number;
+    label: string;
+  }[];
+  nickname?: string;
+  address_color: string;
+  bio?: string;
+  avatar?: string;
+  links?: {
+    [key: string]: string;
+  };
+}
+
 /**
  * ANS profile hook
  */
@@ -44,23 +64,3 @@ export default function useAns() {
 
   return ans;
 }
-
-interface AnsProfile {
-  user: string;
-  currentLabel: string;
-  ownedLabels?: {
-    domain: string;
-    color: string;
-    subdomains: unknown[];
-    record: string | null;
-    created_at: number;
-    label: string;
-  }[];
-  nickname?: string;
-  address_color: string;
-  bio?: string;
-  avatar?: string;
-  links?: {
-    [key: string]: string;
-  };
-}

src/stories/ConnectButton.stories.tsx

@@ -1,17 +1,17 @@
 import type { ComponentStory } from '@storybook/react';
 
 import ConnectButton from '../components/ConnectButton';
-import { ArweaveWalletKit } from '../components/Provider';
+import { AOWalletKit } from '../components/Provider';
 
 export default {
   name: 'ConnectButton',
   component: ConnectButton,
 };
 
-const Template: ComponentStory<typeof ArweaveWalletKit> = (props) => (
-  <ArweaveWalletKit {...props}>
+const Template: ComponentStory<typeof AOWalletKit> = (props) => (
+  <AOWalletKit {...props}>
     <ConnectButton accent={'rgb(0, 122, 255)'} />
-  </ArweaveWalletKit>
+  </AOWalletKit>
 );
 
 export const Basic = Template.bind({});

src/stories/Connector.stories.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Modal } from '../components/Modal/Modal';
-import { ArweaveWalletKit } from '../components/Provider';
+import { AOWalletKit } from '../components/Provider';
 import useAddress from '../hooks/active_address';
 import useAddresses, { useWalletNames } from '../hooks/addresses';
 import useConnection from '../hooks/connection';
@@ -15,7 +15,7 @@ export default {
 
 export const Basic = () => {
   return (
-    <ArweaveWalletKit
+    <AOWalletKit
       config={{
         permissions: [
           'ACCESS_ADDRESS',
@@ -29,7 +29,7 @@ export const Basic = () => {
       }}
     >
       <Button />
-    </ArweaveWalletKit>
+    </AOWalletKit>
   );
 };
 

src/stories/Modal.stories.tsx

@@ -6,7 +6,7 @@ import { Footer } from '../components/Modal/Footer';
 import { Head } from '../components/Modal/Head';
 import { Modal } from '../components/Modal/Modal';
 import { Paragraph } from '../components/Paragraph';
-import { ArweaveWalletKit } from '../components/Provider';
+import { AOWalletKit } from '../components/Provider';
 import { Title, TitleWithParagraph } from '../components/Title';
 import useModal from '../hooks/modal';
 
@@ -19,7 +19,7 @@ export const Basic = () => {
   const modal = useModal(true);
 
   return (
-    <ArweaveWalletKit>
+    <AOWalletKit>
       <Modal {...modal.bindings}>
         <Head onClose={modal.bindings.onClose}>
           <Title>Connect wallet</Title>
@@ -42,7 +42,7 @@ export const Basic = () => {
           <Button>MORE</Button>
         </Footer>
       </Modal>
-    </ArweaveWalletKit>
+    </AOWalletKit>
   );
 };
 

src/strategy/strategies/Othent.ts

@@ -38,7 +38,7 @@ export default class OthentStrategy implements Strategy {
     try {
       const appInfo: OthentAppInfo = {
         name: typeof location === 'undefined' ? 'UNKNOWN' : location.hostname,
-        version: 'ArweaveWalletKit',
+        version: 'AOWalletKit',
         env: '',
       };
 

src/theme.ts

@@ -83,6 +83,6 @@ export const { ThemeProvider, useTheme } = theming;
 // the components that are outside throw the undefined error
 // naturally on production use, this will never happen, as
 // the users need to wrap their application with the
-// <ArweaveWalletKit> component anyway
+// <AOWalletKit> component anyway
 export const withTheme =
   theming.withTheme || ((val) => val as ThemingType<DefaultTheme>['withTheme']);

tsconfig.json

@@ -22,7 +22,8 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "jsx": "react-jsx"
   },
   "include": ["src"],
   "exclude": ["node_modules"]