v1.3.1

### Updates

### New Features

- Feat: Dockerfile enhanced to accept environmental arguments on build
- Feat: added version number to the footer

### Fixes and Refactoring

- Fix: APR endpoint for Apollo vaults
- Fix: mobile farm table data

.github/workflows/docker-image.yml

@@ -2,24 +2,24 @@ name: Docker Image CI
 
 on:
   push:
-    branches: 
+    branches:
       - 'main'
-    
+
 jobs:
   docker:
     runs-on: ubuntu-latest
     steps:
-    - name: Set up QEMU
+      - name: Set up QEMU
-      uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v2
-    - name: Set up Docker Buildx
+      - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v2
-    - name: Login to Docker Hub
+      - name: Login to Docker Hub
-      uses: docker/login-action@v2
+        uses: docker/login-action@v2
-      with:
+        with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
-    - name: Build and push
+      - name: Build and push
-      uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v4
-      with:
+        with:
-        push: true
+          push: true
-        tags: marsprotocol/interface:latest
+          tags: marsprotocol/interface:latest, marsprotocol/interface:${{ github.run_number }}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mars",
   "homepage": "./",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
   "scripts": {

src/components/common/Footer/Footer.module.scss

@@ -1,7 +1,7 @@
 @import 'src/styles/master';
 
 .footer {
-  @include padding(8, 0, 24);
+  @include padding(8, 0, 20);
   background-color: $backgroundFooter;
   display: grid;
   place-content: center;
@@ -88,11 +88,18 @@
       }
     }
   }
+
+  .version {
+    @include padding(0, 0, 4);
+    p {
+      text-align: right;
+    }
+  }
 }
 
 @media only screen and (min-width: $bpMediumLow) {
   .footer {
-    @include padding(8, 0);
+    @include padding(8, 0, 0);
     left: space(-4);
     width: calc(100% + (8 * #{$spacingBase}px));
 

src/components/common/Footer/Footer.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import useStore from 'store'
 import { DocURL } from 'types/enums/docURL'
 
+import { version } from '../../../../package.json'
 import styles from './Footer.module.scss'
 
 export const Footer = () => {
@@ -209,6 +210,9 @@ export const Footer = () => {
             </ul>
           </div>
         </div>
+        <div className={styles.version}>
+          <p className='faded xs'>Mars Protocol v{version}</p>
+        </div>
       </div>
     </footer>
   )

src/components/fields/ActiveVaultsTable/ActiveVaultsTableMobile.tsx

@@ -10,6 +10,7 @@ import {
 import { Loading } from 'components/common'
 import { VaultLogo, VaultName } from 'components/fields'
 import { FIELDS_TUTORIAL_KEY } from 'constants/appConstants'
+import { getLiqBorrowValue, getMaxBorrowValue } from 'functions/fields'
 import Link from 'next/link'
 import { Trans, useTranslation } from 'react-i18next'
 import useStore from 'store'
@@ -56,6 +57,8 @@ export const ActiveVaultsTableMobile = () => {
     >
       <div className={styles.container}>
         {activeVaults.map((vault, i) => {
+          const maxBorrowValue = getMaxBorrowValue(vault, vault.position)
+
           const content = (
             <div key={`${vault.address}-${i}`} className={styles.grid}>
               <div className={styles.logo}>
@@ -133,9 +136,9 @@ export const ActiveVaultsTableMobile = () => {
               <div className={styles.borrowCapacity}>
                 <BorrowCapacity
                   showPercentageText={true}
-                  max={10}
+                  max={getLiqBorrowValue(vault, maxBorrowValue)}
-                  limit={8}
+                  limit={maxBorrowValue}
-                  balance={7}
+                  balance={vault.position.values.borrowed}
                   showTitle={false}
                   barHeight={'16px'}
                   hideValues

src/store/slices/vaults.ts

@@ -158,15 +158,25 @@ export const vaultsSlice = (set: NamedSet<Store>, get: GetState<Store>): VaultsS
       const response = await fetch(networkConfig!.apolloAprUrl)
 
       if (response.ok) {
-        const data: AprResponse[] = await response.json()
+        const data: FlatApr[] | NestedApr[] = await response.json()
 
         const newAprs = data.map((aprData) => {
-          const aprTotal = aprData.apr.reduce((prev, curr) => Number(curr.value) + prev, 0)
+          try {
-          const feeTotal = aprData.fees.reduce((prev, curr) => Number(curr.value) + prev, 0)
+            const apr = aprData as FlatApr
+            const aprTotal = apr.apr.reduce((prev, curr) => Number(curr.value) + prev, 0)
+            const feeTotal = apr.fees.reduce((prev, curr) => Number(curr.value) + prev, 0)
 
-          const finalApr = aprTotal + feeTotal
+            const finalApr = aprTotal + feeTotal
 
-          return { contractAddress: aprData.contract_address, apr: finalApr }
+            return { contractAddress: aprData.contract_address, apr: finalApr }
+          } catch {
+            const apr = aprData as NestedApr
+            const aprTotal = apr.apr.aprs.reduce((prev, curr) => Number(curr.value) + prev, 0)
+            const feeTotal = apr.apr.fees.reduce((prev, curr) => Number(curr.value) + prev, 0)
+
+            const finalApr = aprTotal + feeTotal
+            return { contractAddress: aprData.contract_address, apr: finalApr }
+          }
         })
 
         set({

src/types/interfaces/fields.d.ts

@@ -100,12 +100,20 @@ interface AprData {
   apr: number
 }
 
-interface AprResponse {
+interface FlatApr {
   contract_address: string
   apr: { type: string; value: number | string }[]
   fees: { type: string; value: number | string }[]
 }
 
+interface NestedApr {
+  contract_address: string
+  apr: {
+    aprs: { type: string; value: number | string }[]
+    fees: { type: string; value: number | string }[]
+  }
+}
+
 interface VaultCapData {
   address: string
   vaultCap: {