adds proposals

.env.sample

@@ -0,0 +1,23 @@
+# rivet key for rpc calls, you can also pass in custom rpcs to many components
+VITE_RIVET_KEY=
+
+# add your graph api key if using mainnet or gnosischain
+VITE_GRAPH_API_KEY_MAINNET=
+
+# key from wallet connect is required
+VITE_WALLET_CONNECT_ID=
+
+# optional will use rate limited if not set
+VITE_OPTIMISM_ALCHEMY_KEY=
+VITE_ARBITRUM_ALCHEMY_KEY=
+VITE_POLYGONPOS_ALCHEMY_KEY=
+
+# add blockexplorer api keys for any supported networks
+VITE_ETHERSCAN_KEY=
+VITE_ARBISCAN_KEY=
+VITE_GNOSISSCAN_KEY=
+VITE_POLYGONSCAN_KEY=
+VITE_OPTIMISMSCAN_KEY=
+
+# corresponds to keys in targetDao.ts if scoping app to a single dao
+VITE_TARGET_KEY=

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

README.md

@@ -1,27 +1,9 @@
-# React + TypeScript + Vite
+# HAUS TWA SANDBOX
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Playing with DAOhaus v3 and Telegram Mini Apps.
 
-Currently, two official plugins are available:
+#### Reference
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+[TON TWA Tutorial](https://docs.ton.org/develop/dapps/telegram-apps/app-examples#modern-tma-example)
 
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+[TWA SDK](https://github.com/twa-dev/SDK)

package.json

@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@daohaus/moloch-v3-hooks": "^0.3.1",
     "@twa-dev/sdk": "^6.9.1",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-spinners": "^0.13.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.css

@@ -18,6 +18,22 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.status {
+  font-size: 12px;
+}
+
+.proposal {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.votes {
+  display: flex;
+  justify-content: space-around;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

src/App.tsx

@@ -1,38 +1,74 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import { useEffect, useState } from "react";
+import hausLogo from "./assets/icon-512x512.png";
 import "./App.css";
 
-import WebApp from "@twa-dev/sdk";
+// import WebApp from "@twa-dev/sdk";
+import { useDaoProposals } from "@daohaus/moloch-v3-hooks";
+import { MolochV3Proposal } from "@daohaus/moloch-v3-data";
+import { BeatLoader } from "react-spinners";
 
 function App() {
   const [count, setCount] = useState(0);
+  const [proposal, setProposal] = useState<MolochV3Proposal | undefined>();
+  const { proposals, isLoading } = useDaoProposals({
+    daoChain: "0xa",
+    daoId: "0xf5d6b637a9185707f52d40d452956ca49018247a",
+    paging: {
+      pageSize: 1,
+      offset: count,
+    },
+  });
+
+  useEffect(() => {
+    console.log("proposals", proposals);
+
+    setProposal(proposals[0]);
+  }, [proposals]);
+
+  const displayProposal = () => {
+    setCount((count) => count + 1);
+    setProposal(proposals[0]);
+  };
 
   return (
     <>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a href="https://daohaus.club/" target="_blank">
+          <img src={hausLogo} className="logo" alt="Haus logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>PublicHAUS DAO</h1>
+      <h6>Latest Proposal</h6>
+      {isLoading && <BeatLoader color="#646cff" />}
+      {proposal && (
+        <div className="proposal">
+          <a
+            href={`https://admin.daohaus.club/#/molochV3/0xa/0xf5d6b637a9185707f52d40d452956ca49018247a/proposal/${proposal.proposalId}`}
+            target="_blank"
+          >
+            <h3>{proposal.title}</h3>
+            <p className="status">Status: {proposal.status}</p>
+            <div className="votes">
+              <p>{`Yes: ${(
+                Number(proposal.yesBalance) /
+                10 ** 18
+              ).toFixed()}`}</p>
+              <p>{`No: ${(
+                Number(proposal.noBalance) /
+                10 ** 18
+              ).toFixed()}`}</p>
+            </div>
+          </a>
+        </div>
+      )}
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
+        <button onClick={displayProposal}>Show me the next proposal</button>
       </div>
-      <div className="card">
-        <button
-          onClick={() =>
-            WebApp.showAlert(`Hello World! Current count is ${count}`)
-          }
-        >
-          Show Alert
+      {/* <div className="card">
+        <button onClick={() => WebApp.showAlert(`I can open alerts!`)}>
+          YO!
         </button>
-      </div>
+      </div> */}
     </>
   );
 }

src/index.css

@@ -21,6 +21,7 @@ a {
 }
 a:hover {
   color: #535bf2;
+  cursor: pointer;
 }
 
 body {

src/main.tsx

@@ -1,14 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import WebApp from "@twa-dev/sdk";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 import App from "./App.tsx";
 import "./index.css";
 
 WebApp.ready();
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </React.StrictMode>
 );

tsconfig.json

@@ -1,24 +1,20 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
     "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "jsx": "react-jsx"
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -7,6 +7,34 @@ export default defineConfig({
   plugins: [react(), basicSsl()],
   build: {
     outDir: "./docs",
+    target: ["es2020"],
   },
   base: "./",
+  define: {
+    "process.env": {
+      NX_RIVET_KEY: process.env.VITE_RIVET_KEY,
+      NX_GRAPH_API_KEY_MAINNET: process.env.VITE_GRAPH_API_KEY_MAINNET,
+      NX_INFURA_PROJECT_ID: process.env.VITE_INFURA_PROJECT_ID,
+      NX_ETHERSCAN_KEY: process.env.VITE_ETHERSCAN_KEY,
+      NX_ARBISCAN_KEY: process.env.VITE_ARBISCAN_KEY,
+      NX_GNOSISSCAN_KEY: process.env.VITE_GNOSISSCAN_KEY,
+      NX_POLYGONSCAN_KEY: process.env.VITE_POLYGONSCAN_KEY,
+      NX_OPTIMISMSCAN_KEY: process.env.VITE_OPTIMISMSCAN_KEY,
+      NX_WALLET_CONNECT_ID: process.env.VITE_WALLET_CONNECT_ID,
+      NX_OPTIMISM_ALCHEMY_KEY: process.env.VITE_OPTIMISM_ALCHEMY_KEY,
+      NX_ARBITRUM_ALCHEMY_KEY: process.env.VITE_ARBITRUM_ALCHEMY_KEY,
+      NX_POLYGONPOS_ALCHEMY_KEY: process.env.VITE_POLYGONPOS_ALCHEMY_KEY,
+    },
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "es2020",
+      define: {
+        global: "globalThis",
+      },
+      supported: {
+        bigint: true,
+      },
+    },
+  },
 });