sync

.changeset/chilled-plants-agree.md

@@ -0,0 +1,5 @@
+---
+"@fxhash/project-sdk": patch
+---
+
+Fix issue importing from ParamProcessor

.changeset/sharp-crabs-lie.md

@@ -0,0 +1,5 @@
+---
+"@fxhash/config": patch
+---
+
+Release unified config module

.changeset/silly-cows-heal.md

@@ -0,0 +1,7 @@
+---
+"@fxhash/cli": patch
+"fxhash": patch
+---
+
+- Add `caputure` command
+- Update readme

packages/fxhash-cli/.gitignore

@@ -2,3 +2,4 @@ dist
 node_modules
 project
 static/tmp/
+static/fxhash-lock.json

packages/fxhash-cli/README.md

@@ -3,79 +3,104 @@
 The fx(hash) CLI exposes all toolkit features through a single CLI. 
 
 > The usage of the CLI is totally optional for publishing art on the fx(hash) platform. 
-> The CLI is only provides tools that should help you in the development process.
+> The CLI only provides tools that should help you in the development process.
 
-## Usage
-
-```
-npx fxhash <command> [args]
-```
-
-You can run all commands via `npx` if you don't want to install the `@fxhash/cli` package manually.
+## Prerequisits
 
+- `node >= 18.0.0`
+- `npm >= 9.0.0`
 
 ## Installation
 
 ```
-npm install @fxhash/cli
+npm install -g @fxhash/cli
 ```
 
-Will install the cli into your local environment making all commands accessible through script tags. Optionally you can install the cli with `-g` flag to make it globally available in your terminal.
+Will install the package into your local environment making all commands accessible through script tags. Optionally you can install the package with `-g` flag to make it globally available in your terminal.
 
 
 ## API
 
 
-### `$ fxhash create`
+### `$ fxhash-create`
 
 Create a new project in a single step. The terminal will ask you to provide a name and you can choose one of the predefined templates.
 
 
-### `fxhash build [options]`
+### `$ fxhash-build [options]`
 
 Creates a bundled version the artwork. The output file will be called `upload.zip` and can be uploaded as it is on fxhash.xyz.
 
 #### Options
 
-`--minify` Enable minification when creating the bundle. Default: `false` 
-`--noZip` Disable the zip file creation. Default: `false` 
+`--minify` Enable minification when creating the bundle. Default: `false`  
+`--noZip` Disable the zip file creation. Default: `false`  
 `--srcPath` The path to the source of the project. This is just relevant for ejected projects that actually have a nested structure. Default: `/src`  
 
 
-### `$ fxhash dev [options]`
+### `$ fxhash-dev [options]`
 
 Starts a development environment for the artwork. Each time `fxhash dev` is run the environment will check for updates and will keep itself up-to-date.
 
 #### Options
 
 `--portStudio` The port fxlens is served on. Default: `3300`  
 `--portProject` The port the project is served on. Default: `3301`  
-`--srcPath` The path to the source of the project. This is just relevant for ejected projects that actually have a nested structure. Default: `/src` 
-
+`--srcPath` The path to the source of the project. This is just relevant for ejected projects that actually have a nested structure. Default: `/src`  
 
-### `$ fxhash update [options]`
 
-> Note not fully working yet
+### `$ fxhash-update [options]`
 
-Will update the whole fxhash environment. It will download the latest version of fxlens and the fxhash-snippet. Optionally you can inject the latest snippet into your html file.
+Will update the whole fxhash environment. It will download the latest version of fx(lens) and will also update the `@fxhash/project-sdk` inside of your project.
 
 #### Options
 
-`--inject` Inject the latest snippet into the html file. Default: `false`
+`--srcPath` The path to the source of the project. This is just relevant for ejected projects that actually have a nested structure. Default: `/src`  
 
-### `$ fxhash eject`
 
-`--srcPath` The path to eject the code into. If you set a custom path here you also must specify this path to the other commands.
+### `$ fxhash-eject`
 
 Will eject your project into a nested struture. It will copy all your code into a `srcPath` (Default: `/src`) and create a `package.json` file in the root of your project. This will allow you to configure any custom tooling you like while still being able to use the `@fxhash/cli` in your ejected project.
 
-### `$ fxhash add [package@version]`
+#### Options
+
+`--srcPath` The path to eject the code into. If you set a custom path here you also must specify this path to the other commands.
+
 
-`--list` Lists all existing libraries that can be imported
-`--inject` Will also inject a <script /> tag into your projects html entry point pointing to the downloaded library
+### `$ fxhash-add <package@version>`
 
 Install an existing libaries. Beside being a convenience feature. This ensure that you are reusing existing libraries from the onchfs, which reduces the costs of storing your project on-chain 😎.
 
+#### Options
+
+`--list` Lists all existing libraries that can be imported  
+`--inject` Will also inject a `<script />` tag into your projects html entry point pointing to the downloaded library  
+
+
+### `$ fxhash-capture [args]`
+
+With the capture command you can test your bundled project agains the fx(hash) capture module. For params token you currently __must__ provide the inputBytes yourself. You can copy the inputBytes from the url when you are running the `fxhash-dev` command.
+
+#### Options
+
+`--zip` The path (absolute or relative) to the project's zip file you want to create the capture of. Default: `upload.zip`  
+`--hash` The hash that is injected when the capture is taken. Default: random value  
+`--minter` The minter address that is injected when the capture is taken. Default: random value  
+`--iteration` The iteration number that is injeted when the capture is taken. Default: 1  
+`--inputBytes` The inputBytes that are injected when the capture is taken. Default: `undefined`  
+`--x` The width in pixels. Capped at 2560. Default: `800`  
+`--y` The height in pixels. Capped at 2550. Default: `800`  
+`--trigger` The trigger mode. Either DELAY or FN_TRIGGER. Default: `delay`  
+`--delay` The delay in ms for the trigger mode DELAY. Default: `3000`  
+`--selector` The id of the canvas element to capture.  
+
+
+### `$ @fxhash/cli <command> [args]`
+
+The package also exposes a main entry-point where you can access each command respectively. Please note that you only write the actually command name when using the main entry point. So instead of `$ fxhash-dev` you can use `$ @fxhash/cli dev`. 
+
+Beside there is also the npx alias you can use with `npx fxhash` or install globally too. For more information see this [link](https://github.com/fxhash/fxhash-package/tree/main/packages/fxhash).
+
 ## Configuration with .env 
 
 The CLI accepts a `.env` file in the root folder. The `.env` file allows you to configure all options of the CLI an store them for your project, e.g.

packages/fxhash-cli/package.json

@@ -3,6 +3,10 @@
   "version": "0.0.8",
   "author": "fxhash",
   "license": "MIT",
+  "engines": {
+    "npm": ">=9.0.0",
+    "node": ">=18.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/fxhash/fxhash-package"
@@ -11,12 +15,14 @@
     "access": "public"
   },
   "bin": {
+    "@fxhash/cli": "./dist/fxhashCli.js",
     "fxhash-add": "./dist/add.js",
     "fxhash-build": "./dist/build.js",
     "fxhash-create": "./dist/create.js",
     "fxhash-dev": "./dist/dev.js",
     "fxhash-eject": "./dist/eject.js",
-    "fxhash-update": "./dist/update.js"
+    "fxhash-update": "./dist/update.js",
+    "fxhash-capture": "./dist/capture.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -52,15 +58,20 @@
     "ejs": "3.1.9",
     "express": "4.18.2",
     "github-download-directory": "3.0.0",
+    "glob": "10.3.10",
     "jsdom": "22.1.0",
     "keypress": "0.2.1",
     "keyv": "4.5.3",
     "lodash": "4.17.21",
+    "minimatch": "9.0.3",
     "node-html-parser": "6.1.9",
     "open": "8.4.2",
     "prettier": "2.8.8",
     "readline": "1.3.0",
+    "semver": "7.5.4",
+    "sha1": "1.1.1",
     "style-loader": "3.3.3",
+    "tar": "6.2.0",
     "webpack": "5.88.1",
     "webpack-dev-server": "4.15.1",
     "yargs": "17.7.2",
@@ -82,6 +93,7 @@
     "@types/lodash": "4.14.195",
     "@types/node": "20.6.0",
     "@types/prettier": "2.7.3",
+    "@types/sha1": "1.1.3",
     "@types/webpack": "5.28.2",
     "@types/webpack-dev-server": "4.7.2",
     "@types/yargs": "17.0.24",
@@ -104,4 +116,4 @@
     "dev": "tsup --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

packages/fxhash-cli/src/capture.ts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+import yargs from "yargs"
+import { hideBin } from "yargs/helpers"
+import { commandCapture } from "./cmd/capture/index"
+
+export default yargs(["capture", ...hideBin(process.argv)])
+  .scriptName("fxhash-add")
+  .usage("Usage: $0 [options]")
+  .command(commandCapture)
+  .help().argv

packages/fxhash-cli/src/capture/index.ts

@@ -0,0 +1,63 @@
+export enum CaptureTriggerMode {
+  DELAY = "DELAY",
+  FN_TRIGGER = "FN_TRIGGER",
+}
+
+export const CaptureTriggerModeList = Object.values(CaptureTriggerMode)
+
+export enum CaptureMode {
+  CANVAS = "CANVAS",
+  CUSTOM = "CUSTOM",
+  VIEWPORT = "VIEWPORT",
+}
+
+export const CaptureModeList = Object.values(CaptureMode)
+
+export enum StorageMode {
+  TEMPORARY = "temporary",
+}
+
+export enum CapturePriority {
+  HIGH = "high",
+}
+
+export interface CaptureSettings {
+  storageMethod: StorageMode
+  mode: CaptureMode | null
+  triggerMode: CaptureTriggerMode | null
+  delay: number
+  canvasSelector?: string
+  resX?: number
+  resY?: number
+  gpu?: boolean
+  withFeatures?: boolean
+  priority?: CapturePriority
+}
+
+export const DEFAULT_CAPTURE_SETTINGS: CaptureSettings = {
+  storageMethod: StorageMode.TEMPORARY,
+  mode: CaptureMode.VIEWPORT,
+  triggerMode: CaptureTriggerMode.DELAY,
+  delay: 1000,
+  resX: 800,
+  resY: 800,
+  gpu: false,
+  withFeatures: false,
+  priority: CapturePriority.HIGH,
+}
+
+export interface PreviewRequestBody extends CaptureSettings {
+  cid: string
+}
+
+const extractApi = "https://extract.fxhash-dev.xyz"
+
+export async function fetchExtract(body: PreviewRequestBody): Promise<any> {
+  return await fetch(`${extractApi}/extract`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  })
+}

packages/fxhash-cli/src/capture/math.ts

@@ -0,0 +1,56 @@
+// TODO: REFACTOR into package
+
+export const alphabet =
+  "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
+
+function b58dec(str: string): number {
+  return [...str].reduce(function (p: number, c: string): number {
+    return (p * alphabet.length + alphabet.indexOf(c)) | 0
+  }, 0)
+}
+
+function sfc32(seed: number[]): () => number {
+  let a = seed[0] | 0
+  let b = seed[1] | 0
+  let c = seed[2] | 0
+  let d = seed[3] | 0
+  return function () {
+    a |= 0
+    b |= 0
+    c |= 0
+    d |= 0
+    const t = (((a + b) | 0) + d) | 0
+    d = (d + 1) | 0
+    a = b ^ (b >>> 9)
+    b = (c + (c << 3)) | 0
+    c = (c << 21) | (c >>> 11)
+    c = (c + t) | 0
+    return (t >>> 0) / 4294967296
+  }
+}
+
+function matcher(str: string, start: number): number[] {
+  return str
+    .slice(start)
+    .match(new RegExp(".{" + ((str.length - start) >> 2) + "}", "g"))
+    .map(function (substring: string): number {
+      return b58dec(substring)
+    })
+}
+
+export function getRandomHash(n: number): string {
+  return Array(n)
+    .fill(0)
+    .map(function (_) {
+      return alphabet[(Math.random() * alphabet.length) | 0]
+    })
+    .join("")
+}
+
+export function getRandomFxhash() {
+  return "oo" + getRandomHash(49)
+}
+
+export function getRandomTezosAddress() {
+  return "tz1" + getRandomHash(33)
+}

packages/fxhash-cli/src/capture/url.ts

@@ -0,0 +1,32 @@
+import sha1 from "sha1"
+
+// TODO: Refactor into reusable package
+export function urlWithHashAndParams(
+  cid: string,
+  urlParams: {
+    fxhash?: string
+    fxiteration?: number | string
+    fxminter?: string
+    fxparams?: string | null
+    fxParamsAsQueryParams?: boolean
+    fxcontext?: string
+    noFxParamsUpdateQuery?: boolean
+  },
+  transform: (cid: string) => string
+) {
+  let url = `${transform(cid)}/?fxhash=${urlParams.fxhash}&fxiteration=${
+    urlParams.fxiteration
+  }&fxminter=${urlParams.fxminter}`
+  if (urlParams.fxcontext) url += `&fxcontext=${urlParams.fxcontext}`
+  if (urlParams.fxparams) {
+    if (urlParams.fxParamsAsQueryParams) {
+      url += `&fxparams=${urlParams.fxparams}`
+    } else {
+      if (!urlParams.noFxParamsUpdateQuery) {
+        url += `&fxparamsUpdate=${sha1(urlParams.fxparams)}`
+      }
+      url += `#0x${urlParams.fxparams}`
+    }
+  }
+  return url
+}