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',
exchangeAddress: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b',
feeRecipientAddress: '0x66a836664adc7c525c0cc4527dee8619d4faf669',
salt: '73683692897280689979350475364949461624706477613931387930893215569576520901319',
expirationTimeSeconds: '1557096652',
salt: '42590862996212841020147351180680206562457006442037112428279886598164988134462',
expirationTimeSeconds: '1557096915',
signature:
'0x1bf37ac01ba863c08f2ddba776b263af4f960326ed8d8a0a651acb4c7bce54592e5bd9826fb117ccd0d40392d26339de6e3377721fabbb3107043e4de444b24ae602',
'0x1b5b61b4e1fdd697a04adb6b9c7b6c20f21992cbe12493a8990ae86ebdf9099d535f0294d43790c45eabf4f297178a0181766082fdaa8e4872b93d29180916f30002',
},
];
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 { Flex } from './ui/flex';
import { Icon } from './ui/icon';
import { Image } from './ui/image';
import { Spinner } from './ui/spinner';
import { Text } from './ui/text';
@ -33,11 +34,7 @@ const ICON_COLOR = ColorOption.white;
export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}> {
public render(): React.ReactNode {
const { selectedAsset } = this.props;
return (
<Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
{this._renderAssetHeadingContent()}
</Container>
);
return this._renderAssetHeadingContent();
}
private _renderAssetHeadingContent(): React.ReactNode {
@ -55,13 +52,29 @@ export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}>
}
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 {
const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
return (
<React.Fragment>
<Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
<Container marginBottom="5px">
<Text
letterSpacing="1px"
@ -85,7 +98,7 @@ export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}>
{iconOrAmounts}
</Flex>
</Flex>
</React.Fragment>
</Container>
);
}