Adjust styles and facilitate wallet connect (#902)

TempleDAO · Dec 5, 2023 · 4f8540f · 4f8540f
1 parent b4dfe7a
commit 4f8540f
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 45 deletions.
diff --git a/apps/dapp/src/components/Layouts/V2Layout/Nav/MobileNav.tsx b/apps/dapp/src/components/Layouts/V2Layout/Nav/MobileNav.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import Image from '../../../Image/Image';
 import footerTexture from 'assets/images/newui-images/footerTexture.svg';
-import temple_dao_logo from '../assets/temple-dao-logo.png';
+import temple_dao_logo from 'assets/images/sun-art.svg';
 import core_hamburger from 'assets/icons/core-hamburger.svg';
 import { MobileNavOverlay } from './MobileNavOverlay';
 import NavLinks from './NavLinks';

diff --git a/apps/dapp/src/components/Layouts/V2Layout/Nav/NavLinks.tsx b/apps/dapp/src/components/Layouts/V2Layout/Nav/NavLinks.tsx
@@ -9,7 +9,7 @@ import dashboard from '../assets/dashboard.png';
 import payments from '../assets/payments.png';
 import restore from '../assets/restore.png';
 import candle from '../assets/candle.png';
-import temple_dao_logo from '../assets/temple-dao-logo.png';
+import temple_dao_logo from 'assets/images/sun-art.svg';
 import TruncatedAddress from 'components/TruncatedAddress';
 
 import Loader from 'components/Loader/Loader';
@@ -64,7 +64,9 @@ const NavLinks = ({ isNavCollapsed = false, onClickHandler }: NavLinksProps) =>
 
   return (
     <>
-      <TempleLogo src={temple_dao_logo} />
+      <TempleLink to="/">
+        <TempleLogo src={temple_dao_logo} />
+      </TempleLink>
       <NavLink to="/v2dapp/dashboard/all" onClick={() => wrappedClickHandler()}>
         <NavLinkCell>
           {/* // TODO: Icon can be split into its own component */}
@@ -184,6 +186,10 @@ const TempleLogo = styled(Image)`
   `)};
 `;
 
+const TempleLink = styled(Link)`
+  align-self: center;
+`;
+
 const NavIcon = styled(Image)`
   vertical-align: middle;
 `;

diff --git a/apps/dapp/src/components/Layouts/V2Layout/assets/temple-dao-logo.png b/apps/dapp/src/components/Layouts/V2Layout/assets/temple-dao-logo.png
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Borrow/Chart.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Borrow/Chart.tsx
@@ -1,7 +1,7 @@
 import { ChartSupportedTimeInterval, LabeledTimeIntervals, TIME_INTERVAL } from 'utils/time-intervals';
 import type { AxisDomain } from 'recharts/types/util/types';
 import { useEffect, useState } from 'react';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { format } from 'date-fns';
 import { LineChart } from 'components/Charts';
 import Loader from 'components/Loader/Loader';
@@ -39,7 +39,7 @@ const tooltipValuesFormatter = (value: number, name: string) => [
 
 const yDomain: AxisDomain = ([dataMin, dataMax]) => [dataMin * 0.5, Number((dataMax * 1.5).toFixed(2))];
 
-export const TemplePriceChart = () => {
+export const TlcChart = () => {
   const [selectedInterval, setSelectedInterval] = useState<ChartIntervals>('1M');
   const theme = useTheme();
   const [metrics, setMetrics] = useState<Metric[]>();
@@ -71,11 +71,13 @@ export const TemplePriceChart = () => {
 
   return (
     <>
-      <IntervalToggler
-        selectedInterval={selectedInterval}
-        setSelectedInterval={setSelectedInterval as any}
-        intervals={CHART_INTERVALS}
-      />
+      <IntervalPosition>
+        <IntervalToggler
+          selectedInterval={selectedInterval}
+          setSelectedInterval={setSelectedInterval as any}
+          intervals={CHART_INTERVALS}
+        />
+      </IntervalPosition>
       {
         <LineChart
           chartData={formattedData[selectedInterval].reverse()}
@@ -97,3 +99,9 @@ export const TemplePriceChart = () => {
     </>
   );
 };
+
+const IntervalPosition = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+`;
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Borrow/index.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Borrow/index.tsx
@@ -18,8 +18,9 @@ import Withdraw from './TLC/Withdraw';
 import Supply from './TLC/Supply';
 import { getBigNumberFromString, getTokenInfo } from 'components/Vault/utils';
 import { useNotification } from 'providers/NotificationProvider';
-import { TemplePriceChart } from './Chart';
+import { TlcChart } from './Chart';
 import env from 'constants/env';
+import { useConnectWallet } from '@web3-onboard/react';
 
 export type State = {
   supplyValue: string;
@@ -45,6 +46,7 @@ export const MAX_LTV = 75;
 export type Prices = { templePrice: number; daiPrice: number; tpi: number };
 
 export const BorrowPage = () => {
+  const [{}, connect] = useConnectWallet();
   const { balance, wallet, updateBalance, signer, ensureAllowance } = useWallet();
   const { openNotification } = useNotification();
   const [modal, setModal] = useState<'closed' | 'supply' | 'withdraw' | 'borrow' | 'repay'>('closed');
@@ -285,25 +287,25 @@ export const BorrowPage = () => {
 
   return (
     <>
-      <FlexRow>
+      <PageContainer>
         <FlexCol>
-          <MinWidth>
-            <FlexBetween>
-              <MetricContainer>
-                <LeadMetric>${tlcInfo && Number(tlcInfo.debtCeiling).toLocaleString()}</LeadMetric>
-                <BrandParagraph>Total Debt Ceiling</BrandParagraph>
-              </MetricContainer>
-              <MetricContainer>
-                <LeadMetric>${tlcInfo && Number(tlcInfo.strategyBalance).toLocaleString()}</LeadMetric>
-                <BrandParagraph>Available to Borrow</BrandParagraph>
-              </MetricContainer>
-              <MetricContainer>
-                <LeadMetric>{getBorrowRate()}%</LeadMetric>
-                <BrandParagraph>Current Borrow APY</BrandParagraph>
-              </MetricContainer>
-            </FlexBetween>
-            <TemplePriceChart />
-          </MinWidth>
+          <Metrics>
+            <MetricContainer>
+              <LeadMetric>${tlcInfo && Number(tlcInfo.debtCeiling).toLocaleString()}</LeadMetric>
+              <BrandParagraph>Total Debt Ceiling</BrandParagraph>
+            </MetricContainer>
+            <MetricContainer>
+              <LeadMetric>${tlcInfo && Number(tlcInfo.strategyBalance).toLocaleString()}</LeadMetric>
+              <BrandParagraph>Available to Borrow</BrandParagraph>
+            </MetricContainer>
+            <MetricContainer>
+              <LeadMetric>{getBorrowRate()}%</LeadMetric>
+              <BrandParagraph>Current Borrow APY</BrandParagraph>
+            </MetricContainer>
+          </Metrics>
+          <ChartContainer>
+            <TlcChart />
+          </ChartContainer>
         </FlexCol>
 
         <TlcContainer>
@@ -336,7 +338,12 @@ export const BorrowPage = () => {
               <Copy>Supply TEMPLE as collateral to borrow DAI</Copy>
               <Rule />
               <JustifyEvenlyRow>
-                <TradeButton onClick={() => setModal('supply')} disabled={!accountPosition}>
+                <TradeButton
+                  onClick={() => {
+                    if (wallet) setModal('supply');
+                    else connect();
+                  }}
+                >
                   Supply
                 </TradeButton>
                 <TradeButton
@@ -412,7 +419,7 @@ export const BorrowPage = () => {
             </>
           )}
         </TlcContainer>
-      </FlexRow>
+      </PageContainer>
 
       {/* Modal for executing supply/withdraw/borrow/repay */}
       <Popover isOpen={modal != 'closed'} onClose={() => setModal('closed')} closeOnClickOutside showCloseButton>
@@ -452,13 +459,15 @@ export const BorrowPage = () => {
   );
 };
 
-const FlexRow = styled.div`
+const PageContainer = styled.div`
   display: flex;
   flex-direction: row;
+  padding: 1rem 0 2rem 2rem;
   @media (max-width: 1240px) {
-    flex-direction: column;
+    flex-direction: column-reverse;
     gap: 3rem;
     align-items: center;
+    padding: 1rem 0rem;
   }
 `;
 
@@ -467,11 +476,16 @@ const FlexCol = styled.div`
   flex-direction: column;
 `;
 
-const MinWidth = styled.div`
+const ChartContainer = styled.div`
   width: 750px;
   margin-right: 3rem;
   @media (max-width: 768px) {
-    width: 90%;
+    width: 500px;
+    margin-right: 0;
+  }
+  @media (max-width: 500px) {
+    width: 350px;
+    margin-left: -4rem;
   }
 `;
 
@@ -485,6 +499,7 @@ const TlcContainer = styled.div`
   color: ${({ theme }) => theme.palette.brand};
   width: 350px;
   height: min-content;
+  margin-left: 2rem;
 `;
 
 const TlcTabs = styled.div`
@@ -605,6 +620,16 @@ const JustifyEvenlyRow = styled.div`
   justify-content: space-evenly;
 `;
 
+const Metrics = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: ${({ theme }) => theme.palette.brandLight};
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
 const MetricContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/OhmagePage.tsx b/apps/dapp/src/components/Pages/Core/DappPages/OhmagePage.tsx
@@ -11,11 +11,13 @@ import { getBigNumberFromString, getTokenInfo } from 'components/Vault/utils';
 import { useNotification } from 'providers/NotificationProvider';
 import { fromAtto } from 'utils/bigNumber';
 import { BigNumber, ethers } from 'ethers';
+import { useConnectWallet } from '@web3-onboard/react';
 
 const OHM = TICKER_SYMBOL.OHM;
 const ohmToNum = (amount: BigNumber) => Number(ethers.utils.formatUnits(amount, getTokenInfo(OHM).decimals));
 
 export const OhmagePage = () => {
+  const [{}, connect] = useConnectWallet();
   const { balance, wallet, updateBalance, signer, ensureAllowance } = useWallet();
   const [input, setInput] = useState('');
   const [output, setOutput] = useState(0);
@@ -132,16 +134,27 @@ export const OhmagePage = () => {
         ) : (
           <p>You will receive {output.toLocaleString()} DAI</p>
         )}
-        <TradeButton
-          onClick={() => {
-            if (insufficientAllowance) approve();
-            else swap();
-          }}
-          disabled={!signer || insufficientBalance || insufficientDaiAvailable || balance.OHM.isZero()}
-          style={{ margin: 'auto', whiteSpace: 'nowrap' }}
-        >
-          {insufficientBalance ? 'Insufficient balance' : insufficientAllowance ? 'Approve allowance' : 'Swap'}
-        </TradeButton>
+        {wallet ? (
+          <TradeButton
+            onClick={() => {
+              if (insufficientAllowance) approve();
+              else swap();
+            }}
+            disabled={!signer || insufficientBalance || insufficientDaiAvailable || balance.OHM.isZero()}
+            style={{ margin: 'auto', whiteSpace: 'nowrap' }}
+          >
+            {insufficientBalance ? 'Insufficient balance' : insufficientAllowance ? 'Approve allowance' : 'Swap'}
+          </TradeButton>
+        ) : (
+          <TradeButton
+            onClick={() => {
+              connect();
+            }}
+            style={{ margin: 'auto', whiteSpace: 'nowrap' }}
+          >
+            Connect Wallet
+          </TradeButton>
+        )}
       </Container>
     </Center>
   );