Merge branch 'staging' into main

package.json

@@ -88,6 +88,7 @@
     "remark-unwrap-images": "^3.0.1",
     "sass": "^1.42.1",
     "scriptjs": "^2.5.9",
+    "semver": "^7.5.4",
     "sha1": "^1.1.1",
     "slate": "^0.81.0",
     "slate-history": "^0.66.0",
@@ -109,6 +110,7 @@
     "@types/react": "17.0.27",
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.1",
+    "@types/semver": "^7.5.0",
     "eslint": "8.0.0",
     "eslint-config-next": "12.2.6",
     "eslint-config-prettier": "^8.5.0",

src/components/FxParams/Controller/Bytes.module.scss

@@ -0,0 +1,9 @@
+.root {
+  width: 100%;
+  overflow-x: auto;
+  height: 100%;
+  padding: 4px;
+
+  .wrapper {
+  }
+}

src/components/FxParams/Controller/Bytes.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from "react"
+import css from "./Bytes.module.scss"
+import {
+  Controller,
+  FxParamControllerProps,
+  HTMLInputController,
+} from "./Controller"
+
+export function BytesController(props: FxParamControllerProps<"bytes">) {
+  const { options } = props
+
+  const hex = useMemo<string>(() => {
+    let out = ""
+    for (const v of props.value) {
+      out += v.toString(16).padStart(2, "0")
+    }
+    return out
+  }, [props.value])
+
+  return (
+    <Controller
+      id={props.id}
+      label={props.label}
+      layout={props.layout}
+      isCodeDriven={props.isCodeDriven}
+    >
+      <div className={css.root}>
+        <div className={css.wrapper}>{hex}</div>
+      </div>
+    </Controller>
+  )
+}

src/components/FxParams/Controller/Param.tsx

@@ -18,6 +18,7 @@ import {
 } from "../validation"
 import { SafeParseError, SafeParseSuccess, z } from "zod"
 import { ControllerInvalid } from "./Invalid"
+import { BytesController } from "./Bytes"
 
 interface FxParamControllerDefiniton<Type extends FxParamType> {
   type: Type
@@ -45,6 +46,11 @@ export const controllerDefinitions: FxParamControllerDefinitions = {
     controller: StringController,
     handler: (e) => e.target.value,
   },
+  bytes: {
+    type: "bytes",
+    controller: BytesController,
+    handler: (e) => e.target.value,
+  },
   boolean: {
     type: "boolean",
     controller: BooleanController,

src/components/FxParams/types.ts

@@ -4,44 +4,45 @@ export type FxParamType =
   | "boolean"
   | "color"
   | "string"
+  | "bytes"
   | "select"
 
-interface FxParamOption_bigint {
-  min?: number | bigint
-  max?: number | bigint
+export type FxParamOptionsMap = {
+  [Type in FxParamType]: {
+    number: {
+      min?: number
+      max?: number
+      step?: number
+    }
+    bigint: {
+      min?: number | bigint
+      max?: number | bigint
+    }
+    boolean: undefined
+    color: undefined
+    string: {
+      minLength?: number
+      maxLength?: number
+    }
+    bytes: {
+      length: number
+    }
+    select: {
+      options: string[]
+    }
+  }[Type]
 }
 
-interface FxParamOption_number {
-  min?: number
-  max?: number
-  step?: number
-}
-
-interface FxParamOption_string {
-  minLength?: number
-  maxLength?: number
-}
-
-interface FxParamOption_select {
-  options: string[]
-}
-
-export interface FxParamOptionsMap {
-  number: FxParamOption_number
-  bigint: FxParamOption_bigint
-  boolean: undefined
-  color: undefined
-  string: FxParamOption_string
-  select: FxParamOption_select
-}
-
-export interface FxParamTypeMap {
-  number: number
-  bigint: bigint
-  boolean: boolean
-  color: string
-  string: string
-  select: string
+export type FxParamTypeMap = {
+  [Type in FxParamType]: {
+    number: number
+    bigint: bigint
+    boolean: boolean
+    color: string
+    string: string
+    bytes: Uint8Array
+    select: string
+  }[Type]
 }
 
 export type FxParamUpdateMode = "page-reload" | "sync" | "code-driven"

src/components/FxParams/utils.ts

@@ -8,6 +8,7 @@ import {
   FxParamsData,
   FxParamDefinitions,
 } from "./types"
+import semver from "semver"
 
 export function rgbaToHex(r: number, g: number, b: number, a: number): string {
   const outParts = [
@@ -221,6 +222,33 @@ export const ParameterProcessors: FxParamProcessors = {
     },
   },
 
+  bytes: {
+    serialize: (input, def) => {
+      return Array.from(input)
+        .map((i) => i.toString(16).padStart(2, "0"))
+        .join("")
+    },
+    deserialize: (input, def) => {
+      const len = input.length / 2
+      const uint8 = new Uint8Array(len)
+      let idx
+      for (let i = 0; i < len; i++) {
+        idx = i * 2
+        uint8[i] = parseInt(`${input[idx]}${input[idx + 1]}`, 16)
+      }
+      return uint8
+    },
+    bytesLength: (def) => def.options.length,
+    random: (def) => {
+      const len = def.options?.length || 0
+      const uint8 = new Uint8Array(len)
+      for (let i = 0; i < len; i++) {
+        uint8[i] = (Math.random() * 255) | 0
+      }
+      return uint8
+    },
+  },
+
   select: {
     serialize: (input, def) => {
       // find the index of the input in the array of options
@@ -421,3 +449,8 @@ export function jsonStringifyBigint(data: any): string {
     return value
   })
 }
+
+export function fxParamsAsQueryParams(snippetVersion: string): boolean {
+  if (snippetVersion === "") return false
+  return !!(semver.valid(snippetVersion) && semver.lte(snippetVersion, "3.2.0"))
+}

src/components/FxParams/validation.ts

@@ -6,6 +6,7 @@ const ControllerTypeSchema = z.enum([
   "bigint",
   "color",
   "string",
+  "bytes",
   "boolean",
   "select",
 ])
@@ -26,6 +27,10 @@ const FxParamOptions_stringSchema = z.object({
   maxLength: z.number().optional(),
 })
 
+const FxParamOptions_bytesSchema = z.object({
+  length: z.number().gt(0),
+})
+
 const FxParamOptions_selectSchema = z.object({
   options: z.string().array().nonempty(),
 })
@@ -42,6 +47,16 @@ const StringControllerSchema = BaseControllerDefinitionSchema.extend({
   default: z.string().optional(),
 })
 
+const BytesControllerSchema = BaseControllerDefinitionSchema.extend({
+  type: z.literal(ControllerTypeSchema.enum.bytes),
+  options: FxParamOptions_bytesSchema,
+  default: z.any().optional(),
+  update: z.literal("code-driven", {
+    invalid_type_error: "Bytes parameters must be code-driven",
+    required_error: "Bytes parameters must be code-driven",
+  }),
+})
+
 const NumberControllerSchema = BaseControllerDefinitionSchema.extend({
   type: z.literal(ControllerTypeSchema.enum.number),
   options: FxParamOptions_numberSchema.optional(),
@@ -81,6 +96,7 @@ const ControllerDefinitionSchema = z.union([
   NumberControllerSchema,
   BigIntControllerSchema,
   SelectControllerSchema,
+  BytesControllerSchema,
   BooleanControllerSchema,
   ColorControllerSchema,
 ])
@@ -94,6 +110,7 @@ const controllerSchema = {
   bigint: BigIntControllerSchema,
   color: ColorControllerSchema,
   string: StringControllerSchema,
+  bytes: BytesControllerSchema,
   boolean: BooleanControllerSchema,
   select: SelectControllerSchema,
 }

src/components/GenerativeToken/GenerativeArtwork.tsx

@@ -15,6 +15,8 @@ import { ipfsGatewayUrl } from "../../services/Ipfs"
 import { Image } from "../Image"
 import { useReceiveTokenInfos } from "hooks/useReceiveTokenInfos"
 import { ButtonExploreParams } from "components/Button/ButtonExploreParams"
+import { fxParamsAsQueryParams } from "components/FxParams/utils"
+import sha1 from "sha1"
 
 interface Props {
   token: Pick<
@@ -105,7 +107,12 @@ export function GenerativeArtwork({
         url += `&fxminter=${previewMinter}`
       }
       if (previewInputBytes) {
-        url += `&fxparams=${previewInputBytes}`
+        if (fxParamsAsQueryParams(token.metadata.snippetVersion || "3.2.0")) {
+          url += `&fxparams=${previewInputBytes}`
+        } else {
+          url += `&fxparamsUpdate=${sha1(previewInputBytes)}`
+          url += `#0x${previewInputBytes}`
+        }
       }
       return url
     }
@@ -116,6 +123,7 @@ export function GenerativeArtwork({
     artworkArtifactUrl,
     token.metadata.artifactUri,
     token.metadata.generativeUri,
+    token.metadata.snippetVersion,
     previewMinter,
   ])
 

src/containers/Generative/Display/GenerativeDisplayIteration.tsx

@@ -71,7 +71,7 @@ const _GenerativeDisplayIteration = ({
   const isParamsToken = !!objkt.inputBytes
   const exploreParamsQuery = useMemo(() => {
     if (!isParamsToken) return null
-    return `fxhash=${objkt.generationHash}&fxparams=${objkt.inputBytes}`
+    return `fxhash=${objkt.generationHash}#0x${objkt.inputBytes}`
   }, [objkt, isParamsToken])
   const minter = objkt.minter
   const isProjectRedeemable = objkt.issuer.redeemables?.length > 0

src/containers/MintGenerative/Controller.tsx

@@ -59,6 +59,7 @@ const STEPS: Step[] = [
       "previewMinter",
       "previewInputBytes",
       "params",
+      "snippetVersion",
     ],
   },
   {

src/containers/MintGenerative/StepCheckFiles.tsx

@@ -31,6 +31,7 @@ export const StepCheckFiles: StepComponent = ({ onNext, state }) => {
     {
       cid: state.cidUrlParams!,
       context: "standalone",
+      snippetVersion: "",
     }
   )
 
@@ -44,6 +45,7 @@ export const StepCheckFiles: StepComponent = ({ onNext, state }) => {
         definition: runtime.definition.params,
         inputBytesSize: runtime.details.params.bytesSize,
       },
+      snippetVersion: runtime.definition.version,
     })
   }
 

src/containers/MintGenerative/StepConfigureCapture.tsx

@@ -23,6 +23,7 @@ import { InputCaptureSettings } from "../../components/Input/CaptureSettngs"
 import { validateCaptureSettings } from "../../utils/validations"
 import { LinkGuide } from "../../components/Link/LinkGuide"
 import { ipfsUrlWithHashAndParams } from "../../utils/ipfs"
+import { fxParamsAsQueryParams } from "components/FxParams/utils"
 
 export const StepConfigureCapture: StepComponent = ({ onNext, state }) => {
   const [settings, setSettings] = useState<CaptureSettings>(
@@ -71,6 +72,7 @@ export const StepConfigureCapture: StepComponent = ({ onNext, state }) => {
           fxiteration: state.previewIteration!,
           fxminter: state.previewMinter!,
           fxparams: state.previewInputBytes!,
+          fxParamsAsQueryParams: fxParamsAsQueryParams(state.snippetVersion!),
         },
         (cid) => cid
       ),
@@ -102,6 +104,7 @@ export const StepConfigureCapture: StepComponent = ({ onNext, state }) => {
         previewMinter: state.previewMinter,
         previewInputBytes: state.previewInputBytes,
         authHash: state.authHash1,
+        snippetVersion: state.snippetVersion,
       })
     }
   }

src/containers/MintGenerative/StepExtraSettings/StepExtraSettings.tsx

@@ -81,6 +81,7 @@ export const StepExtraSettings: StepComponent = ({ state, onNext }) => {
     cid: state.cidUrlParams!,
     hash: state.previewHash,
     iteration: state.previewIteration || 1,
+    snippetVersion: state.snippetVersion!,
   })
 
   // the explore options

src/containers/MintGenerative/StepVerification.tsx

@@ -10,6 +10,7 @@ import Link from "next/link"
 import { Button } from "../../components/Button"
 import { ArtworkFrame } from "../../components/Artwork/ArtworkFrame"
 import { ipfsGatewayUrl } from "../../services/Ipfs"
+import { fxParamsAsQueryParams } from "components/FxParams/utils"
 
 export const StepVerification: StepComponent = ({ onNext, state }) => {
   return (
@@ -31,6 +32,9 @@ export const StepVerification: StepComponent = ({ onNext, state }) => {
                     fxiteration: state.previewIteration!,
                     fxminter: state.previewMinter!,
                     fxparams: state.previewInputBytes!,
+                    fxParamsAsQueryParams: fxParamsAsQueryParams(
+                      state.snippetVersion!
+                    ),
                   })}
                   textWaiting="looking for content on IPFS"
                 />
@@ -44,6 +48,9 @@ export const StepVerification: StepComponent = ({ onNext, state }) => {
               fxiteration: state.previewIteration!,
               fxminter: state.previewMinter!,
               fxparams: state.previewInputBytes!,
+              fxParamsAsQueryParams: fxParamsAsQueryParams(
+                state.snippetVersion!
+              ),
             })}
             passHref
           >