docs: more docs

docs/config.md

@@ -0,0 +1,32 @@
+# Config
+
+[api](api/variables/nftx_js.config)
+
+Nftx.js is fairly configurable out of the box:
+
+- set the default network for all requests
+- set custom urls for 3rd party resources
+- enable and disable multicall contracts and 0x pricing
+- set api keys
+
+## Configure
+
+Most settings come with sensible defaults but you can override them as required:
+
+```ts
+import { config } from 'nftx.js';
+
+config.configure({
+  network: 1,
+  subgraph: {
+    ERC721_SUBGRAPH: 'custom-subgraph-endpoint',
+  },
+  urls: {
+    ALCHEMY_URL: 'custom-alchemy-url',
+  },
+  contracts: {
+    multicall: false,
+    use0xApi: false,
+  },
+});
+```

docs/index.md

@@ -1,7 +1,11 @@
 # NFTX.js
 
+[api](api/modules/nftx_js.html) | [github](https://github.com/NFTX-project/nftxjs) | [npm](https://www.npmjs.com/package/nftx.js)
+
 This is an SDK that covers all of the core functionality of NFTX.
 
+Our aim is to be as technology-agnostic as possible. We're not tightly coupled with any view framework or environment. You can integrate with React, useDapp, Wagmi, Vue, Nodejs. Our only dependency is on [ethers.js](https://docs.ethers.org/ethers.js/v3.0/html/)
+
 - Buy
 - Sell
 - Swap
@@ -11,8 +15,6 @@ This is an SDK that covers all of the core functionality of NFTX.
 - Fetch a user or vault's positions
 - Get price quotes
 
-[api](api/modules/nftx_js.html) | [github](https://github.com/NFTX-project/nftxjs) | [npm](https://www.npmjs.com/package/nftx.js)
-
 ## Getting started
 
 ### Installation
@@ -50,6 +52,14 @@ const transaction = await buy({
 const receipt = await transaction.wait();
 ```
 
+## Core features
+
+- [config](config)
+- [vaults and pools](vaults)
+- [positions](positions)
+- [buy/sell/swap/stake](trading)
+- [@nftx/react](react)
+
 ## Integrate with React
 
 We also have a number of React-specific tools to make UI development easier:

docs/mdconfig.json

@@ -7,5 +7,50 @@
     "typographer": true,
     "force": true,
     "failOnWarn": true
+  },
+  {
+    "input": "config.md",
+    "output": "config.html",
+    "title": "Config | NFTX.js",
+    "styles": ["styles/styles.css", "styles/highlight.css"],
+    "typographer": true,
+    "force": true,
+    "failOnWarn": true
+  },
+  {
+    "input": "positions.md",
+    "output": "positions.html",
+    "title": "Positions | NFTX.js",
+    "styles": ["styles/styles.css", "styles/highlight.css"],
+    "typographer": true,
+    "force": true,
+    "failOnWarn": true
+  },
+  {
+    "input": "react.md",
+    "output": "react.html",
+    "title": "@nftx/react | NFTX.js",
+    "styles": ["styles/styles.css", "styles/highlight.css"],
+    "typographer": true,
+    "force": true,
+    "failOnWarn": true
+  },
+  {
+    "input": "trading.md",
+    "output": "trading.html",
+    "title": "Trading | NFTX.js",
+    "styles": ["styles/styles.css", "styles/highlight.css"],
+    "typographer": true,
+    "force": true,
+    "failOnWarn": true
+  },
+  {
+    "input": "vaults.md",
+    "output": "vaults.html",
+    "title": "NFTX.js",
+    "styles": ["styles/styles.css", "styles/highlight.css"],
+    "typographer": true,
+    "force": true,
+    "failOnWarn": true
   }
 ]

docs/positions.md

@@ -0,0 +1,37 @@
+# Positions
+
+[Position](api/types/nftx_js.Position)
+
+A position is a user's staked balances in a pool. This is made up of 3 main factors:
+
+1. total amount of liquidity staked (xSlp)
+2. total amount of inventory staked (xToken)
+3. total amount of claimable rewards (vToken)
+
+## fetchPosition
+
+[api](api/functions/nftx_js.fetchPosition)
+
+This returns detailed information about a user's position for a specific pool. It includes details like amount of liquidity/inventory staked, total eth value of the position, the amount of claimable rewards, and the % split between inventory/liquidity. It also contains all of the properties of the [pool](./api/types/nftx_js.Pool).
+
+If a user does not have a position (they've never staked in that pool before, or they've withdrawn their position in the past) this method will return a zero-balance position object.
+
+## fetchUserPositions
+
+[api](api/functions/nftx_js.fetchUserPositions)
+
+Gets a user's positions across all pools.
+
+## fetchVaultPositions
+
+[api](api/functions/nftx_js.fetchVaultPositions)
+
+Gets all positions for a single pool.
+
+## adjustPosition
+
+[api](api/functions/nftx_js.adjustPosition)
+
+This method allows you to roughly predict the impact of increasing or decreasing a position.
+
+Set an amount of liquidity or inventory to add to the position (or set a negative amount to remove it) and it will return a new position object with adjusted values, including the pool reserves, APY, % split, and pool share.

docs/react.md

@@ -0,0 +1,180 @@
+# @nftx/react
+
+[api](api/modules/_nftx_react)
+
+We provide a simple React integration for nftx.js that provides react hooks for all mutative actions (buy/sell/swap/stake/unstake/approve).
+
+These hooks handle additional logic like getting the network, provider/signer, mining transactions, api invalidation, and dropped & replaced transactions.
+
+Currently there are no hooks for reading data. There are so many methods of state management in the React ecosystem so use whatever pattern or library that you prefer. (Internally we like to use [React Query](https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/))
+
+## NftxProvider
+
+[api](api/functions/_nftx_react.NftxProvider)
+
+The NftxProvider component wraps your application and provides the network and provider to the library's hooks.
+
+```tsx
+<NftxProvider
+  network={1}
+  provider={myJsonRpcProvider}
+  signer={myProviderSigner}
+>
+  {children}
+</NftxProvider>
+```
+
+To get context info yourself you can use the following methods:
+
+```ts
+const network = useNetwork();
+const provider = useProvider();
+const signer = useSigner();
+```
+
+or
+
+```ts
+const { network, provider, signer } = useNftx();
+```
+
+## useTransaction
+
+[api](api/functions/_nftx_react.useTransaction)
+
+All of our hooks are built upon this hook. It is a hook that wraps a transaction callback function and returns a function and status metadata.
+
+The api is similar to React Query's [useMutation](https://tanstack.com/query/v4/docs/react/guides/mutations) except that it returns a tuple. Rather than a `'loading'` state, there are `'PendingSignature'` and `'Mining'` statuses.
+
+```ts
+const [
+  transact,
+  {
+    status,
+    error,
+    reset,
+    data: { transaction, receipt },
+  },
+] = useTransaction(() => contract.someInteraction(), {
+  onSuccess() {
+    // Called after mining is complete
+  },
+  onError(e) {
+    // Handle errors
+  },
+});
+```
+
+## events
+
+Part of `useTransaction`'s utility is that it pushes events to the NftxProvider. An even is pushed for each `status` a hook goes through.
+
+### useEvents
+
+[api](api/functions/_nftx_react.useEvents)
+
+Returns all events that have been pushed since app-start.
+
+### useLatestEvent
+
+[api](api/functions/_nftx_react.useLatestEvent)
+
+Returns the most recent event.
+
+### useAddEvent
+
+[api]([api](api/functions/_nftx_react.useAddEvent)
+
+Manually push an event to the queue
+
+### useOnEvent
+
+[api](api/functions/_nftx_react.useOnEvent)
+
+Subscribes and triggers a callback function whenver a new event it pushed.
+
+### Example of showing event notifications in the UI
+
+```tsx
+// Store some queue items at component-level
+const [queue, setQueue] = useState < TransactionEvent > []([]);
+
+// Add an item to our queue
+function addItem(item: TransactionEvent) {
+  setQueue((queue) => [...queue, item]);
+  // Remove from our queue after 5s
+  setTimeout(() => {
+    setQueue((queue) => queue.filter((x) => x !== item));
+  }, 5000);
+}
+
+// Listen for events and add them to the queue
+useOnEvent(addItem);
+
+// Render queue items
+return (
+  <ul>
+    {queue.map((item) => (
+      <li key={item.id}>{`${item.type} ${item.description}`}</li>
+    ))}
+  </ul>
+);
+```
+
+### Example of integrating with rainbowkit
+
+```tsx
+// Rainbowkit's own transaction log
+const addTransaction = useAddRecentTransaction();
+
+// When an event comes through for a new transaction, pass it to rainbowkit
+// We only need to pass the initial mining event as rainbowkit will then track that transaction itself
+useOnEvent('Mining', (e) => {
+  addRecentTransaction({
+    hash: e.transaction.hash,
+    description: e.description,
+  });
+});
+```
+
+## Testing
+
+A useful feature of `@nftx/react` is that it actually _provides_ all of nftx.js's methods as injectables:
+
+```ts
+const { buy } = useNftxCore();
+
+buy({ ... });
+```
+
+and all of the hooks provided by the library use these injected methods.
+
+What this means if you can actually (and easily) provide mocked or stubbed contract calls by wrapping your tests in the `nftxContext` provider:
+
+```tsx
+import { nftxContext } from '@nftx/react';
+
+const TestApp = ({ children }) => (
+  <nftxContext.Provider
+    value={{
+      core: {
+        buy: myMockContractInteraction,
+      },
+    }}
+  >
+    {children}
+  </nftxContext.Provider>
+);
+```
+
+You can also write your own hooks using the injected methods if you want:
+
+```ts
+const { fetchVaults } = useNftxCore();
+
+const [vaults, setVaults] = useState();
+
+useEffect(() => {
+  fetchVaults().then(setVaults);
+}, []);
+```

docs/styles/styles.css

@@ -45,11 +45,11 @@ pre {
 
 a {
   color: rgb(250, 250, 250);
-  text-decoration: none;
 }
 a:visited {
   color: rgb(200, 200, 200);
 }
 a:hover {
   text-decoration: underline;
+  color: purple;
 }