Joseph Izang
2 years ago
parent
c9a73f4c50
commit
a1cb360c7a
@ -1,203 +0,0 @@ |
||||
import React, { useState, useEffect, useRef } from "react"; |
||||
import { AppContext } from "../AppContext"; |
||||
import { ContractName, Documentation } from "../../types"; |
||||
import { publish } from "../../utils"; |
||||
import { htmlTemplate } from "../../utils/template"; |
||||
|
||||
export const HomeView: React.FC = () => { |
||||
const [activeItem, setActiveItem] = useState(""); |
||||
const [isPublishing, setIsPublishing] = useState(false); |
||||
const [htmlDocumentation, setHtmlDocumentation] = useState(""); |
||||
const [hasErrorOnPublishing, setHasErrorOnPublishing] = useState(false); |
||||
const [publishedURL, setPublishedURL] = useState(""); |
||||
const clearMessageFuncRef = useRef(undefined as any); |
||||
|
||||
useEffect(() => { |
||||
const maxNumberOfRetries = 1; |
||||
let retries = 0; |
||||
|
||||
const publishDocumentation = async () => { |
||||
try { |
||||
if (clearMessageFuncRef.current) { |
||||
clearTimeout(clearMessageFuncRef.current); |
||||
} |
||||
const hash = await publish(htmlDocumentation); |
||||
console.log("Hash", hash); |
||||
setIsPublishing(false); |
||||
|
||||
const url = `https://ipfs.io/ipfs/${hash}`; |
||||
|
||||
window.open(url); |
||||
setPublishedURL(url); |
||||
} catch (error) { |
||||
if (retries < maxNumberOfRetries) { |
||||
console.log("Retrying..."); |
||||
retries++; |
||||
publishDocumentation(); |
||||
} else { |
||||
setIsPublishing(false); |
||||
setHasErrorOnPublishing(true); |
||||
|
||||
clearMessageFuncRef.current = setTimeout(() => { |
||||
setHasErrorOnPublishing(false); |
||||
}, 5000); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
if (isPublishing) { |
||||
setHasErrorOnPublishing(false); |
||||
publishDocumentation(); |
||||
} |
||||
}, [isPublishing, htmlDocumentation]); |
||||
|
||||
const displayDocumentation = ( |
||||
client: any, |
||||
contractName: ContractName, |
||||
documentation: Documentation |
||||
) => { |
||||
console.log("Display Documentation", contractName, documentation); |
||||
|
||||
client.emit("documentation-generated", documentation); |
||||
}; |
||||
|
||||
return ( |
||||
<AppContext.Consumer> |
||||
{({ clientInstance, contracts, setContracts, themeType }) => ( |
||||
<div |
||||
id="ethdoc" |
||||
style={{ color: themeType === "dark" ? "white" : "black" }} |
||||
> |
||||
{[...contracts.keys()].length === 0 && ( |
||||
<p>Compile a contract with Solidity Compiler</p> |
||||
)} |
||||
|
||||
{[...contracts.keys()].length > 0 && ( |
||||
<div> |
||||
<div className="list-group"> |
||||
{[...contracts.keys()].map((item) => { |
||||
const documentation = contracts.get(item) as string; |
||||
return ( |
||||
<button |
||||
key={item} |
||||
className={ |
||||
activeItem === item |
||||
? "list-group-item list-group-item-action active" |
||||
: "list-group-item list-group-item-action" |
||||
} |
||||
aria-pressed="false" |
||||
onClick={() => { |
||||
setPublishedURL(""); |
||||
setActiveItem(item); |
||||
displayDocumentation( |
||||
clientInstance, |
||||
item, |
||||
documentation |
||||
); |
||||
const documentationAsHtml = htmlTemplate(documentation); |
||||
setHtmlDocumentation(documentationAsHtml); |
||||
}} |
||||
> |
||||
{item} Documentation |
||||
</button> |
||||
); |
||||
})} |
||||
</div> |
||||
<div style={{ float: "right" }}> |
||||
<button |
||||
type="button" |
||||
className="btn btn-sm btn-link" |
||||
onClick={() => { |
||||
setContracts(new Map()); |
||||
displayDocumentation(clientInstance, "", ""); |
||||
setPublishedURL(""); |
||||
}} |
||||
> |
||||
Clear |
||||
</button> |
||||
</div> |
||||
<div> |
||||
{activeItem !== "" && ( |
||||
<PublishButton |
||||
isPublishing={isPublishing} |
||||
item={activeItem} |
||||
onClick={() => { |
||||
console.log("Is publishing"); |
||||
setIsPublishing(true); |
||||
}} |
||||
/> |
||||
)} |
||||
</div> |
||||
{!isPublishing && publishedURL !== "" && ( |
||||
<> |
||||
<div className="small mt-1"> |
||||
<a rel="noreferrer" href={publishedURL} target="_blank"> |
||||
{publishedURL} |
||||
</a> |
||||
</div> |
||||
</> |
||||
)} |
||||
|
||||
{hasErrorOnPublishing && ( |
||||
<div> |
||||
<label>Something unexpected happen, Please try again</label> |
||||
</div> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
)} |
||||
</AppContext.Consumer> |
||||
); |
||||
}; |
||||
|
||||
interface PublishButtonProps { |
||||
isPublishing: boolean; |
||||
onClick: any; |
||||
item: string; |
||||
} |
||||
|
||||
export const PublishButton: React.FC<PublishButtonProps> = ({ |
||||
isPublishing, |
||||
onClick, |
||||
item, |
||||
}) => { |
||||
return ( |
||||
<button |
||||
style={{ marginTop: "1em" }} |
||||
className="btn btn-secondary btn-sm btn-block" |
||||
disabled={isPublishing} |
||||
onClick={onClick} |
||||
> |
||||
{!isPublishing && <span>Publish {item}</span>} |
||||
|
||||
{isPublishing && ( |
||||
<div |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "center", |
||||
alignItems: "center", |
||||
}} |
||||
> |
||||
<span |
||||
className="spinner-border spinner-border-sm" |
||||
role="status" |
||||
aria-hidden="true" |
||||
style={{ marginRight: "0.5em" }} |
||||
/> |
||||
<p style={{ margin: "0" }}>Publishing...Please wait</p> |
||||
</div> |
||||
)} |
||||
</button> |
||||
); |
||||
}; |
||||
|
||||
// <label class="btn btn-secondary active">
|
||||
// <input type="radio" name="options" id="option1" checked> Active
|
||||
// </label>
|
||||
// <label class="btn btn-secondary">
|
||||
// <input type="radio" name="options" id="option2"> Radio
|
||||
// </label>
|
||||
// <label class="btn btn-secondary">
|
||||
// <input type="radio" name="options" id="option3"> Radio
|
||||
// </label>
|
||||
@ -1,2 +1 @@ |
||||
export { HomeView } from "./HomeView"; |
||||
export { ErrorView } from "./ErrorView"; |
||||
|
||||
|
||||
@ -0,0 +1,82 @@ |
||||
const { composePlugins, withNx } = require('@nrwl/webpack') |
||||
const webpack = require('webpack') |
||||
const TerserPlugin = require("terser-webpack-plugin") |
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") |
||||
|
||||
// Nx plugins for webpack.
|
||||
module.exports = composePlugins(withNx(), (config) => { |
||||
// Update the webpack config as needed here.
|
||||
// e.g. `config.plugins.push(new MyPlugin())`
|
||||
|
||||
// add fallback for node modules
|
||||
config.resolve.fallback = { |
||||
...config.resolve.fallback, |
||||
"crypto": require.resolve("crypto-browserify"), |
||||
"stream": require.resolve("stream-browserify"), |
||||
"path": require.resolve("path-browserify"), |
||||
"http": require.resolve("stream-http"), |
||||
"https": require.resolve("https-browserify"), |
||||
"constants": require.resolve("constants-browserify"), |
||||
"os": false, //require.resolve("os-browserify/browser"),
|
||||
"timers": false, // require.resolve("timers-browserify"),
|
||||
"zlib": require.resolve("browserify-zlib"), |
||||
"fs": false, |
||||
"module": false, |
||||
"tls": false, |
||||
"net": false, |
||||
"readline": false, |
||||
"child_process": false, |
||||
"buffer": require.resolve("buffer/"), |
||||
"vm": require.resolve('vm-browserify'), |
||||
} |
||||
|
||||
|
||||
// add externals
|
||||
config.externals = { |
||||
...config.externals, |
||||
solc: 'solc', |
||||
} |
||||
|
||||
// add public path
|
||||
config.output.publicPath = '/' |
||||
|
||||
|
||||
|
||||
// add copy & provide plugin
|
||||
config.plugins.push( |
||||
new webpack.ProvidePlugin({ |
||||
Buffer: ['buffer', 'Buffer'], |
||||
url: ['url', 'URL'], |
||||
process: 'process/browser', |
||||
}) |
||||
) |
||||
|
||||
// souce-map loader
|
||||
config.module.rules.push({ |
||||
test: /\.js$/, |
||||
use: ["source-map-loader"], |
||||
enforce: "pre" |
||||
}) |
||||
|
||||
config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
|
||||
|
||||
|
||||
// set minimizer
|
||||
config.optimization.minimizer = [ |
||||
new TerserPlugin({ |
||||
parallel: true, |
||||
terserOptions: { |
||||
ecma: 2015, |
||||
compress: false, |
||||
mangle: false, |
||||
format: { |
||||
comments: false, |
||||
}, |
||||
}, |
||||
extractComments: false, |
||||
}), |
||||
new CssMinimizerPlugin(), |
||||
]; |
||||
|
||||
return config; |
||||
}); |
||||
Loading…
Reference in new issue