Skip to content

Commit

Permalink
Release v0.3.2 to Main (#73)
Browse files Browse the repository at this point in the history
  • Loading branch information
jinoosss committed Jul 21, 2023
1 parent b2e9293 commit 685a97d
Show file tree
Hide file tree
Showing 48 changed files with 390 additions and 174 deletions.
28 changes: 28 additions & 0 deletions src/components/core/layout/details-page-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,32 @@ const Content = styled.div<StyleProps>`
${({titleAlign}) => mixins.flexbox('row', 'center', titleAlign ?? 'center')};
}
${({visible}) => !visible && 'display: none;'}
.address-tooltip {
vertical-align: text-bottom;
}
.svg-icon {
stroke: ${({theme}) => theme.colors.primary};
margin-left: 5px;
}
dt {
display: flex;
}
.tooltip-wrapper {
position: inherit;
display: inline-flex;
width: 32px;
height: 24px;
justify-content: center;
align-items: center;
svg {
fill: ${({theme}) => theme.colors.tertiary};
& .icon-tooltip_svg__bg {
fill: ${({theme}) => theme.colors.surface};
}
}
}
`;
2 changes: 1 addition & 1 deletion src/components/ui/badge/badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const BadgeWrapper = styled.div<BadgeProps>`
max-width: fit-content;
height: 28px;
background-color: ${({type, theme}) => (type ? theme.colors[type] : theme.colors.surface)};
padding: ${({padding}) => (padding ? padding : '0px 16px')};
padding: ${({padding}) => (padding ? padding : '4px 16px')};
margin-right: ${({desktop}) => (desktop ? '15px' : '10px')};
border-radius: 4px;
margin-top: ${({desktop}) => !desktop && '12px'};
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/chart/area-chart/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const AreaChartTooltip = ({
return <></>;
}
const data = datas[packagePath][activeElements[0].index];
const {integer, decimal} = parseValue(data?.value ?? 0);
const {integer, decimal} = parseValue(data?.value || 0);
return (
<div key={cIndex} className="tooltip-row">
<span
Expand All @@ -99,7 +99,7 @@ export const AreaChartTooltip = ({
<strong>{integer}</strong>
{`.${decimal}`}
</span>
<span className="rate">{`${Math.round(data?.rate ?? 0)}%`}</span>
<span className="rate">{`${Math.round(data?.rate || 0)}%`}</span>
</div>
);
};
Expand Down
9 changes: 7 additions & 2 deletions src/components/ui/datatable/data/data-row-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,19 @@ import {DatatableOption} from '..';
interface Props<T> {
header: DatatableHeader.Header<T>;
data: T;
className?: string;
}

export const DataRowItem = <T extends {[key in string]: any}>({header, data}: Props<T>) => {
export const DataRowItem = <T extends {[key in string]: any}>({
header,
data,
className,
}: Props<T>) => {
const option = DatatableOption.dataOptionByHeader(header);
const value = data[header.key];

return (
<ItemContainer options={option}>
<ItemContainer className={className || ''} options={option}>
{option.renderOption ? (
option.renderOption(value, data)
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/datatable/data/data-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const DataRow = <T extends {[key in string]: any}>({headers, data}: Props
return (
<DataRowContainer>
{headers.map((header, index) => (
<DataRowItem key={index} header={header} data={data} />
<DataRowItem key={index} header={header} data={data} className={header.itemClassName} />
))}
</DataRowContainer>
);
Expand Down
13 changes: 11 additions & 2 deletions src/components/ui/datatable/datatable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const Container = styled.div<{maxWidth?: number}>`
flex-direction: column;
width: 100%;
height: auto;
padding: 20px;
padding: 20px 24px;
background-color: ${({theme}) => theme.colors.base};
border-radius: 10px;
overflow-x: auto;
Expand All @@ -86,7 +86,7 @@ const Container = styled.div<{maxWidth?: number}>`
display: flex;
flex-direction: column;
width: 100%;
min-width: ${({maxWidth}) => (maxWidth ? `${maxWidth}px` : '1150px')};
min-width: ${({maxWidth}) => (maxWidth ? `${maxWidth}px` : '1146px')};
z-index: ${zindex.scrollbar};
}
Expand Down Expand Up @@ -131,5 +131,14 @@ const Container = styled.div<{maxWidth?: number}>`
font-weight: 400;
}
}
.time,
.fee {
padding: 16px 0 16px 8px;
}
.functions {
padding: 16px 0 16px 16px;
}
}
`;
6 changes: 5 additions & 1 deletion src/components/ui/datatable/header/header-row-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ interface Props<T> {
header: Header<T>;
sortOption?: {field: string; order: string};
setSortOption?: (sortOption: {field: string; order: string}) => void;
className?: string;
}

export const HeaderRowItem = <T extends {[key in string]: any}>({
header,
sortOption,
setSortOption,
className,
}: Props<T>) => {
const renderTooltip = () => {
return (
Expand Down Expand Up @@ -78,7 +80,9 @@ export const HeaderRowItem = <T extends {[key in string]: any}>({
};

return (
<ItemContainer options={DatatableOption.headerOptionByHeader(header)}>
<ItemContainer
className={className || ''}
options={DatatableOption.headerOptionByHeader(header)}>
<div className="content">{header.name}</div>
{renderSort()}
{renderTooltip()}
Expand Down
1 change: 1 addition & 0 deletions src/components/ui/datatable/header/header-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const HeaderRow = <T extends {[key in string]: any}>({
header={header}
sortOption={sortOption}
setSortOption={setSortOption}
className={header.itemClassName}
/>
))}
</HeaderRowContainer>
Expand Down
8 changes: 8 additions & 0 deletions src/components/ui/datatable/option/builder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,14 @@ export class Builder<T> {
return this;
}

public className(className: string) {
this.options = {
...this.options,
itemClassName: className,
};
return this;
}

public renderOption(renderOption: (value: any, data: T) => React.ReactNode) {
this.options = {
...this.options,
Expand Down
1 change: 1 addition & 0 deletions src/components/ui/datatable/option/option.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface Option<T> {
align?: 'left' | 'center' | 'right';
flex?: boolean;
sort?: boolean;
itemClassName?: string;
renderOption?: (value: any, data: T) => React.ReactNode;
}

Expand Down
10 changes: 10 additions & 0 deletions src/components/ui/detail-page-common-styles/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const DLWrap = styled.dl<StyleProps>`
}
}
dt {
color: ${({theme}) => theme.colors.tertiary};
width: ${({desktop}) => (desktop ? '200px' : '100%')};
${({desktop, theme}) => (desktop ? theme.fonts.p3 : theme.fonts.p4)};
}
Expand All @@ -54,6 +55,15 @@ export const DLWrap = styled.dl<StyleProps>`
line-height: 40px;
}
}
.badge {
height: auto;
.multi-line {
word-break: break-all;
white-space: pre-line;
}
}
`;

export const DateDiffText = styled.span`
Expand Down
31 changes: 21 additions & 10 deletions src/components/ui/text/amount-text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,34 @@ export const AmountText = ({
className,
}: AmountTextProps) => {
// console.log('Value: ', value);
const num: string[] | string = decimalPointWithCommas(BigNumber(value));
const num: string[] | string = decimalPointWithCommas(BigNumber(value === '' ? 0 : value));
const decimalValue = (num: string[] | string) => {
if (denom === '' && num[1]) return `.${num[1]}`;
if (!Array.isArray(num)) {
return ` ${denom}`;
return '';
}

if (num.length < 2) {
return ` ${denom}`;
return '';
}

return `.${num[1]} ${denom}`;
return `.${num[1]}`;
};

return (
<Wrapper className={className}>
{num && (
<Text className="text-wrapper" type={maxSize} color={color} display="inline-block">
{num[0]}
<Text type={minSize} color={color} display="inline-block">
<>
<Text className="text-wrapper" type={maxSize} color={color} display="contents">
{num[0]}
</Text>
<Text type={minSize} color={color} display="contents" className="decimals">
{decimalValue(num)}
</Text>
</Text>
<Text type={maxSize} color={color} display="contents">
{denom}
</Text>
</>
)}
</Wrapper>
);
Expand All @@ -55,7 +60,13 @@ export const AmountText = ({
const Wrapper = styled.div`
${mixins.flexbox('row', 'center', 'flex-start')};
.text-wrapper {
white-space: nowrap;
&,
& * {
display: inline;
word-break: break-all;
}
.decimals::after {
content: ' ';
}
`;
26 changes: 14 additions & 12 deletions src/components/view/datatable/account-detail/account-detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ interface AccountTransactionData {
height: number;
num_msgs: number;
amount: {
value_out: number;
value_in: number;
value_out: string;
value_in: string;
denom: string;
};
time: string;
fee: {
value: number;
value: string;
denom: string;
};
}
Expand Down Expand Up @@ -121,7 +121,7 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('hash')
.name('Tx Hash')
.width(210)
.width(215)
.colorName('blue')
.renderOption((value, data) => (
<DatatableItem.TxHash
Expand Down Expand Up @@ -157,7 +157,7 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('height')
.name('Block')
.width(93)
.width(113)
.colorName('blue')
.renderOption(height => <DatatableItem.Block height={height} />)
.build();
Expand All @@ -167,8 +167,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('amount')
.name('Amount (In)')
.width(160)
.renderOption((amount: {value_in: number; value_out: number; denom: string}, data) =>
.width(180)
.renderOption((amount: {value_in: string; value_out: string; denom: string}, data) =>
data.num_msgs > 1 ? (
<DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
) : (
Expand All @@ -182,8 +182,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('amount')
.name('Amount (Out)')
.width(160)
.renderOption((amount: {value_in: number; value_out: number; denom: string}, data) =>
.width(180)
.renderOption((amount: {value_in: string; value_out: string; denom: string}, data) =>
data.num_msgs > 1 ? (
<DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
) : (
Expand All @@ -197,7 +197,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('time')
.name('Time')
.width(204)
.width(160)
.className('time')
.renderOption(date => <DatatableItem.Date date={date} />)
.build();
};
Expand All @@ -206,8 +207,9 @@ export const AccountDetailDatatable = ({address}: Props) => {
return DatatableOption.Builder.builder<AccountTransactionData>()
.key('fee')
.name('Fee')
.width(129)
.renderOption(({value, denom}: {value: number; denom: string}) => (
.className('fee')
.width(113)
.renderOption(({value, denom}: {value: string; denom: string}) => (
<DatatableItem.Amount value={value} denom={denom} />
))
.build();
Expand Down
Loading

0 comments on commit 685a97d

Please sign in to comment.