"": "// - \\\'isowner\\\' (true if observer is the owner of the challenge)\\nlet isOwner = props.isOwner ?? true;\\nconst challengeState = props.challengeState;\\n\\nlet daysLeft = challengeState[\\\"days_left\\\"];\\nlet daysTotal = challengeState[\\\"total_days\\\"];\\nlet livesTotal = challengeState[\\\"total_lives\\\"];\\nlet livesLeft = challengeState[\\\"lives_left\\\"];\\nlet dayStatus = challengeState[\\\"day_status\\\"] || [];\\n\\nlet challengeStatus = \\\"inprogress\\\";\\nif (daysLeft == 0) {\\n challengeStatus = \\\"success\\\";\\n} else if (livesLeft == 0) {\\n challengeStatus = \\\"failed\\\";\\n}\\n\\nlet reward = challengeState[\\\"funding\\\"][\\\"initial_stake\\\"] || 0;\\nlet backers = 0;\\n\\nif (challengeState[\\\"funding\\\"][\\\"backers\\\"]) {\\n let array = challengeState[\\\"funding\\\"][\\\"backers\\\"];\\n for (let index = 0; index < array.length; index++) {\\n const element = array[index];\\n reward += element[\\\"value\\\"];\\n backers += 1;\\n }\\n}\\n\\nlet reward_str = Number(reward / 1_000_000_000_000_000_000_000_000).toFixed(1);\\n\\nconst challengeSummary = {\\n fontSize: \\\"24px\\\",\\n fontFamily: \\\"Roboto\\\",\\n};\\n\\nconst mainBox = {\\n width: \\\"628px\\\",\\n borderRadius: \\\"10px\\\",\\n backgroundColor: \\\"#F6F6F6\\\",\\n padding: \\\"20px\\\",\\n fontFamily: \\\"Inter\\\",\\n fontSize: \\\"14px\\\",\\n};\\n\\nconst challengeBox = {\\n paddingTop: \\\"20px\\\",\\n paddingBottom: \\\"20px\\\",\\n paddingLeft: \\\"10px\\\",\\n paddingRight: \\\"10px\\\",\\n};\\n\\nconst challengeBoxTitle = {\\n fontSize: \\\"16px\\\",\\n color: \\\"#000000\\\",\\n fontFamily: \\\"Inter\\\",\\n fontWeight: \\\"400\\\",\\n lineHeight: \\\"19px\\\",\\n};\\n\\nconst challengeBoxContents = {\\n borderRadius: \\\"5px\\\",\\n backgroundColor: \\\"white\\\",\\n padding: \\\"15px\\\",\\n textAlign: \\\"center\\\",\\n marginTop: \\\"20px\\\",\\n marginBottom: \\\"20px\\\",\\n color: \\\"#68717A\\\",\\n};\\n\\nconst failedChallengeBoxContents = {\\n borderRadius: \\\"5px\\\",\\n backgroundColor: \\\"#ffcccb\\\",\\n padding: \\\"15px\\\",\\n textAlign: \\\"center\\\",\\n marginTop: \\\"20px\\\",\\n marginBottom: \\\"20px\\\",\\n color: \\\"#68717A\\\",\\n};\\n\\nconst successChallengeBoxContents = {\\n borderRadius: \\\"5px\\\",\\n backgroundColor: \\\"#90ee90\\\",\\n padding: \\\"15px\\\",\\n textAlign: \\\"center\\\",\\n marginTop: \\\"20px\\\",\\n marginBottom: \\\"20px\\\",\\n color: \\\"#68717A\\\",\\n};\\n\\nconst dot = {\\n height: \\\"20px\\\",\\n width: \\\"20px\\\",\\n borderRadius: \\\"50%\\\",\\n display: \\\"inline-block\\\",\\n};\\n\\nconst greenDot = {\\n height: \\\"20px\\\",\\n width: \\\"20px\\\",\\n borderRadius: \\\"50%\\\",\\n display: \\\"inline-block\\\",\\n backgroundColor: \\\"green\\\",\\n};\\n\\nconst redDot = {\\n height: \\\"20px\\\",\\n width: \\\"20px\\\",\\n borderRadius: \\\"50%\\\",\\n display: \\\"inline-block\\\",\\n backgroundColor: \\\"red\\\",\\n};\\n\\nconst greyDot = {\\n height: \\\"20px\\\",\\n width: \\\"20px\\\",\\n borderRadius: \\\"50%\\\",\\n display: \\\"inline-block\\\",\\n backgroundColor: \\\"grey\\\",\\n};\\n\\nconst activeButton = {\\n backgroundColor: \\\"#2D949A\\\",\\n color: \\\"white\\\",\\n borderRadius: \\\"100px\\\",\\n border: \\\"0px\\\",\\n paddingLeft: \\\"24px\\\",\\n paddingRight: \\\"24px\\\",\\n paddingTop: \\\"10px\\\",\\n paddingBottom: \\\"10px\\\",\\n marginTop: \\\"10px\\\",\\n};\\n\\nconst inactiveButton = {\\n backgroundColor: \\\"#a0a5ab\\\",\\n color: \\\"white\\\",\\n borderRadius: \\\"100px\\\",\\n border: \\\"0px\\\",\\n paddingLeft: \\\"24px\\\",\\n paddingRight: \\\"24px\\\",\\n paddingTop: \\\"10px\\\",\\n paddingBottom: \\\"10px\\\",\\n marginTop: \\\"10px\\\",\\n};\\n\\nconst nearAmount = {\\n fontSize: \\\"16px\\\",\\n fontWeight: \\\"900\\\",\\n color: \\\"black\\\",\\n};\\nconst remainingBlock = {\\n margin: \\\"20px\\\",\\n backgroundColor: \\\"#f4feff\\\",\\n borderRadius: \\\"6px\\\",\\n color: \\\"#68717a\\\",\\n};\\n\\nconst dotHolder = {\\n display: \\\"inline-block\\\",\\n};\\n\\n// a == -1 (failed)\\n// a == 0 (unknown)\\n// a == 1 (success)\\nconst renderDot = (day, a) => {\\n let dotStyle = \\\"\\\";\\n if (a == -1) {\\n dotStyle = redDot;\\n } else if (a == 0) {\\n dotStyle = greyDot;\\n } else {\\n dotStyle = greenDot;\\n }\\n\\n return (\\n <div style={dotHolder}>\\n <span style={dotStyle}></span>\\n <br />\\n {day}\\n </div>\\n );\\n};\\n\\nconst renderDots = (totalDays, daysLeft, dayStatus) => {\\n let results = [];\\n for (let day = 0; day < totalDays; day++) {\\n if (dayStatus.length > day && dayStatus[day] == false) {\\n results.push(renderDot(day + 1, -1));\\n } else {\\n if (day < totalDays - daysLeft) {\\n results.push(renderDot(day + 1, 1));\\n } else {\\n results.push(renderDot(day + 1, 0));\\n }\\n }\\n }\\n return results;\\n};\\n\\nconst topBox = \\\"\\\";\\n\\nif (challengeStatus == \\\"inprogress\\\") {\\n topBox = (\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Summary</div>\\n <div style={challengeBoxContents}>{props.customBox}</div>\\n </div>\\n );\\n} else if (challengeStatus == \\\"failed\\\") {\\n topBox = (\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Sorry</div>\\n <div style={failedChallengeBoxContents}>{props.customBox}</div>\\n </div>\\n );\\n} else {\\n topBox = (\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Congratulations</div>\\n <div style={successChallengeBoxContents}>{props.customBox}</div>\\n </div>\\n );\\n}\\n\\nlet supportBox = \\\"\\\";\\n\\nif (isOwner == false) {\\n supportBox = (\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Support with NEAR</div>\\n <div style={challengeBoxContents}>\\n <input value=\\\"1.0\\\"></input>\\n <button style={activeButton}>Support</button>\\n </div>\\n </div>\\n );\\n} else {\\n supportBox = (\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Abandon challenge</div>\\n <div style={challengeBoxContents}>{props.abandonButton}</div>\\n </div>\\n );\\n}\\n\\nreturn (\\n <div style={mainBox}>\\n <div style={challengeSummary}>\\n {\\\" \\\"}\\n <img src={props.challengeLogo}></img> {props.challengeMotto}\\n </div>\\n\\n {topBox}\\n\\n <div style={{ overflow: \\\"hidden\\\" }}>\\n <div\\n style={{ display: \\\"inline-block\\\", width: \\\"30%\\\", verticalAlign: \\\"top\\\" }}\\n >\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Current Rewards</div>\\n <div style={challengeBoxContents}>\\n <span style={nearAmount}>{reward_str} NEAR</span> <br /> {backers}{\\\" \\\"}\\n people\\n </div>\\n </div>\\n {supportBox}\\n </div>\\n <div\\n style={{ display: \\\"inline-block\\\", width: \\\"60%\\\", verticalAlign: \\\"top\\\" }}\\n >\\n <div style={challengeBox}>\\n <div style={challengeBoxTitle}>Check-in progress</div>\\n <div style={challengeBoxContents}>\\n <div>{renderDots(daysTotal, daysLeft, dayStatus)}</div>\\n <div style={remainingBlock}>\\n <b>Remaining:</b> {daysLeft} days ({livesLeft} skip days\\n available)\\n </div>\\n </div>\\n </div>\\n </div>\\n </div>\\n <div style={{ display: \\\"block\\\" }}></div>\\n </div>\\n);\\n",