Mark off-boarded collaterals on the dashboard

frontend/components/dashboard/CollateralTable.vue

@@ -11,7 +11,7 @@
             <CurrencyIcon :currency-symbol="record.symbol" />
         </div>
         <div slot="ilk" slot-scope="ilk" class="Element">
-            {{ ilk }}
+            {{ ilk }} <span v-if="isCollateralOffboarded(ilk)" class="opacity-50">&nbsp;(off-boarded)</span>
         </div>
         <div slot="symbol" slot-scope="symbol" class="Element">{{ symbol }}</div>
         <div slot="token" slot-scope="tokenAddress, record" class="Element" :class="{ Loading: isLoading(record) }">
@@ -103,10 +103,10 @@
 </template>
 
 <script lang="ts">
-import type { CollateralRow } from 'auctions-core/src/types';
 import Vue from 'vue';
 import BigNumber from 'bignumber.js';
 import { Table, Popover } from 'ant-design-vue';
+import type { CollateralRow } from 'auctions-core/src/types';
 import CurrencyIcon from '~/components/common/other/CurrencyIcon.vue';
 import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import FormatAddress from '~/components/common/formatters/FormatAddress.vue';
@@ -126,6 +126,10 @@ export default Vue.extend({
             type: Array as Vue.PropType<CollateralRow[]>,
             default: () => [],
         },
+        offBoardedCollaterals: {
+            type: Array as Vue.PropType<string[]>,
+            default: () => [],
+        },
     },
     computed: {
         collateralAmount() {
@@ -191,6 +195,9 @@ export default Vue.extend({
         isValidBigNumber(bigNumber: BigNumber) {
             return BigNumber.isBigNumber(bigNumber);
         },
+        isCollateralOffboarded(collateralType: string) {
+            return this.offBoardedCollaterals.includes(collateralType);
+        },
     },
 });
 </script>

frontend/components/dashboard/DashboardAuctionsView.vue

@@ -18,7 +18,11 @@
             </TextBlock>
         </div>
         <div class="Block max-w-screen-xl">
-            <CollateralTable :collaterals="collaterals" class="overflow-x-auto" />
+            <CollateralTable
+                :collaterals="collaterals"
+                :off-boarded-collaterals="offBoardedCollaterals"
+                class="overflow-x-auto"
+            />
         </div>
         <div class="Block space-y-4 md:space-y-8 max-w-screen-sm">
             <TextBlock v-if="isExplanationsShown" title="Exchange Callee Contracts">
@@ -67,6 +71,10 @@ export default Vue.extend({
             type: Array as Vue.PropType<CollateralRow[]>,
             default: () => [],
         },
+        offBoardedCollaterals: {
+            type: Array as Vue.PropType<string[]>,
+            default: () => [],
+        },
         callees: {
             type: Object as Vue.PropType<CalleeAddresses>,
             default: () => ({}),

frontend/containers/DashboardContainer.vue

@@ -2,6 +2,7 @@
     <div class="DashboardContainer">
         <DashboardAuctionsView
             :collaterals="collaterals"
+            :off-boarded-collaterals="offBoardedCollaterals"
             :callees="callees"
             :base-fee-per-gas="baseFeePerGas"
             :gas-parameters="gasParameters"
@@ -14,13 +15,19 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
+import type { CollateralRow } from 'auctions-core/src/types';
 import { getCalleesByNetworkType } from 'auctions-core/src/constants/CALLEES';
 import DashboardAuctionsView from '~/components/dashboard/DashboardAuctionsView.vue';
 
 export default Vue.extend({
     components: {
         DashboardAuctionsView,
     },
+    data() {
+        return {
+            offBoardedCollaterals: [],
+        };
+    },
     computed: {
         ...mapGetters('collaterals', {
             collaterals: 'collaterals',
@@ -56,6 +63,20 @@ export default Vue.extend({
                 this.$store.dispatch('collaterals/setup');
             }
         },
+        collaterals: {
+            handler(newCollaterals: CollateralRow[]) {
+                if (newCollaterals) {
+                    newCollaterals.forEach(async collateral => {
+                        if (await this.$store.dispatch('collaterals/isCollateralOffboarded', collateral.ilk)) {
+                            if (!this.offBoardedCollaterals.includes(collateral.ilk)) {
+                                this.offBoardedCollaterals.push(collateral.ilk);
+                            }
+                        }
+                    });
+                }
+            },
+            immediate: true,
+        },
     },
 });
 </script>

frontend/store/collaterals.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { ActionContext } from 'vuex';
+import { ethers } from 'ethers';
 import type { CollateralRow, CollateralStatus } from 'auctions-core/src/types';
 import COLLATERALS, {
     getAllCollateralTypes,
@@ -10,6 +11,7 @@ import { fetchCalcParametersByCollateralType } from 'auctions-core/src/params';
 import { getTokenAddressByNetworkAndSymbol } from 'auctions-core/src/tokens';
 import { isCollateralTypeSupported } from 'auctions-core/src/addresses';
 import { fetchAutoRouteInformation } from 'auctions-core/src/calleeFunctions/helpers/uniswapAutoRouter';
+import { getContractValue } from 'auctions-core/src/contracts';
 
 interface State {
     collaterals: CollateralRow[];
@@ -162,6 +164,22 @@ export const actions = {
             });
         }
     },
+    async isCollateralOffboarded(
+        { rootGetters }: ActionContext<State, State>,
+        collateralType: string
+    ): Promise<boolean> {
+        const network = rootGetters['network/getMakerNetwork'];
+        if (!network) {
+            return false;
+        }
+        const typeHex = ethers.utils.formatBytes32String(collateralType);
+        const maxCollateralDebt = await getContractValue(network, 'MCD_VAT', 'ilks', {
+            parameters: [typeHex],
+            variableName: 'line',
+            decimalUnits: 'RAD',
+        });
+        return maxCollateralDebt.isZero();
+    },
     async setup({ commit, dispatch }: ActionContext<State, State>) {
         commit('reset');