Feature/Zustand

packages/app/package.json

@@ -39,6 +39,7 @@
     "dayjs": "^1.11.7",
     "dotenv-cli": "^6.0.0",
     "https-browserify": "^1.0.0",
+    "immer": "^9.0.21",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.19",
@@ -48,6 +49,7 @@
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^18.2.0",
+    "react-fast-compare": "^3.2.1",
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.7.1",
     "react-popper": "^2.3.0",
@@ -58,7 +60,8 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.8.4",
     "usehooks-ts": "^2.9.1",
-    "web-vitals": "^3.0.2"
+    "web-vitals": "^3.0.2",
+    "zustand": "^4.3.7"
   },
   "scripts": {
     "start": "cross-env BROWSER=none react-app-rewired start",

packages/app/src/App.tsx

@@ -17,11 +17,14 @@ import {
 import { clusterApiUrl } from "@solana/web3.js";
 import { type FC, useMemo } from "react";
 
-import { SunriseProvider } from "./common/context/sunriseStakeContext";
-import { ZenModeProvider } from "./common/context/ZenModeContext";
-import { ForestProvider } from "./common/context/forestContext";
-import { HelpProvider } from "./common/context/HelpContext";
+import {
+  ForestProvider,
+  HelpProvider,
+  SunriseProvider,
+  ZenModeProvider,
+} from "./common/context/";
 import { Routes } from "./Routes";
+import { SunriseStoreInitializer } from "./common/store/SunriseStoreInitializer";
 
 require("./solana-wallet-adapter.css");
 
@@ -48,12 +51,13 @@ const App: FC = () => {
   return (
     <>
       <ConnectionProvider endpoint={endpoint}>
-        <WalletProvider wallets={wallets} autoConnect>
+        <WalletProvider wallets={wallets}>
           <WalletModalProvider>
             <SunriseProvider>
               <ForestProvider>
                 <ZenModeProvider>
                   <HelpProvider>
+                    <SunriseStoreInitializer />
                     <Routes />
                   </HelpProvider>
                 </ZenModeProvider>

packages/app/src/common/api/yieldState.ts

@@ -0,0 +1,23 @@
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { Environment } from "@sunrisestake/client";
+import {
+  type BuyAndBurnState,
+  YieldControllerClient,
+} from "@sunrisestake/yield-controller";
+
+import { readonlyProvider } from "../helper";
+
+const stage =
+  (process.env.REACT_APP_SOLANA_NETWORK as keyof typeof Environment) ??
+  WalletAdapterNetwork.Devnet;
+
+async function getYieldState(): Promise<BuyAndBurnState> {
+  const env = Environment[stage];
+  const client = await YieldControllerClient.get(
+    readonlyProvider,
+    env.yieldControllerState
+  );
+  return client.getState();
+}
+
+export { getYieldState };

packages/app/src/common/components/LockForm.tsx

@@ -2,7 +2,7 @@ import BN from "bn.js";
 import React, { useState } from "react";
 import { FiArrowDownLeft } from "react-icons/fi";
 
-import { useSunriseStake } from "../context/sunriseStakeContext";
+import { useSunriseStake } from "../context/SunriseStakeContext";
 import { ZERO } from "../utils";
 import { AmountInput, Button, Panel, Spinner } from "./";
 

packages/app/src/common/components/profile/ProfileBox.tsx → packages/app/src/common/components/ProfileBox.tsx

@@ -1,9 +1,9 @@
 import { EnvelopeIcon, LinkIcon } from "@heroicons/react/20/solid";
 import { type PublicKey } from "@solana/web3.js";
 import { type FC } from "react";
-import { useProfile } from "../../hooks/useProfile";
-import { type ParentRelationship } from "../../../api/types";
-import { toShortBase58 } from "../../utils";
+import { useProfile } from "../hooks/useProfile";
+import { type ParentRelationship } from "../../api/types";
+import { toShortBase58 } from "../utils";
 
 export const ProfileBox: FC<{
   address: PublicKey;

packages/app/src/common/components/index.ts

@@ -6,6 +6,8 @@ export * from "./InfoBox";
 export * from "./LockedGSol";
 export * from "./LockForm";
 export * from "./Panel";
+export * from "./ProfileBox";
 export * from "./Spinner";
 export * from "./TooltipPopover";
 export * from "./TweetButton";
+export * from "./tree/DynamicTree";

packages/app/src/common/components/modals/SendGSolModal.tsx

@@ -1,23 +1,22 @@
-import React, { type FC, useCallback, useState } from "react";
-
-import { BaseModal, type ModalProps } from "./";
-import { PublicKey, Transaction } from "@solana/web3.js";
-import clx from "classnames";
-import { AmountInput } from "../AmountInput";
-import BN from "bn.js";
-import { handleError, solToLamports, toShortBase58, ZERO } from "../../utils";
-import { Button } from "../Button";
-import { Spinner } from "../Spinner";
-import { GiPresent } from "react-icons/gi";
-import { useSunriseStake } from "../../context/sunriseStakeContext";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import {
   createAssociatedTokenAccountInstruction,
   createTransferCheckedInstruction,
   getAccount,
   getAssociatedTokenAddress,
 } from "@solana/spl-token";
+import { useConnection } from "@solana/wallet-adapter-react";
+import { PublicKey, Transaction } from "@solana/web3.js";
+import BN from "bn.js";
+import clx from "classnames";
+import { type FC, useCallback, useState } from "react";
+import { GiPresent } from "react-icons/gi";
+
+import { useSunriseStake } from "../../context";
+import { useSunriseStore } from "../../store/useSunriseStore";
+import { handleError, solToLamports, toShortBase58, ZERO } from "../../utils";
+import { AmountInput, Button, Spinner } from "../";
 import { NotificationType, notifyTransaction } from "../notifications";
+import { BaseModal, type ModalProps } from "./";
 
 interface SendGSolModalProps {
   recipient?: {
@@ -39,7 +38,9 @@ const SendGSolModal: FC<ModalProps & SendGSolModalProps> = ({
   const [isValid, setIsValid] = useState(false);
 
   const { details } = useSunriseStake();
-  const { publicKey: senderPubkey, sendTransaction } = useWallet();
+  const { publicKey: senderPubkey, sendTransaction } = useSunriseStore(
+    (state) => state.wallet
+  );
   const { connection } = useConnection();
   const [recipient, setRecipient] = useState(recipientFromProps);
 

packages/app/src/common/constants.ts

@@ -0,0 +1,25 @@
+import { type WalletContextState } from "@solana/wallet-adapter-react";
+
+const DEFAULT_CONTEXT: WalletContextState = {
+  autoConnect: false,
+  connecting: false,
+  connected: false,
+  disconnecting: false,
+  publicKey: null,
+  wallet: null,
+  wallets: [],
+  select() {
+    console.error("Wallet not connected");
+  },
+  connect: async () => Promise.reject(new Error("Wallet not connected")),
+  disconnect: async () => Promise.reject(new Error("Wallet not connected")),
+  sendTransaction: async () =>
+    Promise.reject(new Error("Wallet not connected")),
+  signTransaction: async () =>
+    Promise.reject(new Error("Wallet not connected")),
+  signAllTransactions: async () =>
+    Promise.reject(new Error("Wallet not connected")),
+  signMessage: async () => Promise.reject(new Error("Wallet not connected")),
+};
+
+export { DEFAULT_CONTEXT };

packages/app/src/common/context/forestContext.tsx → packages/app/src/common/context/ForestContext.tsx

@@ -1,4 +1,4 @@
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { useConnection } from "@solana/wallet-adapter-react";
 import {
   createContext,
   type FC,
@@ -11,10 +11,11 @@ import {
 } from "react";
 import { forestToComponents, type TreeComponent } from "../../forest/utils";
 import { ForestService, MAX_FOREST_DEPTH } from "../../api/forest";
-import { useSunriseStake } from "./sunriseStakeContext";
+import { useSunriseStake } from "./SunriseStakeContext";
 import { useLocation } from "react-router-dom";
 import { type PublicKey } from "@solana/web3.js";
 import { safeParsePublicKey } from "../utils";
+import { useSunriseStore } from "../store/useSunriseStore";
 
 interface ForestContextProps {
   myTree: TreeComponent | undefined;
@@ -33,7 +34,7 @@ const ForestProvider: FC<{ children: ReactNode; depth?: number }> = ({
   depth = MAX_FOREST_DEPTH,
 }) => {
   const { client, details } = useSunriseStake();
-  const wallet = useWallet();
+  const wallet = useSunriseStore((state) => state.wallet);
   const { connection } = useConnection();
   const location = useLocation();
   const [service, setService] = useState<ForestService | undefined>();

packages/app/src/common/context/sunriseStakeContext.tsx → packages/app/src/common/context/SunriseStakeContext.tsx

@@ -1,5 +1,4 @@
 import { useAnchorWallet, useConnection } from "@solana/wallet-adapter-react";
-import { Keypair } from "@solana/web3.js";
 import { type Details } from "@sunrisestake/client";
 import {
   createContext,
@@ -12,6 +11,7 @@ import {
 
 import { SunriseClientWrapper } from "../sunriseClientWrapper";
 import { useLocation } from "react-router-dom";
+import { readonlyWallet } from "../helper";
 import { safeParsePublicKey } from "../utils";
 
 interface SunriseContextProps {
@@ -24,9 +24,6 @@ const defaultValue: SunriseContextProps = {
 };
 const SunriseContext = createContext<SunriseContextProps>(defaultValue);
 
-// pass into anchor when the wallet is not yet connected
-const dummyKey = Keypair.generate().publicKey;
-
 const SunriseProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [client, setClient] = useState<SunriseClientWrapper>();
   const [details, setDetails] = useState<Details>();
@@ -82,11 +79,7 @@ const SunriseProvider: FC<{ children: ReactNode }> = ({ children }) => {
       // just get the details from the chain - no client available yet
       SunriseClientWrapper.init(
         connection,
-        {
-          publicKey: dummyKey,
-          signAllTransactions: async (txes) => txes,
-          signTransaction: async (tx) => tx,
-        },
+        readonlyWallet,
         undefined,
         undefined,
         true

packages/app/src/common/context/index.ts

@@ -0,0 +1,4 @@
+export * from "./ForestContext";
+export * from "./HelpContext";
+export * from "./SunriseStakeContext";
+export * from "./ZenModeContext";

packages/app/src/common/helper/index.ts

@@ -0,0 +1 @@
+export * from "./readonlyWallet";

packages/app/src/common/helper/readonlyWallet.ts

@@ -0,0 +1,23 @@
+import { AnchorProvider } from "@coral-xyz/anchor";
+import {
+  Connection,
+  Keypair,
+  type Transaction,
+  clusterApiUrl,
+} from "@solana/web3.js";
+
+const readonlyWallet = {
+  publicKey: Keypair.generate().publicKey,
+  signAllTransactions: async (txes: Transaction[]) => txes,
+  signTransaction: async (tx: Transaction) => tx,
+};
+
+const readonlyProvider = new AnchorProvider(
+  new Connection(
+    process.env.REACT_APP_SOLANA_NETWORK ?? clusterApiUrl("devnet")
+  ),
+  readonlyWallet,
+  {}
+);
+
+export { readonlyProvider, readonlyWallet };

packages/app/src/common/hooks/useCarbon.ts

@@ -2,13 +2,13 @@ import { toSol } from "@sunrisestake/client";
 import BN from "bn.js";
 import { useEffect, useState } from "react";
 
-import { useSunriseStake } from "../context/sunriseStakeContext";
+import { useSunriseStake } from "../context/SunriseStakeContext";
+import { useSunriseStore } from "../store/useSunriseStore";
 import { solToCarbon } from "../utils";
-import { useYieldController } from "./useYieldController";
 
 const useCarbon = (): { totalCarbon: number | undefined } => {
   const { details } = useSunriseStake();
-  const yieldControllerState = useYieldController();
+  const yieldControllerState = useSunriseStore((state) => state.yieldState);
   const [totalCarbon, setTotalCarbon] = useState<number>();
 
   useEffect(() => {

packages/app/src/common/hooks/useProfile.ts

@@ -1,10 +1,12 @@
-import { type PublicKey } from "@solana/web3.js";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
-import { useEffect, useState } from "react";
 import {
   type Profile as CivicProfile,
   CivicProfile as CivicSDK,
 } from "@civic/profile";
+import { useConnection } from "@solana/wallet-adapter-react";
+import { type PublicKey } from "@solana/web3.js";
+import { useEffect, useState } from "react";
+
+import { useSunriseStore } from "../store/useSunriseStore";
 import { toShortBase58 } from "../utils";
 
 export interface Profile {
@@ -24,7 +26,9 @@ const truncatedAddress = (
 
 export const useProfile = (address?: PublicKey): Profile => {
   const { connection } = useConnection();
-  const { publicKey: connectedWallet } = useWallet();
+  const { publicKey: connectedWallet } = useSunriseStore(
+    (state) => state.wallet
+  );
   const [profile, setProfile] = useState<Profile>({
     address: address?.toBase58() ?? "",
     name: truncatedAddress(address) ?? "",

packages/app/src/common/store/SunriseStoreInitializer.tsx

@@ -0,0 +1,20 @@
+import { useWallet } from "@solana/wallet-adapter-react";
+import { type FC, useEffect } from "react";
+import { useSunriseStore } from "./useSunriseStore";
+
+const SunriseStoreInitializer: FC = () => {
+  const fetchYieldState = useSunriseStore((state) => state.fetchYieldState);
+  useEffect(() => {
+    fetchYieldState().catch(console.error);
+  }, []);
+
+  const wallet = useWallet();
+  const updateStoreWallet = useSunriseStore((state) => state.updateWallet);
+  useEffect(() => {
+    updateStoreWallet(wallet);
+  }, [wallet.publicKey]);
+
+  return null;
+};
+
+export { SunriseStoreInitializer };