Initial web SDK with WebTransport RHP4 protocol support

.changeset/stupid-teachers-tie.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/sdk': patch
+---
+
+Initial web SDK with WebTransport RHP4 protocol support.

.github/actions/setup/action.yml

@@ -24,7 +24,10 @@ runs:
         registry-url: https://registry.npmjs.org
     - uses: actions/setup-go@v4
       with:
-        go-version: 'stable'
+        go-version: '1.20'
+    - uses: acifani/setup-tinygo@v2
+      with:
+        tinygo-version: '0.30.0'
     - name: Set up node cache
       uses: actions/cache@v3
       with:

.vscode/settings.json

@@ -6,5 +6,11 @@
   ],
   "[go]": {
     "editor.defaultFormatter": "golang.go"
+  },
+  "gopls": {
+    "build.env": {
+      "GOOS": "js",
+      "GOARCH": "wasm"
+    }
   }
 }

README.md

@@ -8,50 +8,41 @@ Web packages for the Sia project and ecosystem.
 
 User interfaces for the Sia software. The latest Sia software takes a modular approach, with separate daemons and user interfaces for renting, hosting, the explorer, and advanced wallet functionality.
 
-### [renterd](apps/renterd)
-
-![stability-beta](https://img.shields.io/badge/stability-beta-yellow.svg)
-
-The [`renterd`](https://github.com/siafoundation/renterd) user interface, focused on renting functionality.
-
-### [hostd](apps/hostd)
-
-![stability-beta](https://img.shields.io/badge/stability-beta-yellow.svg)
-
-The [`hostd`](https://github.com/siafoundation/hostd) user interface, focused on hosting functionality.
-
-### [walletd](apps/walletd)
-
-![stability-alpha](https://img.shields.io/badge/stability-alpha-orange.svg)
-
-The [`walletd`](https://github.com/siafoundation/walletd) user interface, includes a wallet with support for hot, cold, and hardware wallets.
-
-### [explorer](apps/explorer)
-
-![stability-mature](https://img.shields.io/badge/stability-mature-008000.svg)
-
-The `explorer` user interface, a Sia blockchain explorer interface that powers [siascan.com](https://siascan.com) and [zen.siascan.com](https://zen.siascan.com).
+- [renterd](apps/renterd) - The [`renterd`](https://github.com/siafoundation/renterd) user interface, focused on renting functionality.
+- [hostd](apps/hostd) - The [`hostd`](https://github.com/siafoundation/hostd) user interface, focused on hosting functionality.
+- [walletd](apps/walletd) - The [`walletd`](https://github.com/siafoundation/walletd) user interface, includes a wallet with support for hot, cold, and hardware wallets.
+- [explorer](apps/explorer) - The `explorer` user interface, a Sia blockchain explorer interface that powers [siascan.com](https://siascan.com) and [zen.siascan.com](https://zen.siascan.com).
 
 ## Libraries
 
-![stability-wip](https://img.shields.io/badge/stability-work_in_progress-orange.svg)
+![stability-beta](https://img.shields.io/badge/stability-beta-yellow.svg)
 
-> ⚠️ Please note that all libraries are currently unstable and subject to change or completely move. Do not depend on these libraries until version 1.0.0.
+### TypeScript
 
 The Sia web libraries provide developers with convenient TypeScript SDKs for using Sia core types, blockchain utilities, data fetching, daemon-specific React hooks, and components for common functionality such as Siacoin/fiat input fields, transaction lists, files, and more.
 
+- [@siafoundation/sdk](libs/sdk) - SDK for interacting directly with the Sia network from browsers and web clients.
 - [@siafoundation/react-core](libs/react-core) - Core library for building React hooks for interacting with a Sia daemon.
 - [@siafoundation/react-renterd](libs/react-renterd) - React hooks for interacting with `renterd`.
 - [@siafoundation/react-hostd](libs/react-hostd) - React hooks for interacting with `hostd`.
 - [@siafoundation/react-walletd](libs/react-walletd) - React hooks for interacting with `walletd`.
+- [@siafoundation/design-system](libs/design-system) - React-based design system used across Sia apps and websites.
 - [@siafoundation/react-sia-central](libs/react-sia-central) - React hooks for interacting with the Sia Central API.
 - [@siafoundation/sia-central](libs/sia-central) - Methods and types for interacting with the Sia Central API.
-- [@siafoundation/design-system](libs/design-system) - React-based design system used across Sia apps and websites.
 - [@siafoundation/data-sources](libs/data-sources) - Data sources used for stats on the website.
 - [@siafoundation/fonts](libs/fonts) - Next font configuration for use across apps.
 - [@siafoundation/units](libs/units) - Methods and types for converting and displaying units.
 - [@siafoundation/types](libs/types) - Core Sia types and library methods.
 
+### Go
+
+- [go.sia.tech/web/ui](ui) - Library for embedding NextJS applications in Go.
+- [go.sia.tech/web/sdk](sdk) - SDK for encoding RPCs, computing merkle proofs, and more. Compiled with WASM for use in the TypeScript SDK.
+- [go.sia.tech/web/walletd/wasm](walletd/wasm) - Wallet library for signing transactions. Compiled with WASM for use in the `walletd` application.
+- [go.sia.tech/web/walletd](walletd) - HTTP handler with embedded `walletd` application.
+- [go.sia.tech/web/renterd](renterd) - HTTP handler with embedded `renterd` application.
+- [go.sia.tech/web/hostd](hostd) - HTTP handler with embedded `hostd` application.
+
 ## Internal
 
 - [website](apps/website) - The main [sia.tech](https://sia.tech) website with information on the Sia project and the Sia Foundation.

apps/renterd/components/Files/FilesStatsMenu/FilesStatsMenuWarnings.tsx

@@ -22,7 +22,7 @@ export function FilesStatsMenuWarnings() {
   const syncStatusEl = useMemo(() => {
     if (!syncStatus.isSynced) {
       return (
-        <div className="flex flex-col gap-1">
+        <div key="syncStatus" className="flex flex-col gap-1">
           <Text size="12" font="mono" weight="medium" color="amber">
             Uploads are disabled until renterd is synced.
           </Text>
@@ -39,7 +39,7 @@ export function FilesStatsMenuWarnings() {
   const autopilotNotConfiguredEl = useMemo(() => {
     if (autopilotNotConfigured.active) {
       return (
-        <div className="flex flex-col gap-1">
+        <div key="autopilotNotConfigured" className="flex flex-col gap-1">
           <Text size="12" font="mono" weight="medium" color="amber">
             Uploads are disabled until settings are configured.
           </Text>
@@ -58,7 +58,7 @@ export function FilesStatsMenuWarnings() {
   const notEnoughContractsEl = useMemo(() => {
     if (notEnoughContracts.active) {
       return (
-        <div className="flex flex-col gap-1">
+        <div key="notEnoughContracts" className="flex flex-col gap-1">
           <Text size="12" font="mono" weight="medium" color="amber">
             Uploads are disabled until settings are configured.
           </Text>
@@ -76,7 +76,7 @@ export function FilesStatsMenuWarnings() {
   const contractSetMismatchEl = useMemo(() => {
     if (contractSetMismatch.active) {
       return (
-        <div className="flex flex-col gap-1">
+        <div key="contractSetMismatch" className="flex flex-col gap-1">
           <Text size="12" font="mono" weight="medium" color="amber">
             Uploaded data will not be managed by autopilot.
           </Text>

apps/renterd/contexts/keys/index.tsx

@@ -34,7 +34,6 @@ function useKeysMain() {
     if (!response.data) {
       return null
     }
-    console.log(response.data?.v4Keypairs)
     const data: KeyData[] =
       Object.entries(response.data?.v4Keypairs || {}).map(([key, secret]) => {
         return {

apps/renterd/next.config.js

@@ -1,4 +1,4 @@
-const { composePlugins, withNx } = require('@nx/next');
+const { composePlugins, withNx } = require('@nx/next')
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
@@ -32,10 +32,10 @@ const nextConfigExport = {
   output: 'export',
 }
 
-const nextConfig = process.env.NEXT_OUTPUT_EXPORT ? nextConfigExport : nextConfigServe
+const nextConfig = process.env.NEXT_OUTPUT_EXPORT
+  ? nextConfigExport
+  : nextConfigServe
 
-const plugins = [
-  withNx,
-];
+const plugins = [withNx]
 
-module.exports = composePlugins(...plugins)(nextConfig);
+module.exports = composePlugins(...plugins)(nextConfig)

apps/walletd/dialogs/WalletAddNewDialog/index.tsx

@@ -63,6 +63,7 @@ function getFields({
       type: 'text',
       title: 'Seed',
       onClick: (e) => {
+        // eslint-disable-next-line @typescript-eslint/no-extra-semi
         ;(e as MouseEvent<HTMLTextAreaElement>).currentTarget.select()
         copySeed()
       },

go.work

@@ -5,4 +5,5 @@ use (
 	./hostd
 	./renterd
 	./walletd
+	./sdk
 )

libs/data-sources/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/data-sources",

libs/fonts/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/fonts",

libs/next/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/next",

libs/react-core/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-core",

libs/react-hostd/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-hostd",

libs/react-icons/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-icons",

libs/react-renterd/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-renterd",

libs/react-sia-central/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-sia-central",

libs/react-walletd/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/react-walletd",

libs/sdk/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/sdk/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "rules": {
+    "@nx/dependency-checks": [
+      "error",
+      {
+        "ignoredFiles": ["libs/sdk/rollup.config.js"],
+        "ignoredDependencies": ["util"]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/sdk/.gitignore

@@ -0,0 +1 @@
+*.wasm

libs/sdk/CHANGELOG.md

@@ -0,0 +1 @@
+# @siafoundation/sdk

libs/sdk/README.md

@@ -0,0 +1,7 @@
+# sdk
+
+SDK for interacting directly with the Sia network from browsers and web clients.
+
+## Running unit tests
+
+Run `nx test sdk` to execute the unit tests via [Jest](https://jestjs.io).

libs/sdk/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'sdk',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/sdk',
+}

libs/sdk/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@siafoundation/sdk",
+  "description": "SDK for interacting directly with the Sia network from browsers and web clients.",
+  "version": "0.0.1",
+  "license": "MIT",
+  "dependencies": {},
+  "types": "./src/index.d.ts"
+}

libs/sdk/project.json

@@ -0,0 +1,58 @@
+{
+  "name": "sdk",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/sdk/src",
+  "projectType": "library",
+  "tags": [],
+  "namedInputs": {
+    "go": ["{workspaceRoot}/sdk/**/*"],
+    "production": ["default", "go"]
+  },
+  "targets": {
+    "compile": {
+      "executor": "nx:run-commands",
+      "inputs": ["go"],
+      "cache": true,
+      "options": {
+        "commands": [
+          "tinygo build -o libs/sdk/src/wasm/resources/sdk.wasm -target wasm ./sdk"
+        ]
+      }
+    },
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "dependsOn": ["compile", "^build"],
+      "inputs": ["production", "^production"],
+      "options": {
+        "outputPath": "dist/libs/sdk",
+        "tsConfig": "libs/sdk/tsconfig.lib.json",
+        "project": "libs/sdk/package.json",
+        "entryFile": "libs/sdk/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "compiler": "tsc",
+        "outputFileName": "index.js",
+        "rollupConfig": "libs/sdk/rollup.config.js",
+        "assets": [
+          {
+            "glob": "libs/sdk/*.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      },
+      "configurations": {}
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/sdk"],
+      "options": {
+        "jestConfig": "libs/sdk/jest.config.ts"
+      }
+    }
+  }
+}