\n \n {data\n ? new Date(toMilliseconds(data.stakeStartTime)).toLocaleDateString()\n : undefined}\n | \n \n {data ? utils.formatEther(data.rawInvestedAmount) : undefined}\n URUS\n | \n \n {data ? : undefined} URUS\n | \n \n {data ? : undefined} URUS\n | \n \n \n {data ? remainingTime(data.stakeEndTime) : undefined}\n \n | \n \n \n setClaimModalVisible(true)}\n >\n Claim\n \n \n toggle()}>\n \n \n {visible && (\n \n setCancelVisible(true)}>\n Cancel stake\n \n \n )}\n \n \n {cancelVisible && data && !isStakeReady(data.stakeEndTime) && (\n setCancelVisible(false)}\n stake={data}\n />\n )}\n {data && (\n setClaimModalVisible(false)}\n stake={data}\n />\n )}\n | \n
\n );\n};\n\nconst Tr = styled.tr`\n border-radius: 8px;\n\n &:first-child td:first-child {\n border-top-left-radius: 8px;\n }\n\n &:first-child td:last-child {\n border-top-right-radius: 8px;\n }\n\n &:last-child td:first-child {\n border-bottom-left-radius: 8px;\n }\n\n &:last-child td:last-child {\n border-bottom-right-radius: 8px;\n }\n\n &:first-child td {\n padding-top: 24px;\n border-top: 1px solid ${Colors.BorderPrimary};\n }\n\n &:last-child td {\n padding-bottom: 24px;\n border-bottom: 1px solid ${Colors.BorderPrimary};\n }\n`;\n\nconst Td = styled.td`\n font-size: 12px;\n line-height: 20px;\n color: ${Colors.White};\n padding-top: 12px;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n background: ${Colors.BackgroundSecondary};\n text-align: center;\n\n &:first-child {\n text-align: left;\n border-left: 1px solid ${Colors.BorderPrimary};\n }\n\n &:last-child {\n border-right: 1px solid ${Colors.BorderPrimary};\n }\n\n span {\n margin-left: 6px;\n color: #75819c;\n font-size: 12px;\n line-height: 20px;\n }\n\n b {\n font-weight: 900;\n }\n`;\n\ninterface RemainingTimeProps {\n isReady: boolean;\n}\n\nconst RemainingTime = styled.p