Skip to content
This repository was archived by the owner on Dec 16, 2025. It is now read-only.

Commit f9a0046

Browse files
ankushKunankushKun
committed
multi appname, non web wallet working
1 parent 10466c4 commit f9a0046

File tree

3 files changed

+239
-112
lines changed

3 files changed

+239
-112
lines changed

‎src/components/codecell.tsx‎

Lines changed: 74 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,92 @@
11
import { useEffect, useState } from "react";
2-
import { connect } from "@permaweb/aoconnect"
2+
import { connect } from "@permaweb/aoconnect";
33

44
async function getResults(process: string, cursor = "") {
5-
const ao = connect();
5+
const ao = connect();
66

7-
const r = await ao.results({
8-
process,
9-
from: cursor,
10-
sort: "ASC",
11-
limit: 999,
12-
})
7+
const r = await ao.results({
8+
process,
9+
from: cursor,
10+
sort: "ASC",
11+
limit: 999,
12+
});
1313

14-
if (r.edges.length > 0) {
15-
const newCursor = r.edges[r.edges.length - 1].cursor;
16-
const results = r.edges.map((e) => e.node);
17-
return { cursor: newCursor, results };
18-
} else {
19-
return { cursor, results: [] };
20-
}
14+
if (r.edges.length > 0) {
15+
const newCursor = r.edges[r.edges.length - 1].cursor;
16+
const results = r.edges.map((e) => e.node);
17+
return { cursor: newCursor, results };
18+
} else {
19+
return { cursor, results: [] };
20+
}
2121
}
2222

23+
export default function CodeCell({ cellId, appName, code = "print('Hello AO!')", devMode = false, nowallet = false, width = "100%", height = "300px", className = "", style = {}, onAOProcess = (pid: string) => {}, onNewMessage = (msgs: any[]) => {}, onInbox = (inbox: any) => {} }: { cellId: string; appName: string; code?: string; devMode?: boolean; nowallet?: boolean; width?: string; height?: string; className?: string; style?: React.CSSProperties; onAOProcess?: (pid: string) => void; onNewMessage?: (msgs: any[]) => void; onInbox?: (inbox: any) => void }) {
24+
// const [myAoId, setMyAoId] = useState<string>("")
25+
// const [intrvlId, setIntrvlId] = useState<number>(0)
26+
const url = new URL(devMode ? "http://localhost:3000/codecell" : "https://ide.betteridea.dev/codecell");
2327

24-
export default function CodeCell({ cellId,
25-
appName,
26-
code = "print('Hello AO!')",
27-
devMode = false,
28-
width = "100%",
29-
height = "300px",
30-
className = "",
31-
style = {},
32-
onAOProcess = (pid: string) => { },
33-
onNewMessage = (msgs: any[]) => { },
34-
onInbox = (inbox: any) => { }
35-
}: {
36-
cellId: string;
37-
appName: string;
38-
code?: string;
39-
devMode?: boolean;
40-
width?: string;
41-
height?: string;
42-
className?: string;
43-
style?: React.CSSProperties;
44-
onAOProcess?: (pid: string) => void;
45-
onNewMessage?: (msgs: any[]) => void;
46-
onInbox?: (inbox: any) => void;
47-
}) {
48-
// const [myAoId, setMyAoId] = useState<string>("")
49-
// const [intrvlId, setIntrvlId] = useState<number>(0)
50-
const url = new URL(devMode ? "http://localhost:3000/codecell" : "https://ide.betteridea.dev/codecell");
51-
52-
url.searchParams.append("app-name", appName);
53-
url.searchParams.append("code", code);
28+
url.searchParams.append("app-name", appName);
29+
url.searchParams.append("code", code);
30+
if (nowallet) url.searchParams.append("nowallet", "true");
5431

55-
useEffect(() => {
56-
const callback = async (e: any) => {
57-
if (e.data.action == "set_process") {
58-
if (!e.data.process) return
59-
onAOProcess(e.data.process);
60-
// setMyAoId(e.data.process)
61-
sessionStorage.setItem("cell-ao-id", e.data.process)
62-
} else if (e.data.action == "inbox") {
63-
if (!e.data.data) return
64-
onInbox(e.data.data)
65-
}
66-
};
32+
useEffect(() => {
33+
const callback = async (e: any) => {
34+
if (e.data.action == "set_process" && e.data.appname == appName) {
35+
if (!e.data.process) return;
36+
onAOProcess(e.data.process);
37+
// setMyAoId(e.data.process)
38+
const ids = JSON.parse(sessionStorage.getItem("cell-ids") || "{}");
39+
ids[appName] = e.data.process;
40+
sessionStorage.setItem("cell-ids", JSON.stringify(ids));
41+
} else if (e.data.action == "inbox") {
42+
if (!e.data.data) return;
43+
onInbox(e.data.data);
44+
}
45+
};
6746

68-
window.removeEventListener("message", callback);
69-
window.addEventListener("message", callback);
70-
return () => window.removeEventListener("message", callback);
71-
}, [])
47+
window.removeEventListener("message", callback);
48+
window.addEventListener("message", callback);
49+
return () => window.removeEventListener("message", callback);
50+
}, []);
7251

73-
useEffect(() => {
74-
if (!sessionStorage.getItem("cell-ao-id")) return
75-
// clearInterval(intrvlId)
76-
clearInterval(parseInt(sessionStorage.getItem("interval")! as string))
77-
async function fetchNewInboxMsg() {
78-
const localCursor = sessionStorage.getItem("cursor") || ""
79-
const r = await getResults(sessionStorage.getItem("cell-ao-id") as string, localCursor)
80-
if (!localCursor) // if ran for first time, set cursor and return
81-
return sessionStorage.setItem("cursor", r.cursor)
52+
useEffect(() => {
53+
clearInterval(parseInt(sessionStorage.getItem("interval")! as string));
8254

83-
if (r.cursor != sessionStorage.getItem("cursor")) {
84-
console.log(r.cursor)
85-
sessionStorage.setItem("cursor", r.cursor)
86-
if (r.results.length > 0) {
87-
// console.log(r.results)
88-
onNewMessage(r.results)
89-
}
90-
}
55+
async function fetchNewInboxMsg() {
56+
const ids = JSON.parse(sessionStorage.getItem("cell-ids") || "{}");
57+
const cursors = JSON.parse(sessionStorage.getItem("cursors") || "{}");
58+
Object.keys(ids).forEach(async (name) => {
59+
const localCursor = cursors[name];
9160

61+
const r = await getResults(ids[name], localCursor || "");
62+
if (!localCursor) {
63+
cursors[name] = r.cursor;
64+
return sessionStorage.setItem("cursors", JSON.stringify(cursors));
9265
}
9366

94-
sessionStorage.setItem("interval", setInterval(fetchNewInboxMsg, 2500).toString())
95-
96-
return () => clearInterval(parseInt(sessionStorage.getItem("interval")! as string))
97-
}, [])
67+
if (r.cursor != cursors[name]) {
68+
cursors[name] = r.cursor;
69+
sessionStorage.setItem("cursors", JSON.stringify(cursors));
70+
if (r.results.length > 0) {
71+
onNewMessage(r.results);
72+
}
73+
}
74+
});
75+
}
76+
sessionStorage.setItem("interval", setInterval(fetchNewInboxMsg, 3000).toString());
9877

78+
return () => clearInterval(parseInt(sessionStorage.getItem("interval")! as string));
79+
}, [appName]);
9980

100-
return <iframe
101-
id={cellId}
102-
src={url.toString()}
103-
width={width}
104-
height={height}
105-
className={className}
106-
style={{ ...style, backgroundColor: "black !important", borderRadius: "7px", border: "1px solid #222" }}
107-
// referrerPolicy="no-referrer"
81+
return (
82+
<iframe
83+
id={cellId}
84+
src={url.toString()}
85+
width={width}
86+
height={height}
87+
className={className}
88+
style={{ ...style, backgroundColor: "black !important", borderRadius: "7px", border: "1px solid #222" }}
89+
// referrerPolicy="no-referrer"
10890
/>
109-
}
91+
);
92+
}

‎src/main.tsx‎

Lines changed: 119 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,133 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom/client'
3-
import CodeCell from "./components/codecell"
4-
import getInbox from './lib/getInbox'
5-
import setCellCode from './lib/setCellCode'
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import CodeCell from "./components/codecell";
4+
import getInbox from "./lib/getInbox";
5+
import setCellCode from "./lib/setCellCode";
66

77
function onInput(e: string) {
8-
console.log(e)
9-
setCellCode("1", e, true)
8+
console.log(e);
9+
setCellCode("1", e, true);
1010
}
1111

12-
13-
ReactDOM.createRoot(document.getElementById('root')!).render(
12+
ReactDOM.createRoot(document.getElementById("root")!).render(
1413
<React.StrictMode>
15-
<div style={{ padding: "10px", backgroundColor: "black", height: "100vh" }}>
16-
<button onClick={() => {
17-
getInbox("1", true)
18-
}}>get inbox</button>
14+
<div style={{ margin: "-10px", padding: "10px", backgroundColor: "black", minHeight: "100vh" }}>
15+
<button
16+
onClick={() => {
17+
getInbox("1", true);
18+
}}
19+
>
20+
get inbox
21+
</button>
1922

20-
<input type="text" id="code" onChange={(e) => { onInput(e.target.value) }} />
23+
<input
24+
type="text"
25+
id="code"
26+
onChange={(e) => {
27+
onInput(e.target.value);
28+
}}
29+
/>
2130

22-
<CodeCell appName="test-cell" cellId="1" devMode
31+
<CodeCell
32+
appName="AA"
33+
cellId="1"
34+
code="Owner..' '..ao.id"
35+
devMode
36+
// nowallet
37+
onAOProcess={(p) => console.log("got pid from webview", p)}
38+
onNewMessage={(message) => {
39+
message.forEach((m) => {
40+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
41+
});
42+
}}
43+
onInbox={(i) => console.log("got inbox", i)}
44+
/>
45+
<CodeCell
46+
appName="BB"
47+
cellId="2"
48+
code="Owner..' '..ao.id"
49+
devMode
50+
// nowallet
51+
onAOProcess={(p) => console.log("got pid from webview", p)}
52+
onNewMessage={(message) => {
53+
message.forEach((m) => {
54+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
55+
});
56+
}}
57+
onInbox={(i) => console.log("got inbox", i)}
58+
/>
59+
<CodeCell
60+
appName="CC"
61+
cellId="3"
62+
devMode
63+
code="Owner..' '..ao.id"
64+
// nowallet
65+
onAOProcess={(p) => console.log("got pid from webview", p)}
66+
onNewMessage={(message) => {
67+
message.forEach((m) => {
68+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
69+
});
70+
}}
71+
onInbox={(i) => console.log("got inbox", i)}
72+
/>
73+
<CodeCell
74+
appName="CC"
75+
cellId="3.1"
76+
devMode
77+
code="Owner..' '..ao.id"
78+
// nowallet
79+
onAOProcess={(p) => console.log("got pid from webview", p)}
80+
onNewMessage={(message) => {
81+
message.forEach((m) => {
82+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
83+
});
84+
}}
85+
onInbox={(i) => console.log("got inbox", i)}
86+
/>
87+
<hr />
88+
<hr />
89+
<CodeCell
90+
appName="nw-A"
91+
cellId="4"
92+
devMode
93+
code="Owner..' '..ao.id"
94+
nowallet
95+
onAOProcess={(p) => console.log("got pid from webview", p)}
96+
onNewMessage={(message) => {
97+
message.forEach((m) => {
98+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
99+
});
100+
}}
101+
onInbox={(i) => console.log("got inbox", i)}
102+
/>
103+
<CodeCell
104+
appName="nw-A"
105+
cellId="5"
106+
devMode
107+
code="Owner..' '..ao.id"
108+
nowallet
109+
onAOProcess={(p) => console.log("got pid from webview", p)}
110+
onNewMessage={(message) => {
111+
message.forEach((m) => {
112+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
113+
});
114+
}}
115+
onInbox={(i) => console.log("got inbox", i)}
116+
/>
117+
<CodeCell
118+
appName="nw-B"
119+
cellId="6"
120+
devMode
121+
code="Owner..' '..ao.id"
122+
nowallet
23123
onAOProcess={(p) => console.log("got pid from webview", p)}
24124
onNewMessage={(message) => {
25125
message.forEach((m) => {
26-
if (m.Output)
27-
if (m.Output.print)
28-
console.log(m.Output.data)
29-
})
126+
if (m.Output) if (m.Output.print) console.log(m.Output.data);
127+
});
30128
}}
31129
onInbox={(i) => console.log("got inbox", i)}
32130
/>
33131
</div>
34-
</React.StrictMode>
35-
)
132+
</React.StrictMode>,
133+
);

‎vite.config.ts.timestamp-1718890642315-1faf2aee25154.mjs‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// vite.config.ts
2+
import { defineConfig } from "file:///Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell/node_modules/vite/dist/node/index.js";
3+
import react from "file:///Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell/node_modules/@vitejs/plugin-react-swc/index.mjs";
4+
import path from "path";
5+
import dts from "file:///Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell/node_modules/vite-plugin-dts/dist/index.mjs";
6+
import typescript from "file:///Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell/node_modules/@rollup/plugin-typescript/dist/es/index.js";
7+
import { typescriptPaths } from "file:///Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell/node_modules/rollup-plugin-typescript-paths/dist/index.js";
8+
var __vite_injected_original_dirname = "/Users/ankush/Developer/ARWEAVE/betteridea-dev/codecell";
9+
var vite_config_default = defineConfig({
10+
build: {
11+
manifest: true,
12+
minify: true,
13+
reportCompressedSize: true,
14+
lib: {
15+
entry: path.resolve(__vite_injected_original_dirname, "src/index.ts"),
16+
name: "@betteridea/codecell",
17+
fileName: (format) => `index.${format}.js`
18+
},
19+
rollupOptions: {
20+
external: ["react", "react-dom"],
21+
plugins: [
22+
typescriptPaths({
23+
preserveExtensions: true
24+
}),
25+
typescript({
26+
sourceMap: true,
27+
declaration: true,
28+
outDir: "dist"
29+
})
30+
],
31+
output: {
32+
globals: {
33+
react: "React",
34+
"react-dom": "ReactDOM"
35+
}
36+
}
37+
},
38+
sourcemap: true,
39+
emptyOutDir: true
40+
},
41+
plugins: [react(), dts()]
42+
});
43+
export {
44+
vite_config_default as default
45+
};
46+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYW5rdXNoL0RldmVsb3Blci9BUldFQVZFL2JldHRlcmlkZWEtZGV2L2NvZGVjZWxsXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvYW5rdXNoL0RldmVsb3Blci9BUldFQVZFL2JldHRlcmlkZWEtZGV2L2NvZGVjZWxsL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9hbmt1c2gvRGV2ZWxvcGVyL0FSV0VBVkUvYmV0dGVyaWRlYS1kZXYvY29kZWNlbGwvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0LXN3YydcbmltcG9ydCBwYXRoIGZyb20gJ3BhdGgnXG5pbXBvcnQgZHRzIGZyb20gJ3ZpdGUtcGx1Z2luLWR0cydcbmltcG9ydCB0eXBlc2NyaXB0IGZyb20gXCJAcm9sbHVwL3BsdWdpbi10eXBlc2NyaXB0XCI7XG5pbXBvcnQgeyB0eXBlc2NyaXB0UGF0aHMgfSBmcm9tIFwicm9sbHVwLXBsdWdpbi10eXBlc2NyaXB0LXBhdGhzXCI7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBidWlsZDoge1xuICAgIG1hbmlmZXN0OiB0cnVlLFxuICAgIG1pbmlmeTogdHJ1ZSxcbiAgICByZXBvcnRDb21wcmVzc2VkU2l6ZTogdHJ1ZSxcbiAgICBsaWI6IHtcbiAgICAgIGVudHJ5OiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnc3JjL2luZGV4LnRzJyksXG4gICAgICBuYW1lOiAnQGJldHRlcmlkZWEvY29kZWNlbGwnLFxuICAgICAgZmlsZU5hbWU6IChmb3JtYXQpID0+IGBpbmRleC4ke2Zvcm1hdH0uanNgLFxuICAgIH0sXG4gICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgZXh0ZXJuYWw6IFsncmVhY3QnLCAncmVhY3QtZG9tJ10sXG4gICAgICBwbHVnaW5zOiBbXG4gICAgICAgIHR5cGVzY3JpcHRQYXRocyh7XG4gICAgICAgICAgcHJlc2VydmVFeHRlbnNpb25zOiB0cnVlLFxuICAgICAgICB9KSxcbiAgICAgICAgdHlwZXNjcmlwdCh7XG4gICAgICAgICAgc291cmNlTWFwOiB0cnVlLFxuICAgICAgICAgIGRlY2xhcmF0aW9uOiB0cnVlLFxuICAgICAgICAgIG91dERpcjogXCJkaXN0XCIsXG4gICAgICAgIH0pXG4gICAgICBdLFxuICAgICAgb3V0cHV0OiB7XG4gICAgICAgIGdsb2JhbHM6IHtcbiAgICAgICAgICByZWFjdDogJ1JlYWN0JyxcbiAgICAgICAgICAncmVhY3QtZG9tJzogJ1JlYWN0RE9NJyxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzb3VyY2VtYXA6IHRydWUsXG4gICAgZW1wdHlPdXREaXI6IHRydWUsXG4gIH0sXG4gIHBsdWdpbnM6IFtyZWFjdCgpLCBkdHMoKV0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF1VixTQUFTLG9CQUFvQjtBQUNwWCxPQUFPLFdBQVc7QUFDbEIsT0FBTyxVQUFVO0FBQ2pCLE9BQU8sU0FBUztBQUNoQixPQUFPLGdCQUFnQjtBQUN2QixTQUFTLHVCQUF1QjtBQUxoQyxJQUFNLG1DQUFtQztBQVF6QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixPQUFPO0FBQUEsSUFDTCxVQUFVO0FBQUEsSUFDVixRQUFRO0FBQUEsSUFDUixzQkFBc0I7QUFBQSxJQUN0QixLQUFLO0FBQUEsTUFDSCxPQUFPLEtBQUssUUFBUSxrQ0FBVyxjQUFjO0FBQUEsTUFDN0MsTUFBTTtBQUFBLE1BQ04sVUFBVSxDQUFDLFdBQVcsU0FBUyxNQUFNO0FBQUEsSUFDdkM7QUFBQSxJQUNBLGVBQWU7QUFBQSxNQUNiLFVBQVUsQ0FBQyxTQUFTLFdBQVc7QUFBQSxNQUMvQixTQUFTO0FBQUEsUUFDUCxnQkFBZ0I7QUFBQSxVQUNkLG9CQUFvQjtBQUFBLFFBQ3RCLENBQUM7QUFBQSxRQUNELFdBQVc7QUFBQSxVQUNULFdBQVc7QUFBQSxVQUNYLGFBQWE7QUFBQSxVQUNiLFFBQVE7QUFBQSxRQUNWLENBQUM7QUFBQSxNQUNIO0FBQUEsTUFDQSxRQUFRO0FBQUEsUUFDTixTQUFTO0FBQUEsVUFDUCxPQUFPO0FBQUEsVUFDUCxhQUFhO0FBQUEsUUFDZjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxXQUFXO0FBQUEsSUFDWCxhQUFhO0FBQUEsRUFDZjtBQUFBLEVBQ0EsU0FBUyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7QUFDMUIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

0 commit comments

Comments
 (0)