mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
932add9d96
* basic components and address page refactoring * second part of refactoring * third part of refactoring * NativeCoinValue component * more refactoring * rename TruncatedValue into TruncatedText * minor fixes * refactor block details * fix layout of value and fee in tx table * update screenshots * different units for tooltip and stats widget small value fix * update screenshots * update tx table screenshot * fix copy button vertical alignment
240 lines
6.8 KiB
TypeScript
240 lines
6.8 KiB
TypeScript
import BigNumber from 'bignumber.js';
|
|
import React from 'react';
|
|
|
|
import AssetValue from 'ui/shared/value/AssetValue';
|
|
import GasPriceValue from 'ui/shared/value/GasPriceValue';
|
|
import NativeCoinValue from 'ui/shared/value/NativeCoinValue';
|
|
import SimpleValue from 'ui/shared/value/SimpleValue';
|
|
import TokenValue from 'ui/shared/value/TokenValue';
|
|
|
|
import { TOKEN } from './Link';
|
|
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
|
|
|
|
const ValuesShowcase = () => {
|
|
return (
|
|
<Container value="values">
|
|
<Section>
|
|
<SectionHeader>SimpleValue</SectionHeader>
|
|
<SectionSubHeader>Basic examples</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="Big value">
|
|
<SimpleValue
|
|
value={ BigNumber('1000000000000000000000000') }
|
|
startElement="Get your "
|
|
endElement=" DUCK now!"
|
|
maxW="400px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="Small value">
|
|
<SimpleValue
|
|
value={ BigNumber(1).div('1000000000000000000') }
|
|
prefix="$"
|
|
maxW="400px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="No accuracy">
|
|
<SimpleValue
|
|
value={ BigNumber(1).div('1000000000000000000') }
|
|
accuracy={ 0 }
|
|
startElement="Get your "
|
|
endElement=" DUCK now!"
|
|
maxW="400px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Overflowed</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="Big value">
|
|
<SimpleValue
|
|
value={ BigNumber('1000000000000000000000000') }
|
|
endElement="ETH"
|
|
overflowed
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="Small value">
|
|
<SimpleValue
|
|
value={ BigNumber(1).div('1000000000000000000') }
|
|
prefix="$"
|
|
overflowed
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Loading</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="loading: true">
|
|
<SimpleValue
|
|
loading
|
|
value={ BigNumber('1000000000000000000000000') }
|
|
startElement="Get your "
|
|
endElement=" DUCK now!"
|
|
maxW="400px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
</Section>
|
|
|
|
<Section>
|
|
<SectionHeader>NativeCoinValue</SectionHeader>
|
|
<SectionSubHeader>Units</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="wei">
|
|
<NativeCoinValue
|
|
amount="1000000000000000000000000"
|
|
units="wei"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
<SamplesStack>
|
|
<Sample label="gwei">
|
|
<NativeCoinValue
|
|
amount="1000000000000000000000000"
|
|
units="gwei"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
<SamplesStack>
|
|
<Sample label="ether">
|
|
<NativeCoinValue
|
|
amount="1000000000000000000000000"
|
|
units="ether"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Gwei threshold</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="gweiThreshold: undefined">
|
|
<NativeCoinValue
|
|
amount="100000000000"
|
|
units="wei"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="gweiThreshold: 5">
|
|
<NativeCoinValue
|
|
amount="100000000000"
|
|
units="wei"
|
|
gweiThreshold={ 5 }
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Different units in tooltip</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="unitsTooltip: 'gwei'">
|
|
<NativeCoinValue
|
|
amount="100000000000"
|
|
units="wei"
|
|
unitsTooltip="gwei"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Layout</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="horizontal">
|
|
<NativeCoinValue
|
|
amount="1000000000000000"
|
|
exchangeRate="4200"
|
|
layout="horizontal"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="vertical">
|
|
<NativeCoinValue
|
|
amount="1000000000000000"
|
|
exchangeRate="4200"
|
|
layout="vertical"
|
|
maxW="200px"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
|
|
<Section>
|
|
<SectionHeader>TokenValue</SectionHeader>
|
|
<SectionSubHeader>Examples</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="convertible token">
|
|
<TokenValue amount="1000000000000000000000000" token={ TOKEN } maxW="400px"/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
|
|
<Section>
|
|
<SectionHeader>AssetValue</SectionHeader>
|
|
<SectionSubHeader>Layout</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="horizontal">
|
|
<AssetValue
|
|
amount="1000000000000000000000000"
|
|
asset="DUCK"
|
|
decimals="6"
|
|
exchangeRate="4200"
|
|
maxW="400px"
|
|
/>
|
|
</Sample>
|
|
<Sample label="vertical">
|
|
<AssetValue
|
|
amount="1000000000000000000000000"
|
|
asset="DUCK"
|
|
decimals="6"
|
|
exchangeRate="4200"
|
|
maxW="250px"
|
|
layout="vertical"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
|
|
<SectionSubHeader>Loading</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="loading: true">
|
|
<AssetValue
|
|
amount="1000000000000000000000000"
|
|
asset="DUCK"
|
|
decimals="6"
|
|
exchangeRate="4200"
|
|
maxW="400px"
|
|
loading
|
|
/>
|
|
<AssetValue
|
|
amount="1000000000000000000000000"
|
|
asset="DUCK"
|
|
decimals="6"
|
|
exchangeRate="4200"
|
|
maxW="300px"
|
|
layout="vertical"
|
|
loading
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
|
|
<Section>
|
|
<SectionHeader>GasPriceValue</SectionHeader>
|
|
<SectionSubHeader>Examples</SectionSubHeader>
|
|
<SamplesStack>
|
|
<Sample label="default">
|
|
<GasPriceValue
|
|
amount="420000"
|
|
/>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ValuesShowcase);
|