tbdex-wasm-example: Initial commit

TBD54566975 · Oct 29, 2024 · 94824e6 · 94824e6
1 parent 0b2b89b
commit 94824e6
Show file tree

Hide file tree

Showing 16 changed files with 9,347 additions and 0 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -14,6 +14,7 @@ javascript/pfi-aud-usd-tbdex          @michaelneale @acekyd
 javascript/shared-todo                @acekyd
 javascript/shared-todo-starter        @acekyd
 javascript/tbdex-pfi-exemplar         @michaelneale @mistermoe @jiyoontbd @acekyd
+javascript/tbdex-wasm-example         @nitro-neal
 javascript/todo                       @acekyd @blackgirlbytes
 javascript/todo-starter               @acekyd @blackgirlbytes
 javascript/vc-to-dwn-server           @blackgirlbytes

diff --git a/javascript/tbdex-wasm-example/.babelrc b/javascript/tbdex-wasm-example/.babelrc
@@ -0,0 +1,7 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      ["@babel/preset-react", { "runtime": "automatic" }],
+      "@babel/preset-typescript"
+    ]
+  }
diff --git a/javascript/tbdex-wasm-example/.gitignore b/javascript/tbdex-wasm-example/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/javascript/tbdex-wasm-example/.tbd-example.json b/javascript/tbdex-wasm-example/.tbd-example.json
@@ -0,0 +1,6 @@
+{
+  "name": "tbDex WASM Example",
+  "tests": {
+    "command": "npm test"
+  }
+}
diff --git a/javascript/tbdex-wasm-example/README.md b/javascript/tbdex-wasm-example/README.md
@@ -0,0 +1,71 @@
+# WASM Exemplar
+
+A complete implementation demonstrating the TBDex protocol flow using our TypeScript npm package.
+
+## Overview
+
+This project showcases a full TBDex flow implementation using our TBDex WASM sdk. It demonstrates the interaction between a client and a PFI endpoint using the TBDex protocol.
+
+## Prerequisites
+
+- Node.js (v14 or higher)
+- npm (v6 or higher)
+- Git
+
+## Dependencies
+
+- TBDex TypeScript package
+- A running PFI endpoint
+
+## Getting Started
+
+### Setting up the PFI Endpoint
+
+1. Clone the PFI example repository:
+```bash
+git clone https://github.com/TBD54566975/tbdex-rs.git
+cd tbdex-rs/examples/hosted-wallet-ts
+```
+
+2. Install dependencies and start the PFI server:
+```bash
+npm install
+npm run start:pfi
+```
+
+### Running the WASM Exemplar
+
+1. Clone this repository:
+```bash
+git clone https://github.com/TBD54566975/tbd-examples.git
+cd  javascript/tbdex-wasm-exemplar/
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+## Usage
+
+The application comes pre-configured with default Verifiable Credentials (VC) and Decentralized Identifier (DID) for testing purposes.
+
+### Quick Start
+1. Navigate to the application in your browser
+2. Click the "Execute Happy Path Flow" button to initiate a complete TBDex flow
+
+### Flow Visualization
+![TBDex Happy Path Flow](docs/happy-path-flow.png)
+
+## Architecture
+
+This project demonstrates:
+- WASM integration with TBDex
+- Protocol message flow
+- PFI endpoint interaction
+- VC and DID handling
diff --git a/javascript/tbdex-wasm-example/docs/happy-path-flow.png b/javascript/tbdex-wasm-example/docs/happy-path-flow.png
diff --git a/javascript/tbdex-wasm-example/index.html b/javascript/tbdex-wasm-example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>My React App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <!-- Import the main TypeScript file -->
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/javascript/tbdex-wasm-example/jest.config.js b/javascript/tbdex-wasm-example/jest.config.js
@@ -0,0 +1,13 @@
+export default {
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
+    },
+    moduleNameMapper: {
+      '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+      '^@/(.*)$': '<rootDir>/src/$1'
+    },
+    setupFilesAfterEnv: ['@testing-library/jest-dom'],
+    testMatch: ['<rootDir>/src/**/*.test.{ts,tsx,js,jsx}'],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+  };