Skip to content

Commit

Permalink
Merge pull request #376 from consensusnetworks/feature/front-end-data…
Browse files Browse the repository at this point in the history 
…-renaming

Feature/front end data renaming
  • Loading branch information
@DemogorGod
DemogorGod committed Jul 19, 2023
2 parents 7878b57 + 5f44035 commit 279d627
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 60 deletions.
15 changes: 7 additions & 8 deletions apps/web/src/mockData/mock_transaction_data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export default function useTxData () {
const endDate = new Date()
const randomDate = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))

// Format the date as 'YYYY-MM-DD HH:mm:ss.SSS'
const year = randomDate.getFullYear()
const month = String(randomDate.getMonth() + 1).padStart(2, '0')
const day = String(randomDate.getDate()).padStart(2, '0')
Expand All @@ -24,7 +23,7 @@ export default function useTxData () {
const seconds = String(randomDate.getSeconds()).padStart(2, '0')
const milliseconds = String(randomDate.getMilliseconds()).padStart(3, '0')

return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}:${milliseconds}`
}

function generateMockTransactionData(numTransactions: number) {
Expand All @@ -47,18 +46,18 @@ export default function useTxData () {
const transaction = {
walletAddress: walletAddresses[i % walletAddresses.length],
walletBalance: String(generateRandomBalance()),
txDirection: 'incoming',
txDirection: Math.random() < 0.5? 'incoming': 'outgoing',
txId: '0xf46d39ca96e489fb0eb2097f073bfde2dc7960bf8358e0692fa79cc8597d283e',
receivedAt: generateRandomDate(),
amount: (Math.random() * 20.00).toFixed(2),
price: '0.0',
gasFee: '195178697897910',
price: (Math.random() * 2000.00).toFixed(2),
gasFee: (Math.random() * 10.00).toFixed(2),
stakeFee: (Math.random() * 10.00).toFixed(2),
rewards:(Math.random() * 10.00).toFixed(2),
apy: (Math.random() * 10.00).toFixed(2) + '%',
apy: (Math.random() * 10.00).toFixed(2),
status: Math.random() > 0.5? 'Pending' : 'Active',
opperators: [ 'red', 'green', 'blue', 'orange', 'yellow'] //This is random until I get more info on how it will look like from backend
type: Math.random() > 0.5? null : Math.random() > 0.5? 'Stake SSV' : 'Withdraw',
}

data.push(transaction)
}

Expand Down
165 changes: 117 additions & 48 deletions apps/web/src/pages/overview/components/BreakdownTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const totalPages = ref(1)
const searchInput = ref('')
const tableView = ref('Wallets')
const selectedHeader = ref('')
const selectedHeader = ref('wallet_provider')
const selectedOrientation = ref('ascending')
const checkedItems = ref([] as any)
Expand All @@ -20,6 +20,10 @@ const tableHeaderOptions = ref(
{
Wallets: {
headers: [
{
title: '',
value: 'blank_column'
},
{
title: 'Wallet Provider',
value: 'wallet_provider'
Expand All @@ -29,49 +33,81 @@ const tableHeaderOptions = ref(
value: 'act'
},
{
title: 'Balance',
title: 'Wallet Balance',
value: 'bal'
},
{
title: 'Staked Amount',
title: 'Stake Balance',
value: 'stk_amt'
},
}, // Need to fetch based on wallet (FE SIDE)
{
title: 'Staked Reward',
title: 'Stake Rewards (All-Time)',
value: 'stk_rwd'
}
}, // Need to fetch based on wallet (FE SIDE)
]
},
Transactions: {
headers: [
{
title: 'TX Hash',
value: 'tx_hash'
title: '',
value: 'blank_column'
},
{
title: 'Date',
value: 'date'
},
{
title: 'Type',
value: 'tx_type'
},
{
title: 'Staked Amount',
title: 'Amount',
value: 'stk_amt'
},
{
title: 'Staked Reward',
value: 'stk_rwd'
title: 'Status',
value: 'status'
},
{
title: 'Hash',
value: 'tx_hash'
}
]
},
Staking: {
headers: [
{
title: '',
value: 'blank_column'
},
{
title: 'Date',
value: 'date'
},
{
title: 'APY',
value: 'apy'
title: 'Account',
value: 'act'
},
{
title: 'Type',
value: 'type'
},
{
title: 'Amount',
value: 'amount'
},
{
title: 'Staking Fees',
value: 'staking_fees'
},
{
title: 'Status',
value: 'status'
},
{
title: 'Operators',
value: 'operators'
}
title: 'Hash',
value: 'tx_hash'
},
]
},
}
Expand All @@ -84,12 +120,15 @@ const tableData = ref({
],
Transactions: [
],
Staking: [
],
})
const filteredData = ref(tableData.value[tableView.value as keyof typeof tableData.value])
const filterData = () => {
let filteredDataArray
if (searchInput.value === '') {
filteredDataArray = tableData.value[tableView.value as keyof typeof tableData.value]
} else {
Expand All @@ -105,8 +144,9 @@ const filterData = () => {
item.tx_hash?.toLowerCase().includes(searchTerm) ||
item.date?.toLowerCase().includes(searchTerm) ||
item.apy?.toLowerCase().includes(searchTerm) ||
item.status?.toLowerCase().includes(searchTerm) // ||
// item.operators?.toLowerCase().includes(searchTerm)
item.status?.toLowerCase().includes(searchTerm) ||
item.type?.toLowerCase().includes(searchTerm) ||
item.staking_fees.toLowerCase().includes(searchTerm)
)
})
}
Expand Down Expand Up @@ -142,7 +182,7 @@ const convertString = (inputString: string) => {
var start = inputString.substring(0, 4)
var end = inputString.substring(inputString.length - 4)
var middle = '*'.repeat(4)
var middle = '.'.repeat(4)
return start + middle + end
}
Expand Down Expand Up @@ -231,16 +271,14 @@ const setTableData = () =>{
return {
tx_hash: item.txId,
stk_amt: item.amount,
stk_rwd: item.rewards,
tx_type: item.txDirection,
date: item.receivedAt,
apy: item.apy,
status: item.status,
operators: item.opperators
}
})
let filteredWallets = [] as any
let filteredStakingTransactions = [] as any
sortedTransactions.forEach((item: any) => {
const index = filteredWallets.findIndex((i: any)=> i.act === item.walletAddress)
Expand All @@ -256,15 +294,26 @@ const setTableData = () =>{
act: item.walletAddress,
bal: item.walletBalance,
stk_amt: item.amount,
stk_rwd: item.rewards,
date: item.receivedAt
stk_rwd: item.rewards, // TODO: @Chris we need all-time staking rewards fetched here based on wallet
}
)
}
if(item.type){
filteredStakingTransactions.push({
date: item.receivedAt,
act: item.walletAddress,
type: item.type,
amount: item.amount,
staking_fees: item.stakeFee,
status: item.status,
tx_hash: item.txId
})
}
})
newTable.Wallets = filteredWallets
newTable.Staking = filteredStakingTransactions
tableData.value = newTable
}
Expand Down Expand Up @@ -315,17 +364,24 @@ onMounted(() =>{
<button
class="timeframe_button"
:class="tableView === 'Wallets'? 'bg-[#F3F3F3]' : 'bg-[#FFFFFF]'"
@click="tableView = 'Wallets', selectedHeader = '', checkedItems = []"
@click="tableView = 'Wallets', selectedHeader = 'wallet_provider', checkedItems = [], selectedOrientation = 'ascending'"
>
Wallets
</button>
<button
class="timeframe_button border-l border-l-[#D0D5DD] "
:class="tableView === 'Transactions'? 'bg-[#F3F3F3]' : 'bg-[#FFFFFF]'"
@click="tableView = 'Transactions', selectedHeader = '', checkedItems = []"
@click="tableView = 'Transactions', selectedHeader = 'date', checkedItems = [], selectedOrientation = 'descending'"
>
Transactions
</button>
<button
class="timeframe_button border-l border-l-[#D0D5DD]"
:class="tableView === 'Staking'? 'bg-[#F3F3F3]' : 'bg-[#FFFFFF]'"
@click="tableView = 'Staking', selectedHeader = 'date', checkedItems = [], selectedOrientation = 'descending'"
>
Staking Actions
</button>
</div>
<div class="flex flex-wrap items-center gap-[12px]">
<div class="flex items-center gap-[8px] search_bar">
Expand Down Expand Up @@ -428,7 +484,7 @@ onMounted(() =>{
class="dynamic_padding"
>
<div
v-if="header.value === 'wallet_provider'"
v-if="header.value === 'blank_column'"
class="flex items-center gap-[12px]"
>
<button
Expand All @@ -442,6 +498,11 @@ onMounted(() =>{
class="icon w-[14px] h-min"
/>
</button>
</div>
<div
v-if="header.value === 'wallet_provider'"
class="flex items-center gap-[12px]"
>
<img
v-if="item[header.value] != 'Unknown'"
:src="`/${item[header.value ]}.svg`"
Expand All @@ -456,25 +517,14 @@ onMounted(() =>{
v-else-if="header.value === 'act'"
class="flex items-center gap-[12px] underline"
>
<a href="">
<a href="">
{{ convertString(item[header.value ]) }}
</a>
</div>
<div
v-else-if="header.value === 'tx_hash'"
class="flex items-center gap-[12px]"
>
<button
class="checkbox_button"
@click="checkedItems.includes(item)? removeItemFromCheckedList(item) : checkedItems.push(item)"
>
<vue-feather
v-show="checkedItems.includes(item)"
type="check"
size="20"
class="icon w-[14px] h-min"
/>
</button>
<a class="">
{{ convertString(item[header.value ]) }}
</a>
Expand All @@ -499,15 +549,34 @@ onMounted(() =>{
</div>
</div>
<div
v-else-if="header.value === 'operators'"
v-else-if="header.value === 'bal'"
class="flex items-center gap-[12px] pl-[20px]"
>
<div
v-for="operator in item[header.value ]"
:key="operator"
:class="`w-[24px] h-[24px] border-[2px] border-white rounded-[999px]`"
:style="`margin-left: -20px; background-color: ${operator}; opacity: 0.55`"
/>
{{ item[header.value ] }} ETH
</div>
<div
v-else-if="header.value === 'stk_amt'"
class="flex items-center gap-[12px] pl-[20px]"
>
{{ item[header.value ] }} ETH
</div>
<div
v-else-if="header.value === 'stk_rwd'"
class="flex items-center gap-[12px] pl-[20px]"
>
{{ item[header.value ] }} ETH
</div>
<div
v-else-if="header.value === 'amount'"
class="flex items-center gap-[12px] pl-[20px]"
>
{{ item[header.value ] }} ETH
</div>
<div
v-else-if="header.value === 'staking_fees'"
class="flex items-center gap-[12px] pl-[20px]"
>
{{ item[header.value ] }} ETH
</div>
<div v-else>
{{ item[header.value ] }}
Expand Down
11 changes: 7 additions & 4 deletions apps/web/src/pages/overview/components/Staking.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,12 +211,15 @@ const handleDeposit = async () => {
class="absolute w-full h-full bg-black/[.1] top-0 left-0 rounded-[3px] z-[10] "
/>
<h6 class="addressBalance mb-[12px]">
Account Balance
Wallet Balance
</h6>
<h5 class="addressBalance_amount mb-[27px]">
<h5 class="addressBalance_amount mb-[5px]">
{{ addressBalance ? addressBalance : '- - -' }}
</h5>

<div class="text-[12px] mb-[13px] text-blue-400">
<!-- TODO: @Chris we need to see how much they have staked currently based on the wallet selected -->
<span class=" font-[900]">50</span> ETH Currently Staked
</div>
<h6 class="card_title mb-[11px]">
Wallet
</h6>
Expand Down Expand Up @@ -317,7 +320,7 @@ const handleDeposit = async () => {
The amount to stake in set currency
</p>

<div class="flex justify-between items-center mt-[32px]">
<div class="flex justify-between items-center mt-[22px]">
<div class="flex items-center gap-[12px]">
<h6 class="card_analytics_label">
Fees
Expand Down

0 comments on commit 279d627

Please sign in to comment.