@ -25,11 +25,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
const [ state , setState ] = useState < { const [ state , setState ] = useState < {
showBasicMigration : boolean , showBasicMigration : boolean ,
themeQuality : { filter : string , name : string } , themeQuality : { filter : string , name : string } ,
showMediaPanel : 'none' | 'twitter' | 'medium' showMediaPanel : 'none' | 'twitter' | 'medium' ,
showModalDialog : boolean ,
modalInfo : { title : string , loadItem : string , examples : Array < string > }
} > ( { } > ( {
showBasicMigration : false , showBasicMigration : false ,
themeQuality : registry.get ( 'themeModule' ) . api . currentTheme ( ) . quality === 'dark' ? themes.dark : themes.light , themeQuality : registry.get ( 'themeModule' ) . api . currentTheme ( ) . quality === 'dark' ? themes.dark : themes.light ,
showMediaPanel : 'none' showMediaPanel : 'none' ,
showModalDialog : false ,
modalInfo : { title : '' , loadItem : '' , examples : [ ] }
} ) } )
const playRemi = async ( ) = > { const playRemi = async ( ) = > {
@ -45,20 +49,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
return { . . . prevState , themeQuality : theme.quality === 'dark' ? themes.dark : themes.light } return { . . . prevState , themeQuality : theme.quality === 'dark' ? themes.dark : themes.light }
} ) } )
} ) } )
window . addEventListener ( 'click' , ( e ) = > { window . addEventListener ( 'click' , ( event ) = > {
if ( e . target . id !== 'remixIDEHomeTwitterbtn' && e . target . id !== 'remixIDEHomeMediumbtn' ) { const { id } = ( event . target as HTMLButtonElement ) . dataset
if ( id !== 'remixIDEHomeTwitterbtn' && id !== 'remixIDEHomeMediumbtn' ) {
// todo check event.target
// todo check event.target
setState ( prevState = > { return { . . . prevState , showMediaPanel : 'none' } } ) setState ( prevState = > { return { . . . prevState , showMediaPanel : 'none' } } )
} }
} ) } )
} , [ ] ) } , [ ] )
const createNewFile = ( ) = > { const createNewFile = async ( ) = > {
plugin . call ( 'filePanel' , 'createNewFile' ) await plugin . call ( 'filePanel' , 'createNewFile' )
} }
const uploadFile = ( target ) = > { const uploadFile = async ( target ) = > {
plugin . call ( 'filePanel' , 'uploadFile' , target ) await plugin . call ( 'filePanel' , 'uploadFile' , target )
} }
const connectToLocalhost = ( ) = > { const connectToLocalhost = ( ) = > {
@ -104,174 +109,196 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
plugin . verticalIcons . select ( 'pluginManager' ) plugin . verticalIcons . select ( 'pluginManager' )
} }
const load = ( service , item , examples , info = '' ) = > { / * const showFullMessage = ( title : string , loadItem : string , examples : Array < string > ) = > {
const contentImport = this . contentImport setState ( prevState = > {
const fileProviders = registry . get ( 'fileproviders' ) . api return { . . . prevState , modalInfo : { title : title , loadItem : loadItem , examples : examples } }
const msg = yo ` } )
< div class = "p-2" > }
< span > Enter the $ { item } you would like to load . < / span >
< div > $ { info } < / div > const hideFullMessage = ( ) = > { //eslint-disable-line
< div > e . g $ { examples . map ( ( url ) = > { return yo ` <div class="p-1"><a> ${ url } </a></div> ` } ) } < / div > setState ( prevState = > {
< / div > ` return { . . . prevState , showModalDialog : false }
} )
}
const title = ` Import from ${ service } ` const processLoading = ( ) = > {
modalDialogCustom . prompt ( title , msg , null , ( target ) = > { const contentImport = plugin . contentImport
if ( target !== '' ) { const fileProviders = registry . get ( 'fileproviders' ) . api
contentImport . import ( contentImport . import (
target , null , //target,
( loadingMsg ) = > { tooltip ( loadingMsg ) } , ( loadingMsg ) = > { setState ( prevState = > { return { . . . prevState , tooltip : loadingMsg } } ) } ,
( error , content , cleanUrl , type , url ) = > { ( error , content , cleanUrl , type , url ) = > {
if ( error ) { if ( error ) {
modalDialogCustom . alert ( title , error . message || error ) //modalDialogCustom.alert(state.modalInfo.title, error.message || error)
} else { } else {
try { try {
fileProviders . workspace . addExternal ( type + '/' + cleanUrl , content , url ) fileProviders . workspace . addExternal ( type + '/' + cleanUrl , content , url )
this . verticalIcons . select ( 'filePanel' ) plugin . call ( 'menuicons' , 'select' , 'filePanel' )
} catch ( e ) { } catch ( e ) {
modalDialogCustom . alert ( title , e . message ) //modalDialogCustom.alert(state.modalInfo.title, e.message)
}
}
} }
) }
} }
} ) * / )
} }
const maxHeight = Math . max ( window . innerHeight - 150 , 200 ) + 'px' const maxHeight = Math . max ( window . innerHeight - 150 , 200 ) + 'px'
return ( return (
< div className = "d-flex flex-column" id = "remixUiRightPanel" > < >
< div className = "border-bottom d-flex flex-column justify-content-between clearfix py-3 mb-4" > < ModalDialog
< div className = "mx-4 w-100 d-flex" > title = { 'Import from ' + state . modalInfo . title }
< img className = "m-4 remixui_logoImg" src = "assets/img/guitarRemiCroped.webp" onClick = { ( ) = > playRemi ( ) } alt = "" > < / img > cancelLabel = 'Close'
< audio cancelFn = { ( ) = > { } }
id = "remiAudio" hide = { ! state . showModalDialog }
muted = { false } handleHide = { ( ) = > hideFullMessage ( ) }
src = "assets/audio/remiGuitar-single-power-chord-A-minor.wav" okFn = { ( ) = > processLoading ( ) }
ref = { remiAudioEl } >
> < / audio > < div className = "p-2" >
< / div > { state . modalInfo . loadItem !== '' && < span > Enter the { state . modalInfo . loadItem } you would like to load . < / span > }
< / div > { state . modalInfo . examples . length !== 0 &&
< div className = "row remixui_hpSections mx-4" data - id = "landingPageHpSections" > < >
< div className = "ml-3" > < div > e . g < / div >
< div className = "mb-5" > < div >
< h4 > Featured Plugins < / h4 > { state . modalInfo . examples . map ( ( url ) = > { return ` <div className="p-1"><a> ${ url } </a></div> ` } ) }
< div className = "d-flex flex-row pt-2" >
< ThemeContext.Provider value = { state . themeQuality } >
< PluginButton imgPath = "assets/img/solidityLogo.webp" envID = "solidityLogo" envText = "Solidity" callback = { startSolidity } / >
< PluginButton imgPath = "assets/img/optimismLogo.webp" envID = "optimismLogo" envText = "Optimism" callback = { startOptimism } / >
< PluginButton imgPath = "assets/img/solhintLogo.webp" envID = "solhintLogo" envText = "Solhint linter" callback = { startSolhint } / >
< PluginButton imgPath = "assets/img/learnEthLogo.webp" envID = "learnEthLogo" envText = "LearnEth" callback = { startLearnEth } / >
< PluginButton imgPath = "assets/img/sourcifyLogo.webp" envID = "sourcifyLogo" envText = "Sourcify" callback = { startSourceVerify } / >
< PluginButton imgPath = "assets/img/moreLogo.webp" envID = "moreLogo" envText = "More" callback = { startPluginManager } / >
< / ThemeContext.Provider >
< / div > < / div >
< / > }
< / div >
< / ModalDialog >
< div className = "d-flex flex-column" id = "remixUiRightPanel" >
< div className = "border-bottom d-flex flex-column justify-content-between clearfix py-3 mb-4" >
< div className = "mx-4 w-100 d-flex" >
< img className = "m-4 remixui_logoImg" src = "assets/img/guitarRemiCroped.webp" onClick = { ( ) = > playRemi ( ) } alt = "" > < / img >
< audio
id = "remiAudio"
muted = { false }
src = "assets/audio/remiGuitar-single-power-chord-A-minor.wav"
ref = { remiAudioEl }
> < / audio >
< / div > < / div >
< div className = "d-flex" > < / div >
< div className = "file" > < div className = "row remixui_hpSections mx-4" data - id = "landingPageHpSections" >
< h4 > File < / h4 > < div className = "ml-3" >
< p className = "mb-1" > < div className = "mb-5" >
< i className = "mr-2 far fa-file" > < / i > < h4 > Featured Plugins < / h4 >
< span className = "ml-1 mb-1 remixui_text" onClick = { ( ) = > createNewFile ( ) } > New File < / span > < div className = "d-flex flex-row pt-2" >
< / p > < ThemeContext.Provider value = { state . themeQuality } >
< p className = "mb-1" > < PluginButton imgPath = "assets/img/solidityLogo.webp" envID = "solidityLogo" envText = "Solidity" callback = { ( ) = > startSolidity ( ) } / >
< i className = "mr-2 far fa-file-alt" > < / i > < PluginButton imgPath = "assets/img/optimismLogo.webp" envID = "optimismLogo" envText = "Optimism" callback = { ( ) = > startOptimism ( ) } / >
< label className = "ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text" > < PluginButton imgPath = "assets/img/solhintLogo.webp" envID = "solhintLogo" envText = "Solhint linter" callback = { ( ) = > startSolhint ( ) } / >
Open Files < PluginButton imgPath = "assets/img/learnEthLogo.webp" envID = "learnEthLogo" envText = "LearnEth" callback = { ( ) = > startLearnEth ( ) } / >
< input title = "open file" type = "file" onChange = { ( event ) = > { < PluginButton imgPath = "assets/img/sourcifyLogo.webp" envID = "sourcifyLogo" envText = "Sourcify" callback = { ( ) = > startSourceVerify ( ) } / >
event . stopPropagation ( ) < PluginButton imgPath = "assets/img/moreLogo.webp" envID = "moreLogo" envText = "More" callback = { startPluginManager } / >
uploadFile ( event . target ) < / ThemeContext.Provider >
} } multiple / >
< / label >
< / p >
< p className = "mb-1" >
< i className = "mr-1 far fa-hdd" > < / i >
< span className = "ml-1 remixui_text" onClick = { ( ) = > connectToLocalhost ( ) } > Connect to Localhost < / span >
< / p >
< p className = "mt-3 mb-0" > < label > LOAD FROM : < / label > < / p >
< div className = "btn-group" >
< button className = "btn mr-1 btn-secondary" data - id = "landingPageImportFromGistButton" onClick = { ( ) = > importFromGist ( ) } > Gist < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > load ( 'Github' , 'github URL' , [ 'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol' , 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol' ] ) } > GitHub < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > load ( 'Ipfs' , 'ipfs URL' , [ 'ipfs://<ipfs-hash>' ] ) } > Ipfs < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > load ( 'Https' , 'http/https raw content' , [ 'https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol' ] ) } > https < / button >
< / div > < / div >
< / div > < / div >
< div className = "ml-4 pl-4" > < div className = "d-flex" >
< h4 > Resources < / h4 > < div className = "file" >
< p className = "mb-1" > < h4 > File < / h4 >
< i className = "mr-2 fas fa-book" > < / i > < p className = "mb-1" >
< a className = "remixui_text" target = "__blank" href = "https://remix-ide.readthedocs.io/en/latest/#" > Documentation < / a > < i className = "mr-2 far fa-file" > < / i >
< / p > < span className = "ml-1 mb-1 remixui_text" onClick = { ( ) = > createNewFile ( ) } > New File < / span >
< p className = "mb-1" > < / p >
< i className = "mr-2 fab fa-gitter" > < / i > < p className = "mb-1" >
< a className = "remixui_text" target = "__blank" href = "https://gitter.im/ethereum/remix" > Gitter channel < / a > < i className = "mr-2 far fa-file-alt" > < / i >
< / p > < label className = "ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text" >
< p className = "mb-1" > Open Files
< img id = 'remixHhomeWebsite' className = "mr-2 remixui_image" src = { plugin . profile . icon } style = { { filter : state.themeQuality.filter } } alt = '' > < / img > < input title = "open file" type = "file" onChange = { ( event ) = > {
< a className = "remixui_text" target = "__blank" href = "https://remix-project.org" > Featuring website < / a > event . stopPropagation ( )
< / p > uploadFile ( event . target )
< p className = "mb-1" > } } multiple / >
< i className = "mr-2 fab fa-ethereum remixui_image" > < / i > < / label >
< span className = "remixui_text" onClick = { ( ) = > switchToPreviousVersion ( ) } > Old experience < / span > < / p >
< / p > < p className = "mb-1" >
< i className = "mr-1 far fa-hdd" > < / i >
< span className = "ml-1 remixui_text" onClick = { ( ) = > connectToLocalhost ( ) } > Connect to Localhost < / span >
< / p >
< p className = "mt-3 mb-0" > < label > LOAD FROM : < / label > < / p >
< div className = "btn-group" >
< button className = "btn mr-1 btn-secondary" data - id = "landingPageImportFromGistButton" onClick = { ( ) = > importFromGist ( ) } > Gist < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > showFullMessage ( 'Github' , 'github URL' , [ 'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol' , 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol' ] ) } > GitHub < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > showFullMessage ( 'Ipfs' , 'ipfs URL' , [ 'ipfs://<ipfs-hash>' ] ) } > Ipfs < / button >
< button className = "btn mx-1 btn-secondary" onClick = { ( ) = > showFullMessage ( 'Https' , 'http/https raw content' , [ 'https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol' ] ) } > https < / button >
< / div >
< / div >
< div className = "ml-4 pl-4" >
< h4 > Resources < / h4 >
< p className = "mb-1" >
< i className = "mr-2 fas fa-book" > < / i >
< a className = "remixui_text" target = "__blank" href = "https://remix-ide.readthedocs.io/en/latest/#" > Documentation < / a >
< / p >
< p className = "mb-1" >
< i className = "mr-2 fab fa-gitter" > < / i >
< a className = "remixui_text" target = "__blank" href = "https://gitter.im/ethereum/remix" > Gitter channel < / a >
< / p >
< p className = "mb-1" >
< img id = 'remixHhomeWebsite' className = "mr-2 remixui_image" src = { plugin . profile . icon } style = { { filter : state.themeQuality.filter } } alt = '' > < / img >
< a className = "remixui_text" target = "__blank" href = "https://remix-project.org" > Featuring website < / a >
< / p >
< p className = "mb-1" >
< i className = "mr-2 fab fa-ethereum remixui_image" > < / i >
< span className = "remixui_text" onClick = { ( ) = > switchToPreviousVersion ( ) } > Old experience < / span >
< / p >
< / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div > < div className = "d-flex flex-column remixui_rightPanel" >
< div className = "d-flex flex-column remixui_rightPanel" > < div className = "d-flex pr-3 py-2 align-self-end" id = "remixIDEMediaPanelsTitle " >
< div className = "d-flex pr-3 py-2 align-self-end" id = "remixIDEMediaPanelsTitle" > < button
< button className = "btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter"
className = "btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter" id = "remixIDEHomeTwitterbtn "
id = "remixIDEHomeTwitterbtn" title = "Medium blogs "
title = "Medium blogs" onClick = { ( e ) = > {
onClick = { ( e ) = > { setState ( prevState = > {
setState ( prevState = > { return { . . . prevState , showMediaPanel : state.showMediaPanel === 'twitter' ? 'none' : 'twitter' }
return { . . . prevState , showMediaPanel : state.showMediaPanel === 'twitter' ? 'none' : 'twitter' } } )
} ) _paq . push ( [ 'trackEvent' , 'pluginManager' , 'media' , 'twitter' ] )
_paq . push ( [ 'trackEvent' , 'pluginManager' , 'media' , 'twitter' ] ) } }
} } > < / button >
> < / button > < button
< button className = "btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium"
className = "btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium" id = "remixIDEHomeMediumbtn "
id = "remixIDEHomeMediumbtn" title = "Twitter "
title = "Twitter" onClick = { ( e ) = > {
onClick = { ( e ) = > { setState ( prevState = > {
setState ( prevState = > { return { . . . prevState , showMediaPanel : state.showMediaPanel === 'medium' ? 'none' : 'medium' }
return { . . . prevState , showMediaPanel : state.showMediaPanel === 'medium' ? 'none' : 'medium' } } )
} ) _paq . push ( [ 'trackEvent' , 'pluginManager' , 'media' , 'medium' ] )
_paq . push ( [ 'trackEvent' , 'pluginManager' , 'media' , 'medium' ] ) } }
} } > < / button >
> < / button > < / div >
< / div > < div className = "mr-3 d-flex bg-light remixui_panels" id = "remixIDEMediaPanels" >
< div className = "mr-3 d-flex bg-light remixui_panels" id = "remixIDEMediaPanels" > { ( state . showMediaPanel === 'medium' ) && < div id = "remixIDE_MediumBlock" className = "p-2 mx-0 mb-0 remixui_remixHomeMedia " >
{ ( state . showMediaPanel === 'medium' ) && < div id = "remixIDE_MediumBlock" className = "p-2 mx-0 mb-0 remixui_remixHomeMedia" > < div id = "medium-widget" className = "p-3 remixui_media" style = { { maxHeight : maxHeight } } >
< div id = "medium-widget" className = "p-3 remixui_media" style = { { maxHeight : maxHeight } } > < div
< div id = "retainable-rss-embed"
i d= "retainable-rss-embed " data - rss = "https://medium.com/feed/remix-ide "
data - rss = "https://medium.com/feed/remix-ide " data - maxcols = "1 "
data - maxcols = "1 " data - layout = "grid "
data - layout = "grid " data - poststyle = "external "
data - poststyle = "external " data - readmore = "More... "
data - readmore = "More... " data - buttonclass = "btn mb-3 "
data - buttonclass = "btn mb-3 " data - offset = "-100 "
data - offset = "-100" >
> < / div >
< / div > < / div >
< / div > < / div > }
< / div > } { ( state . showMediaPanel === 'twitter' ) && < div id = "remixIDE_TwitterBlock" className = "p-2 mx-0 mb-0 remixui_remixHomeMedia" >
{ ( state . showMediaPanel === 'twitter' ) && < div id = "remixIDE_TwitterBlock" className = "p-2 mx-0 mb-0 remixui_remixHomeMedia" > < div className = "px-2 remixui_media" style = { { maxHeight : maxHeight } } >
< div className = "px-2 remixui_media" style = { { maxHeight : maxHeight } } > < a className = "twitter-timeline"
< a className = "twitter-timeline " data - width = "350 "
data - width = "350" data - theme = { state . themeQuality . name }
data - theme = { state . themeQuality . name } data - chrome = "nofooter noheader transparent"
data - chrome = "nofooter noheader transparent " data - tweet - limit = "8 "
data - tweet - limit = "8 " href = "https://twitter.com/EthereumRemix "
href = "https://twitter.com/EthereumRemix" >
> < / a >
< / a > < / div >
< / div > < / div > }
< / div > } < / div >
< / div > < / div >
< / div > < / div >
< / div > < / >
) )
} }
lianahus
3 years ago
committed by
yann300