const Container = styled.div` display: flex; justify-content: space-between; align-items: center; background-color: #0e0e10; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; color: #777583; :hover { color: #ffffff; } @media (max-width: 1024px) { width: 100%; padding-top: 1.25rem; } `; const TextBold = styled.div` font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; `; const IconPlusContainer = styled.div` display: flex; cursor: pointer; justify-content: center; align-items: center; font-size: 1.25rem; `; const componentOwnerId = props.componentOwnerId; const curbApi = props.curbApi; const createDM = props.createDM; const isValidNearAccount = useCallback((value) => { const regex = /^(([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+(?:\.testnet|\.near)$/; if (!regex.test(value)) { return false; } return true; }, []); const CreateDMPopup = ({ componentOwnerId, createDM, curbApi, }) => ( <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Popups.StartDMPopup`} props={{ componentOwnerId, title: "Start new DM", placeholder: "# account.near", buttonText: "Create", colors: { base: "#5765f2", hover: "#717cf0", disabled: "#3B487A" }, toggle: ( <IconPlusContainer> <i className="bi bi-plus-circle" /> </IconPlusContainer> ), onAccountSelected: createDM, fetchAccounts: (prefix) => { return curbApi.fetchAccounts({prefix, limit: 20}) }, validator: isValidNearAccount, }} /> ); return ( <Container> <TextBold>{"Start new DM"}</TextBold> <CreateDMPopup componentOwnerId={props.componentOwnerId} createDM={props.createDM} curbApi={props.curbApi} /> </Container> );