const contract = props.contract || "docschain.ws-protocol-63"; const componentOwnerId = props.componentOwnerId ?? "calimero.testnet"; const redirectConfig = !componentOwnerId || componentOwnerId === "calimero.near" ? {} : { redirect: (url) => url.replace("calimero.near", componentOwnerId) }; const transformUrl = (url) => !componentOwnerId || componentOwnerId === "calimero.near" ? "calimero.near" : url.replace("calimero.near", componentOwnerId); 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; } a { text-decoration: none; color: inherit; &:hover { color: #ffffff; } } width: 317px; `; 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; `; return ( <Container> <TextBold>{props.title}</TextBold> {props.onChange && ( <IconPlusContainer onClick={props.onChange}> <a href={transformUrl( `#/calimero.near/widget/Calimero.DocsChain.${props.componentName}` )} > <i class="bi bi-plus-circle" /> </a> </IconPlusContainer> )} </Container> );