feat: 添加邀请链接

This commit is contained in:
gary 2022-04-23 22:18:25 +08:00
parent db6db2ed36
commit 016f948610
4 changed files with 38 additions and 2 deletions

View File

@ -74,6 +74,7 @@ const Menu: React.FC<NavProps> = ({
links,
profile,
children,
inviteUrl,
}) => {
const { isXl } = useMatchBreakpoints();
const isMobile = isXl === false;
@ -124,7 +125,7 @@ const Menu: React.FC<NavProps> = ({
/>
{!!login && !!logout && (
<Flex>
<UserBlock account={account} login={login} logout={logout} />
<UserBlock account={account} inviteUrl={inviteUrl} login={login} logout={logout} />
{profile && <Avatar profile={profile} />}
</Flex>
)}

View File

@ -0,0 +1,21 @@
import React from "react";
import Text from "../../../components/Text/Text";
import { Modal } from "../../Modal";
import { CopyToClipboard } from "../../WalletModal";
interface Props {
inviteUrl: string;
onDismiss?: () => void;
}
const InviteModal: React.FC<Props> = ({ inviteUrl, onDismiss }) => (
<Modal title="Invite" onDismiss={onDismiss}>
<CopyToClipboard toCopy={inviteUrl}>
<Text fontSize="20px" bold style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{inviteUrl}
</Text>
</CopyToClipboard>
</Modal>
);
export default InviteModal;

View File

@ -1,19 +1,32 @@
import React from "react";
import Button from "../../../components/Button/Button";
import { useModal } from "../../Modal";
import InviteModal from "./InviteModal";
import { useWalletModal } from "../../WalletModal";
import { Login } from "../../WalletModal/types";
interface Props {
account?: string;
inviteUrl: string;
login: Login;
logout: () => void;
}
const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, account);
const [onPresentInviteModal] = useModal(<InviteModal inviteUrl={inviteUrl} />);
const accountEllipsis = account ? `${account.substring(0, 4)}...${account.substring(account.length - 4)}` : null;
return (
<div>
<Button
scale="sm"
mr={10}
onClick={() => {
onPresentInviteModal();
}}
>
Invite
</Button>
{account ? (
<Button
scale="sm"

View File

@ -58,6 +58,7 @@ export interface PanelProps {
export interface NavProps extends PanelProps {
account?: string;
inviteUrl: string;
login?: Login;
profile?: Profile;
logout?: () => void;