Adding trusted banker UI
This commit is contained in:
sairaj mote
parent
fb41ba1617
commit
5afc2dc984
15
css/main.css
15
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: solid 0.1rem var(--green);
|
||||
border-width: 0.3rem;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.loan-process li.done .line {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.loan-process .circle {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
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);
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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: solid 0.1rem var(--green);
|
||||
border-width: 0.3rem;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.line {
|
||||
background-color: var(--green);
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
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);
|
||||
}
|
||||
|
||||
212
index.html
212
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) {
|
||||
renderElem(getRef('sub_page_container'), html`
|
||||
<section>
|
||||
<h1>Sub Admin Dashboard</h1>
|
||||
</section>
|
||||
`);
|
||||
} else if (floGlobals.isAdmin) {
|
||||
renderElem(getRef('sub_page_container'), html`
|
||||
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>
|
||||
`
|
||||
})
|
||||
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 => {
|
||||
console.error(error)
|
||||
} catch (error) {
|
||||
notify(error, 'error')
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
let isBrave = navigator.brave !== undefined
|
||||
if (error === 'Cloud offline') {
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user