Merge pull request #133 from blend-capital/pool-details

Pool details
blend-capital · May 24, 2024 · 829d361 · 829d361
2 parents aa27f54 + 9dd33f6
commit 829d361
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 10 deletions.
diff --git a/public/icons/pageicons/blnd_usdc_pair.svg b/public/icons/pageicons/blnd_usdc_pair.svg
diff --git a/src/components/markets/MarketCardCollapse.tsx b/src/components/markets/MarketCardCollapse.tsx
@@ -1,4 +1,5 @@
 import { BackstopPool, Pool } from '@blend-capital/blend-sdk';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Box, BoxProps, Typography, useTheme } from '@mui/material';
@@ -40,12 +41,7 @@ export const MarketCardCollapse: React.FC<MarketCardCollapseProps> = ({
       }}
       {...props}
     >
-      <Row
-        sx={{
-          flex: 'flex',
-          flexDirection: viewType === ViewType.REGULAR ? 'row' : 'column',
-        }}
-      >
+      <Row>
         <OpaqueButton
           palette={theme.palette.accent}
           sx={{
@@ -77,6 +73,13 @@ export const MarketCardCollapse: React.FC<MarketCardCollapseProps> = ({
             </Box>
           </Box>
         </OpaqueButton>
+      </Row>
+      <Row
+        sx={{
+          flex: 'flex',
+          flexDirection: viewType === ViewType.REGULAR ? 'row' : 'column',
+        }}
+      >
         <OpaqueButton
           palette={theme.palette.accent}
           sx={{
@@ -107,6 +110,43 @@ export const MarketCardCollapse: React.FC<MarketCardCollapseProps> = ({
             </Box>
           </Box>
         </OpaqueButton>
+        <OpaqueButton
+          palette={theme.palette.accent}
+          sx={{
+            width: SectionSize.FULL,
+            margin: '6px',
+            padding: '6px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            color: theme.palette.text.secondary,
+            cursor: 'default',
+          }}
+          onClick={() => {
+            if (poolData.config.admin.charAt(0) === 'G') {
+              window.open(
+                `${process.env.NEXT_PUBLIC_STELLAR_EXPERT_URL}/account/${poolData.config.admin}`,
+                '_blank'
+              );
+            } else {
+              window.open(
+                `${process.env.NEXT_PUBLIC_STELLAR_EXPERT_URL}/contract/${poolData.config.admin}`,
+                '_blank'
+              );
+            }
+          }}
+        >
+          <Box sx={{ margin: '6px', height: '30px', width: '30px' }}>
+            <AdminPanelSettingsIcon sx={{ fontSize: 30 }} />
+          </Box>
+          <Box sx={{ padding: '6px', display: 'flex', flexDirection: 'row', height: '30px' }}>
+            <Box sx={{ paddingRight: '12px', lineHeight: '100%' }}>{`Admin ${toCompactAddress(
+              poolData.config.admin
+            )}`}</Box>
+            <Box>
+              <OpenInNewIcon fontSize="inherit" />
+            </Box>
+          </Box>
+        </OpaqueButton>
       </Row>
       <Row>
         <LinkBox
@@ -161,7 +201,7 @@ export const MarketCardCollapse: React.FC<MarketCardCollapseProps> = ({
               </Row>
               <Row>
                 <StackedTextBox
-                  name="Backstop APY"
+                  name="APY"
                   text={toPercentage(estBackstopApy)}
                   sx={{ width: '50%' }}
                 />
@@ -170,6 +210,11 @@ export const MarketCardCollapse: React.FC<MarketCardCollapseProps> = ({
                   text={toPercentage(backstopPoolData.estimates.q4wPercentage)}
                   sx={{ width: '50%', color: theme.palette.backstop.main }}
                 />
+                <StackedTextBox
+                  name="Take Rate"
+                  text={toPercentage(poolData.config.backstopRate / 1e7)}
+                  sx={{ width: '50%', color: theme.palette.backstop.main }}
+                />
               </Row>
             </Box>
           </OpaqueButton>

diff --git a/src/pages/backstop-token.tsx b/src/pages/backstop-token.tsx
@@ -1,4 +1,5 @@
-import { Typography, useTheme } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { IconButton, Typography, useTheme } from '@mui/material';
 import type { NextPage } from 'next';
 import { BackstopExitAnvil } from '../components/backstop/BackstopExitAnvil';
 import { BackstopJoinAnvil } from '../components/backstop/BackstopJoinAnvil';
@@ -37,11 +38,34 @@ const BackstopToken: NextPage = () => {
     }
   };
 
+  const title = viewType === ViewType.MOBILE ? 'BLND-USDC LP' : '80:20 BLND-USDC Liquidity Pool';
+
   return (
     <>
       <Row sx={{ margin: '12px', justifyContent: 'flex-start', alignItems: 'center' }}>
         <GoBackButton sx={{ backgroundColor: theme.palette.background.paper, margin: '12px' }} />
-        <Typography variant="h2">80:20 BLND-USDC Liquidity Pool</Typography>
+        <Icon
+          src={'/icons/pageicons/blnd_usdc_pair.svg'}
+          alt={`blndusdclp`}
+          isCircle={false}
+          sx={{ marginRight: '12px', height: '42px', width: '42px' }}
+        />
+        <Typography variant="h2">{title}</Typography>
+        <IconButton
+          onClick={() =>
+            window.open(
+              `${process.env.NEXT_PUBLIC_STELLAR_EXPERT_URL}/contract/${backstopData?.config?.backstopTkn}`,
+              '_blank'
+            )
+          }
+          size="small"
+          sx={{
+            marginLeft: '6px',
+            color: theme.palette.text.secondary,
+          }}
+        >
+          <OpenInNewIcon fontSize="inherit" />
+        </IconButton>
       </Row>
       <Divider />
       <Row>

diff --git a/src/pages/backstop.tsx b/src/pages/backstop.tsx
@@ -235,7 +235,7 @@ const Backstop: NextPage = () => {
           >
             <LinkBox sx={{ width: SectionSize.TILE }} to={{ pathname: '/backstop-token' }}>
               <OpaqueButton palette={theme.palette.primary} sx={{ width: '100%', padding: '6px' }}>
-                Get More
+                Manage
               </OpaqueButton>
             </LinkBox>
             <LinkBox