Skip to content

Commit

Permalink
Add interactions involving filters & subscriptions
Browse files Browse the repository at this point in the history 
We have a PR in the extension repo which touches code around RPC
middleware for filter- and subscription-based RPC methods, and we want
to be able to test these methods manually to ensure they are still
working as designed. In order to accomplish this, I've added new cards
which allow the user to:

* Create and remove a filter.
  * Currently there is support for creating a generic log filter via
    `eth_newFilter` as well as a block filter via `eth_newBlockFilter`.
    Once a filter is created, `eth_getFilterChanges` is then polled
    every 2 seconds. Filters are removed via `eth_uninstallFilter`.
  * I tried to add a button which created a pending transaction filter
    via `eth_newPendingTransactionFilter`, but it appears that
    `eth-json-rpc-filters` has a
    [bug](MetaMask/eth-json-rpc-filters#81)
    which prohibits this RPC method from working fully.
* Start and stop a subscription.
  * As with filters, currently there is support for subscribing to new
    blocks via the `newHeads` parameter to `eth_subscribe` as well as
    new logs via the `logs` parameter. Subscriptions are stopped via
    `eth_unsubscribe`.
  * I also tried to add a button for subscribing to pending
    transactions, but [this doesn't seem to be supported outright by
    `eth-json-rpc-filters`](https://github.com/MetaMask/eth-json-rpc-filters/blob/5cbea3037b0655aa2c188d85b8ffe559a263dc0d/subscriptionManager.js#L50).
  • Loading branch information
@mcmire
mcmire committed Dec 16, 2022
1 parent 568ed16 commit bec2358
Show file tree
Hide file tree
Showing 3 changed files with 436 additions and 20 deletions.
13 changes: 13 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,19 @@ section {
margin-bottom: 20px;
}

.multiline-results {
height: 300px;
overflow-x: auto;
border: 1px solid #ced4da;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
}

.multiline-results__placeholder {
font-style: italic;
color: gray;
}

/* Logo & Header */

header {
Expand Down
163 changes: 155 additions & 8 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@ <h4 class="card-title">
Approve
</button>
</div>

<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block mb-3"
Expand Down Expand Up @@ -685,8 +685,10 @@ <h4>
</div>
</section>
<section>
<div class="row d-flex justify-content-center">
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="row">
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Expand All @@ -709,11 +711,9 @@ <h4 class="card-title">
</div>
</div>
</div>
</div>
</section>
<section>
<div class="row d-flex justify-content-center">
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Expand Down Expand Up @@ -793,6 +793,153 @@ <h4 class="card-title">
</div>
</div>
</section>
<section>
<div class="row">
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Log filters
</h4>

<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="createLogFilterButton"
disabled
>
Create log filter
</button>
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="removeLogFilterButton"
disabled
>
Remove log filter
</button>
<pre
id="logFilterChangesBox"
class="multiline-results"
>
(Changes for this filter will appear here as new blocks
are created, or as you interact with the chain.)
</pre>
</div>
</div>
</div>
</div>
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Block filters
</h4>

<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="createBlockFilterButton"
disabled
>
Create block filter
</button>
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="removeBlockFilterButton"
disabled
>
Remove block filter
</button>
<pre
id="blockFilterChangesBox"
class="multiline-results"
>
(Changes for this filter will appear here as new blocks
are created.)
</pre>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Subscriptions (new heads)
</h4>

<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="startNewHeadsSubscriptionButton"
disabled
>
Start subscription
</button>
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="stopNewHeadsSubscriptionButton"
disabled
>
Stop subscription
</button>
<pre
id="newHeadsSubscriptionResultsBox"
class="multiline-results"
>
(Information on new blocks will appear here as they are created.)
</pre>
</div>
</div>
</div>
</div>
<div
class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
>
<div class="card">
<div class="card-body">
<h4 class="card-title">
Subscriptions (logs)
</h4>

<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="startLogsSubscriptionButton"
disabled
>
Start subscription
</button>
<button
class="btn btn-primary btn-lg btn-block mb-3"
id="stopLogsSubscriptionButton"
disabled
>
Stop subscription
</button>
<pre
id="logsSubscriptionResultsBox"
class="multiline-results"
>
(Information on new blocks will appear here
as they are created.)
</pre>
</div>
</div>
</div>
</div>
</div>
</section>
</main>

<script src="bundle.js" defer></script>
Expand Down
Loading

0 comments on commit bec2358

Please sign in to comment.