Feature/spec 2.1 input types (#15)

* feat: adjust the actions spec types

* feat: refactor action components to use all new parameter types

* feat: adjust action container, prepare for input layouts

* feat: wip adjustments to layout

* feat: implement styling based on input validation

* feat: implement date, email, number, select, textarea, url inputs, improvements and adjustments

* feat: implement checkbox group, adjustments to other components

* feat: implement radio group, refactor ActionComponent

* feat: add input factory to layout render

* feat: fix focus-within, update icons for email and number, minor improvements

* fix: number input validation, on click targeting the wrong component

* feat: disable x default click behaviour, adjust email icon

* feat: validate form as a whole, fix checkbox group callbacks

* feat: adjust param description property name

* chore: replace local types with @solana/actions-spec

* fix: missing imports and failing types after upgrade

* fix: initial valid state, initial form state

* fix: form default values, query and body building

* chore: remove pattern from textarea, since not supported yet

* chore: remove magic string

* fix: initially disabled radio/checkbox if has selected, adjustments to action components

Author: fsher

bun.lockb

@@ -10,7 +10,8 @@
     "url": "https://github.com/dialectlabs/blinks"
   },
   "scripts": {
-    "build": "tsup-node"
+    "build": "tsup-node",
+    "dev": "tsup-node --watch"
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -42,6 +43,7 @@
     "dist"
   ],
   "devDependencies": {
+    "@solana/actions-spec": "^2.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.1",

package.json

@@ -0,0 +1,158 @@
+import { proxify, proxifyImage } from '../../utils/proxify.ts';
+import type { ActionAdapter } from '../ActionConfig.ts';
+import type {
+  ActionGetResponse,
+  ActionParameter,
+  ActionParameterType,
+} from '../actions-spec.ts';
+import {
+  type AbstractActionComponent,
+  ButtonActionComponent,
+  FormActionComponent,
+  MultiValueActionComponent,
+  SingleValueActionComponent,
+} from './action-components';
+
+const MULTI_VALUE_TYPES: ActionParameterType[] = ['checkbox'];
+
+interface ActionMetadata {
+  blockchainIds: string[];
+}
+
+export class Action {
+  private readonly _actions: AbstractActionComponent[];
+
+  private constructor(
+    private readonly _url: string,
+    private readonly _data: ActionGetResponse,
+    private readonly _metadata: ActionMetadata,
+    private _adapter?: ActionAdapter,
+  ) {
+    // if no links present, fallback to original solana pay spec
+    if (!_data.links?.actions) {
+      this._actions = [new ButtonActionComponent(this, _data.label, _url)];
+      return;
+    }
+
+    const urlObj = new URL(_url);
+    this._actions = _data.links.actions.map((action) => {
+      const href = action.href.startsWith('http')
+        ? action.href
+        : urlObj.origin + action.href;
+
+      return componentFactory(this, action.label, href, action.parameters);
+    });
+  }
+
+  public get url() {
+    return this._url;
+  }
+
+  public get icon() {
+    if (this._data.icon.startsWith('data:')) {
+      return this._data.icon;
+    }
+    return proxifyImage(this._data.icon).toString();
+  }
+
+  public get title() {
+    return this._data.title;
+  }
+
+  public get description() {
+    return this._data.description;
+  }
+
+  public get disabled() {
+    return this._data.disabled ?? false;
+  }
+
+  public get actions() {
+    return this._actions;
+  }
+
+  public get error() {
+    return this._data.error?.message ?? null;
+  }
+
+  public get metadata() {
+    return this._metadata;
+  }
+
+  public get adapter() {
+    if (!this._adapter) {
+      throw new Error('No adapter provided');
+    }
+
+    return this._adapter;
+  }
+
+  public setAdapter(adapter: ActionAdapter) {
+    this._adapter = adapter;
+  }
+
+  // be sure to use this only if the action is valid
+  static hydrate(
+    url: string,
+    data: ActionGetResponse,
+    metadata: ActionMetadata,
+    adapter?: ActionAdapter,
+  ) {
+    return new Action(url, data, metadata, adapter);
+  }
+
+  static async fetch(apiUrl: string, adapter?: ActionAdapter) {
+    const proxyUrl = proxify(apiUrl);
+    const response = await fetch(proxyUrl, {
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch action ${proxyUrl}, action url: ${apiUrl}`,
+      );
+    }
+
+    const data = (await response.json()) as ActionGetResponse;
+
+    // for multi-chain x-blockchain-ids
+    const blockchainIds = (
+      response?.headers?.get('x-blockchain-ids') || ''
+    ).split(',');
+
+    const metadata: ActionMetadata = {
+      blockchainIds,
+    };
+
+    return new Action(apiUrl, data, metadata, adapter);
+  }
+}
+
+const componentFactory = (
+  parent: Action,
+  label: string,
+  href: string,
+  parameters?: ActionParameter<ActionParameterType>[],
+): AbstractActionComponent => {
+  if (!parameters?.length) {
+    return new ButtonActionComponent(parent, label, href);
+  }
+
+  if (parameters.length > 1) {
+    return new FormActionComponent(parent, label, href, parameters);
+  }
+
+  const [parameter] = parameters;
+
+  if (!parameter.type) {
+    return new SingleValueActionComponent(parent, label, href, parameters);
+  }
+
+  if (MULTI_VALUE_TYPES.includes(parameter.type)) {
+    return new MultiValueActionComponent(parent, label, href, parameters);
+  }
+
+  return new SingleValueActionComponent(parent, label, href, parameters);
+};