MainContent

src/template/html/new.html

@@ -22,6 +22,20 @@
  integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
 
  <link rel="stylesheet" href="directory.css">
+ <style>
+ .soldoc-box {
+ margin-bottom: 50px;
+ }
+
+ .box-info {
+ color: #858585;
+ }
+
+ .method-name-title {
+ border: 1px solid rgba(0, 0, 0, .125);
+ border-radius: 5px 5px 0px 0px;
+ }
+ </style>
  <title>soldoc | soldoc</title>
 </head>
 
@@ -65,25 +79,7 @@
  <div id="contracts-treeview" class="box"></div>
  </div>
  <div class="col-6">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit nisi, pretium a est ac,
- ultrices ultricies tellus. Ut aliquet nisi erat, luctus ullamcorper felis ultricies nec. Mauris
- porta turpis a odio porttitor, a sagittis mi pharetra. In tincidunt risus nec faucibus condimentum.
- In consequat mauris justo, ac sagittis dui cursus quis. Maecenas ac neque at sapien placerat
- interdum. Praesent neque orci, pulvinar et dui eget, blandit luctus diam.
-
- Praesent tempus massa sit amet tortor scelerisque feugiat. Morbi gravida mattis nisl, eu vestibulum
- justo pretium vel. Suspendisse non ligula quis felis blandit laoreet ac nec justo. Etiam interdum
- maximus sollicitudin. Praesent quis erat ac lectus tempus hendrerit. Donec accumsan nec sem ut
- pellentesque. Pellentesque ornare pulvinar magna, ut pretium elit aliquam sit amet. Morbi ornare
- nibh in dui cursus laoreet. Phasellus quis ex quis justo porttitor placerat vitae vestibulum ante.
- Mauris efficitur pellentesque molestie. Aliquam venenatis a enim eu finibus. Praesent accumsan mi
- dui, sed pretium diam elementum non.
-
- Aliquam sem mauris, convallis eget elit eu, volutpat bibendum lorem. Suspendisse lorem lectus,
- dictum at vestibulum sit amet, accumsan et nunc. Sed sodales neque purus, sed viverra dolor
- malesuada ut. Mauris quis justo condimentum, fermentum neque mollis, fermentum augue. Ut ultricies
- est in mi porttitor blandit. Aliquam erat volutpat. Donec quam ex, aliquam lobortis leo at,
- fermentum semper tellus.
+ <div id="main-content"></div>
  </div>
  <div class="col">
  <div id="contract-content-treeview"></div>
@@ -195,44 +191,123 @@
  document.getElementById('contract-content-treeview')
  );
  </script>
- <!-- <script type="text/babel">
- class Hello extends React.Component {
+ <script type="text/babel">
+ class ContentDetails extends React.Component {
+ chooseBadge = (visibility) => {
+ switch (visibility) {
+ case 'public':
+ return <span className="badge badge-primary">public</span>;
+ case 'private':
+ return <span className="badge badge-secondary">private</span>;
+ case 'internal':
+ return <span className="badge badge-success">internal</span>;
+ }
+ }
  render() {
  return (
- <div>Hello</div>
+ <div className="soldoc-box" >
+ <a name={this.props.f.ast.name}>
+ <div className="method-name-title">
+ <div className="d-flex bd-highlight">
+ <div className="p-2 flex-grow-1 bd-highlight">
+ {this.props.f.ast.name} (
+ {this.props.f.parameters.map((p) => (
+ <span key={p.name}>
+ <b data-toggle="tooltip" data-placement="top"
+ title={p.natspec}>{p.name}</b> {p.typeName.name},
+ </span>
+ ))}
+ ) ->
+ {this.props.f.returnParameters !== undefined && this.props.f.returnParameters.map((p) => <span>{typeName.name},</span>)}
+ </div>
+ <div className="p-2 bd-highlight">
+ {this.chooseBadge(this.props.f.ast.visibility)}
+ </div>
+ </div>
+ </div>
+ </a>
+ <div id="test-links">
+ </div>
+ <div className="box-info">
+ <p><i>{this.props.f.ast.natspec.dev}</i></p>
+ </div>
+ </div>
  );
  }
  }
-
- </script>
- <script type="text/babel">
- class LikeButton extends React.Component {
- constructor(props) {
- super(props);
- this.state = { liked: false };
- }
-
- render() {
- if (this.state.liked) {
- return 'You liked this.';
+ function MainContent() {
+ const functions = [
+ {
+ ast: {
+ name: 'approve',
+ visibility: 'public',
+ natspec: {
+ dev: 'Approve the passed address to spend the specified amount of tokens on behalf of msg.sender.\
+Beware that changing an allowance with this method brings the risk that someone may use both the old\
+and the new allowance by unfortunate transaction ordering. One possible solution to mitigate this\
+race condition is to first reduce the spender&#39;s allowance to 0 and set the desired value afterwards:\
+<a href="https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729">https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729</a>',
+ }
+ },
+ parameters: [
+ {
+ natspec: 'The address which will spend the funds.',
+ name: 'spender',
+ typeName: {
+ name: 'address'
+ }
+ },
+ {
+ natspec: 'The amount of tokens to be spent.',
+ name: 'value',
+ typeName: {
+ name: 'uint256'
+ }
+ },
+ ]
  }
-
- return (
+ ]
+ return (
+ <div>
  <div>
- <Hello />
- <button onClick={() => this.setState({ liked: true })}>
- Like
- </button>
+ <h1 className="title is-1" id="contractName">ERC20</h1>
+ <h2 className="subtitle">Standard ERC20 token <i alt="😉" className="twa twa-wink"></i></h2>
+ <nav aria-label="breadcrumb">
+ <ol className="breadcrumb">
+ <li className="breadcrumb-item active" aria-current="page">test&#x2F;contracts&#x2F;ERC20.sol</li>
+ </ol>
+ </nav>
+ <p style={{ wordBreak: 'break-word' }}>Implementation of the basic standard token.
+ <a href="https://eips.ethereum.org/EIPS/eip-20">https://eips.ethereum.org/EIPS/eip-20</a>
+ Originally based on code by FirstBlood:
+ <a href="https://github.com/Firstbloodio/token/blob/master/smart_contract/FirstBloodToken.sol">https://github.com/Firstbloodio/token/blob/master/smart_contract/FirstBloodToken.sol</a>
+ * This implementation emits additional Approval events, allowing applications to reconstruct the allowance status for
+ all accounts just by listening to said events. Note that this isn&#39;t required by the specification, and other
+ compliant implementations may not do it.
+ </p>
+ <br />
+ <small className="generated">Generated {moment(1589362428218).fromNow()}</small>
  </div>
- );
- }
+
+ <h3>Variables</h3>
+ <p>
+ <strong className="variable">_balances</strong>
+ </p>
+ <p>
+ <strong className="variable">_allowed</strong>
+ </p>
+ <p>
+ <strong className="variable">_totalSupply</strong>
+ </p>
+ {functions.map((f) => <ContentDetails key={f.ast.name} f={f} />)}
+ </div>
+ )
  }
  ReactDOM.render(
- <LikeButton />,
- document.getElementById('like_button_container')
+ <MainContent />,
+ document.getElementById('main-content')
  );
-
- </script> -->
+ </script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  crossorigin="anonymous"></script>
@@ -243,6 +318,11 @@
  integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9"
  crossorigin="anonymous"></script>
  <script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script>
+ <script>$(function () {
+ $('[data-toggle="tooltip"]').tooltip()
+ })</script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js"
+ integrity="sha256-C66CaAImteEKZPYvgng9j10J/45e9sAuZyfPYCwp4gE=" crossorigin="anonymous"></script>
  <!--
  Note: this page is a great way to try React but it's not suitable for production.
  It slowly compiles JSX with Babel in the browser and uses a large development build of React.