react-copy-to-clipboard#CopyToClipboard JavaScript Examples

function genAccordionButtons(props) {
  const { showDialog, send, sendable, buttons } = props;
  return buttons.map(button => {
    let onClick = button.dialog
      ? () => showDialog({ open: true, param: { ...button, send } })
      : () => send(button.text);
    return (
      <CopyToClipboard key={button.title} text={button.text}>
        <Button disabled={!sendable} variant="outlined" {...{ onClick }}>
          {button.title}
        </Button>
      </CopyToClipboard>
    );
  });
}

AvatarWrapper = ({ name, playgroundColors, size, square, variant }) => {
  const [avatarName, setAvatarName] = useState(name);
  const handleFocus = (event) => event.target.select();
  const ref = useRef();
  const [copyValue, setCopyValue] = useState(name);

  useEffect(() => {
    if (ref.current) {
      const svgNode = ref.current.innerHTML;
      const svgStart = svgNode.indexOf('<svg');
      const svgEnd = svgNode.indexOf('</svg>') + 6;
      const svgResult = svgNode.substring(svgStart, svgEnd).toString();

      setCopyValue(svgResult);
    }
  }, [copyValue, variant, playgroundColors]);

  return (
    <AvatarContainer>
      <AvatarSection className="Avatar" ref={ref}>
        <Avatar
          name={avatarName}
          colors={playgroundColors}
          size={size}
          variant={variants[variant]}
          square={square}
        />
      </AvatarSection>
      <Input
        value={avatarName}
        onChange={(e) => setAvatarName(e.target.value)}
        onFocus={(e) => handleFocus(e)}
      />
      <CopyToClipboard text={copyValue}>
        <Button>Copy</Button>
      </CopyToClipboard>
    </AvatarContainer>
  );
}

WorkerStarter = props => {
  const { title, description, repo } = props
  const repoLink = `https://github.com/${repo}`
  const command = `wrangler generate my-app ${repoLink}`

  return (
    <div className="WorkerStarter">
      <div className="WorkerStarter--title">
        <AnchorLink className="Link" href={repoLink}>{title}</AnchorLink>
      </div>
      <div className="WorkerStarter--description">{description}</div>
      <div className="WorkerStarter--command">
        <div className="WorkerStarter--command-copy-button-wrapper">
          <CopyToClipboard text={command}>
            <button className="Button">Copy</button>
          </CopyToClipboard>
        </div>
        <div className="WorkerStarter--command-codeblock-wrapper">
          <CodeBlock lang="txt">{command}</CodeBlock>
        </div>
      </div>
    </div>
  )
}

Heading = (props) => {
  const [copied, setCopied] = useState(false)
  const [location, setlocation] = useState(false)
  const Tag = 'h' + props.level

  useEffect(() => {
    setlocation(`${window.location.href}#${props.id}`)
  }, [props.id])

  return (
    <div className={`font-semibold my-5 text-${props.size}`}>
      <Tag id={props.id} className='inline-block'>
        {props.children}
      </Tag>
      <CopyToClipboard
        aria-hidden='true'
        text={location}
        onCopy={() => setCopied(true)}
      >
        <span
          className={
            copied
              ? 'hidden md:inline-block m-1 text-sm 2xl:text-base cursor-pointer'
              : 'hidden md:inline-block m-1 text-sm 2xl:text-base cursor-pointer text-transparent hover:text-gray-400'
          }
          title={_('Copy link')}
        >
          ¶
        </span>
      </CopyToClipboard>
    </div>
  )
}

render() {
    const { text, onCopy } = this.props;
    return (
      <CopyToClipboard
        text={text}
        onCopy={() => {
          onCopy(text);
        }}
      >
        <Button className="copy" basic icon="copy" />
      </CopyToClipboard>
    );
  }

CreatedSuccesfully = ({ match }) => {
	const [Copy, setCopy] = useState('copy')
	return (
		<div id='created-quiz'>
			<div id='created-quiz-div'>
				<div id='message'>
					<h2 className='b'>Quiz Created Successfully!</h2>
					<p>Share the follwong code with your students</p>
				</div>
				<input
					type='text'
					// className='input-text'
					id={Copy}
					value={match.params.quizCode}
					disabled={true}
					// onChange={(e) => {}}
				/>
				<CopyToClipboard
					text={match.params.quizCode}
					onCopy={() => {
						setCopy('copied')
					}}
				>
					<button className='button wd-200'>
						{Copy === 'copy' ? 'Copy Code' : 'Code Copied!'}
					</button>
				</CopyToClipboard>
				<Link to={'/dashboard'}>
					<button className='button wd-200'>Dashboard</button>
				</Link>
			</div>
		</div>
	)
}

Index = memo(function Index(props) {

  const { TextArea } = Input;

  const [text,setText] = useState('Ant Simple Pro，简洁，美观，快速上手，组件丰富新的ui，简洁大方，支持vue3.0,ts+vue3.0,angular,react,react+ts,三大框架，5分钟快速搭建一个项目，简单上手快');

  const change = useCallback((val)=>{
    setText(val.target.value)
  })

  return (
    <PageLayout>
      <TextArea autoSize={{ minRows: 2 }}  defaultValue={text} onChange={change}  style={{
       marginBottom:'10px'
      }}/>
      <CopyToClipboard text={text}
          onCopy={() => message.success('复制成功,ctrl+v进行粘贴')}>
          <Button type='primary'>复制</Button>
        </CopyToClipboard>
    </PageLayout>
  )
})

DevButtonOverlay = ({ template }) => {
    const basePatternId = template?.fields?.basePattern?.length
        ? template?.fields?.basePattern[0]
        : ''
    const [idText, setIdText] = useState(basePatternId)

    useEffect(() => {
        if (!basePatternId?.length || idText === basePatternId) return
        setTimeout(() => setIdText(basePatternId), 1000)
    }, [idText, basePatternId])

    if (!basePatternId) return null

    return (
        <div className="absolute bottom-0 left-0 z-50 mb-4 ml-4 flex items-center space-x-2 opacity-0 transition duration-100 group-hover:opacity-100 space-x-0.5">
            <CopyToClipboard
                text={template?.fields?.basePattern}
                onCopy={() => setIdText(__('Copied!', 'extendify'))}>
                <button className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0 cursor-pointer">
                    {sprintf(__('Base: %s', 'extendify'), idText)}
                </button>
            </CopyToClipboard>
            <a
                target="_blank"
                className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0"
                href={template?.fields?.editURL}
                rel="noreferrer">
                {__('Edit', 'extendify')}
            </a>
        </div>
    )
}

CopyButton = ({ link }) => {
  const dispatch = useDispatch();
  const handleShareButtonClick = () => {
    dispatch(setInfoPopupMessage('Copied queue link to clipboard'));
  };

  return (
    <CopyToClipboard text={link}>
      <StandardButton onClick={handleShareButtonClick} icon={<FileCopyIcon />}>
        Copy Queue Link
      </StandardButton>
    </CopyToClipboard>
  );
}

BytesBadge = ({ bytes }) => {
  const shortened =
    typeof bytes === 'string'
      ? `${bytes.substring(0, 6)}…${bytes.substring(60)}`
      : ''

  const [copied, setCopied] = useState(false)
  const handleCopy = useCallback(() => setCopied(true), [])

  useEffect(() => {
    let interval
    if (copied) {
      interval = setInterval(() => {
        setCopied(false)
      }, 3000)
    }

    return () => clearInterval(interval)
  }, [copied])

  return (
    <CopyToClipboard text={bytes} onCopy={handleCopy}>
      <BadgeBase
        label={
          <>
            {copied && <IconCheck size="small" />}
            <BadgeText>{shortened}</BadgeText>
          </>
        }
      />
    </CopyToClipboard>
  )
}

function ComponentCode({ className, code }) {
  const theme = useTheme();

  return (
    <div
      className={className}
      css={{
        padding: `${theme.space[3]} ${theme.space[5]}`,
        "textarea:focus": {
          outline: "none",
        },
      }}
    >
      <LiveEditor />
      <CopyToClipboard text={code}>
        <button>Copy Code</button>
      </CopyToClipboard>
    </div>
  );
}

RoomLinkButton = ({ link }) => {
  const { t } = useTranslation();
  const [copiedLinkToClipboard, setCopiedLinkToClipboard] = useState(false);

  return (
    <CopyToClipboard
      text={link}
      onCopy={() => {
        setCopiedLinkToClipboard(true);
      }}
    >
      <Button
        onBlur={() => setCopiedLinkToClipboard(false)}
        color={copiedLinkToClipboard ? "gray" : "yellow"}
      >
        {copiedLinkToClipboard ? t("playerId:copied") : t("playerId:copy-link")}
      </Button>
    </CopyToClipboard>
  );
}

function Copy ({ value, light }) {
  const [ open, setOpen ] = useState(false);

  return (
    <div className={styles.Copy}>
      <CopyToClipboard
        text={value}
        onCopy={() => setOpen(true)}
      >
        <div
          className={[
            styles.icon,
            light ? styles.light : ''
          ].join(' ')}>
          <FileCopyOutlined />
        </div>
      </CopyToClipboard>
      <Alert open={open} onClose={() => setOpen(false)}>
        Copied to clipboard!
      </Alert>
    </div>
  );
}

render() {
  const {address} = this.props;
  let addressDisplay = address.substr(0, 5) + "...." + address.substr(address.length - 6, address.length - 1);
    return (
      <div className="address-display-container">
        {addressDisplay} 
        <span className="copy-clipboard-icon">
          <CopyToClipboard text={address} onCopy={() => this.setState({copied: true})}>
            <FontAwesomeIcon icon={faClipboard}/>
          </CopyToClipboard>
        </span>
      </div>
      )
  }

CodeBlock = (props) => {
  return (
    <div style={{ position: "relative" }}>
      <CopyToClipboard text={props.content}>
        <IconButton
          style={{ position: "absolute", right: 0, top: 0 }}
          aria-label="copy"
          component="span"
        >
          <FileCopyOutlinedIcon />
        </IconButton>
      </CopyToClipboard>
      <div
        style={{
          minHeight: 50,
          backgroundColor: "black",
          paddingLeft: 15,
          paddingRight: 50,
          paddingBottom: 15,
          paddingTop: 15,
        }}
      >
        <SyntaxHighlighter language="javascript" style={tomorrowNightBright}>
          {props.content}
        </SyntaxHighlighter>
      </div>
    </div>
  );
}

export default function HTTPHeader({ type, path }) {
  const [copied, setCopy] = React.useState(false);
  React.useEffect(() => {
    if (copied) {
      setTimeout(() => setCopy(false), 3000);
    }
  }, [copied]);
  const BASE_URL = "https://top.gg/api/";
  const fullUrl = new URL(path, BASE_URL).href;
  const url = path;
  return (
    <HeaderWrapper method={type}>
      <Header>
        <MethodName method={type}>{type}</MethodName>
        <EndpointUrl
          dangerouslySetInnerHTML={{
            __html: url.replace(/:[a-z_]+/g, "<b>$&</b>"),
          }}
        />
      </Header>
      <CopyToClipboard text={fullUrl} onCopy={() => setCopy(true)}>
        <CopyButton method={type}>{copied ? "Copied!" : "Copy URL"}</CopyButton>
      </CopyToClipboard>
    </HeaderWrapper>
  );
}

export default function File({
  loading,
  list,
  handleRemove,
}) {
  const { isAdmin, user } = useContext(Context);
  const columns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Date',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: createdAt => new Date(createdAt).toLocaleString(),
    },
    {
      title: '',
      key: 'op',
      width: 220,
      fixed: 'right',
      render: (text, record) => (
        <div>
          <Popover
            content={(
              <img
                alt="loading"
                style={{ width: 150, height: 150 }}
                src={cdnQrcode(record.key, 'file', isAdmin)}
              />
            )}>
            <Button style={{ marginLeft: 10 }}>
              <QrcodeOutlined />
            </Button>
          </Popover>
          {user && (
            <Popconfirm
              title="Are you sure to delete this ?"
              onConfirm={() => handleRemove(record.objectId)}
            >
              <Button style={{ marginLeft: 10 }} type="danger">
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          )}
          <CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
            onCopy={() => message.success('Copied successfully')}>
            <Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
          </CopyToClipboard>
        </div>
      ),
    },
  ], [handleRemove]);

  return (
    <Table
      loading={loading}
      dataSource={list}
      columns={columns}
      pagination={false}
    />
  );
}

ParticipantCard = (props) => {
  const classes = cardStyles();
  const location = useLocation();
  const url = `https://ourneighborhoodchef.com${location.pathname}`;
  const [copied, setCopied] = useState(false);

  return (
    <>
      <Card className={`${classes.root} ${classes.share}`}>
        <Typography variant="h6" align="left">
          Share
        </Typography>
        <CardContent
          style={{
            display: "flex",
            flexDirection: "column",
            padding: "5px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginBottom: "10px",
            }}
          >
            {shareButtons.map((b) => {
              const TagName = Components[b.name];
              return (
                <span
                  key={b.name}
                  title={b.name}
                  className={cardStyles({ name: b.name }).shareButtons}
                >
                  <TagName url={url} hashtag="#neighborhoodchef" key={b.name}>
                    <b.icon fontSize="large" />
                  </TagName>
                </span>
              );
            })}
          </div>

          <div style={{ display: "flex" }}>
            <Typography
              variant="caption"
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              Copy Link:
              <CopyToClipboard text={url} onCopy={() => setCopied(true)}>
                {copied ? (
                  <Typography
                    color="textSecondary"
                    style={{ marginLeft: "10px" }}
                  >
                    Copied!
                  </Typography>
                ) : (
                  <IconButton style={{ marginLeft: "10px" }}>
                    <LinkIcon fontSize="large" />
                  </IconButton>
                )}
              </CopyToClipboard>
            </Typography>
          </div>
        </CardContent>
      </Card>
    </>
  );
}

Index = memo(function Index(props) {

  const MENU_ID = 'antSimplePro';

  const [ editData,setEditData ] = useSetState({visible:false,content:{
    title:'ant-simple-pro',
    describe:'简洁，美观，快速上手，支持3大框架；Concise, beautiful, quick to get started, support 3 big frameworks'
  }});

  const { show } = useContextMenu({
    id: MENU_ID,
  });

  const handleContextMenu=(event)=>{
      event.preventDefault();
      show(event, {
        props: {
            key: 'value'
        }
      })
  };

  const handleItemClick = ({ event, props },status) => {
    if( status === 1 ){
      setEditData({visible:true});
    }
  };

  return (
    <PageLayout>
      <div className='border svg-fontSize padding-10px' style={{textAlign:'center'}} onContextMenu={handleContextMenu}>
        <img src={Logo} alt="logo"/>
        <h2 className='padding-10px' style={{fontWeight:'bold',fontSize:'20px'}}>{editData.content.title}</h2>
        <section>{editData.content.describe}</section>
      </div>
      <Edit {...editData} callBack={setEditData}/>
    <Menu id={MENU_ID}>
      <Item onClick={(event)=>handleItemClick(event,1)}>编辑</Item>
      <Item>
        <CopyToClipboard text={editData.content.title}
          onCopy={() => message.success('复制成功,ctrl+v进行粘贴')}>
            <span>复制标题</span>
        </CopyToClipboard>
      </Item>
    </Menu>
    </PageLayout>
  )
})

export default function Placeholder() {
  const [text, setText] = useState('');
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [backgroundColor, setBackgroundColor] = useState('CCCCCC');
  const [textColor, setTextColor] = useState('A3A3A3');

  const [
    a, b, c, d, e
  ] = useDebounce([text, width, height, backgroundColor, textColor], 500);

  let url = `https://p.302.at/${b}x${c}/${d || 'CCCCCC'}/${e || 'A3A3A3'}.png`;
  if (a) {
    url = `${url}?text=${a}`;
  }

  return (
    <div>
      <div>
        <Form {...layout}>
          <Form.Item label="Size(px)">
            <InputNumber
              value={width}
              onChange={(value) => setWidth(value / 1)}
              placeholder="width"
              step={1}
              precision={0}
              min={0}
            />
            ✖️
            <InputNumber
              value={height}
              onChange={(value) => setHeight(value / 1)}
              placeholder="height"
              step={1}
              precision={0}
              min={0}
            />
          </Form.Item>
          <Form.Item label="Background Color">
            <Input
              style={{ width: 110 }}
              addonBefore="#"
              value={backgroundColor}
              onChange={(e) => setBackgroundColor(e.target.value)}
            />
          </Form.Item>
          <Form.Item label="Text Color">
            <Input
              style={{ width: 110 }}
              addonBefore="#"
              value={textColor}
              onChange={(e) => setTextColor(e.target.value)}
            />
          </Form.Item>
          <Form.Item label="Text">
            <Input value={text} onChange={(e) => setText(e.target.value)} />
          </Form.Item>
          {(width > 0 && height > 0) && (
            <Form.Item label="Preview">
              <div>
                <Input style={{ width: 250 }} disabled value={url} />
                <CopyToClipboard text={url}
                  onCopy={() => message.success('Copied successfully')}>
                  <Button style={{ margin: '0 10px' }} type="primary">Copy</Button>
                </CopyToClipboard>
                <Button href={url} download>Download</Button>
                <div style={{ marginTop: 20 }}>
                  <img style={{ maxWidth: '100%', maxHeight: 300 }} src={url} />
                </div>
              </div>
            </Form.Item>
          )}
        </Form>
      </div>
    </div>
  );
}

InputDialog = props => {
  const [param, dispatcher] = useReducer(paramReducer, {
    week: { data: "", error: false },
    boss: { data: "", error: false },
  });
  const { open, handleClose, sendable, disabled = [], required = [], title, text, send } = props;
  const [sendState, setSendState] = useState({ text: "", pass: true });

  useEffect(() => {
    dispatcher({ type: "INIT" });
  }, [text]);

  useEffect(() => {
    let message = text;
    let pass = true;
    Object.keys(param)
      .filter(key => disabled.indexOf(key) === -1)
      .forEach(key => {
        let isEmpty = param[key].data === "";
        let isError = param[key].error;
        let isRequired = required.indexOf(key) !== -1;

        if (!isEmpty && isError) pass = false;
        else if (isEmpty && isRequired) pass = false;
        else if (!isEmpty) message += ` ${param[key].data}`;
      });
    setSendState({ text: message, pass });
  }, [param, disabled, required]);

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{sendState.text}</DialogContentText>
        <TextField
          fullWidth
          value={param.week.data}
          error={required.indexOf("week") !== -1 && param.week.error}
          label={"周次"}
          type="tel"
          disabled={disabled.indexOf("week") !== -1}
          onChange={e => dispatcher({ type: "WEEK", week: e.target.value })}
        />
        <TextField
          fullWidth
          value={param.boss.data}
          error={required.indexOf("boss") !== -1 && param.boss.error}
          label={"王"}
          type="tel"
          disabled={disabled.indexOf("boss") !== -1}
          onChange={e => dispatcher({ type: "BOSS", boss: e.target.value })}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          取消
        </Button>
        <CopyToClipboard text={sendState.text}>
          <Button
            onClick={() => send(sendState.text)}
            color="primary"
            autoFocus
            disabled={!sendState.pass || !sendable}
          >
            發送
          </Button>
        </CopyToClipboard>
      </DialogActions>
    </Dialog>
  );
}

render() {
    const {
      name,
      background,
      moreUrl,
      showingFullPalette,
      classes,
    } = this.props;
    const { copied } = this.state;
    return (
      <CopyToClipboard text={background} onCopy={this.changeCopyState}>
        <div style={{ background }} className={classes.ColorBox}>
          <div
            style={{ background }}
            className={classNames(classes.copyOverlay, {
              [classes.showOverlay]: copied,
            })}
          />
          <div
            className={classNames(classes.copyMessage, {
              [classes.showMessage]: copied,
            })}
          >
            <h1>copied!</h1>
            <p className={classes.copyText}>{background}</p>
          </div>
          <div>
            <div className={classes.boxContent}>
              <span className={classes.colorName}>{name}</span>
            </div>
            <button className={classes.copyButton}>Copy</button>
          </div>
          {showingFullPalette && (
            <Link to={moreUrl} onClick={(e) => e.stopPropagation()}>
              <span className={classes.seeMore}>MORE</span>
            </Link>
          )}
        </div>
      </CopyToClipboard>
    );
  }

AddressAvatarButton = ({ fullAddress, address }) => {
  const theme = useContext(ThemeContext);
  return (
    <Tooltip
      title={
        <CopyToClipboard text={fullAddress}>
          <div
            style={{
              cursor: "pointer",
              textAlign: "center",
            }}
          >
            <div
              style={{
                fontSize: "0.9rem",
                fontWeight: "600",
                width: "152px",
              }}
            >
              {fullAddress}
            </div>
            <div style={{ paddingTop: "8px", fontSize: "0.8rem" }}>
              <I s="Click to copy" />
            </div>
          </div>
        </CopyToClipboard>
      }
      mouseEnterDelay={1}
    >
      <CopyToClipboard text={fullAddress}>
        <div
          style={{
            display: "flex",
            cursor: "pointer",
            alignItems: "center",
            justifyContent: "center",
            height: AppLayout.topNavBarHeight,
          }}
        >
          <MyBlockies seed={fullAddress} />

          <span
            style={{
              marginLeft: "12px",
              userSelect: "none",
              color: theme.textWhite,
              fontSize: "0.9rem",
              fontWeight: "600",
            }}
          >
            {address}
          </span>
        </div>
      </CopyToClipboard>
    </Tooltip>
  );
}

SeedCard = (props) => {
  const { t } = useTranslation();
  const db = useDB();
  if (!db) return null;
  const data = props.data;
  const player = db.get("players").find({ id: data.playerId0 }).value();
  const support = db.get("supports").find({ id: data.supportId }).value();
  const like = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.likes += 1;
    }
  };
  const dislike = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    } else if (seed.dislikes && seed.dislikes.indexOf(userId) !== -1) {
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.dislikes += 1;
    }
  };
  return (
    <div className="w-1/2 p-1">
      <div className="border-green-300 border border-solid flex flex-col">
        <CopyToClipboard text={data.gameId} onCopy={() => message.info("成功")}>
          <div className="w-full flex text-lg">
            {data.gameId}
            <CopyOutlined />
          </div>
        </CopyToClipboard>
        <div className="w-full flex items-center justify-around">
          {player && (
            <img alt={player.name} src={CDN_SERVER + player.imgUrl} className="w-10 h-10" />
          )}
          {support && <img alt={support.name} src={CDN_SERVER + support.imgUrl} className="w-10" />}
          <div className="text-lg flex" onClick={() => like(data)}>
            <SmileOutlined />
            <div>{data.likes}</div>
          </div>
          <div className="text-lg flex" onClick={() => dislike(data)}>
            <FrownOutlined />
            <div>{data.dislikes}</div>
          </div>
        </div>
        <div>{`${t(SEED_BLUE_LABELS[data["blue0"]])}: ${data["blueLevel0"]}`}</div>
        <div>{`${t(SEED_RED_LABELS[data["red0"]])}: ${data["redLevel0"]}`}</div>
        {Object.keys(SEED_BLUE_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_BLUE_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        {Object.keys(SEED_RED_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_RED_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        <div>{`${t("突破等级")}: ${data["supportLevel"] || 0}`}</div>
      </div>
    </div>
  );
}

render(){
        const { href } = this.state;

        return(
            <Wrapper>
                {/* TODO ADD URL */}
                <Row>
                    <FacebookShareButton url={href}>
                        <Icon src={'../../static/img/shareIcon/facebook.svg'} />
                    </FacebookShareButton>
                </Row>

                <Row>
                    <TwitterShareButton url={href}>
                        <Icon src={'../../static/img/shareIcon/twitter.svg'} />
                    </TwitterShareButton>
                </Row>

                <CopyToClipboard text={href}>
                    <Row onClick={this.handleClickOpen}>
                        <Icon src={'../../static/img/shareIcon/copy.svg'} />
                    </Row>
                </CopyToClipboard>

                <Dialog
                    open={this.state.clicked}
                    onClose={this.handleClose}
                    aria-labelledby='alert-dialog-title'
                    aria-describedby='alert-dialog-description'>
                    <DialogTitle id='alert-dialog-title'>
                        {'URL copied to clipboard'}
                    </DialogTitle>

                    <DialogContent>
                        <DialogContentText
                            id='alert-dialog-description'
                            style={{overflow: "hidden", textOverflow: "ellipsis"}}>
                            {href}
                        </DialogContentText>
                    </DialogContent>

                    <DialogActions>
                        <Button onClick={this.handleClose} variant='contained' color='primary'>
                            {'Ok'}
                        </Button>
                    </DialogActions>
                </Dialog>
            </Wrapper>
        )
    }

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

MsgDetailAddressBox = ({ addr, lat, lng }) => {
  return (
    <MsgDetailAdrsWrapper>
      <MsgDetailAdrsOuterWrapper>
        <MsgDetailAdrsInnerWrapper>
          <MsgDetailAdrsTitle>찾아가는 방법</MsgDetailAdrsTitle>
          <MsgDetailAdrsAddrestWrapper>
            <MsgDetailAdrsAddressTitle>주소</MsgDetailAdrsAddressTitle>
            <MsgDetailAdrsAddress>{addr}</MsgDetailAdrsAddress>
          </MsgDetailAdrsAddrestWrapper>
        </MsgDetailAdrsInnerWrapper>
        <CopyToClipboard text={addr}>
          <StButton>
            <MsgDetailAdrsButtonWrapper>
              <MsgDetailAdrsButtonInnerWrapper>
                <IoIosCopy />
                <MsgDetailAdrsButtonText>주소 복사하기</MsgDetailAdrsButtonText>
              </MsgDetailAdrsButtonInnerWrapper>
              <MdKeyboardArrowRight />
            </MsgDetailAdrsButtonWrapper>
          </StButton>
        </CopyToClipboard>
        <a
          href={`https://www.google.com/maps/place/${addr}/@${lat}/@${lng}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          <StButton>
            <MsgDetailAdrsButtonWrapper>
              <MsgDetailAdrsButtonInnerWrapper>
                <MdLocationOn />
                <MsgDetailAdrsButtonText>
                  찾아가는 방법 보기
                </MsgDetailAdrsButtonText>
              </MsgDetailAdrsButtonInnerWrapper>
              <MdKeyboardArrowRight />
            </MsgDetailAdrsButtonWrapper>
          </StButton>
        </a>
      </MsgDetailAdrsOuterWrapper>
    </MsgDetailAdrsWrapper>
  );
}

function ReceiveModal(props) {
  const [state] = useContext(UserContext);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (copied)
      setTimeout(() => {
        setCopied(false);
      }, 1500);
  }, [copied]);

  return (
    <div>
      <Modal
        size="lg"
        dialogClassName="modal-90w"
        centered
        className="modal_wrapper"
        show
        {...props}
      >
        <Modal.Header closeButton>
          <Header>
            <HeaderTitle>Receive on Polygon Nightfall</HeaderTitle>
          </Header>
        </Modal.Header>
        <Modal.Body style={{ padding: '0px' }}>
          <MyBody>
            <div>
              <QRCode value={state.compressedPkd} />
            </div>
            <p>Wallet Address</p>
            <span>{state.compressedPkd}</span>
            {copied ? (
              <MyFooter>
                <Lottie
                  style={{ height: '32px', width: '32px', margin: '20px' }}
                  animationData={checkMarkYes}
                  loop
                />
              </MyFooter>
            ) : (
              <CopyToClipboard text={state.compressedPkd} onCopy={() => setCopied(true)}>
                <MyFooter>
                  <QrCodeButton>Copy Address</QrCodeButton>
                </MyFooter>
              </CopyToClipboard>
            )}
          </MyBody>
        </Modal.Body>
      </Modal>
    </div>
  );
}

AddressAvatarButton = ({ fullAddress, address }) => {
  const theme = useContext(ThemeContext);
  return (
    <Tooltip
      title={
        <CopyToClipboard text={fullAddress}>
          <div
            style={{
              cursor: 'pointer',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: '0.9rem',
                fontWeight: '600',
                width: '152px',
              }}
            >
              {fullAddress}
            </div>
            <div style={{ paddingTop: '8px', fontSize: '0.8rem' }}>
              <I s="Click to copy" />
            </div>
          </div>
        </CopyToClipboard>
      }
      mouseEnterDelay={1}
    >
      <CopyToClipboard text={fullAddress}>
        <div
          style={{
            display: 'flex',
            cursor: 'pointer',
            alignItems: 'center',
            justifyContent: 'center',
            height: AppLayout.topNavBarHeight,
          }}
        >
          <MyBlockies seed={fullAddress} />

          <span
            style={{
              marginLeft: '12px',
              userSelect: 'none',
              color: theme.textWhite,
              fontSize: '0.9rem',
              fontWeight: '600',
            }}
          >
            {address}
          </span>
        </div>
      </CopyToClipboard>
    </Tooltip>
  );
}