chore(demo): add basic avm-provider

sites/dapp-ui/.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

sites/dapp-ui/package.json

@@ -12,14 +12,16 @@
     "lint": "eslint \"{src,apps,libs,test}/**/*.{ts,tsx}\" --fix"
   },
   "dependencies": {
-    "@algorandfoundation/liquid-client": "github:algorandfoundation/liquid-auth-js#chore/switch-request-id-to-uuid",
+    "@algorandfoundation/provider": "github:algorandfoundation/wallet-provider-ts",
+    "@algorandfoundation/liquid-client": "github:algorandfoundation/liquid-auth-js",
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
     "@tanstack/react-query": "^5.20.5",
     "@tanstack/react-query-devtools": "^5.20.5",
+    "cbor-x": "^1.6.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

sites/dapp-ui/src/App.tsx

@@ -14,7 +14,7 @@ import { Algodv2 } from 'algosdk';
 import { AlgodContext } from '@/hooks';
 import { SignalClientContext } from '@/hooks/useSignalClient.ts';
 import { LinkMessage, SignalClient } from '@algorandfoundation/liquid-client';
-import { useAddressStore } from '@/store';
+import { useAddressStore } from '@/store.ts';
 const queryClient = new QueryClient();
 
 const algod = new Algodv2(

sites/dapp-ui/src/components/ArcMessage.tsx

@@ -0,0 +1,24 @@
+import { MessageState } from "@/store.ts";
+import Card from "@mui/material/Card";
+import { CardHeader } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import CardContent from "@mui/material/CardContent";
+
+export function ArcMessage(state: MessageState) {
+  return (
+    <Card sx={{ flex: 1, margin: 1.25 }} raised>
+      <CardHeader
+        title={state.message.reference}
+        subheader={state.message.id}
+      />
+      <CardContent>
+        <Typography variant="h5" color="text.secondary">
+          {state.status}
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          {JSON.stringify(state.message)}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

sites/dapp-ui/src/entry-main.tsx

@@ -2,7 +2,6 @@ import './index.css';
 import * as ReactDOM from 'react-dom/client';
 // import { StrictMode } from 'react';
 import App from './App.tsx';
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   // <StrictMode>
   <App />,

sites/dapp-ui/src/hooks/useDataChannel.ts

@@ -7,12 +7,17 @@
  */
 export function useDataChannel(onMessage?: (event: MessageEvent) => void) {
   const { dataChannel } = useContext(SignalClientContext);
+  function onError(...args: any[]) {
+    console.error('Data channel error', args);
+  }
   useEffect(() => {
     if (!dataChannel || !onMessage) return;
     dataChannel.addEventListener('message', onMessage);
+    dataChannel.addEventListener('error', onError)
     return () => {
       dataChannel.removeEventListener('message', onMessage);
-    };
+      dataChannel.removeEventListener('error', onError);
+    }
   }, [dataChannel, onMessage]);
 
   return dataChannel;

sites/dapp-ui/src/hooks/useSignalClient.ts

@@ -8,6 +8,8 @@ type SignalClientState = {
   setStatus: (_: 'connected' | 'disconnected') => void;
   dataChannel: RTCDataChannel | null;
   setDataChannel: (_: RTCDataChannel | null) => void;
+  loading: boolean;
+  setLoading: (_: boolean) => void;
 };
 export const SignalClientContext = createContext({
   client: null,

sites/dapp-ui/src/lib/provider.ts

@@ -0,0 +1,21 @@
+import {decode} from 'cbor-x'
+import { decodeUnsignedTransaction } from "algosdk";
+import { IARC0001Transaction, ResponseMessage, Results, fromBase64Url } from "@algorandfoundation/provider";
+
+export function attachEncodedSignature(address: string, txn: string, signature: string){
+  return decodeUnsignedTransaction(fromBase64Url(txn))
+    .attachSignature(address, fromBase64Url(signature));
+}
+
+export function attachSignedTransactionsFromResult(address: string, result: Results, txns: IARC0001Transaction[]){
+  let stxns = [];
+  for(let i = 0; i < txns.length; i++){
+    stxns.push(attachEncodedSignature(address, txns[i].txn, result.stxns[i]!!))
+  }
+  return stxns
+}
+
+export function fromResult(result: string): ResponseMessage {
+  return decode(fromBase64Url(result)) as ResponseMessage
+}
+