Skip to content

Commit

Permalink
Merge pull request #2 from zekraken-bot/develop
Browse files Browse the repository at this point in the history 
add edit ability
  • Loading branch information
@zekraken-bot
zekraken-bot authored Dec 22, 2023
2 parents d8a1e32 + b6f1ddd commit d245de4
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 33 deletions.
6 changes: 6 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,10 @@ html, body {
color: rgb(163, 0, 0);
font-weight: bold;
/* other styles as needed */
}

.footer {
font-size: 12px;
display: flex;
justify-content: center;
}
210 changes: 177 additions & 33 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ function App() {
const [injectTokenAddress, setInjectTokenAddress] = useState("");
const [poolNames, setPoolNames] = useState({});
const [periodFinishTimestamps, setPeriodFinishTimestamps] = useState({});
const [isEditMode, setIsEditMode] = useState(false);
const [editableData, setEditableData] = useState({});
const [generatedJson, setGeneratedJson] = useState(null);

const params = useParams();
const urlNetwork = params.network;
Expand All @@ -44,6 +47,16 @@ function App() {
base: "https://developer-access-mainnet.base.org",
};

const chainIds = {
mainnet: "1",
polygon: "137",
arbitrum: "42161",
gnosis: "100",
zkevm: "1101",
avalanche: "43114",
base: "8453",
};

const [provider, setProvider] = useState(new ethers.providers.JsonRpcProvider(networkChoice.mainnet));
const [contract, setContract] = useState(new ethers.Contract(contractAddress, InjectorABI, provider));

Expand Down Expand Up @@ -131,9 +144,77 @@ function App() {
setContractAddress(address);
setProvider(newProvider);
setContract(newContract);

setGeneratedJson(null);
setEditableData({});
}
};

function updateEditableData(address, field, value) {
setEditableData((prevData) => ({
...prevData,
[address]: {
...prevData[address],
[field]: value,
},
}));
}

function generateJsonOutput() {
const gaugeAddresses = Object.keys(editableData);
const amountsPerPeriod = gaugeAddresses.map((address) => {
return convertToBaseUnit(editableData[address].amountPerPeriod, injectTokenAddress);
});
const maxPeriods = gaugeAddresses.map((address) => editableData[address].maxPeriods);
const currentChainId = chainIds[selectedNetwork];

const jsonData = {
version: "1.0",
chainId: currentChainId,
createdAt: Date.now(),
meta: {
name: "Transactions Batch",
description: "Child Chain Injector Program Load",
txBuilderVersion: "1.16.3",
},
transactions: [
{
to: contractAddress,
value: "0",
data: null,
contractMethod: {
inputs: [
{
name: "gaugeAddresses",
type: "address[]",
internalType: "address[]",
},
{
name: "amountsPerPeriod",
type: "uint256[]",
internalType: "uint256[]",
},
{
name: "maxPeriods",
type: "uint8[]",
internalType: "uint8[]",
},
],
name: "setRecipientList",
payable: false,
},
contractInputsValues: {
gaugeAddresses: gaugeAddresses,
amountsPerPeriod: amountsPerPeriod,
maxPeriods: maxPeriods,
},
},
],
};

setGeneratedJson(JSON.stringify(jsonData, null, 2));
}

useEffect(() => {
if (urlNetwork && urlAddress) {
const selectionValue = `${urlNetwork}-${urlAddress}`;
Expand Down Expand Up @@ -174,6 +255,14 @@ function App() {
// eslint-disable-next-line
}, [contractAddress, selectedNetwork, injectTokenAddress]);

useEffect(() => {
if (!isEditMode && Object.keys(editableData).length > 0) {
generateJsonOutput();
}

// eslint-disable-next-line
}, [isEditMode, editableData]);

function formatTokenAmount(amount, tokenAddress) {
if (amount === null || amount === undefined) return "Loading...";

Expand All @@ -183,6 +272,22 @@ function App() {
return ethers.utils.formatUnits(formattedAmount, decimals);
}

function convertToBaseUnit(amount, tokenAddress) {
const decimals = tokenDecimals[tokenAddress.toLowerCase()] || 18;
return ethers.utils.parseUnits(amount.toString(), decimals).toString();
}

function downloadJsonFile() {
const blob = new Blob([generatedJson], { type: "application/json" });
const href = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = href;
link.download = "data.json"; // or any other filename you wish
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

const totalProduct = addresses.reduce((sum, address) => {
const amountPerPeriod = accountInfo[address]?.amountPerPeriod || 0;
const maxPeriods = accountInfo[address]?.maxPeriods || 0;
Expand Down Expand Up @@ -217,6 +322,8 @@ function App() {
</option>
))}
</select>
{"\u00A0\u00A0\u00A0"}
<button onClick={() => setIsEditMode(!isEditMode)}>{isEditMode ? "Save" : "Edit"}</button>
</div>
<h1>Watch List Results</h1>
</header>
Expand All @@ -237,39 +344,57 @@ function App() {
</tr>
</thead>
<tbody>
{addresses.map((address, index) => (
<tr key={index}>
<td>{address}</td>
<td>{poolNames[address] || "Loading..."}</td>
<td>{formatTokenAmount(accountInfo[address]?.amountPerPeriod, injectTokenAddress)}</td>
<td>{accountInfo[address]?.isActive.toString() || "Loading..."}</td>
<td>{accountInfo[address]?.maxPeriods.toString() || "Loading..."}</td>
<td>{accountInfo[address]?.periodNumber.toString() || "Loading..."}</td>
<td>
{accountInfo[address]?.lastInjectionTimeStamp > 0
? new Date(accountInfo[address]?.lastInjectionTimeStamp * 1000).toLocaleDateString()
: periodFinishTimestamps[address]
? new Date(periodFinishTimestamps[address] * 1000).toLocaleDateString()
: "N/A"}
</td>
<td>
{accountInfo[address]?.isActive && accountInfo[address]?.periodNumber < accountInfo[address]?.maxPeriods
? new Date(
(accountInfo[address]?.lastInjectionTimeStamp > 0 ? accountInfo[address]?.lastInjectionTimeStamp : periodFinishTimestamps[address]) * 1000 +
7 * 24 * 3600 * 1000
).toLocaleDateString()
: "N/A"}
</td>
<td>
{accountInfo[address]?.isActive && accountInfo[address]?.periodNumber < accountInfo[address]?.maxPeriods
? new Date(
(accountInfo[address]?.lastInjectionTimeStamp > 0 ? accountInfo[address]?.lastInjectionTimeStamp : periodFinishTimestamps[address]) * 1000 +
7 * (accountInfo[address]?.maxPeriods - accountInfo[address]?.periodNumber + 1) * 24 * 3600 * 1000
).toLocaleDateString()
: "N/A"}
</td>
</tr>
))}
{addresses.map((address, index) => {
const currentData = editableData[address] || {
amountPerPeriod: formatTokenAmount(accountInfo[address]?.amountPerPeriod, injectTokenAddress),
maxPeriods: accountInfo[address]?.maxPeriods.toString(),
};
return (
<tr key={index}>
<td>{address}</td>
<td>{poolNames[address] || "Loading..."}</td>
<td>
{isEditMode ? (
<input type="number" value={currentData.amountPerPeriod} onChange={(e) => updateEditableData(address, "amountPerPeriod", e.target.value)} />
) : (
currentData.amountPerPeriod || "Loading..."
)}
</td>
<td>{accountInfo[address]?.isActive.toString() || "Loading..."}</td>
<td>
{isEditMode ? (
<input type="number" value={currentData.maxPeriods} onChange={(e) => updateEditableData(address, "maxPeriods", e.target.value)} />
) : (
currentData.maxPeriods || "Loading..."
)}
</td>
<td>{accountInfo[address]?.periodNumber.toString() || "Loading..."}</td>
<td>
{accountInfo[address]?.lastInjectionTimeStamp > 0
? new Date(accountInfo[address]?.lastInjectionTimeStamp * 1000).toLocaleDateString()
: periodFinishTimestamps[address]
? new Date(periodFinishTimestamps[address] * 1000).toLocaleDateString()
: "N/A"}
</td>
<td>
{accountInfo[address]?.isActive && accountInfo[address]?.periodNumber < accountInfo[address]?.maxPeriods
? new Date(
(accountInfo[address]?.lastInjectionTimeStamp > 0 ? accountInfo[address]?.lastInjectionTimeStamp : periodFinishTimestamps[address]) * 1000 +
7 * 24 * 3600 * 1000
).toLocaleDateString()
: "N/A"}
</td>
<td>
{accountInfo[address]?.isActive && accountInfo[address]?.periodNumber < accountInfo[address]?.maxPeriods
? new Date(
(accountInfo[address]?.lastInjectionTimeStamp > 0 ? accountInfo[address]?.lastInjectionTimeStamp : periodFinishTimestamps[address]) * 1000 +
7 * (accountInfo[address]?.maxPeriods - accountInfo[address]?.periodNumber + 1) * 24 * 3600 * 1000
).toLocaleDateString()
: "N/A"}
</td>
</tr>
);
})}
</tbody>
</table>
) : (
Expand Down Expand Up @@ -298,7 +423,26 @@ function App() {
https://injector-schedule.web.app/{selectedNetwork}/{contractAddress}
</a>
</p>
<button onClick={downloadJsonFile} disabled={!generatedJson}>
Download JSON
</button>
<br />
{generatedJson && <pre>{generatedJson}</pre>}
<br />
<br />
</main>
<footer className="footer">
created by&nbsp;
<a href="https://twitter.com/The_Krake" target="_blank" rel="noopener noreferrer">
@ZeKraken
</a>
&nbsp;| open source: &nbsp;
<a href="https://github.com/zekraken-bot/injector_schedule" target="_blank" rel="noopener noreferrer">
github
</a>
&nbsp;|&nbsp;Disclaimer: use at your discretion, I take no responsiblity for results
</footer>
<br />
</div>
);
}
Expand Down

0 comments on commit d245de4

Please sign in to comment.