Merge pull request #199 from Cryptorubic/develop

Develop
Cryptorubic · Apr 6, 2021 · e51498f · e51498f
2 parents 39a4452 + 131408c
commit e51498f
Show file tree

Hide file tree

Showing 36 changed files with 914 additions and 488 deletions.
diff --git a/src/app/core/services/swaps/trade-parameters-service/trade-parameters.service.ts b/src/app/core/services/swaps/trade-parameters-service/trade-parameters.service.ts
@@ -24,7 +24,12 @@ export class TradeParametersService {
           fromToken: null,
           toToken: null,
           fromAmount: null,
-          toAmount: null
+          toAmount: null,
+
+          isCustomFromTokenFormOpened: false,
+          isCustomToTokenFormOpened: false,
+          customFromTokenAddress: null,
+          customToTokenAddress: null
         }
       }),
       {} as Trades

diff --git a/src/app/features/bridge-page/components/bridge-table/bridge-table.component.html b/src/app/features/bridge-page/components/bridge-table/bridge-table.component.html
@@ -20,7 +20,7 @@
         <thead>
           <tr>
             <th>
-              <span>Status</span>
+              <span>{{ 'Status' | translate }}</span>
               <img
                 [src]="'assets/images/bridge/' + getArrow('Status')"
                 alt="Sort"
@@ -44,15 +44,15 @@
               />
             </th>
             <th>
-              <span>Spent</span>
+              <span>{{ 'SEND' | translate }}</span>
               <img
                 [src]="'assets/images/bridge/' + getArrow('Spent')"
                 alt="Sort"
                 (click)="onSortClick('Spent')"
               />
             </th>
             <th>
-              <span>Expected</span>
+              <span>{{ 'GET' | translate }}</span>
               <img
                 [src]="'assets/images/bridge/' + getArrow('Expected')"
                 alt="Sort"
@@ -95,22 +95,24 @@
             </td>
 
             <td class="data__amount">
-              <div>{{ tx.actualFromAmount }}</div>
-              <img [src]="tx.image_link" alt="" />
-              <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+              <div class="data__amount-inner">
+                <div class="data__amount-number">{{ tx.actualFromAmount }}</div>
+                <img [src]="tx.image_link" alt="" />
+                <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+              </div>
             </td>
 
             <td class="data__amount">
-              <div>{{ tx.actualToAmount }}</div>
-              <img [src]="tx.image_link" alt="" />
-              <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+              <div class="data__amount-inner">
+                <div class="data__amount-number">{{ tx.actualToAmount }}</div>
+                <img [src]="tx.image_link" alt="" />
+                <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+              </div>
             </td>
 
             <td class="data__date">
               <div>
-                {{ tx.updateTime.split(' ')[0] }}
-                <br />
-                {{ tx.updateTime.split(' ')[1] }}
+                {{ tx.updateTime.split(' ')[0] }} {{ tx.updateTime.split(' ')[1] }}
               </div>
             </td>
           </tr>
@@ -171,15 +173,19 @@
                 </div>
 
                 <div class="data__amount" *ngIf="selectedOption === 'Spent'">
-                  <div>{{ tx.actualFromAmount }}</div>
-                  <img [src]="tx.image_link" alt="" />
-                  <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+                  <div class="data__amount-inner">
+                    <div class="data__amount-number">{{ tx.actualFromAmount }}</div>
+                    <img [src]="tx.image_link" alt="" />
+                    <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+                  </div>
                 </div>
 
                 <div class="data__amount" *ngIf="selectedOption === 'Expected'">
-                  <div>{{ tx.actualToAmount }}</div>
-                  <img [src]="tx.image_link" alt="" />
-                  <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+                  <div class="data__amount-inner">
+                    <div class="data__amount-number">{{ tx.actualToAmount }}</div>
+                    <img [src]="tx.image_link" alt="" />
+                    <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+                  </div>
                 </div>
 
                 <div class="data__date" *ngIf="selectedOption === 'Date'">
@@ -223,20 +229,24 @@
               </div>
 
               <div class="content__item">
-                <div class="content__item-name">Spent</div>
+                <div class="content__item-name">{{ 'GET' | translate}}</div>
                 <div class="data__amount">
-                  <div>{{ tx.actualFromAmount }}</div>
-                  <img [src]="tx.image_link" alt="" />
-                  <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+                  <div class="data__amount-inner">
+                    <div class="data__amount-number">{{ tx.actualFromAmount }}</div>
+                    <img [src]="tx.image_link" alt="" />
+                    <span>{{ tx[Blockchains[tx.fromNetwork].symbolPropName] }}</span>
+                  </div>
                 </div>
               </div>
 
               <div class="content__item">
-                <div class="content__item-name">Expected</div>
+                <div class="content__item-name">{{ 'SEND' | translate}}</div>
                 <div class="data__amount">
-                  <div>{{ tx.actualToAmount }}</div>
-                  <img [src]="tx.image_link" alt="" />
-                  <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+                  <div class="data__amount-inner">
+                    <div class="data__amount-number">{{ tx.actualToAmount }}</div>
+                    <img [src]="tx.image_link" alt="" />
+                    <span>{{ tx[Blockchains[tx.toNetwork].symbolPropName] }}</span>
+                  </div>
                 </div>
               </div>
 

diff --git a/src/app/features/bridge-page/components/bridge-table/bridge-table.component.scss b/src/app/features/bridge-page/components/bridge-table/bridge-table.component.scss
@@ -127,6 +127,7 @@
     }
 
     .data__amount {
+      display: flex;
       padding: 0;
     }
 
@@ -236,7 +237,7 @@
     align-items: center;
     padding-left: 20px;
 
-    color: rgba(black, 0.5);
+    color: black;
 
     &::before {
       position: relative;
@@ -284,14 +285,18 @@
     }
   }
 
-  &__amount {
-    padding: 20px 0 13px 20px;
+  &__amount-inner {
+    display: flex;
+  }
 
-    div {
-      margin-bottom: 7px;
+  &__amount-number {
+    margin-right: 10px;
 
-      font-weight: bold;
-    }
+    font-weight: bold;
+  }
+
+  &__amount {
+    padding: 13px 20px;
 
     img {
       max-width: 15px;
@@ -305,7 +310,7 @@
   }
 
   &__date {
-    color: rgba(black, 0.5);
+    color: black;
 
     div {
       width: fit-content;

diff --git a/src/app/features/bridge-page/components/brifge-form/bridge-form.component.html b/src/app/features/bridge-page/components/brifge-form/bridge-form.component.html
@@ -73,7 +73,7 @@
                       fromNumber != undefined &&
                       fromNumber.lt(selectedToken.minAmount)
                     "
-                    src="assets/images/icons/warning-red.svg"
+                    src="assets/images/icons/error-disclaimer-sign.svg"
                     alt=""
                   />
                 </td>
@@ -97,7 +97,7 @@
                       fromNumber != undefined &&
                       fromNumber.gt(selectedToken.maxAmount)
                     "
-                    src="assets/images/icons/warning-red.svg"
+                    src="assets/images/icons/error-disclaimer-sign.svg"
                     alt=""
                   />
                 </td>
@@ -113,7 +113,7 @@
           (click)="revertBlockchains()"
         >
           <img
-            src="../../../assets/images/icons/revert.svg"
+            src="assets/images/icons/revert.svg"
             class="choose-blockchains__revert-icon"
             alt="Revert"
           />