-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #338 from pshenmic/feat/transaction-page-data
Improve transaction page
- Loading branch information
Showing
18 changed files
with
356 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { RateTooltip } from '../ui/Tooltips' | ||
| import { ValueCard } from '../cards' | ||
| import { ValueContainer } from '../ui/containers' | ||
| import { Flex } from '@chakra-ui/react' | ||
| import './PrefundedBalance.scss' | ||
|
|
||
| function PrefundedBalance ({ prefundedBalance, rate }) { | ||
| const elements = [] | ||
|
|
||
| for (const [title, value] of Object.entries(prefundedBalance)) { | ||
| elements.push( | ||
| <ValueCard className={'PrefundedBalance'}> | ||
| <ValueContainer className={'PrefundedBalance__Title'}> | ||
| {title} | ||
| </ValueContainer> | ||
| <ValueContainer className={'PrefundedBalance__Value'} colorScheme={'green'}> | ||
| <RateTooltip credits={Number(value)} rate={rate?.data}> | ||
| <span>{value} Credits</span> | ||
| </RateTooltip> | ||
| </ValueContainer> | ||
| </ValueCard> | ||
| ) | ||
| } | ||
|
|
||
| return elements?.length > 1 | ||
| ? <Flex gap={'8px'} flexDirection={'column'}> | ||
| {elements.map((element, i) => <div key={i}>{element}</div>)} | ||
| </Flex> | ||
| : elements[0] | ||
| } | ||
|
|
||
| export default PrefundedBalance |
11 changes: 11 additions & 0 deletions
11
packages/frontend/src/components/data/PrefundedBalance.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .PrefundedBalance { | ||
| max-width: max-content; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 8px; | ||
|
|
||
| &__Title, &__Value { | ||
| padding: 3px 10px; | ||
| border-radius: 4px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import ValueContainer from '../ui/containers/ValueContainer' | ||
| import Identifier from './Identifier' | ||
| import { ValueCard } from '../cards' | ||
| import './VoteChoice.scss' | ||
|
|
||
| function transformTypeString (input) { | ||
| if (typeof input !== 'string') return null | ||
| return input?.trim()?.replace(/ /g, '_')?.toUpperCase() | ||
| } | ||
|
|
||
| function VoteChoice ({ choiceStr }) { | ||
| if (typeof choiceStr !== 'string') return 'n/a' | ||
| const [choice, parameter] = choiceStr.split(/[()]/) | ||
| const type = transformTypeString(choice) | ||
| const colorScheme = { | ||
| TOWARDSIDENTITY: 'green', | ||
| LOCK: 'red', | ||
| ABSTAIN: 'orange' | ||
| } | ||
|
|
||
| if (parameter) { | ||
| return ( | ||
| <ValueContainer | ||
| className={'VoteChoice VoteChoice--TowardsIdentity'} | ||
| colorScheme={colorScheme?.[type] || 'grey'} | ||
| > | ||
| <span>{choice}:</span> | ||
| <ValueCard | ||
| link={`/identity/${parameter}`} | ||
| className={'VoteChoice__Parameter'} | ||
| colorScheme={colorScheme?.[type] || 'grey'} | ||
| > | ||
| <Identifier avatar={true} copyButton={true} ellipsis={true} styles={['highlight-both']}> | ||
| {parameter} | ||
| </Identifier> | ||
| </ValueCard> | ||
| </ValueContainer> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <ValueContainer | ||
| className={'VoteChoice'} | ||
| colorScheme={colorScheme?.[type] || 'grey'} | ||
| size={'sm'} | ||
| > | ||
| {choice} | ||
| </ValueContainer> | ||
| ) | ||
| } | ||
|
|
||
| export default VoteChoice |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .VoteChoice { | ||
| max-width: max-content; | ||
| padding: 0.375rem 0.75rem; | ||
|
|
||
| &--TowardsIdentity { | ||
| .ValueContainer__Value { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| } | ||
| } | ||
|
|
||
| &--TowardsIdentity & { | ||
| &__Parameter { | ||
| background: rgba(var(--chakra-colors-green-default-rgb), .1); | ||
| } | ||
| } | ||
|
|
||
| &__Parameter { | ||
| max-width: 100%; | ||
| overflow: hidden; | ||
| padding: 0.125rem 0.625rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
packages/frontend/src/components/transactions/TransactionStatusBadge.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Badge } from '@chakra-ui/react' | ||
| import { ErrorCircleIcon, CheckmarkIcon } from '../ui/icons' | ||
| import './TransactionStatusBadge.scss' | ||
|
|
||
| function TransactionStatusBadge ({ status }) { | ||
| const StatusIcon = status === 'SUCCESS' | ||
| ? <CheckmarkIcon w={'12px'} h={'12px'} mr={'5px'}/> | ||
| : <ErrorCircleIcon w={'12px'} h={'12px'} mr={'5px'}/> | ||
|
|
||
| return ( | ||
| <Badge | ||
| className={'TransactionStatusBadge'} | ||
| lineHeight={'20px'} | ||
| colorScheme={status === 'SUCCESS' ? 'green' : 'red'} | ||
| > | ||
| {StatusIcon} | ||
| {status} | ||
| </Badge> | ||
| ) | ||
| } | ||
|
|
||
| export default TransactionStatusBadge |
6 changes: 6 additions & 0 deletions
6
packages/frontend/src/components/transactions/TransactionStatusBadge.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| @use '../../styles/mixins.scss'; | ||
| @import '../../styles/variables.scss'; | ||
|
|
||
| .TransactionStatusBadge { | ||
| padding: 0 12px 0 6px !important; | ||
| } |
Oops, something went wrong.