design-system-simplefi
Version:
Design System for SimpleFi Applications
33 lines • 2.32 kB
JavaScript
import React, { useState } from 'react';
import { FlexContainer, Padbox } from '../layout';
import { Text } from '../typography';
import { Avatar } from '../Avatar';
import { IconButton } from '../IconButton';
import { SettingSelector } from '../SettingSelector';
var MarketDetails = function (_a) {
var showLogo = _a.showLogo, chain = _a.chain, name = _a.name, protocol = _a.protocol, isAsset = _a.isAsset, currentChain = _a.currentChain, chainList = _a.chainList, data = _a.data;
var _b = useState(currentChain), currSelect = _b[0], setCurrSelect = _b[1];
var logoUrl = data.logo ||
"https://simplefi-image-storage.s3.eu-west-2.amazonaws.com/tokens/" + data.address + ".png";
return (React.createElement(FlexContainer, { alignItems: "center", flexDirection: "row", justifyContent: "space-evenly", style: {
width: 'min-content',
maxWidth: '450px',
} },
showLogo && React.createElement(Avatar, { logo: logoUrl, size: "md" }),
React.createElement(Padbox, { paddingSize: "md" },
React.createElement(FlexContainer, { flexDirection: "column", justifyContent: "left" },
React.createElement(Text, { size: "lg", variant: "primary", isBold: true }, name),
React.createElement(Text, { size: "md", style: {
textTransform: 'capitalize',
}, variant: "secondary" },
protocol,
", on ",
chain))),
isAsset && (React.createElement(Padbox, { paddingSize: "lg", paddingType: "squish" },
React.createElement(SettingSelector, { selected: currSelect, selectionList: chainList, title: "Address", onSelect: function (item) { return setCurrSelect(item); } }))),
React.createElement(FlexContainer, { alignItems: "center", justifyContent: "space-evenly" },
React.createElement(IconButton, { color: "midPurple", iconName: "copy", iconType: "sfi", label: "Copy address", onClick: function () { return navigator.clipboard.writeText(data.address); } }),
React.createElement(IconButton, { color: "neonCoral", href: data.tokenExplorerAddress, iconName: "redirect", iconType: "sfi", label: "Redirect" }))));
};
export default MarketDetails;
//# sourceMappingURL=MarketDetails.js.map