My Balances

src/App.tsx

@@ -20,7 +20,6 @@ import Sidebar from "src/components/Sidebar/Sidebar";
 import StagingNotification from "src/components/StagingNotification";
 import { StakeVersionContainer } from "src/components/StakeVersionContainer";
 import TopBar from "src/components/TopBar/TopBar";
-import Wallet from "src/components/TopBar/Wallet";
 import { shouldTriggerSafetyCheck } from "src/helpers";
 import { useGoogleAnalytics } from "src/hooks/useGoogleAnalytics";
 import useTheme from "src/hooks/useTheme";
@@ -33,13 +32,10 @@ import { girth as gTheme } from "src/themes/girth.js";
 import { light as lightTheme } from "src/themes/light.js";
 import { BondModalContainer } from "src/views/Bond/components/BondModal/BondModal";
 import { BondModalContainerV3 } from "src/views/Bond/components/BondModal/BondModalContainerV3";
-import { Lending } from "src/views/Lending";
 import { Cooler } from "src/views/Lending/Cooler";
-import { LendingMarkets } from "src/views/Lending/LendingMarkets";
-import { Liquidity } from "src/views/Liquidity";
-import { ExternalStakePools } from "src/views/Liquidity/ExternalStakePools/ExternalStakePools";
 import { Vault } from "src/views/Liquidity/Vault";
-import { Vaults } from "src/views/Liquidity/Vaults";
+import { MyBalances } from "src/views/MyBalances";
+import { Utility } from "src/views/Utility";
 import { useAccount, useConnect, useNetwork, useProvider } from "wagmi";
 
 // Dynamic Imports for code splitting
@@ -234,6 +230,7 @@ function App() {
               <MigrationCallToAction setMigrationModalOpen={setMigrationModalOpen} />
               <Suspense fallback={<div></div>}>
                 <Routes>
+                  <Route path="my-balances" element={<MyBalances />} />
                   <Route path="/" element={<Navigate to="/dashboard" />} />
                   <Route
                     path="/stake"
@@ -249,31 +246,10 @@ function App() {
                   <Route path="/bridge" element={<Bridge />} />
                   <Route path="/dashboard/*" element={<TreasuryDashboard />} />
                   <Route path="/range/*" element={<Range />} />
-                  <Route path="/lending" element={<Lending />} />
-                  <Route path="/lending/markets" element={<LendingMarkets />} />
-                  <Route path="/liquidity" element={<Liquidity />} />
-                  <Route path="/liquidity/pools" element={<ExternalStakePools />} />
-                  <Route path="/liquidity/vaults" element={<Vaults />} />
                   <Route path="/liquidity/vaults/:id" element={<Vault />} />
-                  <Route path="/lending" element={<Lending />} />
                   <Route path="/lending/cooler" element={<Cooler />} />
+                  <Route path="/utility" element={<Utility />} />
 
-                  <Route
-                    path={"/info/*"}
-                    element={<Wallet open={true} component="info" theme={theme} toggleTheme={toggleTheme} />}
-                  />
-                  <Route
-                    path={"/utility"}
-                    element={<Wallet open={true} component="utility" theme={theme} toggleTheme={toggleTheme} />}
-                  />
-                  <Route
-                    path={"/wallet/history"}
-                    element={<Wallet open={true} component="wallet/history" theme={theme} toggleTheme={toggleTheme} />}
-                  />
-                  <Route
-                    path="/wallet"
-                    element={<Wallet open={true} component="wallet" theme={theme} toggleTheme={toggleTheme} />}
-                  ></Route>
                   <Route path="*" element={<NotFound />} />
                 </Routes>
               </Suspense>

src/components/ConnectButton/ConnectButton.tsx

@@ -1,7 +1,6 @@
-import { Box, Button, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
 import { Icon, OHMButtonProps, PrimaryButton } from "@olympusdao/component-library";
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
-import { Link as RouterLink, useLocation } from "react-router-dom";
 import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
 import { trackGAEvent } from "src/helpers/analytics/trackGAEvent";
 
@@ -15,9 +14,11 @@ const fireAnalyticsEvent = () => {
 export const InPageConnectButton = ({
   fullWidth = false,
   size = "medium",
+  buttonText = "Connect Wallet",
 }: {
   fullWidth?: boolean;
   size?: OHMButtonProps["size"];
+  buttonText?: string;
 }) => {
   return (
     <RainbowConnectButton.Custom>
@@ -45,7 +46,7 @@ export const InPageConnectButton = ({
                     size={size}
                   >
                     <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
-                    Connect Wallet
+                    {buttonText}
                   </PrimaryButton>
                 );
               }
@@ -57,13 +58,9 @@ export const InPageConnectButton = ({
   );
 };
 export const ConnectButton = () => {
-  const location = useLocation();
   const theme = useTheme();
   const mobile = useMediaQuery(theme.breakpoints.down("sm"));
 
-  const walletDrawerOpen =
-    location.pathname === "/wallet" || location.pathname === "/utility" || location.pathname === "/info" ? true : false;
-
   return (
     <RainbowConnectButton.Custom>
       {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
@@ -80,89 +77,75 @@ export const ConnectButton = () => {
           >
             {(() => {
               if (!mounted || !account || !chain) {
-                if (walletDrawerOpen) {
-                  return (
-                    <Box
-                      display="flex"
-                      flexDirection="row"
-                      alignItems="center"
-                      sx={{
-                        height: "39px",
-                        borderRadius: "6px",
-                        padding: "9px 18px",
-                        cursor: "pointer",
-                        background: theme.colors.paper.card,
-                        "&:hover": { background: theme.colors.paper.cardHover },
-                      }}
-                      onClick={() => {
-                        fireAnalyticsEvent();
-                        openConnectModal();
-                      }}
-                    >
-                      <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
-                      <Typography>{`Connect`}</Typography>
-                    </Box>
-                  );
-                } else {
-                  return (
-                    <Link
-                      component={RouterLink}
-                      to={"/wallet"}
-                      state={{ prevPath: location.pathname }}
-                      style={{ marginRight: "0px" }}
-                      sx={{ zIndex: 18 }}
-                    >
-                      {!mobile ? (
-                        <PrimaryButton>
-                          <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
-                          {`Connect Wallet`}
-                        </PrimaryButton>
-                      ) : (
-                        <Button
-                          sx={{
-                            fontSize: "0.875rem",
-                            height: "39px",
-                            minWidth: "39px",
-                            borderRadius: "6px",
+                return (
+                  <>
+                    {!mobile ? (
+                      <PrimaryButton
+                        onClick={() => {
+                          fireAnalyticsEvent();
+                          openConnectModal();
+                        }}
+                      >
+                        <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
+                        {`Connect Wallet`}
+                      </PrimaryButton>
+                    ) : (
+                      <Button
+                        sx={{
+                          fontSize: "0.875rem",
+                          height: "39px",
+                          minWidth: "39px",
+                          borderRadius: "6px",
+                          background: theme.palette.mode === "dark" ? theme.colors.gray[500] : theme.colors.paper.card,
+                          color: theme.colors.gray[10],
+                          "&:hover": {
                             background:
-                              theme.palette.mode === "dark" ? theme.colors.gray[500] : theme.colors.paper.card,
+                              theme.palette.mode === "dark" ? theme.colors.gray[90] : theme.colors.paper.cardHover,
                             color: theme.colors.gray[10],
-                            "&:hover": {
-                              background:
-                                theme.palette.mode === "dark" ? theme.colors.gray[90] : theme.colors.paper.cardHover,
-                              color: theme.colors.gray[10],
-                            },
-                          }}
-                        >
-                          <SvgIcon component={WalletIcon} />
-                        </Button>
-                      )}
-                    </Link>
-                  );
-                }
-              }
-              return (
-                <Box display="flex" alignItems="center">
-                  {walletDrawerOpen ? (
-                    <>
+                          },
+                        }}
+                        onClick={() => {
+                          fireAnalyticsEvent();
+                          openConnectModal();
+                        }}
+                      >
+                        <SvgIcon component={WalletIcon} />
+                      </Button>
+                    )}
+                  </>
+                );
+              } else {
+                return (
+                  <Box display="flex" alignItems={"center"}>
+                    <Button
+                      onClick={chain.unsupported ? openChainModal : openAccountModal}
+                      sx={{ paddingLeft: "0px", paddingRight: "0px", minWidth: "initial" }}
+                    >
                       <Box
                         display="flex"
                         alignItems="center"
                         sx={{
-                          marginRight: "9px",
                           fontSize: "0.875rem",
                           height: "39px",
                           borderRadius: "6px",
                           padding: "9px 18px",
                           cursor: "pointer",
                           fontWeight: 500,
                           background: theme.palette.mode === "light" ? theme.colors.paper.card : theme.colors.gray[600],
+                          "&:hover": {
+                            background:
+                              theme.palette.mode === "light" ? theme.colors.paper.cardHover : theme.colors.gray[500],
+                          },
                         }}
-                        onClick={chain.unsupported ? openChainModal : openAccountModal}
                       >
                         <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
                         {chain.unsupported ? "Unsupported Network" : account.displayName}
                       </Box>
+                    </Button>
+                    <Button
+                      onClick={openChainModal}
+                      sx={{ paddingLeft: "15px", paddingRight: "0px", minWidth: "initial" }}
+                    >
                       <Box
                         display="flex"
                         alignItems="center"
@@ -177,7 +160,6 @@ export const ConnectButton = () => {
                               theme.palette.mode === "light" ? theme.colors.paper.cardHover : theme.colors.gray[500],
                           },
                         }}
-                        onClick={openChainModal}
                       >
                         {chain.unsupported && (
                           <Icon name="alert-circle" style={{ fill: theme.colors.feedback.error }} />
@@ -202,54 +184,10 @@ export const ConnectButton = () => {
                           </div>
                         )}
                       </Box>
-                    </>
-                  ) : (
-                    <Link
-                      component={RouterLink}
-                      to={"/wallet"}
-                      state={{ prevPath: location.pathname }}
-                      style={{ marginRight: "0px" }}
-                    >
-                      {mobile ? (
-                        <Button
-                          sx={{
-                            fontSize: "0.875rem",
-                            height: "39px",
-                            minWidth: "39px",
-                            borderRadius: "6px",
-                            background:
-                              theme.palette.mode === "dark" ? theme.colors.gray[500] : theme.colors.paper.card,
-                            color: theme.colors.gray[10],
-                            "&:hover": {
-                              background:
-                                theme.palette.mode === "dark" ? theme.colors.gray[90] : theme.colors.paper.cardHover,
-                              color: theme.colors.gray[10],
-                            },
-                          }}
-                        >
-                          <SvgIcon component={WalletIcon} />
-                        </Button>
-                      ) : (
-                        <Button
-                          sx={{
-                            borderRadius: "6px",
-                            padding: "9px 18px",
-                            marginLeft: "9px",
-                            fontSize: "0.875rem",
-                            height: "39px",
-                            background: theme.colors.gray[500],
-                            color: theme.colors.gray[10],
-                            "&:hover": { background: theme.colors.gray[90], color: theme.colors.gray[10] },
-                          }}
-                        >
-                          <SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
-                          {chain.unsupported ? "Unsupported Network" : account.displayName}
-                        </Button>
-                      )}
-                    </Link>
-                  )}
-                </Box>
-              );
+                    </Button>
+                  </Box>
+                );
+              }
             })()}
           </div>
         );

src/components/DevFaucet/index.tsx

@@ -0,0 +1,45 @@
+import { Box, FormControl, MenuItem, Select, Typography } from "@mui/material";
+import { SecondaryButton } from "@olympusdao/component-library";
+import { useState } from "react";
+import { useFaucet } from "src/components/TopBar/Wallet/hooks/useFaucet";
+
+export const DevFaucet = () => {
+  const PREFIX = "AssetsIndex";
+  const [faucetToken, setFaucetToken] = useState("OHM V2");
+  const faucetMutation = useFaucet();
+
+  const classes = {
+    selector: `${PREFIX}-selector`,
+    forecast: `${PREFIX}-forecast`,
+    faucet: `${PREFIX}-faucet`,
+  };
+  const isFaucetLoading = faucetMutation.isLoading;
+
+  return (
+    <>
+      <Typography variant="h5">Dev Faucet</Typography>
+      <Box display="flex" flexDirection="row" justifyContent="space-between" mt="18px">
+        <FormControl className={classes.faucet}>
+          <Select
+            label="Contract"
+            id="contract-select"
+            value={faucetToken}
+            onChange={event => setFaucetToken(event.target.value)}
+          >
+            <MenuItem value="OHM V1">OHM V1</MenuItem>
+            <MenuItem value="OHM V2">OHM V2</MenuItem>
+            <MenuItem value="sOHM V1">sOHM V1</MenuItem>
+            <MenuItem value="sOHM V2">sOHM V2</MenuItem>
+            <MenuItem value="wsOHM">wsOHM</MenuItem>
+            <MenuItem value="gOHM">gOHM</MenuItem>
+            <MenuItem value="DAI">DAI</MenuItem>
+            <MenuItem value="ETH">ETH</MenuItem>
+          </Select>
+        </FormControl>
+        <SecondaryButton onClick={() => faucetMutation.mutate(faucetToken)}>
+          {isFaucetLoading ? "Loading..." : "Get Tokens"}
+        </SecondaryButton>
+      </Box>
+    </>
+  );
+};