@ -1,12 +1,12 @@
import React from 'react' import React , { useState } from 'react' // eslint-disable-line
import { ViewPlugin } from '@remixproject/engine-web' import { ViewPlugin } from '@remixproject/engine-web'
import { PluginViewWrapper } from '@remix-ui/helper' import { PluginViewWrapper } from '@remix-ui/helper'
import { RemixAppManager } from '../../remixAppManager' import { RemixAppManager } from '../../remixAppManager'
import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view' import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view'
import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section' import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section'
import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell' import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell'
import { ThemeKeys , ThemeObject } from '@microlink/react-json-view 'import * as Data from './remixGuideData.json '
//@ts-ignore
//@ts-ignore
const _paq = ( window . _paq = window . _paq || [ ] ) const _paq = ( window . _paq = window . _paq || [ ] )
@ -15,7 +15,6 @@ const profile = {
displayName : 'Remix Guide' , displayName : 'Remix Guide' ,
description : 'Learn remix with videos' , description : 'Learn remix with videos' ,
location : 'mainPanel' , location : 'mainPanel' ,
methods : [ 'showDetails' ] ,
events : [ ] events : [ ]
} }
@ -24,13 +23,20 @@ export class RemixGuidePlugin extends ViewPlugin {
appManager : RemixAppManager appManager : RemixAppManager
element : HTMLDivElement element : HTMLDivElement
payload : any payload : any
themeStyle : any showVideo : boolean
theme : ThemeKeys | ThemeObject videoID : string
handleKeyDown : any
handleEscape : any
constructor ( appManager : RemixAppManager ) { constructor ( appManager : RemixAppManager ) {
super ( profile ) super ( profile )
this . appManager = appManager this . appManager = appManager
this . element = document . createElement ( 'div' ) this . element = document . createElement ( 'div' )
this . element . setAttribute ( 'id' , 'remixGuideEl' ) this . element . setAttribute ( 'id' , 'remixGuideEl' )
this . payload = {
sectionToExpandedCell : [ [ '' , '' ] ] ,
data : { }
}
} }
async onActivation() { async onActivation() {
@ -38,24 +44,23 @@ export class RemixGuidePlugin extends ViewPlugin {
await this . call ( 'tabs' , 'focus' , 'remixGuide' ) await this . call ( 'tabs' , 'focus' , 'remixGuide' )
this . renderComponent ( ) this . renderComponent ( )
_paq . push ( [ 'trackEvent' , 'plugin' , 'activated' , 'remixGuide' ] ) _paq . push ( [ 'trackEvent' , 'plugin' , 'activated' , 'remixGuide' ] )
// Read the data
this . payload . data = Data
this . handleKeyDown = ( event ) = > {
if ( event . key === 'Escape' ) {
this . showVideo = false
this . renderComponent ( )
}
}
document . addEventListener ( 'keydown' , this . handleKeyDown ) ;
} }
onDeactivation ( ) : void { onDeactivation ( ) : void {
} document . removeEventListener ( 'keydown' , this . handleKeyDown ) ;
async showDetails ( sentPayload : any ) {
const contractName = Object . entries ( sentPayload ) . find ( ( [ key , value ] ) = > key )
await this . call ( 'tabs' , 'focus' , 'remixGuide' )
this . profile . displayName = ` ${ contractName [ 0 ] } `
this . payload = sentPayload
const active = await this . call ( 'theme' , 'currentTheme' )
this . renderComponent ( )
} }
private handleThemeChange() { private handleThemeChange() {
this . on ( 'theme' , 'themeChanged' , ( theme : any ) = > { this . on ( 'theme' , 'themeChanged' , ( theme : any ) = > {
this . renderComponent ( ) this . renderComponent ( )
} ) } )
} }
@ -64,6 +69,7 @@ export class RemixGuidePlugin extends ViewPlugin {
this . dispatch = dispatch this . dispatch = dispatch
this . renderComponent ( ) this . renderComponent ( )
} }
render() { render() {
return ( return (
< div className = "bg-dark" id = "remixGuide" > < div className = "bg-dark" id = "remixGuide" >
@ -76,168 +82,88 @@ export class RemixGuidePlugin extends ViewPlugin {
this . dispatch ( { this . dispatch ( {
. . . this , . . . this ,
. . . this . payload , . . . this . payload ,
themeStyle : this.themeStyle , showVideo : this.showVideo ,
theme : this.theme videoID : this.videoID
} ) } )
} }
updateComponent ( state : any ) { updateComponent ( state : any ) {
return ( return (
< RemixUIGridView < div className = 'd-flex' >
plugin = { this } < RemixUIGridView
styleList = { "" }
logo = '/assets/img/YouTubeLogo.webp'
enableFilter = { true }
showUntagged = { true }
showPin = { true }
tagList = { [
[ 'beginner' , 'danger' ] ,
[ 'advanced' , 'warning' ] ,
[ 'AI' , 'success' ] ,
[ 'plugins' , 'secondary' ] ,
[ 'solidity' , 'primary' ] ,
[ 'vyper' , 'info' ] ,
[ 'L2' , 'danger' ]
] }
title = 'Remix Guide'
description = "Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease."
//themeStyle={state.themeStyle}
>
< RemixUIGridSection
plugin = { this } plugin = { this }
title = 'Basics' styleList = { "" }
hScrollable = { true } logo = '/assets/img/YouTubeLogo.webp'
enableFilter = { true }
showUntagged = { true }
showPin = { false }
tagList = { [
[ 'beginner' , 'danger' ] ,
[ 'advanced' , 'warning' ] ,
[ 'AI' , 'success' ] ,
[ 'plugins' , 'secondary' ] ,
[ 'solidity' , 'primary' ] ,
[ 'vyper' , 'info' ] ,
[ 'L2' , 'danger' ]
] }
title = { Data . title }
description = { Data . description }
> >
< RemixUIGridCell { Data . sections . map ( section = > {
plugin = { this } return < RemixUIGridSection
title = "first item" plugin = { this }
tagList = { [ 'L2' , 'AI' ] } title = { section . title }
logo = '/assets/img/soliditySurvey2023.webp' hScrollable = { true }
> >
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > { section . cells . map ( cell = > {
< / RemixUIGridCell > return < RemixUIGridCell
< RemixUIGridCell plugin = { this }
plugin = { this } title = { cell . title }
title = "next" tagList = { cell . tagList }
pinned = { true } expandViewEl = {
tagList = { [ 'L2' , 'plugins' ] } cell . expandViewElement
> }
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > handleExpand = { ( ) = > {
< / RemixUIGridCell > < RemixUIGridCell this . showVideo = true
plugin = { this } this . videoID = cell . expandViewElement . videoID
title = "something" this . renderComponent ( )
pinned = { false } } }
tagList = { [ 'solidity' , 'plugins' ] } logo = { cell . expandViewElement . logo }
> >
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > < a href = { "https://www.youtube.com/@" + cell . authorURL } target = "__blank" >
< / RemixUIGridCell > < img src = { "//img.youtube.com/vi/" + this . videoID + "/0.jpg" } style = { { height : '70px' , width : '70px' } } > < / img >
< RemixUIGridCell < / a >
plugin = { this } < / RemixUIGridCell >
title = "1" } ) }
tagList = { [ 'solidity' ] } < / RemixUIGridSection >
> } ) }
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > < / RemixUIGridView >
< / RemixUIGridCell > < RemixUIGridCell { state . showVideo && < div
plugin = { this } data - id = { ` EnterModalDialogContainer-react ` }
title = "1" data - backdrop = "static"
> data - keyboard = "false"
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > className = { "modal d-flex" }
< / RemixUIGridCell > role = "dialog"
< RemixUIGridCell style = { { justifyContent : "center" } }
plugin = { this }
title = "Something very very long"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell > < RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< / RemixUIGridSection >
< RemixUIGridSection
plugin = { this }
title = 'Basics not scrollable'
hScrollable = { false }
> >
< RemixUIGridCell < div className = "align-self-center pb-4" role = "document" >
plugin = { this } < div
title = "first item" tabIndex = { - 1 }
logo = '/assets/img/soliditySurvey2023.webp' className = { 'modal-content remixModalContent mb-4' }
> >
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > < div className = "text-break remixModalBody d-flex flex-column p-3 justify-content-between" data - id = { ` EnterModalDialogModalBody-react ` } >
< / RemixUIGridCell > < iframe style = { { minHeight : "500px" , minWidth : "1000px" } } width = "1000" height = "500" src = { "https://www.youtube.com/embed/" + this . videoID + "?si=ZdckOaSPR7VsLj_2" } allowFullScreen > < / iframe >
< RemixUIGridCell < / div >
plugin = { this } < div className = "modal-footer d-flex flex-column" >
title = "next" < button onClick = { ( ) = > {
> this . showVideo = false
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > this . renderComponent ( )
< / RemixUIGridCell > < RemixUIGridCell } } > Close < / button >
plugin = { this } < / div >
title = "something" < / div >
> < / div >
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img > < / div > }
< / RemixUIGridCell > < / div >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell > < RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell > < RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< RemixUIGridCell
plugin = { this }
title = "1"
>
< img src = { '/assets/img/soliditySurvey2023.webp' } style = { { height : '70px' , width : '70px' } } alt = "" > < / img >
< / RemixUIGridCell >
< / RemixUIGridSection >
< / RemixUIGridView >
) )
} }
Aniket
5 months ago
committed by
GitHub