feat: initialize channel connection and connect to ws

docker-compose.yml

@@ -58,8 +58,11 @@ services:
     ports:
       - "8000:8000"
     environment: 
-      NODE_ENV: development
+      VITE_NODE_ENV: development
       VITE_BOT_SERVICE_URL: http://localhost:3000
+      VITE_NODE_PORT: 3013
+      VITE_NODE_URL: http://localhost
+      VITE_COMPILER_URL: http://localhost:3080
       PORT: 8000
     networks:      
       - game_network

vuejs/.eslintrc.js

@@ -1,3 +1,5 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
 module.exports = {
   env: {
     node: true,
@@ -9,10 +11,10 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:vue/vue3-essential',
+    '@vue/typescript/recommended',
+    '@vue/eslint-config-typescript',
     'plugin:prettier/recommended',
     'prettier',
-    '@vue/typescript/recommended',
-    '@vue/eslint-config-airbnb',
   ],
   rules: {
     'prettier/prettier': ['error', { endOfLine: 'lf' }],

vuejs/package.json

@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "^12.0.0",
+    "@rushstack/eslint-patch": "^1.1.3",
     "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.0.0",
     "pinia": "^2.0.14",

vuejs/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
+import ChannelInitialization from './components/ChannelInitialization.vue';
 </script>
 
 <template>
@@ -8,7 +8,9 @@ import HelloWorld from './components/HelloWorld.vue';
     src="./assets/logo.png"
     :style="{ width: '100px' }"
   />
-  <HelloWorld msg="State Channel Demo Front" />
+  <Suspense>
+    <ChannelInitialization />
+  </Suspense>
 </template>
 
 <style>

vuejs/src/components/ChannelInitialization.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { Channel } from '@aeternity/aepp-sdk';
+import { EncodedData } from '@aeternity/aepp-sdk/es/utils/encoder';
+import { createAccount } from '../sdk/sdk';
+import { ChannelOptions } from '@aeternity/aepp-sdk/es/channel/internal';
+
+const account = await createAccount();
+
+const channelConfig = ref<ChannelOptions>();
+const loading = ref(true);
+const error = ref<{ message?: string }>({});
+const channelStatus = ref('Initializing');
+
+function registerEvents(channel: Channel) {
+  channel.on('statusChanged', (status) => {
+    channelStatus.value = status;
+  });
+}
+
+async function getChannelConfig() {
+  loading.value = true;
+  return fetch(import.meta.env.VITE_BOT_SERVICE_URL + '/open', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      address: account.selectedAddress,
+      port: '3001',
+      host: 'node',
+    }),
+  })
+    .then((res) => {
+      // a non-200 response code
+      if (!res.ok) {
+        // create error instance with HTTP status text
+        const error: Error & { json?: Promise<unknown> } = new Error(
+          res.statusText
+        );
+        error.json = res.json();
+        throw error;
+      }
+      return res.json();
+    })
+    .then((json) => {
+      // set the response data
+      completeChannelConfig(json);
+      channelConfig.value = json;
+    })
+    .catch((err) => {
+      error.value = err;
+      // In case a custom JSON error response was provided
+      if (err.json) {
+        return err.json.then((json: any) => {
+          // set the JSON response message
+          error.value.message = json.message;
+        });
+      }
+    })
+    .then(() => {
+      loading.value = false;
+    });
+}
+
+function completeChannelConfig(channelConf: ChannelOptions) {
+  Object.assign(channelConf, {
+    role: 'responder',
+    sign: (_tag: string, tx: EncodedData<'tx'>) => account.signTransaction(tx),
+    url:
+      import.meta.env.VITE_NODE_ENV == 'development'
+        ? 'ws://localhost:3014/channel'
+        : channelConf.url,
+  });
+}
+
+onMounted(async () => {
+  await getChannelConfig();
+  if (channelConfig.value == null) return;
+  const responderCh = await Channel.initialize(channelConfig.value);
+  registerEvents(responderCh);
+});
+</script>
+
+<template>
+  <h1>Create channel</h1>
+  <div>Status: {{ channelStatus }}</div>
+  <div v-if="!loading && channelConfig">
+    <pre>{{ JSON.stringify(channelConfig, null, 2) }}</pre>
+  </div>
+
+  <p v-if="loading">Still loading..</p>
+  <p v-if="error"></p>
+</template>
+
+<style scoped></style>

vuejs/src/sdk/sdk.ts

@@ -0,0 +1,37 @@
+import {
+  AeSdk,
+  Node,
+  generateKeyPair,
+  Channel,
+  MemoryAccount,
+} from '@aeternity/aepp-sdk';
+
+export const url =
+  `${import.meta.env.VITE_NODE_URL}:${import.meta.env.VITE_NODE_PORT}` ??
+  'http://localhost:3013';
+export const compilerUrl =
+  import.meta.env.VITE_COMPILER_URL ?? 'http://localhost:3080';
+export const networkId = import.meta.env.VITE_NETWORK_ID ?? 'ae_devnet';
+export const ignoreVersion = import.meta.env.IGNORE_VERSION === 'true';
+export const ACCOUNT_KEYPAIR = generateKeyPair();
+
+export async function createAccount() {
+  const account = new MemoryAccount({ keypair: ACCOUNT_KEYPAIR });
+  const node = new Node(url);
+  const aeSdk = new AeSdk({
+    nodes: [{ name: 'testnet', instance: node }],
+  });
+  await aeSdk.addAccount(account, { select: true });
+  return aeSdk;
+}
+
+export async function waitForChannel(channel: Channel): Promise<void> {
+  return new Promise((resolve) => {
+    channel.on('statusChanged', (status: string) => {
+      console.log(status);
+      if (status === 'open') {
+        resolve();
+      }
+    });
+  });
+}

vuejs/tests/basic.test.ts

@@ -1,16 +1,5 @@
-import { mount } from '@vue/test-utils';
 import { test, expect } from 'vitest';
-import HelloWorld from '../src/components/HelloWorld.vue';
 
-test('mount component', async () => {
-  expect(HelloWorld).toBeTruthy();
-
-  const wrapper = mount(HelloWorld, {
-    props: {
-      msg: 'Hello World!',
-    },
-  });
-
-  expect(wrapper.text()).toContain('Hello World!');
-  expect(wrapper.html()).toMatchSnapshot();
+test('temp test', async () => {
+  expect(true).toBeTruthy();
 });

vuejs/tsconfig.json

@@ -2,15 +2,15 @@
   "compilerOptions": {
     "target": "es2020",
     "useDefineForClassFields": true,
-    "module": "es6",
+    "module": "es2020",
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["es2020", "dom"],
+    "lib": ["es2020", "esnext", "dom"],
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

vuejs/vite.config.ts

@@ -15,4 +15,7 @@ export default defineConfig({
     },
     port: Number(process.env.PORT) || 8000,
   },
+  build: {
+    target: 'es2020',
+  },
 });