Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/front end data renaming #376

Merged
merged 9 commits into from
Jul 19, 2023
Merged

Feature/front end data renaming #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1ee2d24
Update Wallets tab colum naming
DemogorGod Jul 18, 2023
5e7882b
Update Transaction colums naming
DemogorGod Jul 18, 2023
5ec6b4a
Update mock data to match new table data
DemogorGod Jul 19, 2023
57e57c7
Update table filter data to match new data
DemogorGod Jul 19, 2023
8e1580d
Add a column for checkbox
DemogorGod Jul 19, 2023
756b5c4
Update front-end table side to match new data schema
DemogorGod Jul 19, 2023
717fadb
Add current staked based on selected wallet to staking component
DemogorGod Jul 19, 2023
5a3d99f
Adjust data orientation on tab switch on the table
DemogorGod Jul 19, 2023
5f44035
Fix spelling issue
DemogorGod Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions apps/web/src/mockData/mock_transaction_data.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading