Merge pull request #138 from blend-capital/mobile-Q4W-fix

viewtype on q4w item
blend-capital · Jul 19, 2024 · 61448ed · 61448ed · github-actions · Jul 19, 2024
2 parents 912ecd9 + 4a33614
commit 61448ed
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blend-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -28,6 +28,7 @@
     "react": "^18.2.0",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
+    "toml": "^3.0.0",
     "@stellar/stellar-sdk": "12.1.0",
     "zustand": "^4.3.7"
   },

diff --git a/src/components/backstop/BackstopAPY.tsx b/src/components/backstop/BackstopAPY.tsx
@@ -36,7 +36,7 @@ export const BackstopAPY: React.FC<PoolComponentProps> = ({ poolId, sx, ...props
       }}
     >
       <Tooltip
-        title="Estimated APY based on backstop emissions and pool interest sharing."
+        title="Estimated APY based on pool interest sharing."
         placement="top"
         enterTouchDelay={0}
         enterDelay={500}

diff --git a/src/components/backstop/BackstopQueueItem.tsx b/src/components/backstop/BackstopQueueItem.tsx
@@ -2,6 +2,7 @@ import { PoolBackstopActionArgs, Q4W } from '@blend-capital/blend-sdk';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { Box, CircularProgress, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
+import { useSettings, ViewType } from '../../contexts';
 import { useWallet } from '../../contexts/wallet';
 import theme from '../../theme';
 import { toBalance, toTimeSpan } from '../../utils/formatter';
@@ -17,6 +18,8 @@ export interface BackstopQueueItemProps extends PoolComponentProps {
 export const BackstopQueueItem: React.FC<BackstopQueueItemProps> = ({ q4w, inTokens, poolId }) => {
   const { connected, walletAddress, backstopDequeueWithdrawal, backstopWithdraw } = useWallet();
 
+  const { viewType } = useSettings();
+
   const TOTAL_QUEUE_TIME_SECONDS = 21 * 24 * 60 * 60;
 
   const [timeLeft, setTimeLeft] = useState<number>(
@@ -49,70 +52,85 @@ export const BackstopQueueItem: React.FC<BackstopQueueItemProps> = ({ q4w, inTok
   };
 
   return (
-    <Row>
-      <Box sx={{ margin: '6px', padding: '6px', display: 'flex', alignItems: 'center' }}>
-        {timeLeft > 0 ? (
-          <Box
-            sx={{
-              position: 'relative',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              width: '50px',
-            }}
-          >
-            <CircularProgress
-              sx={{
-                color: theme.palette.positive.main,
-                marginLeft: '6px',
-                marginRight: '12px',
-                position: 'absolte',
-              }}
-              size="30px"
-              thickness={4.5}
-              variant="determinate"
-              value={timeWaitedPercentage * 100}
-            />
-            <CircularProgress
+    <>
+      <Row>
+        <Box sx={{ margin: '6px', padding: '6px', display: 'flex', alignItems: 'center' }}>
+          {timeLeft > 0 ? (
+            <Box
               sx={{
-                color: theme.palette.positive.opaque,
-                marginLeft: '6px',
-                marginRight: '12px',
-                position: 'absolute',
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '50px',
               }}
-              size="30px"
-              thickness={4.5}
-              variant="determinate"
-              value={100}
+            >
+              <CircularProgress
+                sx={{
+                  color: theme.palette.positive.main,
+                  marginLeft: '6px',
+                  marginRight: '12px',
+                  position: 'absolte',
+                }}
+                size="30px"
+                thickness={4.5}
+                variant="determinate"
+                value={timeWaitedPercentage * 100}
+              />
+              <CircularProgress
+                sx={{
+                  color: theme.palette.positive.opaque,
+                  marginLeft: '6px',
+                  marginRight: '12px',
+                  position: 'absolute',
+                }}
+                size="30px"
+                thickness={4.5}
+                variant="determinate"
+                value={100}
+              />
+            </Box>
+          ) : (
+            <CheckCircleOutlineIcon
+              sx={{ color: theme.palette.primary.main, marginRight: '12px', fontSize: '35px' }}
             />
-          </Box>
-        ) : (
-          <CheckCircleOutlineIcon
-            sx={{ color: theme.palette.primary.main, marginRight: '12px', fontSize: '35px' }}
-          />
-        )}
-        <TokenIcon symbol="blndusdclp" sx={{ marginRight: '12px' }}></TokenIcon>
-        <Box>
-          <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+          )}
+          <TokenIcon symbol="blndusdclp" sx={{ marginRight: '12px' }}></TokenIcon>
+          <Box>
+            <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+              <Typography variant="h4" sx={{ marginRight: '6px' }}>
+                {toBalance(inTokens)}
+              </Typography>
+              <Typography variant="body1" sx={{ color: theme.palette.text.secondary }}>
+                BLND-USDC LP
+              </Typography>
+            </Box>
             <Typography variant="h4" sx={{ marginRight: '6px' }}>
-              {toBalance(inTokens)}
-            </Typography>
-            <Typography variant="body1" sx={{ color: theme.palette.text.secondary }}>
-              BLND-USDC LP
+              {timeLeft > 0 ? toTimeSpan(timeLeft) : 'Unlocked'}
             </Typography>
           </Box>
-          <Typography variant="h4" sx={{ marginRight: '6px' }}>
-            {timeLeft > 0 ? toTimeSpan(timeLeft) : 'Unlocked'}
-          </Typography>
         </Box>
-      </Box>
-      <OpaqueButton
-        onClick={() => handleClick(q4w.amount)}
-        palette={theme.palette.positive}
-        sx={{ height: '35px', width: '108px', margin: '12px', padding: '6px' }}
-      >
-        {timeLeft > 0 ? 'Unqueue' : 'Withdraw'}
-      </OpaqueButton>
-    </Row>
+        {viewType === ViewType.REGULAR && (
+          <OpaqueButton
+            onClick={() => handleClick(q4w.amount)}
+            palette={theme.palette.positive}
+            sx={{ height: '35px', width: '108px', margin: '12px', padding: '6px' }}
+          >
+            {timeLeft > 0 ? 'Unqueue' : 'Withdraw'}
+          </OpaqueButton>
+        )}
+      </Row>
+      {viewType !== ViewType.REGULAR && (
+        <Row>
+          <OpaqueButton
+            onClick={() => handleClick(q4w.amount)}
+            palette={theme.palette.positive}
+            sx={{ height: '35px', width: '100%', margin: '12px', padding: '6px' }}
+          >
+            {timeLeft > 0 ? 'Unqueue' : 'Withdraw'}
+          </OpaqueButton>
+        </Row>
+      )}
+    </>
   );
 };
diff --git a/src/external/stellar-toml.ts b/src/external/stellar-toml.ts
@@ -1,5 +1,6 @@
 import { Reserve } from '@blend-capital/blend-sdk';
 import { Horizon, StellarToml } from '@stellar/stellar-sdk';
+import toml from 'toml';
 
 export type StellarTokenMetadata = {
   assetId: string;
@@ -25,7 +26,7 @@ export async function getTokenMetadataFromTOML(
     image: code ? `/icons/tokens/${code.toLowerCase()}.svg` : undefined,
     issuer: '',
   };
-  let toml;
+  let stellarToml: any;
 
   if (!reserve.tokenMetadata.asset) {
     // set soroban token defaults
@@ -62,11 +63,44 @@ export async function getTokenMetadataFromTOML(
           issuer: assetIssuer,
         };
       }
-      /* 2. Use their domain from their API account and use it attempt to load their stellar.toml */
-      toml = await StellarToml.Resolver.resolve(tokenAccountHomeDomain || '');
-      if (toml.CURRENCIES) {
+      if (tokenAccountHomeDomain === 'stellar.org') {
+        // If the account is stellar.org, we can return the default stellar asset token metadata values
+        return {
+          ...iconData,
+          assetId,
+          code: assetCode,
+          issuer: assetIssuer,
+        };
+      }
+      if (tokenAccountHomeDomain === 'circle.com') {
+        stellarToml = await fetch('https://www.circle.com/hubfs/stellar.toml.txt')
+          .then((response) => response.text())
+          .then(async (text) => {
+            try {
+              const tomlObject = toml.parse(text);
+              return Promise.resolve(tomlObject);
+            } catch (e: any) {
+              return Promise.reject(
+                new Error(
+                  `stellar.toml is invalid - Parsing error on line ${e.line}, column ${e.column}: ${e.message}`
+                )
+              );
+            }
+          })
+          .catch((err: Error) => {
+            if (err.message.match(/^maxContentLength size/)) {
+              throw new Error(`stellar.toml file exceeds allowed size`);
+            } else {
+              throw err;
+            }
+          });
+      } else {
+        /* 2. Use their domain from their API account and use it attempt to load their stellar.toml */
+        stellarToml = await StellarToml.Resolver.resolve(tokenAccountHomeDomain || '', {});
+      }
+      if (stellarToml.CURRENCIES) {
         /* If we find some currencies listed, check to see if they have the currency we're looking for listed */
-        for (const { code: currencyCode, issuer, image } of toml.CURRENCIES) {
+        for (const { code: currencyCode, issuer, image } of stellarToml.CURRENCIES) {
           // Check if all necessary fields are available
           if (
             currencyCode &&