Adding trusted banker UI

css/main.css

@@ -779,6 +779,7 @@ h3 {
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
   border-radius: 0.5rem;
+  --progress-line-thickness: 0.15rem;
 }
 .loan-process ul {
   display: grid;
@@ -798,22 +799,24 @@ h3 {
   grid-area: 1/1/2/2;
 }
 .loan-process li.done .circle {
-  background-color: var(--green);
+  border-width: 0.3rem;
-  border: solid 0.1rem var(--green);
+  border-color: var(--green);
 }
 .loan-process li.done .line {
   background-color: var(--green);
 }
 .loan-process .circle {
-  width: 1rem;
+  margin-top: 0.2rem;
-  height: 1rem;
+  width: 0.8rem;
+  height: 0.8rem;
   border-radius: 50%;
   background-color: rgba(var(--foreground-color), 1);
   z-index: 1;
-  border: solid 0.1rem rgba(var(--text-color), 0.5);
+  border: solid var(--progress-line-thickness) rgba(var(--text-color), 0.5);
 }
 .loan-process .line {
-  width: 0.1rem;
+  margin-top: 0.2rem;
+  width: var(--progress-line-thickness);
   height: 100%;
   background-color: rgba(var(--text-color), 0.5);
 }

css/main.scss

@@ -735,6 +735,7 @@ h3 {
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
   border-radius: 0.5rem;
+  --progress-line-thickness: 0.15rem;
   ul {
     display: grid;
     li {
@@ -754,23 +755,25 @@ h3 {
   }
   li.done {
     .circle {
-      background-color: var(--green);
+      border-width: 0.3rem;
-      border: solid 0.1rem var(--green);
+      border-color: var(--green);
     }
     .line {
       background-color: var(--green);
     }
   }
   .circle {
-    width: 1rem;
+    margin-top: 0.2rem;
-    height: 1rem;
+    width: 0.8rem;
+    height: 0.8rem;
     border-radius: 50%;
     background-color: rgba(var(--foreground-color), 1);
     z-index: 1;
-    border: solid 0.1rem rgba(var(--text-color), 0.5);
+    border: solid var(--progress-line-thickness) rgba(var(--text-color), 0.5);
   }
   .line {
-    width: 0.1rem;
+    margin-top: 0.2rem;
+    width: var(--progress-line-thickness);
     height: 100%;
     background-color: rgba(var(--text-color), 0.5);
   }

index.html

@@ -559,9 +559,11 @@
                     setIsLending(true)
                     btcMortgage.respondLoan(vectorClock, borrower, coborrower).then(() => {
                         floCloudAPI.sendApplicationData({ loan_opening_process_id }, 'in_process_loan_request')
-                            .catch(error => console.log(error))
+                            .then(() => {
                                 notify('Lending process started successfully.', 'success')
                                 router.routeTo(location.hash)
+                            })
+                            .catch(error => console.log(error))
                     }).catch(err => {
                         console.error(err)
                         notify('There was error starting lending process. please try again after some time.', 'error')
@@ -999,17 +1001,106 @@
         let userAddressTimeInterval;
         function renderHome(appState) {
             const { lastPage, page, params: { } = {}, wildcards: [section = 'my-loans'] = [] } = appState || {};
-            if (floGlobals.isSubAdmin) {
+            const balanceCard = Component(() => {
-                renderElem(getRef('sub_page_container'), html`
+                const [btcBalance, setBtcBalance] = useState(floGlobals.memoBalance['BTC'])
-                    <section>
+                const [floBalance, setFloBalance] = useState(floGlobals.memoBalance['FLO'])
-                        <h1>Sub Admin Dashboard</h1>
+                const [usdBalance, setUsdBalance] = useState(floGlobals.memoBalance['USD'])
-                    </section>
+                const [isRefreshing, setIsRefreshing] = useState(false)
-                `);
+                function fetchBalance() {
-            } else if (floGlobals.isAdmin) {
+                    setIsRefreshing(true)
-                renderElem(getRef('sub_page_container'), html`
+                    Promise.allSettled([
+                        btcOperator.getBalance(floGlobals.myBtcID),
+                        floBlockchainAPI.getBalance(floGlobals.myFloID),
+                        floTokenAPI.getBalance(floGlobals.myFloID, 'usd')
+                    ]).then(result => {
+                        const [btcBalance, floBalance, usdBalance] = result.map(({ value }) => value)
+                        floGlobals.memoBalance = {
+                            'FLO': floBalance,
+                            'BTC': btcBalance,
+                            'USD': usdBalance
+                        }
+                        setBtcBalance(btcBalance)
+                        setFloBalance(floBalance)
+                        setUsdBalance(usdBalance)
+                    }).catch(error => {
+                        console.error(error)
+                    }).finally(() => {
+                        setIsRefreshing(false)
+                    })
+                }
+                useEffect(() => {
+                    if (lastPage !== page)
+                        fetchBalance()
+                }, [])
+                return html`
+                    <div class="grid gap-1-5">
+                        <div class="flex align-center space-between gap-1">
+                            <h4>My balances</h4>
+                            <button class="button button--colored button--small" disabled=${isRefreshing} onclick=${fetchBalance}>
+                                ${isRefreshing ? html`
+                                    Refreshing <sm-spinner class="margin-left-0-5"></sm-spinner>
+                                `: html`
+                                    Refresh        
+                                `}
+                            </button>
+                        </div>
+                        <ul id="balance_list">
+                            <li class="balance-card">
+                                <span>BTC</span>
+                                <span>${formatAmount(btcBalance)}</span>
+                            </li>
+                            <li class="balance-card">
+                                <span>FLO</span>
+                                <span>${formatAmount(floBalance, 'FLO')}</span>
+                            </li>
+                            <li class="balance-card">
+                                <span>USD</span>
+                                <span>${formatAmount(usdBalance, 'usd')}</span>
+                            </li>
+                        </ul>
+                    </div>
+                `
+            })
+            if (floCrypto.isSameAddr(btcMortgage.banker.id, floDapps.user.id)) {
+                const bankerInbox = Component(() => {
+                    const requests = Object.entries(floGlobals.bankerRequests || {}).map(([requestId, requestDetails]) => {
+                        switch (requestDetails.type) {
+                            case 'type_unlock_collateral_request':
+
+                                break;
+                            case 'type_refund_collateral_request':
+
+                                break;
+                            case 'type_liquate_collateral_request':
+
+                                break;
+                            case 'type_preliquate_collateral_request':
+
+                                break;
+                            default:
+                                return html``
+                        }
+                    })
+                    return html`
                         <section class="grid gap-1">
-                        <h1>Admin Dashboard</h1>
+                            <h3>Banker Inbox</h3>
+                            ${requests.length ? html`
+                                <ul id="banker_inbox_list">
+                                    ${requests}
+                                </ul>
+                            `: html`
+                                <strong>
+                                    No requests
+                                </strong>
+                            `}
                         </section>
+                    `
+                })
+                renderElem(getRef('sub_page_container'), html`
+                    <div id="main_page" class="grid gap-2">
+                        ${balanceCard()}
+                        ${bankerInbox()}
+                    </div>
                 `);
             } else {
                 // user homepage
@@ -1111,66 +1202,6 @@
                         </section>
                     `
                 })
-                const balanceCard = Component(() => {
-                    const [btcBalance, setBtcBalance] = useState(floGlobals.memoBalance['BTC'])
-                    const [floBalance, setFloBalance] = useState(floGlobals.memoBalance['FLO'])
-                    const [usdBalance, setUsdBalance] = useState(floGlobals.memoBalance['USD'])
-                    const [isRefreshing, setIsRefreshing] = useState(false)
-                    function fetchBalance() {
-                        setIsRefreshing(true)
-                        Promise.allSettled([
-                            btcOperator.getBalance(floGlobals.myBtcID),
-                            floBlockchainAPI.getBalance(floGlobals.myFloID),
-                            floTokenAPI.getBalance(floGlobals.myFloID, 'usd')
-                        ]).then(result => {
-                            const [btcBalance, floBalance, usdBalance] = result.map(({ value }) => value)
-                            floGlobals.memoBalance = {
-                                'FLO': floBalance,
-                                'BTC': btcBalance,
-                                'USD': usdBalance
-                            }
-                            setBtcBalance(btcBalance)
-                            setFloBalance(floBalance)
-                            setUsdBalance(usdBalance)
-                        }).catch(error => {
-                            console.error(error)
-                        }).finally(() => {
-                            setIsRefreshing(false)
-                        })
-                    }
-                    useEffect(() => {
-                        if (lastPage !== page)
-                            fetchBalance()
-                    }, [])
-                    return html`
-                        <div class="grid gap-1-5">
-                            <div class="flex align-center space-between gap-1">
-                                <h4>My balances</h4>
-                                <button class="button button--colored button--small" disabled=${isRefreshing} onclick=${fetchBalance}>
-                                    ${isRefreshing ? html`
-                                        Refreshing <sm-spinner class="margin-left-0-5"></sm-spinner>
-                                    `: html`
-                                        Refresh        
-                                    `}
-                                </button>
-                            </div>
-                            <ul id="balance_list">
-                                <li class="balance-card">
-                                    <span>BTC</span>
-                                    <span>${formatAmount(btcBalance)}</span>
-                                </li>
-                                <li class="balance-card">
-                                    <span>FLO</span>
-                                    <span>${formatAmount(floBalance, 'FLO')}</span>
-                                </li>
-                                <li class="balance-card">
-                                    <span>USD</span>
-                                    <span>${formatAmount(usdBalance, 'usd')}</span>
-                                </li>
-                            </ul>
-                        </div>
-                    `
-                })
                 renderElem(getRef('sub_page_container'), html`
                     <div id="main_page" class="grid gap-2">
                         ${balanceCard()}
@@ -1365,9 +1396,38 @@
                 setInterval(() => {
                     fetchBtcRate()
                 }, 1000 * 60 * 5) // check BTC rate every 5 minutes
-                btcMortgage.init().then(result => {
+                btcMortgage.init().then(async result => {
                     console.info(result)
-                    Promise.allSettled([
+                    try {
+                        if (floCrypto.isSameAddr(floDapps.user.id, btcMortgage.banker.id)) {
+                            floCloudAPI.requestApplicationData(null, {
+                                callback: (d, e) => {
+                                    if (e) return
+                                    for (const key in d) {
+                                        if (
+                                            d[key].type === 'type_unlock_collateral_request' ||
+                                            d[key].type === 'type_unlock_collateral_ack' ||
+                                            d[key].type === 'type_refund_collateral_request' ||
+                                            d[key].type === 'type_refund_collateral_ack' ||
+                                            d[key].type === 'type_liquate_collateral_request' ||
+                                            d[key].type === 'type_liquate_collateral_ack' ||
+                                            d[key].type === 'type_preliquate_collateral_request' ||
+                                            d[key].type === 'type_preliquate_collateral_ack'
+                                        ) {
+                                            floGlobals.bankerRequests = {
+                                                ...floGlobals.bankerRequests || {},
+                                                [key]: d[key]
+                                            }
+                                        }
+                                    }
+                                    console.log('LOAN REQUESTS', d)
+                                    if (floGlobals.loaded) {
+                                        router.routeTo(window.location.hash)
+                                    }
+                                }
+                            })
+                        } else {
+                            const result = await Promise.allSettled([
                                 new Promise((resolve, reject) => {
                                     btcMortgage.viewMyInbox((d, e) => {
                                         if (e) return
@@ -1435,7 +1495,8 @@
                                         }
                                     })
                                 })
-                    ]).then(result => {
+                            ])
+                        }
                         console.log(result)
                         if (['#/landing', '#/sign_in', '#/sign_up'].includes(window.location.hash)) {
                             history.replaceState(null, null, '#/home')
@@ -1444,10 +1505,9 @@
                             router.routeTo(window.location.hash)
                         }
                         floGlobals.loaded = true
-                    }).catch(error => {
+                    } catch (error) {
-                        console.error(error)
                         notify(error, 'error')
-                    })
+                    }
                 }).catch(error => {
                     let isBrave = navigator.brave !== undefined
                     if (error === 'Cloud offline') {

scripts/btcMortgage.js

@@ -6,6 +6,7 @@
     const APP_NAME = "BTCMortgage";
     const APP_IDENTIFIER = "BTC Mortgage";
     const BANKER_ID = "F6uMddaTDCZgojENbqRnFo5PCknArE7dKz";
+    // const BANKER_ID = "FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd";
     const BANKER_PUBKEY = '03EE0FB1868EE7D03BC741B10CD56057769445C7D37703115E428A93236C714E61';
 
     const CURRENCY = "usd";