UI improvmetns

components/protocols/bprotocol/CardBprotocolBamm.vue

@@ -49,7 +49,7 @@
 
     <hr class="my-4" />
 
-    <div v-if="parseFloat(ethUserBalance) > 0.0001" class="flex items-center w-full px-4 mb-2">
+    <div v-if="ethIsGreaterThanOnePerMile" class="flex items-center w-full px-4 mb-2">
       <div class="flex items-start justify-between w-full">
         <div
           class="flex font-medium leading-none whitespace-no-wrap text-14"
@@ -110,7 +110,8 @@ export default defineComponent({
     priceInUsd: { type: String, default: '0' },
     ethUserBalance: { type: String, default: '0' },
     stabilityLqtyGain: { type: String, default: '0' },
-    lusdUserBalance: { type: String, default: '0' }
+    lusdUserBalance: { type: String, default: '0' },
+    ethIsGreaterThanOnePerMile: { type: Boolean, default: false }
   },
 
   setup(props) {

components/sidebar/context/bprotocol/SidebarBprotocolDeposit.vue

@@ -3,7 +3,7 @@
     <template #title>Supply to Stability Pool</template>
 
     <div class="flex justify-around items-center w-full">
-      <SidebarSectionValueWithIcon class="" label="USD balance" center>
+      <SidebarSectionValueWithIcon class="" label="Stability Pool Balance" center>
         <template #icon
           ><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
         /></template>
@@ -11,6 +11,16 @@
           >{{ formatDecimal(changedBammDeposit, 2) }} USD</template
         >
       </SidebarSectionValueWithIcon>
+
+      <SidebarSectionValueWithIcon class="" label="Wallet Balance" center>
+        <template #icon
+          ><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
+        /></template>
+
+        <template #value
+          >{{ formatDecimal(changedBalance) }} {{ poolToken.symbol }}</template
+        >
+      </SidebarSectionValueWithIcon>
     </div>
 
     <div class="mt-10 p-8">
@@ -43,7 +53,7 @@
             <div
               class="flex items-center font-medium leading-none whitespace-no-wrap text-14"
             >
-              <span>Balance</span>
+              <span>Stability Pool Balance</span>
             </div>
           </div>
         </div>
@@ -122,6 +132,7 @@ export default defineComponent({
     const { valInt } = useToken()
     const { close } = useSidebar()
     const { showPendingTransaction, showConfirmedTransaction, showWarning } = useNotification()
+    const changedBalance = computed(() => max(minus(balance.value, amountParsed.value), '0').toFixed())
 
     const amount = ref('')
     const amountParsed = computed(() => parseSafeFloat(amount.value))
@@ -209,7 +220,8 @@ export default defineComponent({
       toggle,
       newEthBalance,
       newLusdBalance,
-      ethUserBalance
+      ethUserBalance,
+      changedBalance
     }
   },
 })

components/sidebar/context/bprotocol/SidebarBprotocolWithdraw.vue

@@ -3,13 +3,24 @@
     <template #title>Withdraw from Stability Pool</template>
 
     <div class="flex justify-around items-center w-full">
-      <SidebarSectionValueWithIcon class="" label="USD balance" center>
+      <SidebarSectionValueWithIcon class="" label="Stability Pool Balance" center>
         <template #icon
           ><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
         /></template>
         <template #value
           >{{ formatDecimal(changedPoolDeposit, 2) }} USD</template
         >
+      
+      </SidebarSectionValueWithIcon>
+
+            <SidebarSectionValueWithIcon class="" label="Wallet Balance" center>
+        <template #icon
+          ><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
+        /></template>
+
+        <template #value
+          >{{ formatDecimal(changedBalance) }} {{ poolToken.symbol }}</template
+        >
       </SidebarSectionValueWithIcon>
     </div>
 
@@ -124,8 +135,6 @@ export default defineComponent({
     const { valInt } = useToken()
     const { close } = useSidebar()
     const { showPendingTransaction, showConfirmedTransaction, showWarning } = useNotification()
-    
-
 
     const amount = ref('')
     const amountParsed = computed(() => parseSafeFloat(amount.value))
@@ -136,6 +145,7 @@ export default defineComponent({
     const changedPoolDeposit = computed(() => max(minus(userBammInUsd.value, amountParsed.value), '0').toFixed())
     const ethWithdrawAmount = computed(() => absolutlWithdrawAmountInEth(amountParsed.value))
     const lusdWithdrawAmount = computed(() => absolutlWithdrawAmountInLusd(amountParsed.value))
+    const changedBalance = computed(() => plus(balance.value, amountParsed.value).toFixed())
 
     const { toggle, isMaxAmount } = useMaxAmountActive(amount, userBammInUsd)
 
@@ -212,7 +222,8 @@ export default defineComponent({
       isZero,
       ethWithdrawAmount,
       lusdWithdrawAmount,
-      ethUserBalance
+      ethUserBalance,
+      changedBalance
     }
   },
 })

composables/protocols/useBprotocolPositions.ts

@@ -60,6 +60,15 @@ export function useBprotocolPosition (){
     }
     return fromWei((new BigNumber(userData.value.bammUserBalance).dividedBy(userData.value.bammTotalSupply)).multipliedBy(userData.value.lusdTotal))
   });
+  const ethIsGreaterThanOnePerMile = computed(()=> {
+    if(userBammInUsd.value === "0"){
+      return false;
+    }
+    const userEthInUsd = new BigNumber(ethUserBalance.value).multipliedBy(ethPrice.value)
+    const ethInSp = userEthInUsd.dividedBy(userBammInUsd.value)
+    debugger
+    return ethInSp.isGreaterThan(0.0001)
+  })
 
   function lusdWithdrawAmountToBamm (lusd) {
     const bammWithdrawRatio = new BigNumber(lusd).dividedBy(userBammInUsd.value)
@@ -129,7 +138,8 @@ export function useBprotocolPosition (){
     absolutlWithdrawAmountInEth,
     absolutlWithdrawAmountInLusd,
     userBammInUsd,
-    totalBammSupplyInUsd
+    totalBammSupplyInUsd,
+    ethIsGreaterThanOnePerMile
   }
 }
 
@@ -150,6 +160,4 @@ async function getUserInfo (user, web3){
     console.error(e);
     return {};
   }
-
-
 }

pages/index.vue

@@ -21,8 +21,8 @@
         </div>
 
         <h2 class="mt-4 font-semibold text-19">{{ app.name }}</h2>
-        <p class="mt-2 text-14 font-regular text-grey-dark opacity-90">
-          {{ app.description }}
+        <p class="mt-2 text-14 font-regular text-grey-dark opacity-90"
+        v-html="app.description">
         </p>
       </nuxt-link>
     </div>
@@ -83,7 +83,7 @@ const appsPerNetwork = {
       icon: BprotocolIcon,
       name: "B.Protocol",
       url: "/mainnet/bprotocol",
-      description: "Stake LUSD"
+      description: "Automated Rebalancing <br/>for Liquity Stability Pool"
     },
     {
       id: "reflexer",

pages/mainnet/bprotocol.vue

@@ -45,6 +45,7 @@
           price-in-usd="1"
           :token="bammToken"
           :lusdUserBalance="lusdUserBalance"
+          :ethIsGreaterThanOnePerMile="ethIsGreaterThanOnePerMile"
         />
 
       </div>
@@ -91,7 +92,8 @@ export default defineComponent({
       userBammInLusd,
       bammToken,
       userBammInUsd,
-      totalBammSupplyInUsd
+      totalBammSupplyInUsd,
+      ethIsGreaterThanOnePerMile
     } = useBprotocolPosition()
 
     return {
@@ -106,7 +108,8 @@ export default defineComponent({
       userBammInLusd,
       bammToken,
       userBammInUsd,
-      totalBammSupplyInUsd
+      totalBammSupplyInUsd,
+      ethIsGreaterThanOnePerMile
     };
   }
 });