Merge pull request #183 from palladians/feat/zeko-wallet

Feat/Zeko wallet

README.md

@@ -1,9 +1,6 @@
 <!-- markdownlint-disable -->
 <div align="center">
-  <img src="./pallad_icon.svg" height="256">
-</div>
-<div align="center">
-  <img src="./pallad_name.png" height="128">
+  <img src="./pallad_name.svg" height="128">
 </div>
 <div align="center">
 <br />

apps/extension/e2e/provider-enable.spec.ts

@@ -55,7 +55,7 @@ test.skip("enable window.mina and handle pop-up on a specific webpage", async ({
       params: {
         nodeEndpoint: {
           providerName: "mina-node",
-          url: "https://sequencer-zeko-dev.dcspark.io/graphql",
+          url: "https://devnet.zeko.io/graphql",
         },
         archiveNodeEndpoint: {
           providerName: "mina-node",

apps/extension/src/prompt.tsx

@@ -2,15 +2,15 @@ import "@palladxyz/features/dist/index.css"
 import "@total-typescript/ts-reset"
 import "dotenv/config"
 
-import { WebConnector } from "@palladxyz/features"
+import { WebConnectorRoute } from "@palladxyz/features"
 import { ThemeProvider } from "next-themes"
 import React from "react"
 import ReactDOM from "react-dom/client"
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <WebConnector />
+      <WebConnectorRoute />
     </ThemeProvider>
   </React.StrictMode>,
 )

package.json

@@ -26,7 +26,7 @@
     "@biomejs/biome": "1.7.1",
     "@testing-library/react": "^14.1.2",
     "@tsconfig/strictest": "^2.0.2",
-    "@turbo/gen": "^1.11.2",
+    "@turbo/gen": "^1.13.3",
     "@types/jest": "^29.5.11",
     "@vitest/coverage-c8": "^0.33.0",
     "autoprefixer": "^10.4.16",
@@ -38,7 +38,7 @@
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.2",
-    "turbo": "^1.11.2",
+    "turbo": "^1.13.3",
     "turbowatch": "^2.29.4",
     "typescript": "^5.3.3",
     "vitest": "^1.1.0"

packages/features/package.json

@@ -48,8 +48,10 @@
     "cmdk": "^0.2.0",
     "date-fns": "^3.0.1",
     "dayjs": "^1.11.10",
+    "dompurify": "^3.1.4",
     "easy-mesh-gradient": "^0.0.5",
     "immer": "^10.0.3",
+    "js-beautify": "^1.15.1",
     "lucide-react": "^0.376.0",
     "match-sorter": "^6.3.1",
     "merge-refs": "^1.2.2",
@@ -68,10 +70,12 @@
     "react-twc": "^1.0.1",
     "recharts": "^2.10.3",
     "sonner": "^1.4.41",
+    "sugar-high": "^0.6.1",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "webextension-polyfill": "^0.10.0",
+    "yaml": "^2.4.2",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },
@@ -84,6 +88,8 @@
     "@trpc/server": "^10.44.1",
     "@tsconfig/recommended": "^1.0.3",
     "@tsconfig/vite-react": "^3.0.2",
+    "@types/dompurify": "^3.0.5",
+    "@types/js-beautify": "^1.14.3",
     "@types/mocha": "^10.0.6",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

packages/features/src/common/hooks/use-account.ts

@@ -11,23 +11,23 @@ import { useAppStore } from "../store/app"
 export const useAccount = () => {
   const navigate = useNavigate()
   const currentWallet = useVault((state) => state.getCurrentWallet())
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   const getAccountsInfo = useVault((state) => state.getAccountsInfo)
   const restartWallet = useVault((state) => state.restartWallet)
   const _syncWallet = useVault((state) => state._syncWallet)
-  const network = useAppStore((state) => state.network)
   const setVaultStateUninitialized = useAppStore(
     (state) => state.setVaultStateUninitialized,
   )
   const fetchWallet = async () => {
     await _syncWallet()
-    const accountInfo = getAccountsInfo(network, publicKey)
+    const accountInfo = getAccountsInfo(currentNetworkName, publicKey)
     const chain = currentWallet.credential.credential.chain
     const props = getAccountProperties(accountInfo.accountInfo, chain)
     return props
   }
   const publicKey = getPublicKey(currentWallet)
   const swr = useSWR(
-    publicKey ? [publicKey, "account", network] : null,
+    publicKey ? [publicKey, "account", currentNetworkName] : null,
     async () => await fetchWallet(),
     {
       refreshInterval: 30000,
@@ -75,7 +75,7 @@ export const useAccount = () => {
     publicKey,
     lockWallet,
     restartCurrentWallet,
-    network,
+    network: currentNetworkName,
     stakeDelegated,
   }
 }

packages/features/src/common/hooks/use-transaction.ts

@@ -1,21 +1,19 @@
 import { getPublicKey, useVault } from "@palladxyz/vault"
 import useSWR from "swr"
 
-import { useAppStore } from "../store/app"
-
 export const useTransaction = ({ hash }: { hash: string }) => {
   const providerConfig = useVault((state) => state.getCurrentNetworkInfo())
   const currentWallet = useVault((state) => state.getCurrentWallet())
   const _syncTransactions = useVault((state) => state._syncTransactions)
   const getTransaction = useVault((state) => state.getTransaction)
   const publicKey = getPublicKey(currentWallet)
-  const network = useAppStore((state) => state.network)
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   const syncAndGetTransaction = async () => {
     await _syncTransactions(providerConfig, publicKey)
-    return getTransaction(network, publicKey, hash, "MINA") // TODO: remove hardcoded 'MINA'
+    return getTransaction(currentNetworkName, publicKey, hash, "MINA") // TODO: remove hardcoded 'MINA'
   }
   return useSWR(
-    publicKey ? ["transaction", hash, network] : null,
+    publicKey ? ["transaction", hash, currentNetworkName] : null,
     async () => await syncAndGetTransaction(),
   )
 }

packages/features/src/common/hooks/use-transactions.ts

@@ -1,15 +1,13 @@
 import { getPublicKey, useVault } from "@palladxyz/vault"
 import useSWR from "swr"
 
-import { useAppStore } from "../store/app"
-
 export const useTransactions = () => {
   const currentWallet = useVault((state) => state.getCurrentWallet())
   const getTransactions = useVault((state) => state.getTransactions)
   const publicKey = getPublicKey(currentWallet)
-  const network = useAppStore((state) => state.network)
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   return useSWR(
-    publicKey ? [publicKey, "transactions", network] : null,
-    () => getTransactions(network, publicKey, "MINA"), // TODO: remove hardcoded 'MINA'
+    publicKey ? [publicKey, "transactions", currentNetworkName] : null,
+    () => getTransactions(currentNetworkName, publicKey, "MINA"), // TODO: remove hardcoded 'MINA'
   )
 }

packages/features/src/common/store/app.ts

@@ -42,7 +42,7 @@ export const useAppStore = create<AppStore>()(
       },
       setNetwork(network) {
         return set({
-          network: network,
+          network,
         })
       },
       setShareData(shareData) {

packages/features/src/components/menu-bar.tsx

@@ -45,6 +45,7 @@ type MenuBarProps = {
   onNetworkClicked?: () => void
   networkManagement?: boolean
   publicAddress?: string
+  currentNetwork?: string
 }
 
 export const MenuBar = ({
@@ -54,6 +55,7 @@ export const MenuBar = ({
   onNetworkClicked,
   networkManagement = false,
   publicAddress,
+  currentNetwork,
 }: MenuBarProps) => {
   const navigate = useNavigate()
   const goHome = () => navigate("/dashboard")
@@ -91,7 +93,7 @@ export const MenuBar = ({
                   className="flex flex-col btn min-h-10 h-10"
                   onClick={onNetworkClicked}
                 >
-                  <p className="text-sm">Mina</p>
+                  <p className="text-sm">{currentNetwork}</p>
                   {networkManagement ? (
                     <ChevronUpIcon width={24} height={24} />
                   ) : (

packages/features/src/components/menu-drawer.tsx

@@ -1,10 +1,12 @@
 import Logo from "@/common/assets/logo.svg?react"
 import MenuIcon from "@/common/assets/menu.svg?react"
+import { useVault } from "@palladxyz/vault"
 import { ChevronDownIcon, XIcon } from "lucide-react"
 import { Link, useNavigate } from "react-router-dom"
 
 export const MenuDrawer = () => {
   const navigate = useNavigate()
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   return (
     <div className="drawer drawer-end">
       <input id="menu-drawer" type="checkbox" className="drawer-toggle" />
@@ -43,7 +45,7 @@ export const MenuDrawer = () => {
                   to="/networks"
                   className="btn btn-primary min-h-10 h-10 bg-white hover:bg-white shadow-none border-none gap-2"
                 >
-                  <span>Mina</span>
+                  <span>{currentNetworkName}</span>
                   <ChevronDownIcon size={24} />
                 </Link>
               </div>

packages/features/src/components/settings-page-layout.tsx

@@ -1,5 +1,5 @@
+import { useVault } from "@palladxyz/vault"
 import type { ReactNode } from "react"
-import { useNavigate } from "react-router-dom"
 import { MenuBar } from "./menu-bar"
 
 type SettingsPageHeaderProps = {
@@ -15,12 +15,16 @@ export const SettingsPageLayout = ({
   onCloseClicked,
   headerContent = null,
 }: SettingsPageHeaderProps) => {
-  const navigate = useNavigate()
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   return (
     <div className="flex flex-col flex-1">
       <div className="flex flex-col">
         <div className="bg-secondary rounded-b-2xl">
-          <MenuBar variant="wallet" onCloseClicked={onCloseClicked} />
+          <MenuBar
+            variant="wallet"
+            onCloseClicked={onCloseClicked}
+            currentNetwork={currentNetworkName}
+          />
           <div className={`${headerContent ? "pb-6" : "pb-12"} px-8`}>
             <p className="text-3xl">{title}</p>
             {headerContent}

packages/features/src/globals.css

@@ -3,6 +3,33 @@
 @tailwind components;
 @tailwind utilities;
 
+/**
+ * Types that sugar-high have:
+ *
+ * identifier
+ * keyword
+ * string
+ * Class, number and null
+ * property
+ * entity
+ * jsx literals
+ * sign
+ * comment
+ * break
+ * space
+ */
+:root {
+    --sh-class: #9ccfd8;
+    --sh-identifier: #e0def4;
+    --sh-sign: #e0def4;
+    --sh-property: #908caa;
+    --sh-entity: #ebbcba;
+    --sh-jsxliterals: #9ccfd8;
+    --sh-string: #908caa;
+    --sh-keyword: #908caa;
+    --sh-comment: #908caa;
+}
+
 :base {
     --mint: #a3dbe4;
 }

packages/features/src/index.ts

@@ -4,7 +4,7 @@ import type {} from "graphql-request"
 import type {} from "swr"
 export { useAppStore } from "./common/store/app"
 export { Router } from "./router"
-export { WebConnector } from "./web-connector"
+export { WebConnectorRoute } from "./web-connector/routes/web-connector"
 export { WelcomeScreen } from "./welcome"
 export * as Icons from "lucide-react"
 import "./globals.css"

packages/features/src/send/index.stories.tsx

@@ -14,6 +14,7 @@ export const Send: Story<{ advanced: boolean }> = ({ advanced }) => (
     fiatPrice={1.5}
     advanced={advanced}
     setAdvanced={action("Set Advanced")}
+    currentNetwork="Berkeley"
   />
 )
 

packages/features/src/send/routes/send.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom"
 
 import { useAccount } from "@/common/hooks/use-account"
 import { useFiatPrice } from "@palladxyz/offchain-data"
+import { useVault } from "@palladxyz/vault"
 import { useState } from "react"
 import { SendView } from "../views/send"
 
@@ -10,13 +11,15 @@ export const SendRoute = () => {
   const navigate = useNavigate()
   const { data: accountProperties } = useAccount()
   const { current: rawFiatPrice } = useFiatPrice()
+  const currentNetworkName = useVault((state) => state.currentNetworkName)
   return (
     <SendView
       onGoBack={() => navigate(-1)}
       balance={accountProperties?.balance ?? 0}
       fiatPrice={rawFiatPrice}
       advanced={advanced}
       setAdvanced={setAdvanced}
+      currentNetwork={currentNetworkName}
     />
   )
 }

packages/features/src/send/views/send.tsx

@@ -9,6 +9,7 @@ type SendViewProps = {
   fiatPrice: number
   advanced: boolean
   setAdvanced: (advanced: boolean) => void
+  currentNetwork: string
 }
 
 export const SendView = ({
@@ -17,10 +18,15 @@ export const SendView = ({
   fiatPrice,
   advanced,
   setAdvanced,
+  currentNetwork,
 }: SendViewProps) => {
   return (
     <AppLayout>
-      <MenuBar variant="wallet" onCloseClicked={onGoBack} />
+      <MenuBar
+        variant="wallet"
+        onCloseClicked={onGoBack}
+        currentNetwork={currentNetwork}
+      />
       <div className="flex flex-col flex-1 px-8">
         <SendForm
           balance={balance}

packages/features/src/wallet/components/tx-tile.tsx

@@ -1,5 +1,6 @@
 import { formatCompact } from "@/common/lib/numbers"
 import { TxIcon } from "@/components/tx-icon"
+import { Link } from "react-router-dom"
 
 export const TxTile = ({
   tx,
@@ -10,12 +11,14 @@ export const TxTile = ({
 }) => {
   const formattedAmount = formatCompact({ value: tx.amount })
   return (
-    <div className="card bg-secondary p-4 aspect-square grid-col gap-1">
-      <div className="btn btn-circle bg-neutral">
-        <TxIcon tx={tx} currentWalletAddress={currentWalletAddress} />
+    <Link to={`/transactions/${tx.hash}`}>
+      <div className="card bg-secondary p-4 aspect-square grid-col gap-1">
+        <div className="btn btn-circle bg-neutral">
+          <TxIcon tx={tx} currentWalletAddress={currentWalletAddress} />
+        </div>
+        <h3 className="mt-2">Mina</h3>
+        <p>{formattedAmount}</p>
       </div>
-      <h3 className="mt-2">Mina</h3>
-      <p>{formattedAmount}</p>
-    </div>
+    </Link>
   )
 }

packages/features/src/wallet/index.stories.tsx

@@ -22,7 +22,7 @@ export const Dashboard = () => {
 }
 
 export const Networks = () => {
-  return <NetworksView />
+  return <NetworksView currentNetwork="Berkeley" />
 }
 
 export default {