feat: Add copy to clipboard on the address (#162)

pancakeswap · Feb 2, 2021 · 9906aad · 9906aad
1 parent e0dba76
commit 9906aad
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 38 deletions.
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -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"
@@ -199,7 +199,7 @@ it("renders correctly", () => {
           </div>
         </nav>
         <div
-          class="sc-ezrdKe qgmWt"
+          class="sc-kLgntA lhzNyF"
         >
           <div
             class="sc-hHftDr kbPZub"
@@ -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>

diff --git a/src/__tests__/widgets/walletModal.test.tsx b/src/__tests__/widgets/walletModal.test.tsx
@@ -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"
           >

diff --git a/src/components/Svg/Icons/Copy.tsx b/src/components/Svg/Icons/Copy.tsx
@@ -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;
diff --git a/src/components/Svg/index.tsx b/src/components/Svg/index.tsx
@@ -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";

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -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>`
@@ -26,6 +26,7 @@ const Text = styled.div<TextProps>`
 
 Text.defaultProps = {
   color: "text",
+  small: false,
 };
 
 export default Text;
diff --git a/src/components/Text/index.stories.tsx b/src/components/Text/index.stories.tsx
@@ -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>

diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts
@@ -4,5 +4,6 @@ export interface TextProps extends SpaceProps {
   color?: string;
   fontSize?: string;
   bold?: boolean;
+  small?: boolean;
   textTransform?: "uppercase" | "lowercase" | "capitalize";
 }
diff --git a/src/widgets/WalletModal/AccountModal.tsx b/src/widgets/WalletModal/AccountModal.tsx
@@ -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 {
@@ -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"

diff --git a/src/widgets/WalletModal/CopyToClipboard.tsx b/src/widgets/WalletModal/CopyToClipboard.tsx
@@ -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;
diff --git a/src/widgets/WalletModal/index.stories.tsx b/src/widgets/WalletModal/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 };
 
-export const Connected: React.FC = () => {
+export const Wallet: React.FC = () => {
   const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(
     () => null,
     () => null,