const accountId = props.accountId || context.accountId; const didPassComponents = "components" in props; if (!accountId) return ""; const limitPerPage = 20; let components = props.components ?? null; State.init({ currentPage: 0, }); const data = !didPassComponents && Social.keys(`${accountId}/widget/*`, "final", { return_type: "BlockHeight", }); if (data) { components = []; Object.keys(data).forEach((accountId) => { return Object.keys(data[accountId].widget).forEach((componentName) => { components.push({ accountId, componentName, blockHeight: data[accountId].widget[componentName], }); }); }); components.sort((a, b) => b.blockHeight - a.blockHeight); components = components.slice(0, state.currentPage * limitPerPage + limitPerPage); } const showLoadMoreButton = components.length % limitPerPage === 0; const Wrapper = styled.div` display: flex; flex-direction: column; gap: 48px; `; const Items = styled.div` display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; @media (max-width: 700px) { grid-template-columns: minmax(0, 1fr); } `; const CardWrapper = styled.div``; const Text = styled.p` margin: 0; font-size: 14px; line-height: 20px; color: ${(p) => (p.bold ? "#11181C" : "#687076")}; font-weight: ${(p) => (p.bold ? "600" : "400")}; font-size: ${(p) => (p.small ? "12px" : "14px")}; `; const Button = styled.button` display: block; width: 100%; padding: 8px; height: 32px; background: #fbfcfd; border: 1px solid #d7dbdf; border-radius: 50px; font-weight: 600; font-size: 12px; line-height: 15px; text-align: center; cursor: pointer; color: #11181c !important; margin: 0; &:hover, &:focus { background: #ecedee; text-decoration: none; outline: none; } span { color: #687076 !important; } `; if (!components) return "Loading..."; if (components.length === 0) { return <Text>{props.noDataText ?? "This account hasn't published any components yet."}</Text>; } return ( <Wrapper> <Items> {components.map((component, i) => ( <Widget src="near/widget/ComponentCard" props={{ src: `${component.accountId}/widget/${component.componentName}`, blockHeight: component.blockHeight, }} /> ))} </Items> {showLoadMoreButton && ( <Button type="button" onClick={() => State.update({ currentPage: state.currentPage + 1 })}> Load More </Button> )} </Wrapper> );