Merge pull request #22 from La-DAO/vault

Vault + Internationalization push

package.json

@@ -57,6 +57,7 @@
     "framer-motion": "^11.3.24",
     "framer-motion-3d": "^11.3.2",
     "fs": "^0.0.1-security",
+    "next-i18n-router": "^5.5.1",
     "wagmi": "^2.11.0"
   }
 }

packages/nextjs/app/cdp/components/CDPInfo/index.tsx

@@ -1,62 +1,43 @@
 import React from "react";
 import Image from "next/image";
+import { useTranslation } from "~~/app/context/LanguageContext";
 
 const CDPInfo: React.FC = () => {
+  const { t } = useTranslation();
   return (
     <div className="w-4/5 m-auto mt-8 p-6 bg-white flex flex-col lg:flex-row rounded-2xl shadow-md mb-4">
       <div className="w-full lg:w-3/5 mb-8 lg:mb-0 lg:mr-8">
         <h1 className="text-2xl lg:text-3xl font-bold mb-4 lg:mb-6 text-center lg:text-left text-primary">
-          Understanding the CDP Mechanism
+          {t("CDPInfoTitle")}
         </h1>
 
         <section className="mb-6 lg:mb-8">
-          <h2 className="text-xl lg:text-2xl font-semibold mb-3 lg:mb-4 text-primary">How the Contracts Work</h2>
-          <p className="text-base lg:text-lg text-primary">
-            Our platform leverages a set of smart contracts to manage the deposit, minting, and withdrawal processes.
-            When you deposit assets into our smart contract, these assets are securely held and serve as collateral for
-            minting new stablecoins. The smart contracts ensure the safety and integrity of your assets by enforcing
-            strict rules and conditions.
-          </p>
+          <h2 className="text-xl lg:text-2xl font-semibold mb-3 lg:mb-4 text-primary">{t("CDPInfoSubtitle")}</h2>
+          <p className="text-base lg:text-lg text-primary">{t("CDPParagraph1")}</p>
         </section>
 
         <section className="mb-6 lg:mb-8">
-          <h2 className="text-xl lg:text-2xl font-semibold mb-3 lg:mb-4 text-primary">
-            The Mechanism of Depositing and Minting
-          </h2>
-          <p className="text-base lg:text-lg mb-3 lg:mb-4 text-primary">
-            When you deposit assets into the smart contract, you are essentially locking up collateral. Based on the
-            value of this collateral, you can mint a corresponding amount of stablecoins. For example, if you deposit 1
-            ETH worth $2000, and the collateralization ratio is 150%, you can mint up to $1333 worth of stablecoins. The
-            system constantly monitors the value of the collateral to ensure it remains sufficient to back the minted
-            stablecoins.
-          </p>
+          <h2 className="text-xl lg:text-2xl font-semibold mb-3 lg:mb-4 text-primary">{t("CDPInfoSubtitle2")}</h2>
+          <p className="text-base lg:text-lg mb-3 lg:mb-4 text-primary">{t("CDPParagraph2")}</p>
           <div className="text-base lg:text-lg text-primary">
-            Here’s how it works step-by-step:
+            {t("CDPInfoStepsTitle")}
             <ol className="list-decimal list-inside text-primary">
-              <li>You deposit your assets into the smart contract.</li>
-              <li>
-                The smart contract calculates the maximum amount of stablecoins you can mint based on the collateral
-                value and the required collateralization ratio.
-              </li>
-              <li>You mint the stablecoins and they are credited to your account.</li>
+              <li>{t("CDPInfoStep1")}</li>
+              <li>{t("CDPInfoStep2")}</li>
+              <li>{t("CDPInfoStep3")}</li>
             </ol>
           </div>
         </section>
 
         <section>
-          <h2 className="text-xl lg:text-2xl font-semibold text-primary mb-3 lg:mb-4">Using Your Stablecoins</h2>
-          <p className="text-base lg:text-lg text-primary mb-3 lg:mb-4">
-            Once you have minted your stablecoins, you can use them in various ways:
-          </p>
+          <h2 className="text-xl lg:text-2xl font-semibold text-primary mb-3 lg:mb-4">{t("CDPInfoUseTitle")}</h2>
+          <p className="text-base lg:text-lg text-primary mb-3 lg:mb-4">{t("CDPInfoUseSubTitle")}</p>
           <ul className="list-disc text-primary list-inside mb-3 lg:mb-4">
-            <li>Trade them on supported exchanges to buy other cryptocurrencies or assets.</li>
-            <li>Use them in DeFi protocols for lending, borrowing, or earning interest.</li>
-            <li>Spend them directly if they are accepted as a payment method.</li>
+            <li>{t("CDPInfoPoint1")}</li>
+            <li>{t("CDPInfoPoint2")}</li>
+            <li>{t("CDPInfoPoint3")}</li>
           </ul>
-          <p className="text-base lg:text-lg text-primary mt-4">
-            The flexibility of stablecoins allows you to manage your assets more effectively, providing liquidity and
-            stability in volatile markets.
-          </p>
+          <p className="text-base lg:text-lg text-primary mt-4">{t("CDPClosing")}</p>
         </section>
       </div>
 

packages/nextjs/app/cdp/components/CDPStats.tsx

@@ -8,13 +8,15 @@ import PolygonLogo from "@/public/PolygonLogo.png";
 import { Address, formatEther } from "viem";
 import { useChainId, useReadContract, useReadContracts } from "wagmi";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+import { useTranslation } from "~~/app/context/LanguageContext";
 
 const CDPStats: React.FC = () => {
+  const { t } = useTranslation();
   const chainId = useChainId();
   const chainNames: { [key: number]: string } = {
     56: "Binance Smart Chain",
     137: "Polygon",
-    8453: "Base",
+    8453: t("Base"),
   };
   const chainName = chainNames[chainId] || "Unknown Chain";
 
@@ -157,13 +159,15 @@ const CDPStats: React.FC = () => {
             <Image src={logoSrc} alt={`${chainName} Logo`} className="h-8 w-8" />
           </div>
           <div>
-            <div className="text-2xl text-primary font-semibold">{chainName} Market</div>
+            <div className="text-2xl text-primary font-semibold">
+              {chainName} {t("Market")}
+            </div>
           </div>
         </div>
         {/* Data Display */}
         <div className="flex items-center space-x-8">
           <div className="text">
-            <div className="text-sm text-gray-400">Total XOC Minted</div>
+            <div className="text-sm text-gray-400">{t("TotalXOCMinted")}</div>
             <div className="text-lg text-accent font-semibold flex items-end">
               {latestMintedLoading ? "Loading..." : latestMintedError ? "Error" : `$ ${latestMintedNumber?.toString()}`}
               <ArrowTopRightOnSquareIcon className="h-6 w-6 text-accent cursor-pointer" onClick={handleProofClick} />
@@ -173,7 +177,7 @@ const CDPStats: React.FC = () => {
           <div className="flex flex-wrap space-x-8">
             {formattedHouseOfReserveData.map((data, index) => (
               <div key={index} className="text">
-                <div className="text-sm text-gray-400">{`${assetNames[index]} Deposits`}</div>
+                <div className="text-sm text-gray-400">{`${assetNames[index]}  ${t("Deposits")}`}</div>
                 <div className="text-lg text-accent font-semibold">
                   {data !== 0 ? ` ${data.toFixed(4)}` : "Loading..."}
                 </div>

packages/nextjs/app/cdp/components/Deposits.tsx

@@ -3,23 +3,26 @@
 import React from "react";
 import DepositTable from "./tables/DepositTable";
 import YourDeposits from "./tables/YourDeposits";
+import { useTranslation } from "~~/app/context/LanguageContext";
 
 // Supplies component for displaying user's supplied assets and available assets to supply
 const Deposits: React.FC = () => {
+  // Get the translation object
+  const { t } = useTranslation();
   // Render the Supplies component
   return (
     <div className="rounded-md">
       {/* Section for displaying user's deposits in the house of reserves */}
       <div className="bg-white p-6 rounded-2xl shadow-md mb-4">
-        <h2 className="text-xl text-primary font-semibold mb-4">Your Deposits</h2>
-        <p className="text-gray-500 mb-4">Your open positions in the Xocolatl contracts</p>
+        <h2 className="text-xl text-primary font-semibold mb-4">{t("YourDepositTableTitle")}</h2>
+        <p className="text-gray-500 mb-4">{t("YourDepositsDescription")}</p>
         {/* Table for displaying user's deposits in the house of reserves */}
         <YourDeposits />
       </div>
       {/* Section for displaying available assets to deposit */}
       <div className="bg-white p-6 rounded-2xl shadow-md">
-        <h2 className="text-xl text-primary font-semibold mb-4">Assets to Deposit</h2>
-        <p className="text-gray-500 mb-4">Select the asset to deposit as collateral, only then can you mint $XOC</p>
+        <h2 className="text-xl text-primary font-semibold mb-4">{t("AssetTableTitle")}</h2>
+        <p className="text-gray-500 mb-4">{t("AssetTableDescription")}</p>
         {/* Table for displaying available assets to supply */}
         <DepositTable />
       </div>

packages/nextjs/app/cdp/components/tables/DepositTable.tsx

@@ -6,6 +6,7 @@ import useAccountAddress from "@/hooks/useAccount";
 import { Address } from "viem";
 import { useChainId } from "wagmi";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { useTranslation } from "~~/app/context/LanguageContext";
 
 // Define the assets for each chain
 const assets: {
@@ -89,7 +90,11 @@ const assets: {
 };
 
 const DepositTable: React.FC = () => {
+  // Get the translation object
+  const { t } = useTranslation();
+  // Get the chain ID
   const chainId = useChainId();
+  // Define the state variables
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
   const [selectedAsset, setSelectedAsset] = useState<string | null>(null);
@@ -140,13 +145,13 @@ const DepositTable: React.FC = () => {
         <thead>
           <tr className="text-center">
             <th scope="col" className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Assets
+              {t("AssetsColumn1")}
             </th>
             <th scope="col" className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Balance
+              {t("AssetsColumn2")}
             </th>
             <th scope="col" className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Max LTV{" "}
+              {t("AssetsColumn3")}{" "}
               <div
                 className="tooltip tooltip-primary"
                 data-tip="Maximum Loan-To-Value ratio, which tells you how much you can leverage your asset's worth."
@@ -155,7 +160,7 @@ const DepositTable: React.FC = () => {
               </div>
             </th>
             <th scope="col" className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Liquidation Threshold{" "}
+              {t("AssetsColumn4")}{" "}
               <div
                 className="tooltip tooltip-primary"
                 data-tip="When the value of an asset falls below the Liquidation Threshold, it indicates that the asset's value has decreased significantly and may no longer be sufficient to cover the borrowed funds. In such cases, the lending platform may initiate a liquidation process to sell the borrower's assets and recover the borrowed amount."
@@ -165,7 +170,7 @@ const DepositTable: React.FC = () => {
             </th>
 
             <th scope="col" className="pl-32 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Actions
+              {t("AssetsColumn5")}
             </th>
           </tr>
         </thead>
@@ -195,13 +200,13 @@ const DepositTable: React.FC = () => {
                   className="text-sm text-accent dark:text-white btn bg-base-100 hover:bg-primary hover:text-white"
                   onClick={() => handleOpenModal(asset.name, asset.houseOfReserveContract, asset.assetContract)}
                 >
-                  Deposit
+                  {t("AssetsDepositButton")}
                 </button>
                 <button
                   className="text-sm text-accent dark:text-white btn bg-base-100 ml-2 hover:bg-primary hover:text-white"
                   onClick={() => handleOpenWithdrawModal(asset.name, asset.houseOfReserveContract, asset.assetContract)}
                 >
-                  Withdraw
+                  {t("AssetsWithdrawButton")}
                 </button>
               </td>
             </tr>

packages/nextjs/app/cdp/components/tables/YourDeposits.tsx

@@ -7,8 +7,10 @@ import { useAccount } from "wagmi";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { houseOfCoinABI } from "~~/app/components/abis/houseofcoin";
 import { assetsAccountantABI } from "~~/app/components/abis/xocabis";
+import { useTranslation } from "~~/app/context/LanguageContext";
 
 const YourDeposits = () => {
+  const { t } = useTranslation();
   const { address } = useAccount();
   const chainId = useChainId();
 
@@ -562,7 +564,7 @@ const YourDeposits = () => {
           )}
         </>
       ) : (
-        <p className="text-primary text-2xl">Nothing deposited yet - No open positions found</p>
+        <p className="text-primary text-2xl">{t("YourDepositsEmpty")}</p>
       )}
     </div>
   );