Staking XEN

The staking period is limited to the following range: 1 to 1,000 days. Vanilla XEN stake period can be terminated without penalties any time within the agreed term, however the APY rewards will not be prorated or paid if staking is terminated before the staking period is over. Staking XENFTs can't be terminated until maturity date! You will be able to stake XEN for any number of days between 1 and 1,000, and receive APY rewards, which will start at 20% on XEN Genesis and will decrease by 1 percentage point every 90 days thereafter until it reaches 2%, whereupon it will stay at 2% indefinitely. Each stake’s APY is fixed at the time of the stake, depending on how many days have passed since XEN Genesis.

by jarosciak

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stake Dates Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<h1>
Staking XEN (Ethereum)
</h1>
<p>
XEN staking is available for 1 to 1,000 days. <br><br>Vanilla XEN stakes can be ended early without penalties, but APY rewards are forfeited if terminated before the end of the term. <br>Stake XENFTs must remain staked until the maturity date. <br><br>
Stake XEN for any number of days within this range to earn APY rewards starting at 20% on XEN Genesis (October 8, 2022). The APY will decrease by 1% every 90 days until it reaches 2% on March 16, 2027, then remains at 2% indefinitely. APY is fixed at the time of staking based on the elapsed time since XEN Genesis.
</p>

    <div id="stakeTableContainer"></div>

    <!-- Include your JavaScript file here -->
    <!-- <script src="path/to/your/javascript.js"></script> -->
</body>
</html>

CSS

/* General styling for the table */
table {
    width: 100%; /* Full-width */
    border-collapse: collapse; /* No double borders */
    margin: 20px 0; /* Margin around the table */
    font-family: Arial, sans-serif; /* Modern font */
    font-size: 16px; /* Readable font size */
    text-align: left; /* Align text to the left within cells */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for 3D effect */
}

/* Styling for table headers */
th {
    background-color: #f4f4f9; /* Light grey background */
    color: #333; /* Dark grey text color */
    padding: 12px 15px; /* Padding inside header cells */
    border-bottom: 1px solid #ccc; /* Light grey bottom border */
}

/* Styling for table cells */
td {
    padding: 10px 15px; /* Padding inside cells */
    border-bottom: 1px solid #eee; /* Very light grey bottom border */
}

/* Alternate row colors for rows */
tr:nth-child(odd) {
    background-color: #f9f9f9; /* Very light grey for odd rows */
}

tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}

/* Hover effect for rows */
tr:hover {
    background-color: #f1f1f1; /* Very light grey when mouse hovers over a row */
}

/* Responsive styling */
@media screen and (max-width: 600px) {
    table {
        width: 100%; /* Full-width on small screens */
        font-size: 14px; /* Smaller font size for better readability on small screens */
    }
}

JavaScript

// Define a function to add days to a date
function addDays(date, days) {
    const result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

// Function to format the date in a human-readable form
function formatDate(date) {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return date.toLocaleDateString('en-US', options);
}


// Calculate ROI based on APY and days of stake
function calculateROI(apy, daysOfStake) {
    return ((apy / 100) * (daysOfStake / 365) * 100).toFixed(2); // ROI as a percentage, rounded to 2 decimal places
}

// Define the genesis date for the 20% stake
const genesisDate = new Date('2022-10-08T00:00:00');

// Define the stake periods and corresponding APY from the table
    const stakePeriods = [
        { daysSinceGenesis: 0, APY: 20 },
        { daysSinceGenesis: 90, APY: 19 },
  { daysSinceGenesis: 180, APY: 18 },
  { daysSinceGenesis: 270, APY: 17 },
  { daysSinceGenesis: 360, APY: 16 },
  { daysSinceGenesis: 450, APY: 15 },
  { daysSinceGenesis: 540, APY: 14 },
  { daysSinceGenesis: 630, APY: 13 },
  { daysSinceGenesis: 720, APY: 12 },
  { daysSinceGenesis: 810, APY: 11 },
  { daysSinceGenesis: 900, APY: 10 },
  { daysSinceGenesis: 990, APY: 9 },
  { daysSinceGenesis: 1080, APY: 8 },
  { daysSinceGenesis: 1170, APY: 7 },
  { daysSinceGenesis: 1260, APY: 6 },
  { daysSinceGenesis: 1350, APY: 5 },
  { daysSinceGenesis: 1440, APY: 4 },
  { daysSinceGenesis: 1530, APY: 3 },
  { daysSinceGenesis: 1620, APY: 2 },  
];

// Calculate the starting date and ROI for each stake period
stakePeriods.forEach(period => {
    period.startDate = formatDate(addDays(genesisDate, period.daysSinceGenesis));
    period.roi30 = calculateROI(period.APY, 30);
    period.roi100 = calculateROI(period.APY, 100);
    period.roi365 = calculateROI(period.APY, 365);
    period.roi500 = calculateROI(period.APY, 500);
    period.roi1000 = calculateROI(period.APY, 1000);
});

// Create the HTML for the table...