const { contractName, methodNames, componentOwnerId } = props; const OverlayContainer = styled.div` display: flex; width: 100%; height: 100%; background-color: #0e0e10; justify-content: center; align-items: center; padding: 100px; `; const PopupContainer = styled.div` background-color: #1e1f28; padding: 1rem; border-radius: 8px; width: 489px; height: 200px; `; const JoinContainer = styled.div` display: flex; justify-content: center; align-items: center; text: center; `; const JoinHeader = styled.div` display: flex; flex-direction: column; justify-content: center; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const FunctionButton = styled.button` background-color: #d0fc42; :hover { opacity: 0.8; } color: #0e0e10; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const user = context.accountId; const joinTaskChain = useCallback( () => Near.requestCalimeroFak( contractName, methodNames ) .then( ( res ) => { console.log( "requestCalimeroFak", res ); } ) .then( () => { Near.asyncCalimeroView( contractName, "get_application_members", {} ).then( ( res ) => { if ( user in res ) { return Near.asyncCalimeroCall( contractName, "add_application_member", { member: user, } ); } } ); } ), [] ); return ( <OverlayContainer> <PopupContainer> <JoinContainer> <JoinHeader> <div className="pt-3" /> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.TaskChainLogo` } props={ { justify: true, } } /> <div className="pt-3" /> <Text>Join Boards</Text> <div className="pt-3" /> <FunctionButton onClick={ joinTaskChain }>Join</FunctionButton> </JoinHeader> </JoinContainer> </PopupContainer> </OverlayContainer> );