Skip to content

Commit

Permalink
feat: Add copy to clipboard on the address (#162)
Browse files Browse the repository at this point in the history
  • Loading branch information
RabbitDoge authored Feb 2, 2021
1 parent e0dba76 commit 9906aad
Show file tree
Hide file tree
Showing 10 changed files with 130 additions and 38 deletions.
10 changes: 5 additions & 5 deletions src/__tests__/widgets/menu.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ it("renders correctly", () => {
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<div
class="sc-iJuUWI hDEHSw"
class="sc-ezrdKe hLsexG"
>
<nav
class="sc-giIncl kXYSnc"
class="sc-bYEvPH egOsQO"
>
<div
class="sc-gsTCUz dwpdGQ"
Expand Down Expand Up @@ -199,7 +199,7 @@ it("renders correctly", () => {
</div>
</nav>
<div
class="sc-ezrdKe qgmWt"
class="sc-kLgntA lhzNyF"
>
<div
class="sc-hHftDr kbPZub"
Expand Down Expand Up @@ -565,12 +565,12 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-bYEvPH ieIXYJ"
class="sc-iktFzd dZNXlz"
>
body
</div>
<div
class="sc-bdfBwQ sc-kLgntA bQcnNj hBpZTL"
class="sc-bdfBwQ sc-jJEJSO bQcnNj eSqTXn"
role="presentation"
/>
</div>
Expand Down
62 changes: 44 additions & 18 deletions src/__tests__/widgets/walletModal.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -459,27 +459,53 @@ it("renders AccountModal correctly", () => {
font-size="20px"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px;"
/>
<a
class="sc-bdfBwQ sc-gsTCUz jDSOFf djpNeP"
color="primary"
font-size="14px"
href="https://bscscan.com/address/undefined"
rel="noopener noreferrer"
target="blank"
<div
class="sc-jSgupP ixjwLL"
>
<svg
class="sc-dlfnbm jwtULe"
<a
class="sc-bdfBwQ sc-gsTCUz kgxXAa djpNeP"
color="primary"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
href="https://bscscan.com/address/undefined"
rel="noreferrer noopener"
target="_blank"
>
<path
d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H11C11.55 5 12 4.55 12 4C12 3.45 11.55 3 11 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V13C21 12.45 20.55 12 20 12C19.45 12 19 12.45 19 13V18C19 18.55 18.55 19 18 19ZM14 4C14 4.55 14.45 5 15 5H17.59L8.46 14.13C8.07 14.52 8.07 15.15 8.46 15.54C8.85 15.93 9.48 15.93 9.87 15.54L19 6.41V9C19 9.55 19.45 10 20 10C20.55 10 21 9.55 21 9V4C21 3.45 20.55 3 20 3H15C14.45 3 14 3.45 14 4Z"
/>
</svg>
View on BscScan
</a>
View on BscScan
<svg
class="sc-dlfnbm dJUqYR"
color="primary"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H11C11.55 5 12 4.55 12 4C12 3.45 11.55 3 11 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V13C21 12.45 20.55 12 20 12C19.45 12 19 12.45 19 13V18C19 18.55 18.55 19 18 19ZM14 4C14 4.55 14.45 5 15 5H17.59L8.46 14.13C8.07 14.52 8.07 15.15 8.46 15.54C8.85 15.93 9.48 15.93 9.87 15.54L19 6.41V9C19 9.55 19.45 10 20 10C20.55 10 21 9.55 21 9V4C21 3.45 20.55 3 20 3H15C14.45 3 14 3.45 14 4Z"
/>
</svg>
</a>
<div
class="sc-bdfBwQ sc-iqHYGH gRgLU dZqAYj"
color="text"
role="button"
>
Copy Address
<svg
class="sc-dlfnbm dJUqYR"
color="primary"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 1H4C2.9 1 2 1.9 2 3V16C2 16.55 2.45 17 3 17C3.55 17 4 16.55 4 16V4C4 3.45 4.45 3 5 3H15C15.55 3 16 2.55 16 2C16 1.45 15.55 1 15 1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM18 21H9C8.45 21 8 20.55 8 20V8C8 7.45 8.45 7 9 7H18C18.55 7 19 7.45 19 8V20C19 20.55 18.55 21 18 21Z"
/>
</svg>
<div
class="sc-crrsfI yZzjA"
>
Copied
</div>
</div>
</div>
<div
class="sc-jSgupP iPqHuD"
>
Expand Down
13 changes: 13 additions & 0 deletions src/components/Svg/Icons/Copy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from "react";
import Svg from "../Svg";
import { SvgProps } from "../types";

const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 24 24" {...props}>
<path d="M15 1H4C2.9 1 2 1.9 2 3V16C2 16.55 2.45 17 3 17C3.55 17 4 16.55 4 16V4C4 3.45 4.45 3 5 3H15C15.55 3 16 2.55 16 2C16 1.45 15.55 1 15 1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM18 21H9C8.45 21 8 20.55 8 20V8C8 7.45 8.45 7 9 7H18C18.55 7 19 7.45 19 8V20C19 20.55 18.55 21 18 21Z" />
</Svg>
);
};

export default Icon;
1 change: 1 addition & 0 deletions src/components/Svg/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export { default as ChevronUpIcon } from "./Icons/ChevronUp";
export { default as CloseIcon } from "./Icons/Close";
export { default as CogIcon } from "./Icons/Cog";
export { default as CommunityIcon } from "./Icons/Community";
export { default as CopyIcon } from "./Icons/Copy";
export { default as ErrorIcon } from "./Icons/Error";
export { default as HelpIcon } from "./Icons/Help";
export { default as InfoIcon } from "./Icons/Info";
Expand Down
5 changes: 3 additions & 2 deletions src/components/Text/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const getColor = ({ color, theme }: ThemedProps) => {
return getThemeValue(`colors.${color}`, color)(theme);
};

const getFontSize = ({ fontSize }: TextProps) => {
return fontSize || "16px";
const getFontSize = ({ fontSize, small }: TextProps) => {
return small ? "14px" : fontSize || "16px";
};

const Text = styled.div<TextProps>`
Expand All @@ -26,6 +26,7 @@ const Text = styled.div<TextProps>`

Text.defaultProps = {
color: "text",
small: false,
};

export default Text;
1 change: 1 addition & 0 deletions src/components/Text/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const Default: React.FC = () => {
<div>
<Text>Default</Text>
<Text bold>Bold text</Text>
<Text small>Small text</Text>
<Text fontSize="24px">Custom fontsize</Text>
<Text color="red">Custom color</Text>
<Text color="primary">Custom color from theme</Text>
Expand Down
1 change: 1 addition & 0 deletions src/components/Text/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ export interface TextProps extends SpaceProps {
color?: string;
fontSize?: string;
bold?: boolean;
small?: boolean;
textTransform?: "uppercase" | "lowercase" | "capitalize";
}
20 changes: 8 additions & 12 deletions src/widgets/WalletModal/AccountModal.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import Button from "../../components/Button/Button";
import Text from "../../components/Text/Text";
import Link from "../../components/Link/Link";
import LinkExternal from "../../components/Link/LinkExternal";
import Flex from "../../components/Flex/Flex";
import { OpenNewIcon } from "../../components/Svg";
import { Modal } from "../Modal";
import CopyToClipboard from "./CopyToClipboard";
import { localStorageKey } from "./config";

interface Props {
Expand All @@ -22,16 +22,12 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
>
{account}
</Text>
<Link
fontSize="14px"
href={`https://bscscan.com/address/${account}`}
target="blank"
rel="noopener noreferrer"
mb="32px"
>
<OpenNewIcon width="20px" color="primary" mr="4px" />
View on BscScan
</Link>
<Flex mb="32px">
<LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
View on BscScan
</LinkExternal>
<CopyToClipboard toCopy={account}>Copy Address</CopyToClipboard>
</Flex>
<Flex justifyContent="center">
<Button
size="sm"
Expand Down
53 changes: 53 additions & 0 deletions src/widgets/WalletModal/CopyToClipboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useState } from "react";
import styled from "styled-components";
import Text from "../../components/Text/Text";
import { CopyIcon } from "../../components/Svg";

interface Props {
toCopy?: string | number;
}

const StyleButton = styled(Text).attrs({ role: "button" })`
position: relative;
display: flex;
align-items: center;
color: ${({ theme }) => theme.colors.primary};
`;

const Tooltip = styled.div<{ isTooltipDisplayed: boolean }>`
display: ${({ isTooltipDisplayed }) => (isTooltipDisplayed ? "block" : "none")};
position: absolute;
bottom: -22px;
right: 0;
left: 0;
text-align: center;
background-color: ${({ theme }) => theme.colors.contrast};
color: ${({ theme }) => theme.colors.invertedContrast};
border-radius: 16px;
opacity: 0.7;
`;

const CopyToClipboard: React.FC<Props> = ({ toCopy, children, ...props }) => {
const [isTooltipDisplayed, setIsTooltipDisplayed] = useState(false);

return (
<StyleButton
small
bold
onClick={() => {
navigator.clipboard.writeText(JSON.stringify(toCopy));
setIsTooltipDisplayed(true);
setTimeout(() => {
setIsTooltipDisplayed(false);
}, 1000);
}}
{...props}
>
{children}
<CopyIcon width="20px" color="primary" ml="4px" />
<Tooltip isTooltipDisplayed={isTooltipDisplayed}>Copied</Tooltip>
</StyleButton>
);
};

export default CopyToClipboard;
2 changes: 1 addition & 1 deletion src/widgets/WalletModal/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
argTypes: {},
};

export const Connected: React.FC = () => {
export const Wallet: React.FC = () => {
const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(
() => null,
() => null,
Expand Down

0 comments on commit 9906aad

Please sign in to comment.