Get started on writing documentation

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/docs/.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
+  extends: [
+    "plugin:mdx/recommended",
+    "custom/library",
+  ],
+  overrides: [
+    {
+      files: ["*.astro"],
+      parser: "astro-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".astro"],
+      },
+      rules: {},
+    },
+    {
+      files: ['*.mdx', '*.md'],
+      parser: 'eslint-mdx'
+    }
+  ],
+  rules: {
+    '@typescript-eslint/triple-slash-reference': 'off',
+  }
+}

apps/docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/docs/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

apps/docs/astro.config.mjs

@@ -0,0 +1,50 @@
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+
+import cloudflare from "@astrojs/cloudflare";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: "Loop Decoder",
+      customCss: [
+        // Relative path to your custom CSS file
+        "./src/styles/custom.css",
+      ],
+      social: {
+        github: "https://github.com/3loop/loop-decoder",
+        twitter: "https://x.com/3loop_io",
+      },
+      sidebar: [
+        {
+          label: "Getting Started",
+          items: [
+            {
+              label: "Introduction",
+              link: "/getting-started",
+            },
+          ],
+        },
+        {
+          label: "Guides",
+          autogenerate: {
+            directory: "guides",
+          },
+        },
+        {
+          label: "Reference",
+          autogenerate: {
+            directory: "reference",
+          },
+        },
+        {
+          label: "Contribution",
+          link: "/contribution",
+        },
+      ],
+    }),
+  ],
+  output: "server",
+  adapter: cloudflare(),
+});

apps/docs/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "docs",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "check": "astro check",
+    "lint": "eslint --exit-on-fatal-error --ignore-path .eslintignore ./src",
+    "fix": "eslint --ignore-path .eslintignore ./src --fix"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.5.6",
+    "@astrojs/cloudflare": "^9.1.0",
+    "@astrojs/starlight": "^0.21.1",
+    "astro": "^4.4.15",
+    "sharp": "^0.33.2",
+    "typescript": "5.1.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^5.59.6",
+    "eslint": "^8.56.0",
+    "eslint-config-custom": "workspace:*",
+    "eslint-plugin-astro": "^0.31.0",
+    "eslint-plugin-mdx": "^2.3.2"
+  }
+}

apps/docs/src/content/config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from "astro:content";
+import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() }),
+  i18n: defineCollection({ type: "data", schema: i18nSchema() }),
+};

apps/docs/src/content/docs/contribution.md

@@ -0,0 +1,24 @@
+---
+title: Contribution
+description: How to contribute to Loop Decoder
+---
+
+Loop Decoder is an open-source project and we welcome contributions of all kinds. There are many ways to help, from reporting issues, contributing code, and helping us improve our community. All the development of Loop Decoder happens on [GitHub](github.com/3loop/loop-decoder).
+
+### Release with Changeset
+
+When adding a new feature, please use the [Changeset](https://github.com/changesets/changesets) tool to create a new release. This will automatically update the changelog and create a new release on GitHub.
+
+To create a new changelog, run the following command:
+
+```
+$ pnpm changeset
+```
+
+To create a new release, one of the maintainers will merge the changeset PR into the main branch. This will trigger a new release to npm.
+
+### Credits
+
+Some ideas for the decoder and interpreter were inspired by open-source software. Special thanks to:
+
+- [EVM Translator](https://github.com/metagame-xyz/evm-translator) - some data types and data manipulations were heavily inspired by this source.

apps/docs/src/content/docs/getting-started.md

@@ -0,0 +1,96 @@
+---
+title: Getting Started
+description: A guide in my new Starlight docs site.
+---
+
+### Requirements
+
+- TypeScript 5.x
+- `exactOptionalPropertyTypes` and `strict` enabled in your tsconfig.json
+
+### Dependencies
+
+To get started, install the package from npm, along with its peer dependencies:
+
+```sh
+npm i @3loop/transaction-decoder
+```
+
+### Quick Start
+
+To begin using the Loop Decoder, you need to create an instance of the LoopDecoder class. At a minimum, you must provide three data loaders:
+
+1. `getProvider`: This function returns an object with [Ethers](https://ethers.org) `JsonRpcProvider` based on the chain ID.
+
+```ts
+const getProvider = (chainId: number) => {
+  return { provider: new JsonRpcProvider(RPC_URL[chainId]) };
+};
+```
+
+2. `contractMetaStore`: This object has 2 properties `get` and `set` that returns and caches contract meta-information. See the `ContractData` type for the required properties.
+
+```ts
+const db = {}; // Your data source
+
+const contractMetaStore = {
+  get: async (req: {
+    address: string
+    chainID: number
+  }) => {
+    return db.getContractMeta(req)
+  },
+  set: async (req: {
+    address: string
+    chainID: number
+  }) {
+    // NOTE: not yet called as we do not have any automatic resolve strategy implemented
+  },
+}
+```
+
+3. `abiStore`: Similarly, this object has 2 properties `get` and `set` that returns and cache the contract or fragment ABI based on the chain ID, address, and/or signature.
+
+```ts
+const db = {}; // Your data source
+
+const abiStore = {
+  get: async (req: {
+    chainID: number;
+    address: string;
+    event?: string | undefined;
+    signature?: string | undefined;
+  }) => {
+    return db.getContractAbi(req);
+  },
+  set: async (req: {
+    address?: Record<string, string>;
+    signature?: Record<string, string>;
+  }) => {
+    await db.setContractAbi(req);
+  },
+};
+```
+
+Finally, you can create a new instance of the LoopDecoder class:
+
+```ts
+import { TransactionDecoder } from "@3loop/transaction-decoder";
+
+const decoded = new TransactionDecoder({
+  getProvider: getProvider,
+  abiStore: abiStore,
+  contractMetaStore: contractMetaStore,
+});
+```
+
+It's important to note that the Loop Decoder does not enforce any specific data source, allowing users of the library to load contract data as they see fit. Depending on the requirements of your application, you can either include the necessary data directly in your code for a small number of contracts or use a database as a cache.
+
+LoopDecoder instances provide a public method, `decodeTransaction`, which fetches and decodes a given transaction:
+
+```ts
+const result = await decoded.decodeTransaction({
+  chainID: 5,
+  hash: "0x...",
+});
+```