crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI presenting NFT a bit more nicely

Browse Source
This commit is contained in:
fragosti 2019-04-05 16:25:53 -07:00
parent 90ad681a9e
commit a995b2e1ae
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/instant/public/index.html
View File

@ -88,10 +88,10 @@
takerAssetData: '0xf47261b0000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', takerAssetData: '0xf47261b0000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
exchangeAddress: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b', exchangeAddress: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b',
feeRecipientAddress: '0x66a836664adc7c525c0cc4527dee8619d4faf669', feeRecipientAddress: '0x66a836664adc7c525c0cc4527dee8619d4faf669',
salt: '73683692897280689979350475364949461624706477613931387930893215569576520901319', salt: '42590862996212841020147351180680206562457006442037112428279886598164988134462',
expirationTimeSeconds: '1557096652', expirationTimeSeconds: '1557096915',
signature: signature:
'0x1bf37ac01ba863c08f2ddba776b263af4f960326ed8d8a0a651acb4c7bce54592e5bd9826fb117ccd0d40392d26339de6e3377721fabbb3107043e4de444b24ae602', '0x1b5b61b4e1fdd697a04adb6b9c7b6c20f21992cbe12493a8990ae86ebdf9099d535f0294d43790c45eabf4f297178a0181766082fdaa8e4872b93d29180916f30002',
}, },
]; ];
const providedOrders = [ const providedOrders = [

29
packages/instant/src/components/instant_heading.tsx
View File

@ -12,6 +12,7 @@ import { AmountPlaceholder } from './amount_placeholder';
import { Container } from './ui/container'; import { Container } from './ui/container';
import { Flex } from './ui/flex'; import { Flex } from './ui/flex';
import { Icon } from './ui/icon'; import { Icon } from './ui/icon';
import { Image } from './ui/image';
import { Spinner } from './ui/spinner'; import { Spinner } from './ui/spinner';
import { Text } from './ui/text'; import { Text } from './ui/text';
@ -33,11 +34,7 @@ const ICON_COLOR = ColorOption.white;
export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}> { export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}> {
public render(): React.ReactNode { public render(): React.ReactNode {
const { selectedAsset } = this.props; const { selectedAsset } = this.props;
return ( return this._renderAssetHeadingContent();
<Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
{this._renderAssetHeadingContent()}
</Container>
);
} }
private _renderAssetHeadingContent(): React.ReactNode { private _renderAssetHeadingContent(): React.ReactNode {
@ -55,13 +52,29 @@ export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}>
} }
private _renderERC721AssetHeading(asset: ERC721Asset): React.ReactNode { private _renderERC721AssetHeading(asset: ERC721Asset): React.ReactNode {
return <Container><img src={asset.metaData.imageUrl}/> </Container>; return (
<Container width="100%" padding="30px 0px 0px">
<Flex>
<Text
textTransform="uppercase"
fontColor={ColorOption.primaryColor}
fontWeight={700}
fontSize="20px"
>
{asset.metaData.name}
</Text>
</Flex>
<Flex>
<Image src={asset.metaData.imageUrl} rounded={true} width="200px" height="200px" />
</Flex>
</Container>
);
} }
private _renderERC20AssetHeading(): React.ReactNode { private _renderERC20AssetHeading(): React.ReactNode {
const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
return ( return (
<React.Fragment> <Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
<Container marginBottom="5px"> <Container marginBottom="5px">
<Text <Text
letterSpacing="1px" letterSpacing="1px"
@ -85,7 +98,7 @@ export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}>
{iconOrAmounts} {iconOrAmounts}
</Flex> </Flex>
</Flex> </Flex>
</React.Fragment> </Container>
); );
} }