Merge pull request #2 from ranchimall/master

docs/css/main.css

@@ -843,7 +843,7 @@ sm-checkbox {
 }
 
 .orders_section__header {
-  min-height: 2.8rem;
+  min-height: 3rem;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
@@ -870,6 +870,9 @@ sm-checkbox {
   border-radius: 0.5rem;
   grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
 }
+.order-card:not(:last-child) {
+  margin-bottom: 1rem;
+}
 .order-card > .grid:nth-of-type(2) {
   grid-area: price;
 }
@@ -899,9 +902,10 @@ sm-checkbox {
   cursor: pointer;
   margin-right: 0.5rem;
 }
-.order-card__quantity, .order-card__price {
+.order-card__quantity, .order-card__price, .order-card__amount {
   font-size: 0.9rem;
   color: rgba(var(--text-color), 0.9);
+  font-weight: 700;
 }
 .order-card__time {
   grid-area: time;
@@ -1216,72 +1220,28 @@ sm-checkbox {
 #portfolio_cards_wrapper {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 }
 
 .personal-asset-balance {
+  display: flex;
+  gap: 1.5rem 0.5rem;
   align-content: flex-start;
   padding: 1rem;
   border-radius: 0.5rem;
-  color: rgba(0, 0, 0, 0.8);
   width: 100%;
+  background-color: rgba(var(--text-color), 0.03);
 }
-.personal-asset-balance:not(:last-of-type) {
+.personal-asset-balance .icon {
   margin-right: 0.5rem;
-}
+  flex-shrink: 0;
-.personal-asset-balance:nth-of-type(1) {
+  fill: var(--accent-color);
-  background: url("bg-art2.svg") no-repeat bottom right, hsl(141deg, 100%, 88%);
-  background-size: contain;
-}
-.personal-asset-balance:nth-of-type(1) .icon {
-  background-color: hsla(141deg, 100%, 70%, 0.5);
-}
-.personal-asset-balance:nth-of-type(1) .button {
-  border: solid thin hsla(141deg, 100%, 70%, 0.5);
-}
-.personal-asset-balance:nth-of-type(2) {
-  background: url("back.svg") no-repeat top right, hsl(62deg, 100%, 83%);
-  background-size: contain;
-}
-.personal-asset-balance:nth-of-type(2) .icon {
-  background-color: hsla(55deg, 100%, 50%, 0.5);
-}
-.personal-asset-balance > .flex {
-  margin-bottom: 0.3rem;
-}
-.personal-asset-balance > .flex .icon {
-  height: 2rem;
-  width: 2rem;
-  padding: 0.4rem;
-  border-radius: 0.3rem;
-  fill: rgba(0, 0, 0, 0.8);
-  margin-right: 0.5rem;
-}
-.personal-asset-balance .button {
-  display: flex;
-  align-items: center;
-  margin-top: 0.5rem;
-  padding-right: 0.8rem;
-  justify-self: flex-start;
-  border-radius: 1rem;
-  background-color: rgba(var(--foreground-color), 1);
-  color: rgba(var(--text-color), 1);
-  transition: box-shadow 0.3s;
-}
-.personal-asset-balance .button .icon {
-  height: 1rem;
-  background-color: transparent;
-  margin-right: 0.3rem;
-}
-.personal-asset-balance .button:hover {
-  box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.16);
 }
 
-#personal_rupee_balance span:first-of-type,
+#personal_btc_balance span:first-of-type,
 #personal_flo_balance span:first-of-type {
   font-size: 1.5rem;
 }
-#personal_rupee_balance span:last-of-type,
+#personal_btc_balance span:last-of-type,
 #personal_flo_balance span:last-of-type {
   font-size: 0.9rem;
 }
@@ -1589,6 +1549,14 @@ sm-checkbox {
     grid-template-columns: 17rem minmax(0, 1fr);
     align-items: flex-start;
   }
+  .no-data {
+    margin: auto;
+    background-color: rgba(var(--text-color), 0.03);
+    padding: 0.6rem 1rem;
+    border-radius: 5rem;
+    font-weight: 500;
+    font-size: 0.8rem;
+  }
   #price_history_chart {
     height: 20rem;
   }

docs/css/main.scss

@@ -625,17 +625,17 @@ sm-checkbox {
   width: 100%;
   align-items: center;
 }
-.app-brand{
+.app-brand {
   display: flex;
   gap: 0.3rem;
   align-items: center;
-  .icon{
+  .icon {
     height: 1.7rem;
     width: 1.7rem;
   }
 }
-.app-name{
+.app-name {
-  &__company{
+  &__company {
     font-size: 0.8rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
@@ -793,7 +793,7 @@ sm-checkbox {
   grid-template-rows: auto 1fr;
 }
 .orders_section__header {
-  min-height: 2.8rem;
+  min-height: 3rem;
   position: sticky;
   top: 0;
   background-color: rgba(var(--background-color), 1);
@@ -814,6 +814,9 @@ sm-checkbox {
   grid-template-columns: min-content 1fr auto;
   border-radius: 0.5rem;
   grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
   & > .grid {
     &:nth-of-type(2) {
       grid-area: price;
@@ -848,9 +851,11 @@ sm-checkbox {
     margin-right: 0.5rem;
   }
   &__quantity,
-  &__price {
+  &__price,
+  &__amount {
     font-size: 0.9rem;
     color: rgba(var(--text-color), 0.9);
+    font-weight: 700;
   }
 
   &__time {
@@ -1130,66 +1135,23 @@ sm-checkbox {
 #portfolio_cards_wrapper {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 }
 .personal-asset-balance {
+  display: flex;
+  // flex-wrap: wrap;
+  gap: 1.5rem 0.5rem;
   align-content: flex-start;
   padding: 1rem;
   border-radius: 0.5rem;
-  color: rgba(0, 0, 0, 0.8);
   width: 100%;
-  &:not(:last-of-type) {
+  background-color: rgba(var(--text-color), 0.03);
+  .icon {
     margin-right: 0.5rem;
-  }
+    flex-shrink: 0;
-  &:nth-of-type(1) {
+    fill: var(--accent-color);
-    background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%);
-    background-size: contain;
-    .icon {
-      background-color: hsla(141, 100%, 70%, 0.5);
-    }
-    .button {
-      border: solid thin hsla(141, 100%, 70%, 0.5);
-    }
-  }
-  &:nth-of-type(2) {
-    background: url("back.svg") no-repeat top right, hsl(62, 100%, 83%);
-    background-size: contain;
-    .icon {
-      background-color: hsla(55, 100%, 50%, 0.5);
-    }
-  }
-  & > .flex {
-    margin-bottom: 0.3rem;
-    .icon {
-      height: 2rem;
-      width: 2rem;
-      padding: 0.4rem;
-      border-radius: 0.3rem;
-      fill: rgba(0, 0, 0, 0.8);
-      margin-right: 0.5rem;
-    }
-  }
-  .button {
-    display: flex;
-    align-items: center;
-    margin-top: 0.5rem;
-    padding-right: 0.8rem;
-    justify-self: flex-start;
-    border-radius: 1rem;
-    background-color: rgba(var(--foreground-color), 1);
-    color: rgba(var(--text-color), 1);
-    transition: box-shadow 0.3s;
-    .icon {
-      height: 1rem;
-      background-color: transparent;
-      margin-right: 0.3rem;
-    }
-    &:hover {
-      box-shadow: 0 0.3rem 0.5rem rgba(0 0 0/ 0.16);
-    }
   }
 }
-#personal_rupee_balance,
+#personal_btc_balance,
 #personal_flo_balance {
   span:first-of-type {
     font-size: 1.5rem;
@@ -1475,6 +1437,14 @@ sm-checkbox {
       align-items: flex-start;
     }
   }
+  .no-data {
+    margin: auto;
+    background-color: rgba(var(--text-color), 0.03);
+    padding: 0.6rem 1rem;
+    border-radius: 5rem;
+    font-weight: 500;
+    font-size: 0.8rem;
+  }
   #price_history_chart {
     height: 20rem;
   }

docs/scripts/floTradeAPI.js

@@ -1,6 +1,6 @@
 'use strict';
 
-(function (EXPORTS) { //floTradeAPI v0.9.0
+(function (EXPORTS) { //floTradeAPI v0.9.1
     const tradeAPI = EXPORTS;
 
     const DEFAULT = {
@@ -9,6 +9,8 @@
         currency: "BTC" //should come from blockchain config later
     }
 
+    const BTC_DUST_AMT = 546;
+
     /*Kademlia DHT K-bucket implementation as a binary tree.*/
     /**
      * Implementation of a Kademlia DHT k-bucket used for storing
@@ -601,7 +603,7 @@
         TRADE: "trade"
     }
 
-    tradeAPI.getSink = function (service = serviceList.TRADE) {
+    const getSink = tradeAPI.getSink = function (service = serviceList.TRADE) {
         return new Promise((resolve, reject) => {
             if (!(Object.values(serviceList).includes(service)))
                 return reject(MarketError(MarketError.BAD_REQUEST_CODE, 'service required', errorCode.INVALID_VALUE));
@@ -1034,7 +1036,7 @@
 
     tradeAPI.depositBTC = function (quantity, floID, sinkID, privKey, proxySecret = null) {
         return new Promise((resolve, reject) => {
-            if (typeof quantity !== "number" || quantity <= floGlobals.fee)
+            if (typeof quantity !== "number" || quantity <= BTC_DUST_AMT)
                 return reject(MarketError(MarketError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER));
             else if (!floCrypto.verifyPrivKey(privKey, floID))
                 return reject(MarketError(MarketError.BAD_REQUEST_CODE, "Invalid Private Key", errorCode.INVALID_PRIVATE_KEY));
@@ -1371,12 +1373,10 @@
     }
 
     //container for user ID and proxy private-key
+    var _userID, _publicKey, _privateKey, _sinkID;
     const proxy = tradeAPI.proxy = {
-        user: null,
-        private: null,
-        public: null,
         async lock() {
-            if (!this.private)
+            if (!_privateKey)
                 return notify("No proxy key found!", 'error');
             getPromptInput("Add password", 'This password applies to this browser only!', {
                 isPassword: true,
@@ -1387,7 +1387,7 @@
                 else if (pwd.length < 4)
                     notify("Password minimum length is 4", 'error');
                 else {
-                    let tmp = Crypto.AES.encrypt(this.private, pwd);
+                    let tmp = Crypto.AES.encrypt(_privateKey, pwd);
                     localStorage.setItem(_l('proxy_secret'), "?" + tmp);
                     notify("Successfully locked with Password", 'success');
                 }
@@ -1396,35 +1396,37 @@
         clear() {
             localStorage.removeItem(_l('proxy_secret'));
             localStorage.removeItem(_l('user_ID'));
-            this.user = null;
+            _userID = null;
-            this.private = null;
+            _privateKey = null;
-            this.public = null;
+            _publicKey = null;
+        },
+        set sinkID(id) {
+            _sinkID = id;
         },
         get sinkID() {
-            return getRef("sink_id").value;
+            return _sinkID;
         },
         set userID(id) {
             localStorage.setItem(_l('user_ID'), id);
-            this.user = id;
+            _userID = id;
         },
         get userID() {
-            if (this.user)
+            if (_userID)
-                return this.user;
+                return _userID;
             else {
                 let id = localStorage.getItem(_l('user_ID'));
-                return id ? this.user = id : undefined;
+                return id ? _userID = id : undefined;
             }
         },
         set secret(key) {
             localStorage.setItem(_l('proxy_secret'), key);
-            this.private = key;
+            _privateKey = key;
-            this.public = floCrypto.getPubKeyHex(key);
+            _publicKey = floCrypto.getPubKeyHex(key);
         },
         get secret() {
-            const self = this;
             return new Promise((resolve, reject) => {
-                if (self.private)
+                if (_privateKey)
-                    return resolve(self.private);
+                    return resolve(_privateKey);
 
                 const Reject = reason => {
                     notify(reason, 'error');
@@ -1432,9 +1434,9 @@
                 }
                 const setValues = priv => {
                     try {
-                        self.private = priv;
+                        _privateKey = priv;
-                        self.public = floCrypto.getPubKeyHex(priv);
+                        _publicKey = floCrypto.getPubKeyHex(priv);
-                        resolve(self.private);
+                        resolve(_privateKey);
                     } catch (error) {
                         Reject("Unable to fetch Proxy secret");
                     }