Skip to content

Commit

Permalink
Showing abis and indexed params
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeremy-then
jeremy-then committed Feb 19, 2024
1 parent 4724b82 commit ebbded1
Showing 1 changed file with 156 additions and 22 deletions.
178 changes: 156 additions & 22 deletions tools/PrecompiledAbis.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,33 @@
cursor: pointer;
}

.show-abi-button {
width: 100px;
}

.fixed-top-right {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}

.alert-sm {
padding: 0.5rem 1rem;
font-size: 80%;
}

.close {
background-color: transparent;
border: none;
font-size: 1.5rem;
}

.close:hover {
color: #000;
opacity: 0.75;
}

</style>

<body>
Expand Down Expand Up @@ -70,15 +97,21 @@ <h5 class='text-center'>Simple html page to get bridge methods selectors and eve
</div>
</div>

<div>
Selected abis GitHub url: <a href="" id="selectedAbisUrl" target="_blank"></a>
</div>

<div id="methodsContainer">
<h3>Methods</h3>
<table id="methodsTable" class="table table-bordered">
<thead>
<tr>
<th>Method Name</th>
<th>Method Selector</th>
<th>Peg Type</th>
<th>Method Signature</th>
<th>Outputs</th>
<th>Abi</th>
<th>Peg Type</th>
</tr>
</thead>
<tbody id="methodsTableBody"></tbody>
Expand All @@ -94,6 +127,7 @@ <h3>Events</h3>
<th>Event Topic</th>
<th>Peg Type</th>
<th>Event Signature</th>
<th>Abi</th>
</tr>
</thead>
<tbody id="eventsTableBody"></tbody>
Expand All @@ -102,6 +136,24 @@ <h3>Events</h3>

</div>

<div class="modal fade" id="abiModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Abi</h5>
<button type="button" onclick="closeAbiModal(event)" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="abiModalBody">
</div>
<div class="modal-footer">
<button type="button" onclick="copyAbiJson(event)" class="btn btn-secondary" data-dismiss="modal">Copy Abi</button>
<button type="button" onclick="closeAbiModal(event)" class="btn btn-primary">Close</button>
</div>
</div>
</div>

<script>

const orchidAbisUrl = 'https://raw.githubusercontent.com/rsksmart/precompiled-abis/1.0.0-ORCHID/abis/bridge.json';
Expand Down Expand Up @@ -209,9 +261,18 @@ <h3>Events</h3>
let selectedAbis = null;
let selectedAbiForkInfo = abisForkInfoMap.arrowhead;

selectedAbisUrl.href = selectedAbiForkInfo.url;
selectedAbisUrl.textContent = selectedAbiForkInfo.url;

const testnetRskUrl = 'https://public-node.testnet.rsk.co/';
let web3;

const defaultActionButtonOptions = {
name: 'Action Button',
onClick: () => {},
extraClasses: '',
};

const getBridgeAbi = async (forkKey) => {
const abiUrl = abisForkInfoMap[forkKey].url;
const response = await fetch(abiUrl);
Expand All @@ -229,6 +290,8 @@ <h3>Events</h3>
mapSignaturesAndSelectors(bridgeAbi);
selectedAbis = bridgeAbi;
abiCache[forkKey] = bridgeAbi;
selectedAbisUrl.href = forkInfo.url;
selectedAbisUrl.textContent = forkInfo.url;
};

const getBridgeEventTopic = (eventAbi) => {
Expand Down Expand Up @@ -282,6 +345,18 @@ <h3>Events</h3>
return signature;
};

const closeAbiModal = (event) => {
abiModal.style.display = 'none';
abiModal.classList.remove('show');
document.body.classList.remove('modal-open');
abiModalBody.innerHTML = '';
};

const copyAbiJson = event => {
navigator.clipboard.writeText(abiModalBody.innerText);
showAlert('Abi copied to clipboard', 'success');
};

const getCopyIconElement = (querySelectorOfElementToCopyValueFrom) => {
const copyIconElement = document.createElement('i');
copyIconElement.setAttribute('class', 'bi bi-clipboard');
Expand All @@ -291,56 +366,94 @@ <h3>Events</h3>
const displayElement = event.target.parentNode.querySelector(querySelectorOfElementToCopyValueFrom);
const text = displayElement.innerText;
navigator.clipboard.writeText(text);
showAlert('Copied to clipboard', 'success');
};
return copyIconElement;
};

const getDisplayElement = () => {
const displayElement = document.createElement('span');
displayElement.setAttribute('class', 'mx-2 display form-control');
displayElement.setAttribute('disabled', 'true');
return displayElement;
const showAbisModal = (event) => {
abiModal.style.display = 'block';
abiModal.classList.add('show');
document.body.classList.add('modal-open');
};

const getActionButton = (name) => {
const getActionButton = (options = defaultActionButtonOptions) => {
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.setAttribute('class', 'btn btn-outline-primary mr-2 bridge-button');
button.textContent = name;
button.onclick = handleClick;
button.setAttribute('class', `btn btn-outline-primary mr-2 bridge-button ${options.extraClasses}`);
button.textContent = options.name;
button.onclick = options.onClick;
return button;
};

const getDisplaySpan = (text) => {
const span = document.createElement('span');
span.setAttribute('class', 'mx-2 display');
span.innerText = text;
span.innerHTML = text;
return span;
};

const getSpanForEventSignatureHighlightingIndexedParams = (abi) => {
const inputTypes = abi.inputs
.map(input => {
if(input.indexed) {
return `<span title="indexed" style="background-color: #cdf7d6; ">${input.type}</span>`;
}
return input.type;
});
const signature = `${abi.name}(${inputTypes.join(',')})`;
return getDisplaySpan(signature);
};

const showAbiInModal = (abi) => {
const formattedJson = JSON.stringify(abi, null, 2);
const escapedJson = formattedJson.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
const htmlFormattedJson = `<pre><code>${escapedJson}</code></pre>`;
abiModalBody.innerHTML = htmlFormattedJson;
abiModal.style.display = 'block';
abiModal.classList.add('show');
document.body.classList.add('modal-open');
};

const fillTable = (abis, tableId) => {

const tableBody = document.getElementById(tableId);

abis.forEach(abi => {

const row = tableBody.insertRow();
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
const cell4 = row.insertCell(3);

const classSelector = '.display';
const nameCell = row.insertCell(0);
nameCell.appendChild(getDisplaySpan(abi.name));

cell1.appendChild(getDisplaySpan(abi.name));
const methodSelectorCell = row.insertCell(row.children.length);
methodSelectorCell.appendChild(getDisplaySpan(abi.selector));
const classSelector = '.display';
methodSelectorCell.appendChild(getCopyIconElement(classSelector));

const methodSignatureCell = row.insertCell(row.children.length);

cell2.appendChild(getDisplaySpan(abi.selector));
cell2.appendChild(getCopyIconElement(classSelector));
if(abi.type === 'event') {
methodSignatureCell.appendChild(getSpanForEventSignatureHighlightingIndexedParams(abi));
} else {
methodSignatureCell.appendChild(getDisplaySpan(abi.signature));
const methodOutputsCell = row.insertCell(row.children.length);
const output = abi.outputs.length > 0 ? abi.outputs[0].type : '';
methodOutputsCell.appendChild(getDisplaySpan(output));
}
methodSignatureCell.appendChild(getCopyIconElement(classSelector));

cell3.appendChild(getDisplaySpan(abi.pegType));
const showAbiButtonCell = row.insertCell(row.children.length);
const showAbiButtonOptions = {
name: 'Show Abi',
onClick: () => showAbiInModal(abi),
extraClasses: 'show-abi-button'
};
const showAbiButton = getActionButton(showAbiButtonOptions);
showAbiButtonCell.appendChild(showAbiButton);

cell4.appendChild(getDisplaySpan(abi.signature));
cell4.appendChild(getCopyIconElement(classSelector));
const pegTypeCell = row.insertCell(row.children.length);
pegTypeCell.appendChild(getDisplaySpan(abi.pegType));

});
};
Expand Down Expand Up @@ -389,6 +502,27 @@ <h3>Events</h3>
fillMethodsTable();
};

const closeAlert = (event) => {
event.target.parentNode.parentNode.remove();
};

const showAlert = (message, alertType) => {
const alertElement = document.createElement('div');
alertElement.classList.add('alert', 'alert-dismissible', 'fade', 'show', 'fixed-top-right');
alertElement.classList.add(`alert-${alertType}`, 'alert-sm');
alertElement.setAttribute('role', 'alert');
alertElement.innerHTML = `
${message}
<button onclick="closeAlert(event)" type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
`;
document.body.appendChild(alertElement);
setTimeout(() => {
alertElement.remove();
}, 5000);
};

setup().then(() => {
console.log('Loaded.');
})
Expand Down

0 comments on commit ebbded1

Please sign in to comment.