update ui

yimingWOW · Jan 14, 2025 · e945bec · e945bec
1 parent 7c65064
commit e945bec
Show file tree

Hide file tree

Showing 21 changed files with 284 additions and 181 deletions.
diff --git a/app/src/components/BorrowForm.tsx b/app/src/components/BorrowForm.tsx
@@ -21,7 +21,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ pool, details, onSuccess }) =>
   const [isLoading, setIsLoading] = useState(false);
   const [borrowAmount, setBorrowAmount] = useState("");
 
-  const maxBorrowAmount = Number(details.userAssets.collateralReceiptAmount) * details.pool.bToA/pool.minCollateralRatio*BASE_RATE;
+  const maxBorrowAmount = Number(details.userAssets.collateralReceiptAmount) * details.poolInfo.bToA/pool.minCollateralRatio*BASE_RATE;
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -44,7 +44,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ pool, details, onSuccess }) =>
         throw new Error("Amount exceeds maximum borrowable amount");
       }
 
-      const poolPubkey = new PublicKey(pool.pubkey);
+      const poolPubkey = new PublicKey(pool.poolPk);
       const mintAPubkey = new PublicKey(pool.mintA);
       const mintBPubkey = new PublicKey(pool.mintB);
 
@@ -99,7 +99,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ pool, details, onSuccess }) =>
           />
         </div>
         <div className="lending-pool-info-summary">
-          <div>Pool: {pool.pubkey.toString().slice(0, 4)}...{pool.pubkey.toString().slice(-4)}</div>
+          <div>Pool: {pool.poolPk.toString().slice(0, 4)}...{pool.poolPk.toString().slice(-4)}</div>
           <div>Token A (Borrow): {pool.mintA.toString().slice(0, 4)}...{pool.mintA.toString().slice(-4)}</div>
           <div>Token B (Collateral): {pool.mintB.toString().slice(0, 4)}...{pool.mintB.toString().slice(-4)}</div>
           <div>Min Collateral Ratio: {minCollateralRatio}%</div>

diff --git a/app/src/components/BorrowerPoolItem.tsx b/app/src/components/BorrowerPoolItem.tsx
@@ -26,12 +26,7 @@ export const BorrowerPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
       setIsLoadingDetails(true);
       const poolDetail = await getPoolDetail(
         connection, 
-        {
-          pubkey: pool.pubkey.toString(),
-          amm: pool.amm.toString(),
-          mintA: pool.mintA.toString(),
-          mintB: pool.mintB.toString(),
-        },
+        pool,
         walletPublicKey || new PublicKey('')
       );
       setDetails(poolDetail);
@@ -57,15 +52,15 @@ export const BorrowerPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
           <>
             <div className="pool-details">
               <span className="pool-label">TokenA Amount in Liquidity Pool:</span>
-              <span className="pool-value">{details.pool.tokenAAmount.toFixed(6)}</span>
+              <span className="pool-value">{details.poolInfo.tokenAAmount.toFixed(6)}</span>
               <span className="pool-label">TokenB Amount in Liquidity Pool:</span>
-              <span className="pool-value">{details.pool.tokenBAmount.toFixed(6)}</span>
+              <span className="pool-value">{details.poolInfo.tokenBAmount.toFixed(6)}</span>
             </div>
             <div className="pool-details">
               <span className="pool-label">Price (A → B):</span>
-              <span className="pool-value">1 A = {details.pool.aToB.toFixed(6)} B</span>
+              <span className="pool-value">1 A = {details.poolInfo.aToB.toFixed(6)} B</span>
               <span className="pool-label">Price (B → A):</span>
-              <span className="pool-value">1 B = {details.pool.bToA.toFixed(6)} A</span>
+              <span className="pool-value">1 B = {details.poolInfo.bToA.toFixed(6)} A</span>
             </div>
           </>
         ) : (
@@ -86,29 +81,31 @@ export const BorrowerPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
               </span>
             </div>
 
+            <div className="pool-details">
+              <span className="pool-label">Credit Pool tokenA Amount:</span>
+              <span className="pool-value">{details.lendingPoolInfo.tokenAAmount.toFixed(6)}</span>
+            </div>
+
             <div className="pool-details">
               <span className="pool-label">Token B mint addr:</span>
               <span className="pool-value" title={pool.mintB.toString()}>
                 {pool.mintB.toString()}
               </span>
             </div>
 
+            <div className="pool-details">
+              <span className="pool-label">Credit Pool tokenB Amount:</span>
+              <span className="pool-value">{details.lendingPoolInfo.tokenBAmount.toFixed(6)}</span>
+            </div>
+
             <div className="pool-details">
               <span className="pool-label">Min Collateral Ratio:</span>
               <span className="pool-value" title={pool.minCollateralRatio.toString()}>
                 {(pool.minCollateralRatio/BASE_RATE).toFixed(6)}
               </span>
             </div>
 
-            <div className="pool-details">
-              <span className="pool-label">Credit Pool tokenA Amount:</span>
-              <span className="pool-value">{details.lendingPool.tokenAAmount.toFixed(6)}</span>
-            </div>
 
-            <div className="pool-details">
-              <span className="pool-label">Credit Pool tokenB Amount:</span>
-              <span className="pool-value">{details.lendingPool.tokenBAmount.toFixed(6)}</span>
-            </div>
           </>
         ) : (
           <div className="error-message">Failed to load credit pool details</div>

diff --git a/app/src/components/BorrowerPoolList.tsx b/app/src/components/BorrowerPoolList.tsx
@@ -70,7 +70,7 @@ export const BorrowerPoolList: FC = () => {
         <div className="pool-list">
           {pools.map((pool) => (
             <div 
-              key={pool.pubkey.toString()} 
+              key={pool.poolPk.toString()} 
               className="pool-list-item"
               onClick={() => setSelectedPool(pool)}
             >

diff --git a/app/src/components/DepositCollateral.tsx b/app/src/components/DepositCollateral.tsx
@@ -34,7 +34,7 @@ export const DepositCollateralForm: FC<DepositCollateralFormProps> = ({ pool, on
         throw new Error("Invalid amount");
       }
 
-      const poolPubkey = new PublicKey(pool.pubkey);
+      const poolPubkey = new PublicKey(pool.poolPk);
       const mintBPubkey = new PublicKey(pool.mintB);
 
       const signature = await depositCollateral(

diff --git a/app/src/components/DepositLiquidityForm.tsx b/app/src/components/DepositLiquidityForm.tsx
@@ -34,7 +34,7 @@ export const DepositLiquidityForm: FC<DepositLiquidityFormProps> = ({
       const signature = await depositLiquidity(
         wallet,
         connection,
-        new PublicKey(pool.pubkey),
+        new PublicKey(pool.poolPk),
         new PublicKey(pool.amm),
         new PublicKey(pool.mintA),
         new PublicKey(pool.mintB),

diff --git a/app/src/components/InitPoolForm.tsx b/app/src/components/InitPoolForm.tsx
@@ -27,7 +27,7 @@ export const InitPoolForm: FC<InitPoolFormProps> = ({ pool, onSuccess }) => {
     }
 
     try {
-      const poolPubkey = new PublicKey(pool.pubkey);
+      const poolPubkey = new PublicKey(pool.poolPk);
       const mintAPubkey = new PublicKey(pool.mintA);
       const mintBPubkey = new PublicKey(pool.mintB);
 

diff --git a/app/src/components/LendForm.tsx b/app/src/components/LendForm.tsx
@@ -37,7 +37,7 @@ export const LendForm: FC<LendFormProps> = ({ pool, onSuccess }) => {
       }
 
       // 从 lendingPool 对象获取必要的公钥
-      const poolPubkey = new PublicKey(pool.pubkey);
+      const poolPubkey = new PublicKey(pool.poolPk);
       const signature = await lend(
         wallet,
         connection,

diff --git a/app/src/components/LenderPoolItem.tsx b/app/src/components/LenderPoolItem.tsx
@@ -8,6 +8,7 @@ import { PoolInfo } from '../utils/getPoolList';
 import { PublicKey } from '@solana/web3.js';
 import { InitPoolForm } from './InitPoolForm';
 import '../style/LenderPoolItem.css';
+import { shortenAddress } from '../utils/string';
 
 interface PoolItemProps {
   pool: PoolInfo;
@@ -29,7 +30,7 @@ export const LenderPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
       const isCredit = await checkCreditPool(
         wallet,
         connection,
-        pool.pubkey,
+        pool.poolPk,
         pool.mintA
       );
 
@@ -48,12 +49,7 @@ export const LenderPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
       setIsLoadingDetails(true);
       const poolDetail = await getPoolDetail(
         connection, 
-        {
-          pubkey: pool.pubkey.toString(),
-          amm: pool.amm.toString(),
-          mintA: pool.mintA.toString(),
-          mintB: pool.mintB.toString(),
-        }, 
+        pool, 
         walletPublicKey || new PublicKey('')
       );
       setDetails(poolDetail);
@@ -100,46 +96,35 @@ export const LenderPoolItem: FC<PoolItemProps> = ({ pool, onTxSuccess }) => {
       <div className="pool-info">
         <div className="pool-details">
           <span className="pool-label">Pool Pubkey:</span>
-          <span className="pool-value" title={pool.pubkey.toString()}>
-            {pool.pubkey.toString()}
+          <span className="pool-value" title={pool.poolPk.toString()}>
+            {shortenAddress(pool.poolPk.toString())}
           </span>
         </div>
 
         <div className="pool-details">
           <span className="pool-label">Token A mint addr:</span>
           <span className="pool-value" title={pool.mintA.toString()}>
-            {pool.mintA.toString()}
+            {shortenAddress(pool.mintA.toString())}
           </span>
         </div>
+
+        <div className="pool-details">
+          <span className="pool-label">Credit Pool tokenA Amount:</span>
+          <span className="pool-value">{details?.lendingPoolInfo.tokenAAmount.toFixed(6)}</span>
+        </div>
 
         <div className="pool-details">
           <span className="pool-label">Token B mint addr:</span>
           <span className="pool-value" title={pool.mintB.toString()}>
-            {pool.mintB.toString()}
+            {shortenAddress(pool.mintB.toString())}
           </span>
         </div>
 
-      </div>
-
-      <div className="lending-pool-info">
-        {isLoadingDetails ? (
-          <div className="loading-lending-pool-details">Loading lending pool details...</div>
-        ) : details ? (
-          <>
-            <div className="pool-details">
-              <span className="pool-label">Credit Pool tokenA Amount:</span>
-              <span className="pool-value">{details.lendingPool.tokenAAmount.toFixed(6)}</span>
-            </div>
-
-            <div className="pool-details">
+        <div className="pool-details">
               <span className="pool-label">Credit Pool tokenB Amount:</span>
-              <span className="pool-value">{details.lendingPool.tokenBAmount.toFixed(6)}</span>
-            </div>
+          <span className="pool-value">{details?.lendingPoolInfo.tokenBAmount.toFixed(6)}</span>
+        </div>
 
-          </>
-        ) : (
-          <div className="error-message">Failed to load lending pool details</div>
-        )}
       </div>
 
       <div className="user-assets-details">

diff --git a/app/src/components/LenderPoolList.tsx b/app/src/components/LenderPoolList.tsx
@@ -70,7 +70,7 @@ export const LenderPoolList: FC = () => {
         <div className="pool-list">
           {pools.map((pool) => (
             <div 
-              key={pool.pubkey.toString()} 
+              key={pool.poolPk.toString()} 
               className="pool-list-item"
               onClick={() => setSelectedPool(pool)}
             >