Update UI /interface/dapps/maker-dai/migrateCDP

src/dapps/MakerDai/MakerDai.vue

@@ -97,47 +97,49 @@
       </div>
     </div>
 
-    <router-view
-      :active-cdp-id="activeCdpId"
-      :loading-state="curentlyLoading"
-      :build-empty="buildEmpty"
-      :maker-active="makerActive"
-      :eth-price="ethPrice"
-      :liquidation-penalty="liquidationPenalty"
-      :stability-fee="stabilityFee"
-      :liquidation-ratio="liquidationRatio"
-      :price-service="priceService"
-      :cdp-service="cdpService"
-      :proxy-service="proxyService"
-      :cdps="cdps"
-      :cdps-without-proxy="cdpsWithoutProxy"
-      :cdp-details-loaded="cdpDetailsLoaded"
-      :tokens-with-balance="tokensWithBalance"
-      :migration-in-progress="migrationInProgress"
-      :open-close-modal="openCloseModal"
-      :open-move-modal="openMoveModal"
-      :values-updated="valuesUpdated"
-      :values="activeValues"
-      :get-collateral-options="getCollateralOptions"
-      :get-value-or-function="getValueOrFunction"
-      :get-cdp="getCdp"
-      :has-cdp="hasCdp"
-      @activeCdpId="setupCdpManageFunc"
-      @cdpOpened="addCdp"
-      @cdpClosed="removeCdp"
-      @modalHidden="modalHidden"
-      @managerUpdate="doUpdate"
-      @showWithdraw="showWithdraw"
-      @showPayback="showPayback"
-      @showGenerate="showGenerate"
-      @showDeposit="showDeposit"
-      @migrateCdp="migrateCdpExternal"
-      @proceedtoCreateOrManage="proceedtoCreateOrManage"
-      @approveCurrency="approveCurrency"
-      @setActiveCdpId="setActiveCdpId"
-      @setAfterLoadPage="setAfterLoadPage"
-    >
-    </router-view>
+    <div class="px-4 py-3">
+      <router-view
+        :active-cdp-id="activeCdpId"
+        :loading-state="curentlyLoading"
+        :build-empty="buildEmpty"
+        :maker-active="makerActive"
+        :eth-price="ethPrice"
+        :liquidation-penalty="liquidationPenalty"
+        :stability-fee="stabilityFee"
+        :liquidation-ratio="liquidationRatio"
+        :price-service="priceService"
+        :cdp-service="cdpService"
+        :proxy-service="proxyService"
+        :cdps="cdps"
+        :cdps-without-proxy="cdpsWithoutProxy"
+        :cdp-details-loaded="cdpDetailsLoaded"
+        :tokens-with-balance="tokensWithBalance"
+        :migration-in-progress="migrationInProgress"
+        :open-close-modal="openCloseModal"
+        :open-move-modal="openMoveModal"
+        :values-updated="valuesUpdated"
+        :values="activeValues"
+        :get-collateral-options="getCollateralOptions"
+        :get-value-or-function="getValueOrFunction"
+        :get-cdp="getCdp"
+        :has-cdp="hasCdp"
+        @activeCdpId="setupCdpManageFunc"
+        @cdpOpened="addCdp"
+        @cdpClosed="removeCdp"
+        @modalHidden="modalHidden"
+        @managerUpdate="doUpdate"
+        @showWithdraw="showWithdraw"
+        @showPayback="showPayback"
+        @showGenerate="showGenerate"
+        @showDeposit="showDeposit"
+        @migrateCdp="migrateCdpExternal"
+        @proceedtoCreateOrManage="proceedtoCreateOrManage"
+        @approveCurrency="approveCurrency"
+        @setActiveCdpId="setActiveCdpId"
+        @setAfterLoadPage="setAfterLoadPage"
+      >
+      </router-view>
+    </div>
     <interface-footer />
   </div>
 </template>

src/dapps/MakerDai/containers/MakerHome/MakerHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4">
+  <div>
     <b-row align-content="stretch">
       <b-col cols="12" xl="6" lg="6" md="6" class="mb-4">
         <card

src/dapps/MakerDai/containers/MigrateCDP/MigrateCDP.vue

@@ -1,68 +1,86 @@
 <template>
-  <div>
-    <div class="currency-ops-new">
-      <div style="padding: 10px">
-        <p @click="checkMigrateContractSaiBalance">
-          <b>
-            {{
-              $t('dappsMaker.current-sai-balance', {
-                value: migrateContractBalance
-              })
-            }}</b
-          >
-        </p>
-        <div v-show="noSaiAvailable && !needsAtLeast20">
-          {{ $t('dappsMaker.not-enough-sai') }}
-        </div>
-        <div v-show="needsAtLeast20" style="padding: 10px">
-          {{
-            $t('dappsMaker.needs-at-least-20', {
-              value: migrateContractBalance
-            })
-          }}
+  <div style="max-width: 500px;">
+    <div class="d-flex align-items-center mb-5">
+      <h3 class="mr-2 ">
+        {{ $t('dappsMaker.migrate-single-collateral-to-multi-collateral') }}
+      </h3>
+      <img :src="DaiIcon" class="icon-size" />
+    </div>
+    <div v-if="false" style="max-width: 500px;" class="mb-5">
+      Description
+    </div>
+    <div>
+      <div class="mb-5">
+        <div class="mb-2">
+          <b>{{ $t('dappsMaker.current-balance') }}</b>
         </div>
+        <b-form-input
+          v-model="migrateContractBalance"
+          readonly
+          placeholder="Enter your name"
+          class="mb-1"
+        ></b-form-input>
+        <b-button
+          variant="outline-secondary"
+          @click="checkMigrateContractSaiBalance"
+          >{{ $t('dappsMaker.check-balance') }}</b-button
+        >
       </div>
 
-      <div class="currency-picker-container">
-        <div class="interface__block-title">
-          {{ $t('dappsMaker.migrate-single-collateral-to-multi-collateral') }}
-        </div>
-        <h4 v-show="!cdpDetailsLoaded">
+      <div v-show="noSaiAvailable && !needsAtLeast20">
+        {{ $t('dappsMaker.not-enough-sai') }}
+      </div>
+      <div v-show="needsAtLeast20" style="padding: 10px">
+        {{
+          $t('dappsMaker.needs-at-least-20', {
+            value: migrateContractBalance
+          })
+        }}
+      </div>
+    </div>
+
+    <div class="currency-picker-container">
+      <div class="mb-2">
+        <b>{{ $t('dappsMaker.your-cdps') }}</b>
+      </div>
+
+      <div v-if="!cdpDetailsLoaded" class="d-flex align-items-center">
+        <b-spinner class="mr-3" variant="primary" label="Spinning"></b-spinner>
+        <div>
           {{ $t('dappsMaker.loading-your-cdps') }}
-        </h4>
-        <div v-for="cdpId in cdps" :key="cdpId">
-          <div
-            :class="[
-              'dropdown-text-container',
-              'dropdown-container',
-              'no-point',
-              cdpId === selectedCdp ? 'selectedCDP' : ''
-            ]"
-            @click="selectCDP(cdpId)"
-          >
-            <p>
-              <span class="cc DAI cc-icon cc-icon-dai currency-symbol" />
-              {{ cdpId }}
-              <span class="subname">- CDP </span>
-            </p>
-          </div>
         </div>
-        <div v-show="noCdpsToMigrateFound">
-          {{ $t('dappsMaker.no-cdps-to-migrate-found') }}
+      </div>
+      <div v-for="cdpId in cdps" :key="cdpId">
+        <div
+          :class="[
+            'dropdown-text-container',
+            'dropdown-container',
+            'no-point',
+            cdpId === selectedCdp ? 'selectedCDP' : ''
+          ]"
+          @click="selectCDP(cdpId)"
+        >
+          <p>
+            <span class="cc DAI cc-icon cc-icon-dai currency-symbol" />
+            {{ cdpId }}
+            <span class="subname">- CDP </span>
+          </p>
         </div>
-        <div class="buttons-container">
-          <div
-            :class="[
-              validInputs ? '' : 'disabled',
-              'submit-button large-round-button-green-filled'
-            ]"
-            @click="beginMigration"
-          >
-            {{ $t('dappsMaker.migrate') }}
-          </div>
+      </div>
+      <div v-show="noCdpsToMigrateFound">
+        {{ $t('dappsMaker.no-cdps-to-migrate-found') }}
+      </div>
+      <div class="buttons-container">
+        <div
+          :class="[
+            validInputs ? '' : 'disabled',
+            'submit-button large-round-button-green-filled'
+          ]"
+          @click="beginMigration"
+        >
+          {{ $t('dappsMaker.migrate') }}
         </div>
       </div>
-      <div></div>
     </div>
   </div>
 </template>

src/dapps/MakerDai/containers/MigrateDai/MigrateDai.scss

@@ -1,4 +1,4 @@
-@import "~@/scss/GlobalVariables";
+@import '~@/scss/GlobalVariables';
 
 $this-page-mobile-width: 700px;
 
@@ -155,7 +155,7 @@ $this-page-mobile-width: 700px;
         top: 0;
         left: 0;
         right: 0;
-        content: "";
+        content: '';
         width: 100%;
         border-top: 1px solid $light-grey-3;
       }

src/dapps/MakerDai/containers/MigrateDai/MigrateDai.vue

@@ -1,40 +1,38 @@
 <template>
-  <div class="p-4">
+  <div style="max-width: 500px;">
+    <div class="d-flex align-items-center mb-3">
+      <h3 class="mr-2 ">{{ $t('dappsMaker.upgrade-sai-to-dai') }}</h3>
+      <img :src="DaiIcon" class="icon-size" />
+    </div>
     <div style="max-width: 500px;" class="mb-5">
       {{ $t('dappsMaker.upgrade-informational') }}
     </div>
-    <div style="max-width: 500px;">
-      <div class="interface__block-title d-flex align-items-center">
-        <h3 class="mr-2 ">{{ $t('dappsMaker.upgrade-sai-to-dai') }}</h3>
-        <img :src="DaiIcon" class="icon-size" />
-      </div>
-      <div class="top-buttons">
-        <p @click="setMax">{{ $t('dappsMaker.entire-sai-balance') }}</p>
-      </div>
-      <div class="dropdown-text-container dropdown-container no-point">
-        <p>
-          <span class="cc DAI cc-icon cc-icon-dai currency-symbol" />
-          {{ $t('dappsMaker.sai') }}
-        </p>
-      </div>
-      <input
-        v-model="daiQty"
+    <div class="top-buttons">
+      <p @click="setMax">{{ $t('dappsMaker.entire-sai-balance') }}</p>
+    </div>
+    <div class="dropdown-text-container dropdown-container no-point">
+      <p>
+        <span class="cc DAI cc-icon cc-icon-dai currency-symbol" />
+        {{ $t('dappsMaker.sai') }}
+      </p>
+    </div>
+    <input
+      v-model="daiQty"
+      :class="[
+        'currency-picker-container',
+        'dropdown-text-container',
+        'dropdown-container'
+      ]"
+    />
+    <div class="buttons-container">
+      <div
         :class="[
-          'currency-picker-container',
-          'dropdown-text-container',
-          'dropdown-container'
+          validInputs ? '' : 'disabled',
+          'submit-button large-round-button-green-filled'
         ]"
-      />
-      <div class="buttons-container">
-        <div
-          :class="[
-            validInputs ? '' : 'disabled',
-            'submit-button large-round-button-green-filled'
-          ]"
-          @click="submitTransaction"
-        >
-          {{ $t('dappsMaker.upgrade') }}
-        </div>
+        @click="submitTransaction"
+      >
+        {{ $t('dappsMaker.upgrade') }}
       </div>
     </div>
   </div>

src/layouts/InterfaceLayout/containers/DappsContainer/DappsContainer.scss

@@ -1,4 +1,4 @@
-@import "../InterfaceContainer";
+@import '../InterfaceContainer';
 
 $dapps-container-mobile-width: 650px;
 

src/translations/dapps-maker/en_US.json

@@ -105,6 +105,7 @@
   "migrate-single-collateral-to-multi-collateral": "Migrate Single Collateral CDP to Multi-Collateral Vault",
   "not-enough-sai": "There is not enough SAI available to migrate CDPs at this time. Please try again later.",
   "needs-at-least-20": "Only CDPs with more than 20 and less than {value} SAI can be upgraded at the moment.",
+  "current-balance": "Current balance amount",
   "current-sai-balance": "Current amount: {value}",
   "upgrade-sai-to-dai": "Upgrade your SAI to DAI ",
   "min-required": "Min {value} required",
@@ -149,5 +150,7 @@
   "set": "Set",
   "earn-with-dai": "Earn savings on your DAI",
   "dai-stable-coin": "DAI Stablecoin",
-  "what-is-dashes-vault": "A value of -- indicates this Vault has no DAI so these calculations are only meaningful if this Vault has created DAI"
+  "what-is-dashes-vault": "A value of -- indicates this Vault has no DAI so these calculations are only meaningful if this Vault has created DAI",
+  "check-balance": "Check Balance",
+  "your-cdps": "Your CDPs"
 }