Skip to content

Commit

Permalink
My Balances (#3018)
Browse files Browse the repository at this point in the history 
* remove zap. remove mention of rebases.

* OLY-53

* code cleanup. more work on my balances page

* modal and cleanup

* mobile fixes

* update tests

* add gohm tag

* feedback updates

* more improvements

* remove unreachable pages

* fix href

* more improvements. replace stake with wrap

* remaining staking updates

* copy

* more feedback

* copy

* adjust based on feedback
  • Loading branch information
@brightiron
brightiron authored Nov 22, 2023
1 parent b7d6fca commit aee1d60
Show file tree
Hide file tree
Showing 74 changed files with 1,395 additions and 4,495 deletions.
32 changes: 4 additions & 28 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
12 changes: 0 additions & 12 deletions src/assets/balancer.svg
View file

This file was deleted.

Binary file removed src/assets/sushiswap.png
View file
Binary file not shown.
Binary file removed src/assets/uniswap.png
View file
Binary file not shown.
180 changes: 59 additions & 121 deletions src/components/ConnectButton/ConnectButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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>
Expand Down Expand Up @@ -45,7 +46,7 @@ export const InPageConnectButton = ({
size={size}
>
<SvgIcon component={WalletIcon} style={{ marginRight: "9px" }} />
Connect Wallet
{buttonText}
</PrimaryButton>
);
}
Expand All @@ -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 }) => {
Expand All @@ -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"
Expand All @@ -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 }} />
Expand All @@ -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>
);
Expand Down
45 changes: 45 additions & 0 deletions src/components/DevFaucet/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
Loading

0 comments on commit aee1d60

Please sign in to comment.