Merge pull request #34 from pontem-network/LS-1302-show-the-balance

Ls 1302 show the balance
pontem-network · Mar 27, 2024 · f29d5ee · f29d5ee
2 parents 3c7fa12 + 39d6bd5
commit f29d5ee
Show file tree

Hide file tree

Showing 57 changed files with 3,725 additions and 3,043 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pontem/liquidswap-widget",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "homepage": "https://github.com/pontem-network/liquidswap-widget#readme",
   "description": "LiquidSwap widget as custom web component",
   "files": [
@@ -49,7 +49,7 @@
   "dependencies": {
     "@metamask/jazzicon": "2.0.0",
     "@pontem/aptos-wallet-adapter": "0.7.2",
-    "@pontem/coins-registry": "2.1.44",
+    "@pontem/coins-registry": "2.1.64",
     "@pontem/liquidswap-sdk": "0.6.1",
     "@tsconfig/recommended": "1.0.2",
     "@types/lodash": "4.14.182",

diff --git a/src/App.ce.vue b/src/App.ce.vue
@@ -22,14 +22,20 @@ const props = defineProps<{
   dataNetwork?: string; // { name?: string; chainId?: string } as JSON
   dataTransaction?: string; // { status: 'pending' | 'success' | 'error' | 'rejected'; hash: string | null } as JSON
 }>();
+
 // initialize stores
 (async () => {
   const tokensStore = useTokensStore();
-  await tokensStore.fetchCoinsList();
   const poolsStore = usePoolsStore();
-  await poolsStore.fetchPoolsList();
-  useStore();
+
+  await Promise.all([
+    tokensStore.fetchCoinsData(),
+    poolsStore.fetchPoolsList()
+  ]).catch((err) => {
+    console.error('Error during stores initialization', err);
+  })
 })();
+
 const mainStore = useStore();
 
 function checkNativeWallet (){

diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
@@ -124,6 +124,7 @@
           <img class="full_version__img" src="./../assets/expand.svg" />
           <span>liquidswap.com</span>
         </a>
+        <span class="full_version__app">version {{ versionApp }}</span>
       </div>
     </div>
     <TxSettingsDialog
@@ -133,7 +134,6 @@
       :to-token="swapStore.toCurrency.token"
       :from-token="swapStore.fromCurrency.token"
     />
-    <PriceImpactWarningDialog />
   </div>
 </template>
 
@@ -177,6 +177,7 @@ const swapStore = useSwapStore();
 
 const requireUpdateInput = ref<TokenFiledType>();
 
+const versionApp = computed(() => process.env.VERSION);
 const { account } = mainStore;
 const version = computed(() => swapStore.version);
 const { fromCurrency, toCurrency } = storeToRefs(swapStore);

diff --git a/src/Swap/SwapInput.vue b/src/Swap/SwapInput.vue
@@ -58,7 +58,7 @@
             </template>
             <ToolTip
                 v-else
-                position="bottom-left"
+                position="bottom-right"
                 :tooltipText="'This token is not registered in your account. Before swap, you must register this token.'"
                 class="token-tooltip"
             >
@@ -76,6 +76,8 @@
     ref="dialog"
     v-model:actionToken="state.token"
     v-model:secondaryToken="secondaryToken.token"
+    :mode="mode"
+    :view="'select-token'"
   />
   <UnverifiedTokenDialog ref="cautionAlert" />
 </template>

diff --git a/src/Swap/styles/inputLabelTemplate.scss b/src/Swap/styles/inputLabelTemplate.scss
@@ -1,58 +1,60 @@
-.input-label {
-  display: flex;
-  flex-direction: row;
-
-  padding: 0 1rem 1rem;
-  font-size: 15px;
-  height: 38px;
-
-  &__right {
-    margin-left: auto;
-  }
-
-  &__both {
+.swap__container {
+  .input-label {
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
+    flex-direction: row;
 
-  &__text_secondary {
-    color: var(--text-color-secondary);
-    font-weight: 700;
+    padding: 0 1rem 1rem;
     font-size: 15px;
-  }
+    height: 38px;
 
-  &__text_loaded {
-    opacity: 0;
-    animation: fade 0.75s forwards;
-  }
+    &__right {
+      margin-left: auto;
+    }
 
-  &__tooltip-title {
-    color: var(--text-color);
-    cursor: pointer;
-  }
+    &__both {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
 
-  @keyframes fade {
-    0% {
+    &__text_secondary {
+      color: var(--ls-text-color-secondary);
+      font-weight: 700;
+      font-size: 15px;
+    }
+
+    &__text_loaded {
       opacity: 0;
+      animation: fade 0.75s forwards;
     }
-    100% {
-      opacity: 1;
+
+    &__tooltip-title {
+      color: var(--ls-text-color);
+      cursor: pointer;
+    }
+
+    @keyframes fade {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
     }
   }
-}
 
-.input-label__tooltip .p-tooltip-text {
-  width: 270px;
-  background-color: #03031c !important;
-  font-size: 13px !important;
-  border-radius: 12px !important;
-  padding: 16px;
-}
+  .input-label__tooltip .p-tooltip-text {
+    width: 270px;
+    background-color: #03031c !important;
+    font-size: 13px !important;
+    border-radius: 12px !important;
+    padding: 16px;
+  }
 
-.-green {
-  color: var(--green-500);
+  .-green {
+    color: var(--ls-green-500);
+  }
+  .-red {
+    color: var(--ls-red-500);
+  }
 }
-.-red {
-  color: var(--red-500);
-}