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

View File

@ -9,7 +9,7 @@ parent:
This repository contains reference documentation on the basic concepts of Ethermint.
1. [Accounts](./accounts.md)
2. [Lifecycle of a transaction](./tx-lifecycle.md)
3. [Gas and Fees](./gas.md)
2. [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.

View File

@ -6,10 +6,6 @@ order: 1
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
<!-- TODO: -->

View File

@ -26,4 +26,4 @@ The `AnteHandler` is a special `handler` that is run for every transaction durin
## 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}
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
- [Anatomy of an SDK application](../basics/app-anatomy.md) {prereq}
- [Cosmos SDK Encoding](https://docs.cosmos.network/master/core/encoding.html) {prereq}
## Encoding Formats

View File

@ -8,71 +8,13 @@ order: 2
## Pre-requisite Readings
- [Anatomy of an SDK application](../basics/app-anatomy.md) {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.
- [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}
## 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).
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
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
{
@ -104,12 +46,57 @@ The `type` and `attribute` value of the `query` allow you to filter the specific
"method": "subscribe",
"id": "0",
"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}

View File

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

View File

@ -6,7 +6,7 @@ parent:
# 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)