docs: fixes and websockets guide (#361)

* docs: fixes and websockets guide

* minor fixes
This commit is contained in:
Federico Kunze 2020-07-06 18:56:02 +02:00 committed by GitHub
parent 20e9b2ede3
commit 5768706917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 520 additions and 465 deletions

View File

@ -11,7 +11,7 @@
.h2 Getting Started .h2 Getting Started
.p__alt Read all about Ethermint or dive straight into the code with guides. .p__alt Read all about Ethermint or dive straight into the code with guides.
.features .features
router-link(to="/quick-start").features__item.features__item__light router-link(to="/quickstart").features__item.features__item__light
.features__item__image .features__item__image
icon-rocket.features__item__image__img icon-rocket.features__item__image__img
.features__item__text .features__item__text
@ -49,391 +49,464 @@
</template> </template>
<style lang="stylus" scoped> <style lang="stylus" scoped>
/deep/ /deep/ {
.container h1 .container h1 {
margin-bottom 1.5rem margin-bottom: 1.5rem;
}
.search }
display flex
align-items center .search {
color rgba(22, 25, 49, 0.65) display: flex;
padding-top 1rem align-items: center;
width calc(var(--aside-width) - 6rem) color: rgba(22, 25, 49, 0.65);
cursor pointer padding-top: 1rem;
transition color .15s ease-out width: calc(var(--aside-width) - 6rem);
cursor: pointer;
&:hover transition: color 0.15s ease-out;
color var(--color-text, black)
&:hover {
&__container color: var(--color-text, black);
display flex }
justify-content flex-end
margin-top 1rem &__container {
margin-bottom 1rem display: flex;
justify-content: flex-end;
&__icon margin-top: 1rem;
width 1.5rem margin-bottom: 1rem;
height 1.5rem }
fill #aaa
margin-right 0.5rem &__icon {
transition fill .15s ease-out width: 1.5rem;
height: 1.5rem;
&:hover &__icon fill: #aaa;
fill var(--color-text, black) margin-right: 0.5rem;
transition: fill 0.15s ease-out;
.intro }
width 100%
max-width 800px &:hover &__icon {
fill: var(--color-text, black);
.h1 }
font-size 3rem }
font-weight 700
margin-bottom 1.5rem .intro {
line-height 3.25rem width: 100%;
letter-spacing -0.02em max-width: 800px;
padding-top 2.5rem }
.h2 .h1 {
font-size 2rem font-size: 3rem;
font-weight 700 font-weight: 700;
margin-top 4.5rem margin-bottom: 1.5rem;
margin-bottom 1rem line-height: 3.25rem;
line-height 2.25rem letter-spacing: -0.02em;
letter-spacing -0.01em padding-top: 2.5rem;
}
.p
font-size 1.5rem .h2 {
line-height 2.25rem font-size: 2rem;
font-weight: 700;
&__alt margin-top: 4.5rem;
margin-top 0.75rem margin-bottom: 1rem;
margin-bottom 2rem line-height: 2.25rem;
font-size 1.25rem letter-spacing: -0.01em;
line-height 1.75rem }
.features .p {
display grid font-size: 1.5rem;
grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) line-height: 2.25rem;
gap 1.5rem
margin-bottom 5rem &__alt {
margin-top 2.25rem margin-top: 0.75rem;
margin-bottom: 2rem;
&__item font-size: 1.25rem;
cursor pointer line-height: 1.75rem;
display grid }
grid-auto-flow column }
grid-template-columns minmax(6rem, 1fr) 2fr
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05) .features {
position relative display: grid;
border-radius .5rem grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
background linear-gradient(302.07deg, #FFFFFF 48.96%, #EBEDFF 100%) gap: 1.5rem;
outline none margin-bottom: 5rem;
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out margin-top: 2.25rem;
&:hover:not(:active), &__item {
&:focus cursor: pointer;
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05) display: grid;
transform translateY(-2px) grid-auto-flow: column;
transition-duration 0.1s grid-template-columns: minmax(6rem, 1fr) 2fr;
box-shadow: 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05);
&:active position: relative;
opacity 0.7 border-radius: 0.5rem;
transition-duration 0s background: linear-gradient(302.07deg, #FFFFFF 48.96%, #EBEDFF 100%);
outline: none;
&__dark transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out;
background linear-gradient(112.22deg, #161831 0%, #2E3148 100%)
&:hover:not(:active), &:focus {
&__dark &__text__h2 box-shadow: 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05);
color white transform: translateY(-2px);
opacity .5 transition-duration: 0.1s;
}
&__dark &__text__h1
color white &:active {
opacity: 0.7;
&__dark &__text__p transition-duration: 0s;
color white }
opacity .8
&__dark {
&__icon background: linear-gradient(112.22deg, #161831 0%, #2E3148 100%);
position absolute }
top 0
right 0 &__dark &__text__h2 {
padding .75rem color: white;
width 1rem opacity: 0.5;
height 1rem }
fill white
opacity .35 &__dark &__text__h1 {
color: white;
&:hover &__icon }
opacity .6
&__dark &__text__p {
&__image color: white;
display flex opacity: 0.8;
align-items center }
justify-content center
align-self center &__icon {
max-height 10rem position: absolute;
transition transform 0.2s ease-out top: 0;
right: 0;
&__img padding: 0.75rem;
max-height 14rem width: 1rem;
max-width 10rem height: 1rem;
min-width 8rem fill: white;
opacity: 0.35;
&:hover:not(:active) &__image }
transform translateY(-0.25rem) scale(1.02)
transition-duration 0.1s &:hover &__icon {
opacity: 0.6;
&__text }
padding 1.75rem 2rem 2rem
display flex &__image {
flex-direction column display: flex;
align-items: center;
&__h2 justify-content: center;
font-size .75rem align-self: center;
letter-spacing 0.2em max-height: 10rem;
text-transform uppercase transition: transform 0.2s ease-out;
color var(--color-text-dim, inherit)
margin-bottom .25rem &__img {
max-height: 14rem;
&__h1 max-width: 10rem;
font-size 1.25rem min-width: 8rem;
color var(--color-text, black) }
line-height 1.75rem }
letter-spacing .01em
font-weight 600 &:hover:not(:active) &__image {
margin-top .25rem transform: translateY(-0.25rem) scale(1.02);
margin-bottom .75rem transition-duration: 0.1s;
}
&__p
color var(--color-text-dim, inherit) &__text {
font-size .875rem padding: 1.75rem 2rem 2rem;
letter-spacing 0.03em display: flex;
line-height 1.25rem flex-direction: column;
margin-bottom 1.5rem
&__h2 {
.sections font-size: 0.75rem;
display grid letter-spacing: 0.2em;
margin-top 3rem text-transform: uppercase;
margin-bottom 5rem color: var(--color-text-dim, inherit);
grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) margin-bottom: 0.25rem;
gap 1.5rem }
&__item &__h1 {
position relative font-size: 1.25rem;
color initial color: var(--color-text, black);
border-radius 0.5rem line-height: 1.75rem;
padding 1.5rem 1.5rem 1.5rem 5.5rem letter-spacing: 0.01em;
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05) font-weight: 600;
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out margin-top: 0.25rem;
margin-bottom: 0.75rem;
&:hover:not(:active) }
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05)
transform translateY(-2px) &__p {
transition-duration 0.1s color: var(--color-text-dim, inherit);
font-size: 0.875rem;
&:active letter-spacing: 0.03em;
transition-duration 0s line-height: 1.25rem;
opacity 0.7 margin-bottom: 1.5rem;
}
&__icon }
position absolute }
top 1rem }
left 1.25rem
font-size 1.5rem .sections {
display flex display: grid;
align-items center margin-top: 3rem;
justify-content center margin-bottom: 5rem;
width 3rem grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
height 3rem gap: 1.5rem;
&__title &__item {
font-weight 600 position: relative;
margin-bottom 0.5rem color: initial;
border-radius: 0.5rem;
&__desc padding: 1.5rem 1.5rem 1.5rem 5.5rem;
font-size 0.875rem box-shadow: 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05);
line-height 1.25rem transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out;
color var(--color-text-dim, inherit)
&:hover:not(:active) {
.stack box-shadow: 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05);
display grid transform: translateY(-2px);
gap 1.5rem transition-duration: 0.1s;
grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) }
margin-bottom 4rem
&:active {
&__item transition-duration: 0s;
position relative opacity: 0.7;
min-height 120px }
display flex
align-items center &__icon {
padding 2rem 1.25rem position: absolute;
border-radius 0.5rem top: 1rem;
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05) left: 1.25rem;
color var(--color-text, black) font-size: 1.5rem;
background white display: flex;
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out align-items: center;
justify-content: center;
&:hover:not(:active) width: 3rem;
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05) height: 3rem;
transform translateY(-2px) }
transition-duration 0.1s
&__title {
&:active font-weight: 600;
opacity 0.7 margin-bottom: 0.5rem;
transition-duration 0s }
&__icon &__desc {
position absolute font-size: 0.875rem;
top 0 line-height: 1.25rem;
right 0 color: var(--color-text-dim, inherit);
padding 1rem }
opacity .35 }
}
&:hover &__icon
opacity .6 .stack {
display: grid;
&__h1 gap: 1.5rem;
font-size 1.25rem grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
line-height 1.5rem margin-bottom: 4rem;
margin-bottom 0.75rem
font-weight 600 &__item {
position: relative;
&__p min-height: 120px;
font-size 0.875rem display: flex;
color rgba(22, 25, 49, 0.65) align-items: center;
line-height 1.25rem padding: 2rem 1.25rem;
border-radius: 0.5rem;
&__wrapper box-shadow: 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05);
display grid color: var(--color-text, black);
grid-auto-flow column background: white;
grid-template-columns 30% 1fr transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out;
gap 1.25rem
&:hover:not(:active) {
&:before box-shadow: 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05);
position absolute transform: translateY(-2px);
top 0 transition-duration: 0.1s;
left 0 }
content ''
width 50% &:active {
height 100% opacity: 0.7;
background linear-gradient(to right, var(--accent), rgba(255, 255, 255, 0)) transition-duration: 0s;
border-radius 0.5rem }
opacity 0.1
&__icon {
&__logo position: absolute;
height 72px top: 0;
width auto right: 0;
padding: 1rem;
@media screen and (max-width: 1136px) opacity: 0.35;
.p }
font-size 1.25rem
line-height 1.75rem &:hover &__icon {
opacity: 0.6;
@media screen and (max-width: 832px) }
.h1
padding-top 3.5rem &__h1 {
font-size: 1.25rem;
.search__container line-height: 1.5rem;
display none margin-bottom: 0.75rem;
font-weight: 600;
@media screen and (max-width: 752px) }
.search
display none &__p {
font-size: 0.875rem;
@media screen and (max-width: 500px) color: rgba(22, 25, 49, 0.65);
.h1 line-height: 1.25rem;
font-size 2rem }
line-height 2.25rem
margin-bottom 1rem &__wrapper {
display: grid;
.h2 grid-auto-flow: column;
font-size 1.5rem grid-template-columns: 30% 1fr;
line-height 2rem gap: 1.25rem;
margin-top 3rem }
margin-bottom 0.75rem
&:before {
.p__alt position: absolute;
font-size 1rem top: 0;
line-height 1.5rem left: 0;
content: '';
.features width: 50%;
margin-bottom 1.5rem height: 100%;
grid-template-columns repeat(auto-fit, minmax(240px, 1fr)) background: linear-gradient(to right, var(--accent), rgba(255, 255, 255, 0));
border-radius: 0.5rem;
&__item opacity: 0.1;
display block }
&:not(:active) &__logo {
box-shadow 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05) height: 72px;
width: auto;
&__image }
max-height 9rem }
padding-top 1rem }
&__text @media screen and (max-width: 1136px) {
padding 1.5rem .p {
font-size: 1.25rem;
.sections line-height: 1.75rem;
gap 0 }
margin-bottom 0 }
margin-top 2rem
grid-template-columns repeat(auto-fit, minmax(240px, 1fr)) @media screen and (max-width: 832px) {
margin-left -1rem .h1 {
margin-right -1rem padding-top: 3.5rem;
}
&__item
margin-bottom 0 .search__container {
padding 1.25rem 1rem 0 5.5rem display: none;
}
&, }
&:hover:not(:active)
box-shadow none @media screen and (max-width: 752px) {
.search {
&__icon display: none;
top 1rem }
left 1.25rem }
&__wrapper @media screen and (max-width: 500px) {
padding-bottom 1.25rem .h1 {
border-bottom 1px solid rgba(140, 145, 177, 0.32) font-size: 2rem;
line-height: 2.25rem;
&:last-child .sections__item__wrapper margin-bottom: 1rem;
border-bottom none }
&__wrapper .h2 {
position relative font-size: 1.5rem;
padding 0.1px 1rem 1rem line-height: 2rem;
background white margin-top: 3rem;
border-radius 0.5rem margin-bottom: 0.75rem;
}
&:before
position absolute .p__alt {
content '' font-size: 1rem;
top 0 line-height: 1.5rem;
left 0 }
right 0
bottom 0 .features {
border-radius 0.5rem margin-bottom: 1.5rem;
box-shadow 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05) grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
.stack &__item {
gap 0.75rem display: block;
grid-template-columns repeat(auto-fill, minmax(240px, 1fr))
margin-bottom 3rem &:not(:active) {
box-shadow: 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05);
&__item }
padding 1.25rem
&__image {
&:not(:active) max-height: 9rem;
box-shadow 0px 24px 40px rgba(22, 25, 49, 0.1), 0px 10px 16px rgba(22, 25, 49, 0.08), 0px 1px 0px rgba(22, 25, 49, 0.05) padding-top: 1rem;
}
&__wrapper
grid-template-columns 3rem 1fr &__text {
padding: 1.5rem;
&__h1 }
font-size inherit }
line-height inherit }
margin-bottom 0.5rem
.sections {
gap: 0;
margin-bottom: 0;
margin-top: 2rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-left: -1rem;
margin-right: -1rem;
&__item {
margin-bottom: 0;
padding: 1.25rem 1rem 0 5.5rem;
&, &:hover:not(:active) {
box-shadow: none;
}
&__icon {
top: 1rem;
left: 1.25rem;
}
&__wrapper {
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(140, 145, 177, 0.32);
}
&:last-child .sections__item__wrapper {
border-bottom: none;
}
}
&__wrapper {
position: relative;
padding: 0.1px 1rem 1rem;
background: white;
border-radius: 0.5rem;
&:before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.5rem;
box-shadow: 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05);
}
}
}
.stack {
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
margin-bottom: 3rem;
&__item {
padding: 1.25rem;
&:not(:active) {
box-shadow: 0px 24px 40px rgba(22, 25, 49, 0.1), 0px 10px 16px rgba(22, 25, 49, 0.08), 0px 1px 0px rgba(22, 25, 49, 0.05);
}
&__wrapper {
grid-template-columns: 3rem 1fr;
}
&__h1 {
font-size: inherit;
line-height: inherit;
margin-bottom: 0.5rem;
}
}
}
}
</style> </style>

View File

@ -9,7 +9,7 @@ parent:
This repository contains reference documentation on the basic concepts of Ethermint. This repository contains reference documentation on the basic concepts of Ethermint.
1. [Accounts](./accounts.md) 1. [Accounts](./accounts.md)
2. [Lifecycle of a transaction](./tx-lifecycle.md) 2. [Gas and Fees](./gas.md)
3. [Gas and Fees](./gas.md) 3. [Lifecycle of a transaction](./transactions.md)
After reading the basics, head on to the [Core Reference](../core/README.md) for more advanced material. After reading the basics, head on to the [Core Reference](../core/README.md) for more advanced material.

View File

@ -6,10 +6,6 @@ order: 1
This document describes the in-built accounts system of Ethermint. {synopsis} This document describes the in-built accounts system of Ethermint. {synopsis}
## Pre-requisite Readings
- [Anatomy of an SDK Application](./app-anatomy.md) {prereq}
## Cosmos SDK Accounts ## Cosmos SDK Accounts
<!-- TODO: --> <!-- TODO: -->

View File

@ -26,4 +26,4 @@ The `AnteHandler` is a special `handler` that is run for every transaction durin
## Next {hide} ## Next {hide}
Learn more about the [Lifecycle of a transaction](./tx-lifecycle.md) {hide} Learn about the [encoding](./../core/encoding.md) formats used on Ethermint {hide}

View File

@ -42,4 +42,4 @@ duplicated in the embedding
## Next {hide} ## Next {hide}
Learn about the [encoding](./../core/encoding.md) formats used on Ethermint {hide} Learn about how [gas](./gas.md) is used on Ethermint {hide}

View File

@ -8,7 +8,7 @@ The `codec` is used everywhere in the Cosmos SDK to encode and decode structs an
## Pre-requisite Readings ## Pre-requisite Readings
- [Anatomy of an SDK application](../basics/app-anatomy.md) {prereq} - [Cosmos SDK Encoding](https://docs.cosmos.network/master/core/encoding.html) {prereq}
## Encoding Formats ## Encoding Formats

View File

@ -8,71 +8,13 @@ order: 2
## Pre-requisite Readings ## Pre-requisite Readings
- [Anatomy of an SDK application](../basics/app-anatomy.md) {prereq} - [Cosmos SDK Events](https://docs.cosmos.network/master/core/events.html) {prereq}
- [Ethereum's PubSub JSON-RPC API](https://geth.ethereum.org/docs/rpc/pubsub) {prereq}
## Events
Events are implemented in the Cosmos SDK as an alias of the ABCI `Event` type and
take the form of: `{eventType}.{eventAttribute}={value}`.
+++ https://github.com/tendermint/tendermint/blob/bc572217c07b90ad9cee851f193aaa8e9557cbc7/abci/types/types.pb.go#L2187-L2193
Events contain:
- A `type`, which is meant to categorize an event at a high-level (e.g. by module or action).
- A list of `attributes`, which are key-value pairs that give more information about
the categorized `event`.
+++ https://github.com/cosmos/cosmos-sdk/blob/7d7821b9af132b0f6131640195326aa02b6751db/types/events.go#L51-L56
Events are returned to the underlying consensus engine in the response of the following ABCI messages:
- [`BeginBlock`](./baseapp.md#beginblock)
- [`EndBlock`](./baseapp.md#endblock)
- [`CheckTx`](./baseapp.md#checktx)
- [`DeliverTx`](./baseapp.md#delivertx)
Events, the `type` and `attributes`, are defined on a **per-module basis** in the module's
`/types/events.go` file, and triggered from the module's [`handler`](../building-modules/handler.md)
via the [`EventManager`](#eventmanager). In addition, each module documents its events under
`spec/xx_events.md`.
## EventManager
In Cosmos SDK applications, events are managed by an abstraction called the `EventManager`.
Internally, the `EventManager` tracks a list of `Events` for the entire execution flow of a
transaction or `BeginBlock`/`EndBlock`.
+++ https://github.com/cosmos/cosmos-sdk/blob/7d7821b9af132b0f6131640195326aa02b6751db/types/events.go#L16-L20
The `EventManager` comes with a set of useful methods to manage events. Among them, the one that is
used the most by module and application developers is the `EmitEvent` method, which tracks
an `event` in the `EventManager`.
+++ https://github.com/cosmos/cosmos-sdk/blob/7d7821b9af132b0f6131640195326aa02b6751db/types/events.go#L29-L31
Module developers should handle event emission via the `EventManager#EmitEvent` in each message
`Handler` and in each `BeginBlock`/`EndBlock` handler. The `EventManager` is accessed via
the [`Context`](./context.md), where event emission generally follows this pattern:
```go
ctx.EventManager().EmitEvent(
sdk.NewEvent(eventType, sdk.NewAttribute(attributeKey, attributeValue)),
)
```
Module's `handler` function should also set a new `EventManager` to the `context` to isolate emitted events per `message`:
```go
func NewHandler(keeper Keeper) sdk.Handler {
return func(ctx sdk.Context, msg sdk.Msg) (*sdk.Result, error) {
ctx = ctx.WithEventManager(sdk.NewEventManager())
switch msg := msg.(type) {
```
See the [`Handler`](../building-modules/handler.md) concept doc for a more detailed
view on how to typically implement `Events` and use the `EventManager` in modules.
## Subscribing to Events ## Subscribing to Events
### SDK and Tendermint Events
It is possible to subscribe to `Events` via Tendermint's [Websocket](https://tendermint.com/docs/app-dev/subscribing-to-events-via-websocket.html#subscribing-to-events-via-websocket). It is possible to subscribe to `Events` via Tendermint's [Websocket](https://tendermint.com/docs/app-dev/subscribing-to-events-via-websocket.html#subscribing-to-events-via-websocket).
This is done by calling the `subscribe` RPC method via Websocket: This is done by calling the `subscribe` RPC method via Websocket:
@ -96,7 +38,7 @@ The main `eventCategory` you can subscribe to are:
These events are triggered from the `state` package after a block is committed. You can get the These events are triggered from the `state` package after a block is committed. You can get the
full list of `event` categories [here](https://godoc.org/github.com/tendermint/tendermint/types#pkg-constants). full list of `event` categories [here](https://godoc.org/github.com/tendermint/tendermint/types#pkg-constants).
The `type` and `attribute` value of the `query` allow you to filter the specific `event` you are looking for. For example, a `transfer` transaction triggers an `event` of type `Transfer` and has `Recipient` and `Sender` as `attributes` (as defined in the [`events` file of the `bank` module](https://github.com/cosmos/cosmos-sdk/blob/master/x/bank/types/events.go)). Subscribing to this `event` would be done like so: The `type` and `attribute` value of the `query` allow you to filter the specific `event` you are looking for. For example, a `MsgEthereumTx` transaction triggers an `event` of type `ethermint` and has `sender` and `recipient` as `attributes`. Subscribing to this `event` would be done like so:
```json ```json
{ {
@ -104,12 +46,57 @@ The `type` and `attribute` value of the `query` allow you to filter the specific
"method": "subscribe", "method": "subscribe",
"id": "0", "id": "0",
"params": { "params": {
"query": "tm.event='Tx' AND transfer.sender='senderAddress'" "query": "tm.event='Tx' AND ethereum.recipient='hexAddress'"
} }
} }
``` ```
where `senderAddress` is an address following the [`AccAddress`](../basics/accounts.md#addresses) format. where `hexAddress` is an Ethereum hex address (eg: `0x1122334455667788990011223344556677889900`).
### Ethereum JSON-RPC Events
<!-- TODO: PublicFiltersAPI -->
## Websocket Connection
### Tendermint Websocket
To start a connection with the Tendermint websocket you need to define the address with the `--node` flag when initializing the REST server (default `tcp://localhost:26657`):
```bash
emintcli rest-server --laddr "tcp://localhost:8545" --node "tcp://localhost:8080" --unlock-key <my_key> --chain-id <chain_id>
```
Then, start a websocket subscription with [ws](https://github.com/hashrocket/ws)
```bash
# connect to tendermint websocet at port 8080 as defined above
ws ws://localhost:8080/websocket
# subscribe to new Tendermint block headers
> { "jsonrpc": "2.0", "method": "subscribe", "params": ["tm.event='NewBlockHeader'"], "id": 1 }
```
### Ethereum Websocket
Since Ethermint runs uses Tendermint Core as it's consensus Engine and it's built with the Cosmos SDK framework, it inherits the event format from them. However, in order to support the native Web3 compatibility for websockets of the [Ethereum's PubSubAPI](https://geth.ethereum.org/docs/rpc/pubsub), Ethermint needs to cast the Tendermint responses retreived into the Ethereum types.
You can start a connection with the Ethereum websocket using the `--websocket-port` flag when initializing the REST server (default `7545`):
```bash
emintcli rest-server --laddr "tcp://localhost:8545" --websocket-port 8546 --unlock-key <my_key> --chain-id <chain_id>
```
Then, start a websocket subscription with [ws](https://github.com/hashrocket/ws)
```bash
# connect to tendermint websocet at port 8546 as defined above
ws ws://localhost:8546/
# subscribe to new Ethereum-formatted block Headers
> {"id": 1, "method": "eth_subscribe", "params": ["newHeads", {}]}
< {"jsonrpc":"2.0","result":"0x44e010cb2c3161e9c02207ff172166ef","id":1}
```
## Next {hide} ## Next {hide}

View File

@ -6903,8 +6903,7 @@
"picomatch": { "picomatch": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
"optional": true
}, },
"pify": { "pify": {
"version": "4.0.1", "version": "4.0.1",

View File

@ -6,7 +6,7 @@ parent:
# Quick Start # Quick Start
This repository contains reference documentation on the basic concepts of Ethermint. This repository contains reference documentation on how to install and run an Etheremint full node.
1. [Run a Node](./run_node.md) 1. [Run a Node](./run_node.md)