app latest

app/app-sandbox/src/App.js

@@ -24,13 +24,22 @@ import Token from "./pages/Token";
 import Config from "./pages/Config";
 import TokenAddress from "./pages/TokenAddress";
 import AppBar from "./components/AppBar.tsx";
+//  import ARC200AppBar from "./components/ARC200AppBar/index.js";
 
 function App() {
   const providers = useInitializeProviders({
     providers: [
       { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
       { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
       { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
+      /*
+      {
+        id: PROVIDER_ID.ALGOSIGNER,
+        clientOptions: {
+          ledger: "VoiTestNet",
+        },
+      },
+      */
       {
         // TODO here
         id: PROVIDER_ID.WALLETCONNECT,
@@ -60,9 +69,11 @@ function App() {
   });
   return (
     <WalletProvider value={providers}>
+      {/*<ARC200AppBar />*/}
       <div className="App">
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="/:addr/:amt/:note" element={<Home />} />
           <Route path="/config" element={<Config />} />
           <Route path="/mint" element={<Mint />} />
           <Route path="/token/:id" element={<Token />} />

app/app-sandbox/src/components/ARC200AppBar/Home2.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+export const Home2 = ({ className }) => {
+  return (
+    <svg
+      className={`home-2 ${className}`}
+      fill="none"
+      height="25"
+      viewBox="0 0 24 25"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="path"
+        d="M9.02 3.34L3.63 7.54C2.73 8.24 2 9.73 2 10.86V18.27C2 20.59 3.89 22.49 6.21 22.49H17.79C20.11 22.49 22 20.59 22 18.28V11C22 9.79 21.19 8.24 20.2 7.55L14.02 3.22C12.62 2.24 10.37 2.29 9.02 3.34Z"
+        stroke="#CBA2FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        className="path"
+        d="M12 18.49V15.49"
+        stroke="#CBA2FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};

app/app-sandbox/src/components/ARC200AppBar/Setting2.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export const Setting2 = ({ className }) => {
+  return (
+    <svg
+      className={`setting-2 ${className}`}
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="path"
+        d="M12 15C13.655 15 15 13.655 15 12C15 10.345 13.655 9 12 9C10.345 9 9 10.345 9 12C9 13.655 10.345 15 12 15Z"
+        stroke="#6D6D80"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        className="path"
+        d="M2 12.88V11.12C2 10.08 2.85 9.22 3.9 9.22C5.71 9.22 6.45 7.94 5.54 6.37C5.02 5.47 5.33 4.3 6.24 3.78L7.97 2.79C8.76 2.32 9.78 2.6 10.25 3.39L10.36 3.58C11.26 5.15 12.74 5.15 13.65 3.58L13.76 3.39C14.23 2.6 15.25 2.32 16.04 2.79L17.77 3.78C18.68 4.3 18.99 5.47 18.47 6.37C17.56 7.94 18.3 9.22 20.11 9.22C21.15 9.22 22.01 10.07 22.01 11.12V12.88C22.01 13.92 21.16 14.78 20.11 14.78C18.3 14.78 17.56 16.06 18.47 17.63C18.99 18.54 18.68 19.7 17.77 20.22L16.04 21.21C15.25 21.68 14.23 21.4 13.76 20.61L13.65 20.42C12.75 18.85 11.27 18.85 10.36 20.42L10.25 20.61C9.78 21.4 8.76 21.68 7.97 21.21L6.24 20.22C5.33 19.7 5.02 18.53 5.54 17.63C6.45 16.06 5.71 14.78 3.9 14.78C2.85 14.78 2 13.92 2 12.88Z"
+        stroke="#6D6D80"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};

app/app-sandbox/src/components/ARC200AppBar/index.js

@@ -0,0 +1,2 @@
+import { Aside } from "./index.tsx"
+export default Aside;

app/app-sandbox/src/components/ARC200AppBar/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Home2 } from "./Home2.jsx";
+import { Setting2 } from "./Setting2";
+import "./style.css";
+
+interface Props {
+  className: any;
+}
+
+export const Aside = ({ className }: Props): JSX.Element => {
+  return (
+    <div className={`aside ${className}`}>
+      <div className="logo">
+        <img className="image" alt="Image" src="/assets/wallet.svg" />
+      </div>
+      <div className="frame">
+        <div className="li-item">
+          <Home2 className="icon-instance-node" />
+        </div>
+        <div className="nav">
+          <div className="li-item">
+            <Setting2 className="icon-instance-node" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

app/app-sandbox/src/components/ARC200AppBar/style.css

@@ -0,0 +1,69 @@
+.aside {
+  align-items: center;
+  background: #1E1E2D;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 32px 22px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.aside .logo {
+  align-items: flex-start;
+  background-color: #ffffff;
+  border-radius: 32px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  padding: 4px;
+  position: relative;
+}
+
+.aside .image {
+  height: 31px;
+  object-fit: cover;
+  position: relative;
+  width: 32px;
+}
+
+.aside .frame {
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.aside .li-item {
+  background: #2D2D43;
+  border-radius: 12px;
+  height: 43px;
+  position: relative;
+  width: 42px;
+}
+
+.aside .icon-instance-node {
+  height: 24px !important;
+  left: 9px !important;
+  position: absolute !important;
+  top: 10px !important;
+  width: 24px !important;
+}
+
+.aside .nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 43px;
+  position: relative;
+  width: 42px;
+}

app/app-sandbox/src/components/AccountBalances/index.js

@@ -16,25 +16,28 @@ import SendIcon from "@mui/icons-material/Send";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { displayToken, zeroAddress } from "../../utils/algorand.js";
 import SendDialog from "../SendDialog/index.js";
+import ApproveDialog from "../ApproveDialog/index.js";
+import SpendDialog from "../SpendDialog/index.js";
 import Paper from "@mui/material/Paper";
 import TableContainer from "@mui/material/TableContainer";
 import TableCell, { tableCellClasses } from "@mui/material/TableCell";
 import { styled } from "@mui/material/styles";
 import { Link } from "react-router-dom";
 import defaultTokens from "../../config/defaultTokens.js";
-
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import FireplaceIcon from "@mui/icons-material/Fireplace";
+import { DEFAULT_NODE } from "../../config/defaultLocalStorage.js";
 
 const stdlib = makeStdLib();
 const fawd = stdlib.formatWithDecimals;
 
-const [node] = (localStorage.getItem("node") || "algorand-testnet::").split(
-  ":"
-);
+const [node] = (localStorage.getItem("node") || DEFAULT_NODE).split(":");
 
 function AccountBalance(props) {
   const { activeAccount } = useWallet();
   const [sendDialogOpen, setSendDialogOpen] = useState(false);
+  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
+  const [spendDialogOpen, setSpendDialogOpen] = useState(false);
   const [token, setToken] = useState(props.token);
   const reloadToken = useCallback(async () => {
     if (!activeAccount) return;
@@ -50,6 +53,28 @@ function AccountBalance(props) {
     };
     setToken(token);
   }, [activeAccount, token]);
+  useEffect(() => {
+    if (!activeAccount) return;
+    (async () => {
+      const { indexer } = await stdlib.getProvider();
+      const assets = await indexer
+        .lookupAccountAssets(activeAccount.address)
+        .do();
+      console.log({ assets });
+      for (const asset of assets.assets) {
+        const assetDetails = await indexer
+          .lookupAssetByID(asset["asset-id"])
+          .do();
+        console.log(assetDetails);
+      }
+      const acc = stdlib.connectAccount({ addr: activeAccount.address });
+      console.log(acc);
+      const accInfo = await indexer
+        .lookupAccountByID(activeAccount.address)
+        .do();
+      console.log(accInfo);
+    })();
+  }, [activeAccount]);
   useEffect(() => {
     if (!activeAccount) return;
     // realtime
@@ -70,6 +95,18 @@ function AccountBalance(props) {
           token={token}
           reloadToken={reloadToken}
         />
+        <ApproveDialog
+          open={approveDialogOpen}
+          setOpen={setApproveDialogOpen}
+          token={token}
+          reloadToken={reloadToken}
+        />
+        <SpendDialog
+          open={spendDialogOpen}
+          setOpen={setSpendDialogOpen}
+          token={token}
+          reloadToken={reloadToken}
+        />
         <TableRow key={token.appId}>
           <TableCell>{token.appId}</TableCell>
           <TableCell>
@@ -121,6 +158,24 @@ function AccountBalance(props) {
                         setSendDialogOpen(true);
                       },
                     },
+                    {
+                      label: "A",
+                      description: "Approve",
+                      icon: <ThumbUpIcon />,
+                      onClick: () => {
+                        setToken(token);
+                        setApproveDialogOpen(true);
+                      },
+                    },
+                    {
+                      label: "T",
+                      description: "Spend",
+                      icon: <SendIcon color="secondary" />,
+                      onClick: () => {
+                        setToken(token);
+                        setSpendDialogOpen(true);
+                      },
+                    },
                     /*
                     {
                       label: "B",

app/app-sandbox/src/components/AppBar.tsx

@@ -18,6 +18,7 @@ import HomeIcon from "@mui/icons-material/Home";
 import { useNavigate } from "react-router-dom";
 import NFDService from "../services/NFDService";
 import SettingsIcon from "@mui/icons-material/Settings";
+import { DEFAULT_NODE } from "../config/defaultLocalStorage.js";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -125,7 +126,6 @@ const MyAppBar = () => {
       </MenuItem>
     </Menu>
   );
-
   return (
     <AppBar
       position="fixed"