docs: fixes and websockets guide (#361)
* docs: fixes and websockets guide * minor fixes
This commit is contained in:
parent
20e9b2ede3
commit
5768706917
@ -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>
|
||||
|
@ -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.
|
||||
|
@ -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: -->
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
||||
|
@ -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}
|
||||
|
||||
|
3
docs/package-lock.json
generated
3
docs/package-lock.json
generated
@ -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",
|
||||
|
@ -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)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user