Merge pull request #155 from blend-capital/update-next-and-wallet-kit

chore: upgrade wallet-kit to v1.2 and next to v14
blend-capital · Sep 16, 2024 · 8786ea9 · 8786ea9
2 parents c633927 + 64ef2c4
commit 8786ea9
Show file tree

Hide file tree

Showing 21 changed files with 335 additions and 263 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
@@ -4,9 +4,10 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    unoptimized: true, // Note: Required for static builds
+    unoptimized: true,
   },
   trailingSlash: true,
+  output: 'export',
 };
 
-export default nextConfig
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,25 +8,22 @@
     "build": "next build",
     "build:mainnet": "TARGET_ENV=production node loadEnv.js && next build",
     "build:testnet": "TARGET_ENV=testnet node loadEnv.js && next build",
-    "build-static": "next build && next export",
-    "build-static:mainnet": "TARGET_ENV=production node loadEnv.js && next build && next export",
-    "build-static:testnet": "TARGET_ENV=testnet node loadEnv.js && next build && next export",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@blend-capital/blend-sdk": "2.0.1",
-    "@creit.tech/stellar-wallets-kit": "0.8.2",
+    "@blend-capital/blend-sdk": "2.0.3",
+    "@creit.tech/stellar-wallets-kit": "1.2.1",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.6",
-    "@stellar/freighter-api": "^2.0.0",
+    "@stellar/freighter-api": "^3.0.0",
     "@stellar/stellar-sdk": "12.2.0",
     "@tanstack/react-query": "5.52.0",
     "bignumber.js": "^9.0.2",
     "copy-to-clipboard": "^3.3.3",
-    "next": "^12.3.4",
+    "next": "^14.2.11",
     "react": "^18.2.0",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",

diff --git a/src/components/backstop/BackstopAPR.tsx b/src/components/backstop/BackstopAPR.tsx
@@ -79,13 +79,14 @@ export const BackstopAPR: React.FC<PoolComponentProps> = ({ poolId, sx, ...props
         <Typography variant="h4" color={'text.primary'}>
           {toPercentage(estBackstopApr)}
         </Typography>
-        {backstopEmissionsPerDayPerLpToken && backstopEmissionsPerDayPerLpToken > 0 && (
-          <FlameIcon
-            height={22}
-            width={22}
-            title={getEmissionTextFromValue(backstopEmissionsPerDayPerLpToken, 'BLND-USDC LP')}
-          />
-        )}
+        {backstopEmissionsPerDayPerLpToken !== undefined &&
+          backstopEmissionsPerDayPerLpToken > 0 && (
+            <FlameIcon
+              height={22}
+              width={22}
+              title={getEmissionTextFromValue(backstopEmissionsPerDayPerLpToken, 'BLND-USDC LP')}
+            />
+          )}
       </Box>
     </Box>
   );

diff --git a/src/components/backstop/BackstopHeader.tsx b/src/components/backstop/BackstopHeader.tsx
@@ -21,11 +21,7 @@ export const BackstopHeader: React.FC<BackstopHeaderProps> = ({ type, sx, ...pro
       }}
       {...props}
     >
-      <Icon
-        src={`/icons/tokens/blndusdclp.svg`}
-        alt={`blndusdclp`}
-        sx={{ height: '30px', width: '30px' }}
-      />
+      <Icon src={`/icons/tokens/blndusdclp.svg`} alt={`blndusdclp`} height={30} width={30} />
       <Typography variant="h3" sx={{ marginLeft: '12px' }}>
         {headerText}
       </Typography>

diff --git a/src/components/backstop/BackstopJoinAnvil.tsx b/src/components/backstop/BackstopJoinAnvil.tsx
@@ -38,10 +38,9 @@ export const BackstopJoinAnvil = () => {
   const { data: blndBalanceRes } = useTokenBalance(BLND_ID, BLND_ASSET, horizonAccount);
   const { data: usdcBalanceRes } = useTokenBalance(USDC_ID, USDC_ASSET, horizonAccount);
   const { data: lpBalanceRes } = useTokenBalance(
-    backstop?.backstopToken.id,
+    backstop?.backstopToken?.id ?? '',
     undefined,
-    undefined,
-    backstop !== undefined
+    horizonAccount
   );
 
   const [currentToken, setCurrentToken] = useState<{

diff --git a/src/components/borrow/BorrowMarketCard.tsx b/src/components/borrow/BorrowMarketCard.tsx
@@ -30,6 +30,8 @@ export const BorrowMarketCard: React.FC<BorrowMarketCardProps> = ({
   const tableWidth = `${(100 / tableNum).toFixed(2)}%`;
   const liabilityFactor = reserve.getLiabilityFactor();
 
+  const emissionsPerAsset = reserve.emissionsPerYearPerBorrowedAsset();
+
   return (
     <SectionBase
       sx={{
@@ -75,12 +77,12 @@ export const BorrowMarketCard: React.FC<BorrowMarketCardProps> = ({
             }}
           >
             <Typography variant="body1">{formatter.toPercentage(reserve.borrowApr)}</Typography>
-            {reserve.borrowEmissions && (
+            {emissionsPerAsset > 0 && (
               <FlameIcon
                 width={22}
                 height={22}
                 title={formatter.getEmissionTextFromValue(
-                  reserve.emissionsPerYearPerBorrowedAsset(),
+                  emissionsPerAsset,
                   reserve.tokenMetadata?.symbol
                 )}
               />

diff --git a/src/components/borrow/BorrowPositionCard.tsx b/src/components/borrow/BorrowPositionCard.tsx
@@ -31,6 +31,9 @@ export const BorrowPositionCard: React.FC<BorrowPositionCardProps> = ({
   const tableNum = viewType === ViewType.REGULAR ? 5 : 3;
   const tableWidth = `${(100 / tableNum).toFixed(2)}%`;
   const buttonWidth = `${((100 / tableNum) * 1.5).toFixed(2)}%`;
+
+  const emissionsPerAsset = reserve.emissionsPerYearPerBorrowedAsset();
+
   return (
     <Box
       sx={{
@@ -75,12 +78,12 @@ export const BorrowPositionCard: React.FC<BorrowPositionCardProps> = ({
         }}
       >
         <Typography variant="body1">{formatter.toPercentage(reserve.borrowApr)}</Typography>
-        {reserve.borrowEmissions && (
+        {emissionsPerAsset > 0 && (
           <FlameIcon
             width={22}
             height={22}
             title={formatter.getEmissionTextFromValue(
-              reserve.emissionsPerYearPerBorrowedAsset(),
+              emissionsPerAsset,
               reserve.tokenMetadata.symbol
             )}
           />

diff --git a/src/components/common/FlameIcon.tsx b/src/components/common/FlameIcon.tsx
@@ -1,5 +1,5 @@
 import { Box, Tooltip, useTheme } from '@mui/material';
-import Image from 'next/image';
+import { Icon } from './Icon';
 
 export function FlameIcon({
   width = 32,
@@ -11,6 +11,10 @@ export function FlameIcon({
   title?: string;
 }) {
   const theme = useTheme();
+  const size = Math.min(width, height);
+  const iconHeight = Math.floor(size * 0.8);
+  // flame icon width is 77% of the of the height
+  const iconWidth = Math.floor(size * 0.77 * 0.8);
   return (
     <Tooltip
       disableHoverListener={!title}
@@ -27,14 +31,20 @@ export function FlameIcon({
           backgroundColor: theme.palette.primary.opaque,
           color: theme.palette.primary.main,
           borderRadius: '50%',
-          padding: '4px',
           margin: '6px',
-          display: 'flex',
           width,
           height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
-        <Image src="/icons/dashboard/flame.svg" height={height} width={width} alt="emmission" />
+        <Icon
+          src="/icons/dashboard/flame.svg"
+          height={iconHeight}
+          width={iconWidth}
+          alt="emmission"
+        />
       </Box>
     </Tooltip>
   );

diff --git a/src/components/common/Icon.tsx b/src/components/common/Icon.tsx
@@ -1,29 +1,38 @@
-import { Icon as MuiIcon, IconProps as MuiIconProps } from '@mui/material';
+import { Box, SxProps, Theme } from '@mui/material';
 import Image from 'next/image';
 
-export interface IconProps extends MuiIconProps {
+export interface IconProps {
   src: string;
   alt: string;
-  height?: string;
-  width?: string;
+  height?: number;
+  width?: number;
   isCircle?: boolean; // defaults to true
+  sx?: SxProps<Theme>;
+  onError?: (error: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }
 
-export const Icon: React.FC<IconProps> = ({ src, alt, height, width, isCircle, sx, ...props }) => {
-  const resolvedHeight = height != undefined ? height : '30px';
-  const resolvedWidth = width != undefined ? width : '30px';
-  const resolvedIsCircle = isCircle == undefined ? true : isCircle;
+export const Icon: React.FC<IconProps> = ({
+  src,
+  alt,
+  height = 30,
+  width = 30,
+  isCircle = true,
+  sx,
+  onError,
+}) => {
   return (
-    <MuiIcon
+    <Box
       sx={{
-        borderRadius: resolvedIsCircle ? '50%' : '5px',
-        height: resolvedHeight,
-        width: resolvedWidth,
+        borderRadius: isCircle ? '50%' : '5px',
+        width,
+        height,
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'inline-block',
         ...sx,
       }}
-      {...props}
     >
-      <Image src={src} alt={alt} width="100%" height="100%" />
-    </MuiIcon>
+      <Image src={src} alt={alt} layout="fill" objectFit="cover" onError={onError} />
+    </Box>
   );
 };
diff --git a/src/components/dashboard/PositionOverview.tsx b/src/components/dashboard/PositionOverview.tsx
@@ -122,11 +122,8 @@ export const PositionOverview: React.FC<PoolComponentProps> = ({ poolId }) => {
               <Icon
                 alt="BLND Token Icon"
                 src="/icons/tokens/blnd-yellow.svg"
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                }}
-                color="warning"
+                height={24}
+                width={24}
               />
             </Box>
             <StackedText

diff --git a/src/components/lend/LendMarketCard.tsx b/src/components/lend/LendMarketCard.tsx
@@ -33,6 +33,8 @@ export const LendMarketCard: React.FC<LendMarketCardProps> = ({
 
   const tableNum = viewType === ViewType.REGULAR ? 5 : 3;
   const tableWidth = `${(100 / tableNum).toFixed(2)}%`;
+
+  const emissionsPerAsset = reserve.emissionsPerYearPerSuppliedAsset();
   return (
     <SectionBase
       sx={{
@@ -80,12 +82,12 @@ export const LendMarketCard: React.FC<LendMarketCardProps> = ({
             }}
           >
             <Typography variant="body1">{formatter.toPercentage(reserve.supplyApr)}</Typography>
-            {reserve.supplyEmissions && (
+            {emissionsPerAsset > 0 && (
               <FlameIcon
                 width={22}
                 height={22}
                 title={formatter.getEmissionTextFromValue(
-                  reserve.emissionsPerYearPerSuppliedAsset(),
+                  emissionsPerAsset,
                   reserve.tokenMetadata?.symbol
                 )}
               />

diff --git a/src/components/lend/LendPositionCard.tsx b/src/components/lend/LendPositionCard.tsx
@@ -28,6 +28,8 @@ export const LendPositionCard: React.FC<LendPositionCardProps> = ({
 
   const assetFloat = reserve.toAssetFromBTokenFloat(bTokens);
 
+  const emissionsPerAsset = reserve.emissionsPerYearPerSuppliedAsset();
+
   const tableNum = viewType === ViewType.REGULAR ? 5 : 3;
   const tableWidth = `${(100 / tableNum).toFixed(2)}%`;
   const buttonWidth = `${((100 / tableNum) * 1.5).toFixed(2)}%`;
@@ -77,12 +79,12 @@ export const LendPositionCard: React.FC<LendPositionCardProps> = ({
         }}
       >
         <Typography variant="body1">{formatter.toPercentage(reserve.supplyApr)}</Typography>
-        {reserve.supplyEmissions && (
+        {emissionsPerAsset > 0 && (
           <FlameIcon
             width={22}
             height={22}
             title={formatter.getEmissionTextFromValue(
-              reserve.emissionsPerYearPerSuppliedAsset(),
+              emissionsPerAsset,
               reserve.tokenMetadata.symbol
             )}
           />

diff --git a/src/components/pool/PoolIcon.tsx b/src/components/pool/PoolIcon.tsx
@@ -1,6 +1,6 @@
-import { Icon, IconProps } from '@mui/material';
-import Image from 'next/image';
+import { IconProps } from '@mui/material';
 import React, { useState } from 'react';
+import { Icon } from '../common/Icon';
 
 export interface PoolIconProps extends IconProps {
   name: string;
@@ -10,9 +10,5 @@ export const PoolIcon: React.FC<PoolIconProps> = ({ name, ...props }) => {
   const [imgSrc, setImgSrc] = useState<string>(`/icons/pools/${name.toLowerCase()}.svg`);
   const onError = () => setImgSrc(`/icons/pools/blend.svg`);
 
-  return (
-    <Icon sx={{ borderRadius: '50%', ...props.sx }} {...props}>
-      <Image src={imgSrc} alt={`${name}`} onError={onError} width="100%" height="100%" />
-    </Icon>
-  );
+  return <Icon src={imgSrc} alt={`${name}`} onError={onError} />;
 };
diff --git a/src/contexts/wallet.tsx b/src/contexts/wallet.tsx
@@ -19,7 +19,7 @@ import {
   WalletNetwork,
   XBULL_ID,
   xBullModule,
-} from '@creit.tech/stellar-wallets-kit/build/index';
+} from '@creit.tech/stellar-wallets-kit/index';
 import { getNetworkDetails as getFreighterNetwork } from '@stellar/freighter-api';
 import {
   Asset,
@@ -170,7 +170,7 @@ export const WalletProvider = ({ children = null as any }) => {
    */
   async function handleSetWalletAddress(): Promise<boolean> {
     try {
-      const publicKey = await walletKit.getPublicKey();
+      const { address: publicKey } = await walletKit.getAddress();
       if (publicKey === '' || publicKey == undefined) {
         console.error('Unable to load wallet key: ', publicKey);
         return false;
@@ -223,13 +223,12 @@ export const WalletProvider = ({ children = null as any }) => {
     if (connected) {
       setTxStatus(TxStatus.SIGNING);
       try {
-        let { result } = await walletKit.signTx({
-          xdr: xdr,
-          publicKeys: [walletAddress],
-          network: network.passphrase as WalletNetwork,
+        let { signedTxXdr } = await walletKit.signTransaction(xdr, {
+          address: walletAddress,
+          networkPassphrase: network.passphrase as WalletNetwork,
         });
         setTxStatus(TxStatus.SUBMITTING);
-        return result;
+        return signedTxXdr;
       } catch (e: any) {
         if (e === 'User declined access') {
           setTxFailure('Transaction rejected by wallet.');

diff --git a/src/pages/backstop-token.tsx b/src/pages/backstop-token.tsx
@@ -58,7 +58,9 @@ const BackstopToken: NextPage = () => {
           src={'/icons/pageicons/blnd_usdc_pair.svg'}
           alt={`blndusdclp`}
           isCircle={false}
-          sx={{ marginRight: '12px', height: '42px', width: '42px' }}
+          height={30}
+          width={45}
+          sx={{ marginRight: '12px' }}
         />
         <Typography variant="h2">{title}</Typography>
         <IconButton

diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
@@ -30,6 +30,7 @@ const Borrow: NextPage = () => {
   const availableToBorrow = reserve
     ? totalSupplied * maxUtilFloat - reserve.totalLiabilitiesFloat()
     : 0;
+  const emissionsPerAsset = reserve !== undefined ? reserve.emissionsPerYearPerBorrowedAsset() : 0;
 
   return (
     <>
@@ -98,12 +99,12 @@ const Borrow: NextPage = () => {
             text={
               <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                 {toPercentage(reserve?.borrowApr)}{' '}
-                {reserve?.borrowEmissions && (
+                {emissionsPerAsset > 0 && (
                   <FlameIcon
                     width={22}
                     height={22}
                     title={getEmissionTextFromValue(
-                      reserve.emissionsPerYearPerBorrowedAsset(),
+                      emissionsPerAsset,
                       reserve?.tokenMetadata?.symbol || 'token'
                     )}
                   />