From 6ff462b3a995d64f6d60adc4ec7aa2a5033e9b43 Mon Sep 17 00:00:00 2001
From: Julius0505 <se7en.mini.123@protonmail.com>
Date: Fri, 5 Nov 2021 20:26:16 +0200
Subject: [PATCH] change cardcompound to cardbenqi

---
 assets/icons/benqi.svg                 |   5 +
 components/protocols/CardBenqi.vue     | 224 +++++++++++++++++++++++++
 pages/{mainnet => avalanche}/benqi.vue |  12 +-
 pages/index.vue                        |   2 +-
 4 files changed, 236 insertions(+), 7 deletions(-)
 create mode 100644 assets/icons/benqi.svg
 create mode 100644 components/protocols/CardBenqi.vue
 rename pages/{mainnet => avalanche}/benqi.vue (98%)

diff --git a/assets/icons/benqi.svg b/assets/icons/benqi.svg
new file mode 100644
index 0000000..5aacfd6
--- /dev/null
+++ b/assets/icons/benqi.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M8.82066 21.5824C8.5701 21.4331 8.363 21.2233 8.21928 20.9732C8.07556 20.723 8.00005 20.4408 8 20.1539V16.9011C8.0002 16.7782 8.03348 16.6575 8.0965 16.5512C8.15951 16.4448 8.25004 16.3566 8.35898 16.2954C8.46792 16.2341 8.59142 16.202 8.71707 16.2023C8.84272 16.2025 8.96608 16.2352 9.07475 16.2969L16.579 20.5796C16.7944 20.7032 16.9731 20.8798 17.0973 21.0917C17.2215 21.3037 17.287 21.5437 17.2872 21.7881V25.1594C17.2876 25.3084 17.2474 25.4548 17.1707 25.5835C17.0941 25.7123 16.9837 25.8187 16.8511 25.8919C16.7184 25.9651 16.5682 26.0023 16.4159 25.9999C16.2637 25.9974 16.1148 25.9553 15.9847 25.8779L8.82066 21.5824ZM20.0062 15.4112C20.2212 15.5351 20.3995 15.7118 20.5235 15.9237C20.6474 16.1357 20.7127 16.3755 20.713 16.6197V23.458C20.7128 23.5572 20.6856 23.6546 20.6343 23.7402C20.583 23.8258 20.5093 23.8965 20.4209 23.9451L18.7767 24.8508C18.7551 24.8613 18.7326 24.8699 18.7095 24.8765V21.0738C18.7098 20.8317 18.6457 20.5937 18.5236 20.383C18.4015 20.1724 18.2255 19.9965 18.013 19.8724L11.4228 16.0154V11.7299C11.4228 11.6069 11.4559 11.486 11.5188 11.3794C11.5817 11.2729 11.6722 11.1845 11.7812 11.1231C11.8902 11.0616 12.0138 11.0294 12.1395 11.0296C12.2653 11.0298 12.3888 11.0624 12.4976 11.1242L20.0047 15.4098L20.0062 15.4112ZM23.2889 10.3571C23.5054 10.4797 23.6851 10.656 23.81 10.8681C23.9348 11.0803 24.0003 11.3208 24 11.5656V21.5552C24 21.7609 23.8832 21.9481 23.7006 22.0466L22.1426 22.8709V15.914C22.1427 15.673 22.079 15.4361 21.9577 15.2263C21.8364 15.0165 21.6616 14.841 21.4504 14.7169L14.7186 10.7642V6.69867C14.719 6.57569 14.7511 6.4548 14.8121 6.34725C14.9075 6.18719 15.064 6.07068 15.2471 6.02329C15.4302 5.97589 15.6251 6.00146 15.789 6.09441L23.2889 10.3585V10.3571Z"
+        fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/components/protocols/CardBenqi.vue b/components/protocols/CardBenqi.vue
new file mode 100644
index 0000000..e90cbec
--- /dev/null
+++ b/components/protocols/CardBenqi.vue
@@ -0,0 +1,224 @@
+<template>
+  <div
+    class="flex-shrink-0 bg-white rounded-lg relative flex flex-col flex-1 px-4 pt-4 pb-6 dark:bg-dark-500"
+    style="box-shadow: -1px -3px 10px rgba(12, 25, 91, 0.03), 2px 4px 12px rgba(12, 25, 91, 0.05)"
+  >
+    <div class="flex items-center">
+      <div class="flex mr-4 -space-x-3 overflow-hidden">
+        <IconCurrency :currency="tokenKey" class="w-12 h-12" no-height />
+      </div>
+
+      <div
+        v-if="type === 'supply' || type === 'no'"
+        class="flex flex-col flex-grow"
+      >
+        <div class="mb-1 font-medium leading-none whitespace-no-wrap text-19">
+          {{ formatUsd(supplyUsd) }}
+        </div>
+        <div class="flex max-w-full leading-none">
+          <span class="text-grey-pure text-14"
+            >{{ formatDecimal(supply) }} {{ symbol }}</span
+          >
+          <Info
+            :text="`${formatUsd(priceInUsd, 2)}/${symbol}`"
+            icon="price"
+            class="ml-1"
+          />
+        </div>
+      </div>
+
+      <div v-if="type === 'borrow'" class="flex flex-col flex-grow">
+        <div class="mb-1 font-medium leading-none whitespace-no-wrap text-19">
+          {{ formatUsd(borrowUsd) }}
+        </div>
+        <div class="flex leading-none whitespace-no-wrap">
+          <span class="text-grey-pure text-14"
+            >{{ formatDecimal(borrow) }} {{ symbol }}</span
+          >
+          <Info
+            :text="`${formatUsd(priceInUsd, 2)}/${symbol}`"
+            icon="price"
+            class="ml-1"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col self-start space-y-1">
+        <Badge v-if="type === 'no'" color="grey">No Position</Badge>
+        <Badge v-if="type === 'supply'" color="green">Supplied</Badge>
+        <Badge v-if="type === 'borrow'" color="yellow">Borrowed</Badge>
+        <Badge
+          v-tooltip="
+            'Collateral Factor is the power to borrow against a particular token. Eg:- if collateral factor of ETH is 0.75 that means for every $100 of ETH you can borrow $75 worth of other assets.'
+          "
+          color="blue"
+          >C.F: {{ cf }}</Badge
+        >
+      </div>
+    </div>
+
+    <hr class="mt-4" />
+
+    <div class="flex items-center justify-around mt-4">
+      <div class="flex-col flex-1 text-center">
+        <div class="flex items-center mb-1 justify-evenly">
+          <div
+            class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
+          >
+            {{ formatPercent(supplyRate) }}
+          </div>
+          <RewardsRateBadge
+            v-if="rewardsSupported"
+            protocol-name="Benqi"
+            token-name="COMP"
+            currency="comp"
+            :rate="supplyRewardRate"
+          />
+        </div>
+        <div class="leading-none whitespace-no-wrap text-grey-pure">Supply</div>
+      </div>
+      <Divider vertical class="h-6" />
+      <div class="flex-col flex-1 text-center">
+        <div class="flex items-center mb-1 justify-evenly">
+          <div
+            class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
+          >
+            {{ formatPercent(borrowRate) }}
+          </div>
+          <RewardsRateBadge
+            v-if="rewardsSupported"
+            protocol-name="Benqi"
+            token-name="COMP"
+            currency="comp"
+            :rate="borrowRewardRate"
+          />
+        </div>
+        <div class="leading-none whitespace-no-wrap text-grey-pure">Borrow</div>
+      </div>
+    </div>
+
+    <hr class="mt-4" />
+
+    <div v-if="type === 'no'" class="flex items-center justify-around mt-6">
+      <button
+        class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
+        @click="showSupply"
+      >
+        Supply
+      </button>
+      <button
+        class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
+        @click="showBorrow"
+      >
+        Borrow
+      </button>
+    </div>
+
+    <div v-if="type === 'supply'" class="flex items-center justify-around mt-6">
+      <button
+        class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
+        @click="showSupply"
+      >
+        Supply
+      </button>
+      <button
+        class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
+        @click="showWithdraw"
+      >
+        Withdraw
+      </button>
+    </div>
+
+    <div v-if="type === 'borrow'" class="flex items-center justify-around mt-6">
+      <button
+        class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
+        @click="showBorrow"
+      >
+        Borrow
+      </button>
+      <button
+        class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
+        @click="showPayback"
+      >
+        Payback
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { useBigNumber } from '~/composables/useBigNumber'
+import { useFormatting } from '~/composables/useFormatting'
+import { useNotification } from '~/composables/useNotification'
+import { useToken } from '~/composables/useToken'
+
+export default defineComponent({
+  props: {
+    tokenKey: { type: String, required: true },
+    tokenId: { type: String, default: null },
+    supply: { type: String, required: true },
+    supplyUsd: { type: String, required: true },
+    borrow: { type: String, required: true },
+    borrowUsd: { type: String, required: true },
+    supplyRate: { type: String, required: true },
+    borrowRate: { type: String, required: true },
+    type: { type: String, required: true },
+    cf: { type: String, required: true },
+    borrowEnabled: { type: Boolean, default: true },
+    supplyRewardRate: { type: String, default: '0' },
+    borrowRewardRate: { type: String, default: '0' },
+    priceInUsd: { type: String, default: '0' },
+  },
+
+  setup(props) {
+    const { app } = useContext()
+    const { formatPercent, formatUsd, formatDecimal } = useFormatting()
+    const { showWarning } = useNotification()
+    const { isZero } = useBigNumber()
+    const { getTokenByKey } = useToken()
+
+    const rewardsSupported = computed(() => !isZero(props.supplyRewardRate) && !isZero(props.borrowRewardRate))
+    const symbol = computed(() => getTokenByKey(props.tokenKey)?.symbol || props.tokenKey)
+
+    function showSupply() {
+      app.router.push({ hash: `supply?tokenId=${props.tokenId}` })
+    }
+
+    function showBorrow() {
+      if (props.borrowEnabled) {
+        app.router.push({ hash: `borrow?tokenId=${props.tokenId}` })
+      } else {
+        showWarning('Borrow Disabled', `Borrowing ${props.tokenKey.toUpperCase()} is disabled`)
+      }
+    }
+
+    function showPayback() {
+      app.router.push({ hash: `payback?tokenId=${props.tokenId}` })
+    }
+
+    function showWithdraw() {
+      app.router.push({ hash: `withdraw?tokenId=${props.tokenId}` })
+    }
+
+    return {
+      showSupply,
+      showBorrow,
+      showPayback,
+      showWithdraw,
+      formatPercent,
+      formatUsd,
+      formatDecimal,
+      rewardsSupported,
+      symbol,
+    }
+  },
+})
+</script>
+<style scoped>
+.position-button {
+  @apply flex-1;
+  @apply h-8;
+  @apply h-8;
+}
+</style>
diff --git a/pages/mainnet/benqi.vue b/pages/avalanche/benqi.vue
similarity index 98%
rename from pages/mainnet/benqi.vue
rename to pages/avalanche/benqi.vue
index 9e6d6d9..2bd0615 100644
--- a/pages/mainnet/benqi.vue
+++ b/pages/avalanche/benqi.vue
@@ -19,7 +19,7 @@
           <div
             class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
           >
-            <CompoundIcon class="w-8 h-8 text-white" />
+            <BenqiIcon class="w-8 h-8 text-white" />
           </div>
         </div>
         <h1 class="ml-4 text-primary-black text-2xl font-semibold">Benqi</h1>
@@ -157,7 +157,7 @@
         class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content px-1"
       >
         <div v-for="item in filteredPositions" :key="item.key">
-          <card-compound
+          <card-benqi
             :token-key="item.key"
             :token-id="item.tokenId"
             :supply="item.supply"
@@ -187,15 +187,15 @@ import { useFormatting } from "~/composables/useFormatting";
 import { useSearchFilter } from "~/composables/useSearchFilter";
 import { useStatus } from "~/composables/useStatus";
 import { useBigNumber } from "~/composables/useBigNumber";
-import CardCompound from "~/components/protocols/CardCompound.vue";
-import CompoundIcon from "~/assets/icons/compound.svg?inline";
+import CardBenqi from "~/components/protocols/CardBenqi.vue";
+import BenqiIcon from "~/assets/icons/benqi.svg?inline";
 import ButtonCTAOutlined from "~/components/common/input/ButtonCTAOutlined.vue";
 
 export default defineComponent({
   components: {
     BackIcon,
-    CardCompound,
-    CompoundIcon,
+    CardBenqi,
+    BenqiIcon,
     ButtonCTAOutlined,
   },
   setup() {
diff --git a/pages/index.vue b/pages/index.vue
index 10f4708..4df1359 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -61,7 +61,7 @@ const appsPerNetwork = {
       id: "benqi",
       icon: CompoundIcon,
       name: "Benqi",
-      url: "/mainnet/benqi",
+      url: "/avalanche/benqi",
       description: "Money Market"
     },
     {