design-system-simplefi
Version:
Design System for SimpleFi Applications
44 lines • 2.75 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React, { useState } from 'react';
import styled from 'styled-components';
import Blockies from 'react-blockies';
import { isAddress } from 'web3-utils';
import { Card } from '../Card';
import { Inline } from '../layout';
import { Text } from '../typography';
import { IconButton } from '../IconButton';
import { Button } from '../Button';
var IconButtonSt = styled(IconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 2;\n &:hover {\n color: ", ";\n }\n"], ["\n z-index: 2;\n &:hover {\n color: ", ";\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.neonGreen;
});
var Wallet = function (_a) {
var walletAddress = _a.walletAddress, onClick = _a.onClick, ref = _a.ref;
var displayAddress = walletAddress ? walletAddress.substr(0, 6) : '';
if (walletAddress) {
displayAddress += " .... " + walletAddress.substr(-5);
}
var _b = useState(false), copied = _b[0], setIsCopied = _b[1];
return (React.createElement(Card, { ref: ref, alignItems: "center", borderRadius: "sm", flexDirection: "row", height: 45, justifyContent: "space-evenly", paddingType: "squish", width: 200 }, walletAddress && isAddress(walletAddress.toLowerCase()) ? (React.createElement(React.Fragment, null,
React.createElement(Inline, { align: "center", gap: "sm", justify: "space-evenly" },
React.createElement("div", { onClick: onClick },
React.createElement(Inline, { align: "center", gap: "sm", justify: "space-evenly", style: {
cursor: 'pointer',
} },
React.createElement(Blockies, { scale: 3, seed: walletAddress.toLowerCase(), size: 7 }),
React.createElement(Text, { size: "lg", style: { margin: '0.3rem' }, variant: "secondary" }, displayAddress.toLowerCase()))),
React.createElement(IconButtonSt, { color: "midPurple", iconName: copied ? 'check' : 'copy', iconType: "sfi", label: "copy", onClick: function () {
setIsCopied(true);
navigator.clipboard.writeText(walletAddress);
setTimeout(function () {
setIsCopied(false);
}, 1000);
} })))) : (React.createElement(React.Fragment, null,
React.createElement(Button, { size: "lg", variant: "text", onClick: onClick }, "Connect to a Wallet")))));
};
export default Wallet;
var templateObject_1;
//# sourceMappingURL=Wallet.js.map