From 12961d81f789b354c697da99eb038eec5824ac03 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Mon, 14 Mar 2022 19:01:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0wallet=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/wallet/CoinCard.vue     | 106 +++++++++++
 src/components/market/wallet/GameCoinCard.vue | 111 ++++++++++++
 src/components/market/wallet/TotalBalance.vue |  80 ++++++++
 src/components/market/wallet/WalletPanel.vue  | 171 ++++++++++++++++++
 src/views/desktop/Wallet.vue                  |  43 ++++-
 5 files changed, 510 insertions(+), 1 deletion(-)
 create mode 100644 src/components/market/wallet/CoinCard.vue
 create mode 100644 src/components/market/wallet/GameCoinCard.vue
 create mode 100644 src/components/market/wallet/TotalBalance.vue
 create mode 100644 src/components/market/wallet/WalletPanel.vue

diff --git a/src/components/market/wallet/CoinCard.vue b/src/components/market/wallet/CoinCard.vue
new file mode 100644
index 0000000..8fc7927
--- /dev/null
+++ b/src/components/market/wallet/CoinCard.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="coin-card" :class="{'mobile': mobile}">
+    <div class="content">
+      <div class="top">
+        <div class="topLeft">
+          <div class="name"><span>Thetan Coin (THC)</span></div>
+          <div class="coin">-- THC</div>
+          <div class="subCoin">-- USD</div>
+        </div>
+        <img draggable="false"
+             src="data:image/png;base64,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"
+             class="topRight"></div>
+      <div class="wrongNetwork"><span>Wrong network</span></div>
+      <button disabled="" class="general-btn btn"><span class="title">Deposit</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'CoinCard',
+  components: {
+  }
+})
+export default class CoinCard extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.coin-card {
+  width: 25em;
+  height: 12.125em;
+  background: #291a61;
+  display: flex;
+  border-radius: 0.5em;
+  .content {
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .wrongNetwork {
+      margin-bottom: 0.8125em;
+      justify-self: flex-end;
+      span {
+        font-weight: bold;
+        font-size: 0.8125em;
+        line-height: 1.23;
+        color: #ff602e;
+      }
+    }
+
+    .top {
+      display: flex;
+      flex: 1;
+      .topLeft {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        .name {
+          margin-bottom: 0.5em;
+          span {
+            color: #997bff;
+            font-weight: bold;
+            font-size: 0.75em;
+            line-height: 1.33;
+          }
+        }
+        .coin {
+          font-weight: bolder;
+          font-size: 1.375em;
+          line-height: 1.27;
+          color: #ffffff;
+        }
+        .subCoin {
+          font-weight: bold;
+          font-size: 0.875em;
+          line-height: 1.42;
+          color: #466bf7;
+        }
+      }
+      .topRight {
+        width: 3.375em;
+        height: 3.875em;
+        object-fit: contain;
+      }
+    }
+    .btn {
+      font-family: Oxanium, cursive;
+      background: #009c4a;
+      height: 2.5em;
+      &:disabled {
+        color: #726f6f !important;
+      }
+    }
+  }
+}
+.coin-card.mobile{
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/components/market/wallet/GameCoinCard.vue b/src/components/market/wallet/GameCoinCard.vue
new file mode 100644
index 0000000..1ac0098
--- /dev/null
+++ b/src/components/market/wallet/GameCoinCard.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="game-coin-card" :class="{'mobile': mobile}">
+    <div class="content">
+      <div class="top">
+        <div class="topLeft">
+          <div class="name"><span>Thetan Coin (gTHC)</span></div>
+          <div class="coin">0</div>
+          <div class="subCoin">0 USD</div>
+        </div>
+        <img draggable="false"
+             src="data:image/png;base64,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"
+             class="topRight"></div>
+      <div class="message notAllow"><span class="spanMessage"></span></div>
+      <button disabled="" class="general-btn btn"><span class="title">Claim</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'GameCoinCard',
+  components: {
+  }
+})
+export default class GameCoinCard extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.game-coin-card {
+  width: 25em;
+  height: 12.125em;
+  background: #291a61;
+  display: flex;
+  border-radius: 0.5em;
+  .content {
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .top {
+      display: flex;
+      flex: 1;
+      .topLeft {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        .name {
+          margin-bottom: 0.5em;
+          span {
+            color: #997bff;
+            font-weight: bold;
+            font-size: 0.75em;
+            line-height: 1.33;
+          }
+        }
+        .coin {
+          font-weight: bolder;
+          font-size: 1.375em;
+          line-height: 1.27;
+          color: #ffffff;
+        }
+        .subCoin {
+          font-weight: bold;
+          font-size: 0.875em;
+          line-height: 1.42;
+          color: #466bf7;
+        }
+      }
+      .topRight {
+        width: 3.375em;
+        height: 3.875em;
+        object-fit: contain;
+      }
+    }
+    .message {
+      margin-bottom: 0.75em;
+      &.allow {
+        color: #009c4a;
+      }
+      &.notAllow {
+        color: #9c9c9c;
+      }
+      .spanMessage {
+        font-weight: bolder;
+        font-size: 0.8125em;
+        line-height: 1.23;
+      }
+    }
+
+    .btn {
+      font-family: Oxanium, cursive;
+      background: #009c4a;
+      height: 2.5em;
+      &:disabled {
+        color: #726f6f !important;
+      }
+    }
+  }
+}
+.game-coin-card.mobile{
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+</style>
diff --git a/src/components/market/wallet/TotalBalance.vue b/src/components/market/wallet/TotalBalance.vue
new file mode 100644
index 0000000..c61b8d5
--- /dev/null
+++ b/src/components/market/wallet/TotalBalance.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="total-balance" :class="{'mobile': mobile}">
+    <div class="content">
+      <div class="name"><span>Other Currencies</span></div>
+      <div class="coin">-- WBNB</div>
+      <div class="subCoin space">-- USD</div>
+      <div class="coin">-- BUSD</div>
+      <div class="subCoin">-- USD</div>
+      <div class="wrongNetwork"><span>Wrong network</span></div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'TotalBalance',
+  components: {
+  }
+})
+export default class TotalBalance extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.total-balance {
+  width: 25em;
+  height: 12.125em;
+  background: #291a61;
+  display: flex;
+  border-radius: 0.5em;
+  .content {
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .wrongNetwork {
+      margin-top: 0.5em;
+      span {
+        font-weight: bold;
+        font-size: 0.8125em;
+        line-height: 1.23;
+        color: #ff602e;
+      }
+    }
+    .name {
+      margin-bottom: 1em;
+      span {
+        color: #997bff;
+        font-weight: bold;
+        font-size: 0.75em;
+        line-height: 1.33;
+      }
+    }
+    .coin {
+      font-weight: bolder;
+      font-size: 1.375em;
+      line-height: 1.27;
+      color: #ffffff;
+    }
+    .subCoin {
+      font-weight: bold;
+      font-size: 0.875em;
+      line-height: 1.42;
+      color: #466bf7;
+    }
+    .space {
+      margin-bottom: 0.5em;
+    }
+  }
+}
+.total-balance.mobile{
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+</style>
diff --git a/src/components/market/wallet/WalletPanel.vue b/src/components/market/wallet/WalletPanel.vue
new file mode 100644
index 0000000..da448e2
--- /dev/null
+++ b/src/components/market/wallet/WalletPanel.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="wallet-container">
+    <div class="header">
+      <div class="label">Wallet</div>
+    </div>
+    <div class="horizonalBar"></div>
+    <div class="code"><span class="uuid">0x42448c...fc2c0231</span>
+      <img
+      class="icCopy" width="16" height="16"
+      src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
+    </div>
+    <div class="wallet">
+      <total-balance></total-balance>
+      <coin-card></coin-card>
+      <coin-card></coin-card>
+    </div>
+    <div class="header ingame"><span class="label">Ingame Currency</span>
+    </div>
+    <div class="horizonalBar"></div>
+    <div class="wallet">
+      <game-coin-card></game-coin-card>
+      <game-coin-card></game-coin-card>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import TotalBalance from '@/components/market/wallet/TotalBalance.vue'
+import CoinCard from '@/components/market/wallet/CoinCard.vue'
+import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
+
+@Component({
+  name: 'WalletPanel',
+  components: {
+    GameCoinCard,
+    CoinCard,
+    TotalBalance
+  }
+})
+export default class WalletPanel extends Vue {}
+</script>
+<style lang="scss" scoped>
+@import '../../../scss/breakpoints.scss';
+
+.wallet-container {
+  box-sizing: border-box;
+  color: white;
+  width: 1440px;
+
+  .code {
+    display: flex;
+    align-self: flex-start;
+    cursor: pointer;
+    margin-bottom: 1.25em;
+    .uuid {
+      font-size: 1em;
+      line-height: 1.5;
+
+      &:active {
+        opacity: 0.6;
+      }
+    }
+
+    .copy {
+      margin-left: 0.5em;
+    }
+  }
+  .ingame {
+    margin-top: 3.625em;
+  }
+
+  .icCopy {
+    margin-left: 3.625em;
+    align-self: center;
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0.75em;
+
+    .label {
+      font-weight: bolder;
+      font-size: 1.375em;
+      line-height: 1.27;
+      color: #ffffff;
+      &.disable {
+        @include media('<tablet') {
+          color: #3c2885;
+        }
+      }
+      &.ingameCurrency {
+        margin-left: 2.1875em;
+      }
+    }
+  }
+
+  .horizonalBar {
+    border: 0;
+    height: 1px;
+    background: #563cb8;
+    margin-bottom: 1.75em;
+  }
+
+  .wallet {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+// Mobile
+@include media('<tablet') {
+  .wallet-container {
+    width: 100%;
+    .show {
+      display: flex !important;
+    }
+    .hide {
+      display: none !important;
+    }
+    .headerCoin {
+      margin-top: 28px;
+    }
+    .ingame {
+      margin-top: 28px;
+    }
+    .wallet {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .coinCard {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+    }
+    .walletIngame {
+      display: none;
+    }
+  }
+}
+
+// Tablet
+@include media('>=tablet', '<desktop') {
+  .wallet-container {
+    .ingame {
+      margin-top: 38px;
+    }
+    .headerCoin {
+      margin-top: 28px;
+    }
+    .wallet {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .coinCard {
+        width: 293px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/views/desktop/Wallet.vue b/src/views/desktop/Wallet.vue
index d12f732..c6d85a6 100644
--- a/src/views/desktop/Wallet.vue
+++ b/src/views/desktop/Wallet.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="">
     <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
+    <div class="content-container">
+      <wallet-panel></wallet-panel>
+    </div>
     <base-footer></base-footer>
   </div>
 </template>
@@ -8,18 +11,56 @@
 import { Component, Vue } from 'vue-property-decorator'
 import TopMenu from '@/components/market/TopMenu.vue'
 import BaseFooter from '@/components/layout/BaseFooter.vue'
+import WalletPanel from '@/components/market/wallet/WalletPanel.vue'
 
 @Component({
   name: 'Wallet',
   components: {
+    WalletPanel,
     BaseFooter,
     TopMenu
   }
 })
 export default class Wallet extends Vue {
-  currentTab = ''
+  currentTab = '';
 }
 </script>
 <style lang="scss" scoped>
+@import '../../scss/breakpoints.scss';
+  .content-container{
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 50px;
+    margin-top: 30px;
+  }
+  @include media('<desktop') {
+    .content-container{
+      margin-top: 1.75rem;
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+// Phone
+@include media('<tablet') {
+  .content-container {
+    max-width: 100%;
+    padding: 3rem 1.67rem;
+    font-size: 16px;
+    @include media('<=phone') {
+      font-size: 14px;
+    }
+  }
+}
+
+// Tablet
+@include media('>=tablet', '<desktop') {
+  .content-container {
+    width: 768px;
+    max-width: 100%;
+    font-size: 16px;
+  }
+}
 
 </style>