status-im
/
ETHReport
mirror of https://github.com/status-im/ETHReport.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

PR feedback and modal styling

This commit is contained in:
Sharyn 2018-07-06 15:49:24 +02:00
parent c96c4b8fd2
commit 6062bd8dab
5 changed files with 376 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/browseArchives/index.js
View File

@ -19,6 +19,7 @@ class Search extends React.Component {
activeSingleInterviewId: 1,
isSearchActive: false,
};
this.onInputChange = this.onInputChange.bind(this);
this.toggleSingleInterview = this.toggleSingleInterview.bind(this);
this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
@ -43,6 +44,7 @@ class Search extends React.Component {
toggleInterviewsListModal() {
const { isInterviewsListModalOpen } = this.state;
this.setState({
isInterviewsListModalOpen: !isInterviewsListModalOpen,
isSingleInterviewModalOpen: false,
@ -51,6 +53,7 @@ class Search extends React.Component {
toggleSingleInterview(event) {
const { isSingleInterviewModalOpen, isInterviewsListModalOpen } = this.state;
this.setState({
isInterviewsListModalOpen: !isInterviewsListModalOpen,
isSingleInterviewModalOpen: !isSingleInterviewModalOpen,

356
components/interviews/interviewsList/sss Normal file
View File

@ -0,0 +1,356 @@
const data = [
{ id: 1,
name: 'Fabio Berger + Remco Bloemen',
content: '<div>\n' +
'<p class="c13"></p>\n' +
'</div>\n' +
'<h2 class="c16" id="h.5oofkjz263bh"><span class="c10 c11">Fabio\n' +
'Berger + Remco Bloemen</span></h2>\n' +
'<p class="c13"></p>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0 start" start="1">\n' +
'<li class="c6"><span class="c9">What type of apps do you\n' +
'build?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">0x - Decentralized exchange\n' +
'protocol. It is a set of smart contracts that handle standard\n' +
'transactions in an order format.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">The key advantage here is that\n' +
'these smart contracts leads to shared liquidity</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
'<li class="c8"><span class="c3">We also achieve increased security\n' +
'and network liquidity through our architecture.</span></li>\n' +
'<li class="c8"><span class="c3">We launched the network in August\n' +
'2017.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">It works, but is V1. We are working\n' +
'on V2 which helps people build hybrid stations, supports new token\n' +
'standards, and makes the contract more gas efficient.</span></li>\n' +
'<li class="c5"><span class="c3">V1 only allows humans to create\n' +
'orders; V2 will allow new smart contract to create orders. This is\n' +
'HUGE.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
'<li class="c8"><span class="c3">Notes:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">We’re building the protocol;\n' +
'designing the standard; building dev tools for anyone to build a\n' +
'decentralized exchange.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="5">\n' +
'<li class="c8"><span class="c3">Orders may become invalid for any\n' +
'reason:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Order being filled</span></li>\n' +
'<li class="c5"><span class="c3">Griefing attacks</span></li>\n' +
'<li class="c5"><span class="c3">We’ve now built an OrderWatcher\n' +
'that keeps relayers updated on the state of orders.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">We’re using contract Events as a\n' +
'proxy for state changes.</span></li>\n' +
'<li class="c7"><span class="c3">Can do a diff between state trees\n' +
'and between block headers.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="4">\n' +
'<li class="c5"><span class="c3">We also have a set of smart\n' +
'contracts to handle settlement;</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">Everyone who wants to trade is\n' +
'setting allowances on a smart contract.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
'<li class="c0"><span class="c3">We want upgradability.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="2">\n' +
'<li class="c6"><span class="c9 c10">What are the\n' +
'tools/libraries/frameworks you use?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">EthereumJS / truffle hardwallet\n' +
'provider / Typedoc (to generate documentation) /</span></li>\n' +
'<li class="c8"><span class="c3">We don’t use Truffle\n' +
'anymore</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Not reliable – can have race\n' +
'conditions;</span></li>\n' +
'<li class="c5"><span class="c3">Artifacts don’t allow you to have\n' +
'versions of the contract on different networks</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">You don’t run into this stuff if\n' +
'you’re just building a “hello world”</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="3">\n' +
'<li class="c5"><span class="c3">Overwriting parts of the\n' +
'contracts;</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
'<li class="c8"><span class="c3">We rolled our own. It’s open-source\n' +
'but not documented. We have other things that are keeping us\n' +
'busy.</span></li>\n' +
'<li class="c8"><span class="c3">The problem is that Truffle has too\n' +
'much functionality –– we would like to see more of a Unix\n' +
'philosophy.</span></li>\n' +
'<li class="c8"><span class="c3">Cannot support different versions\n' +
'of Solidity.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Version management doesn’t\n' +
'exist.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="6">\n' +
'<li class="c8"><span class="c3">EthPM –– doesn’t have versioning\n' +
'either? It’s going through a big refactor, so we held off. We need\n' +
'the NPM package manager.</span></li>\n' +
'<li class="c8"><span class="c3">We have built a lot of developer\n' +
'tools to interface with the smart contracts ourselves.</span></li>\n' +
'<li class="c8"><span class="c3">We have also built own deployer and\n' +
'migration tool, as truffle’s did not suit our needs.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="3">\n' +
'<li class="c6"><span class="c9 c10">What are your biggest\n' +
'frustrations?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">Getting a simple experimental\n' +
'environment up is hard</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Remix is there; but it’s not\n' +
'enough.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
'<li class="c8"><span class="c3">Tracing and profiling is not\n' +
'existent.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Remix does it, but can’t do it\n' +
'locally.</span></li>\n' +
'<li class="c5"><span class="c3">“Code coverage” tool exists but\n' +
'inserts console.logs in</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">Adding up gas costs per line of\n' +
'code.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="3">\n' +
'<li class="c5"><span class="c3">Need to do profiling, because gas\n' +
'costs depend on inputs.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
'<li class="c8"><span class="c3">Solidity language\n' +
'itself:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Crashed the Solidity compiler twice\n' +
'today.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">E.g. AbiEncoderV2 is pretty new and\n' +
'hard to understand/use.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="2">\n' +
'<li class="c5"><span class="c3">The code that it produces is\n' +
'inefficient.</span></li>\n' +
'<li class="c5"><span class="c3">There is a stark stack limit in\n' +
'solidity</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">All the variables are locally\n' +
'scoped.</span></li>\n' +
'<li class="c7"><span class="c3">Un-intuitive as it is a curly\n' +
'braced language.</span></li>\n' +
'<li class="c7"><span class="c3">The lifecycle hook value_of is\n' +
'within a function.</span></li>\n' +
'<li class="c7"><span class="c3">Can only access top 16 slack slots.\n' +
'Including input and output.</span></li>\n' +
'<li class="c7"><span class="c3">We need to implement a graph\n' +
'coloring register allocator – to find out what the lifetime of the\n' +
'variables is.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
'<li class="c0"><span class="c3">“This stack slot was used in the\n' +
'first half –– the second half you can use”</span></li>\n' +
'<li class="c0"><span class="c3">Or implement register\n' +
'splitting.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="4">\n' +
'<li class="c5"><span class="c3">Function inlining is frustrating\n' +
'sometimes:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">E.g. SafeMath –– turns every\n' +
'operator into function call – which is a huge gas sink.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="5">\n' +
'<li class="c5"><span class="c3">How Solidity optimizes could be\n' +
'improved:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">It focuses on the code size (which\n' +
'makes sense since it’s minimizing the state tree); but sometimes\n' +
'you need to optimize size of tx gas (e.g. 0x needs optimized\n' +
'fillOrder call)</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="6">\n' +
'<li class="c5"><span class="c3">ABI doesn’t implement\n' +
'introspection</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">EIP 165</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
'<li class="c0"><span class="c3">E.g. “does this contract implement\n' +
'ERC20, or ERC223?”</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3" start="2">\n' +
'<li class="c7"><span class="c3">Solidity should have this\n' +
'in-built.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
'<li class="c0"><span class="c3">Should be built into the API spec\n' +
'and compiler.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="7">\n' +
'<li class="c5"><span class="c3">Inheritance:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">Interface or abstract contract –\n' +
'e.g. Solidity automatically creates getters for state functions ––\n' +
'collides with</span></li>\n' +
'<li class="c7"><span class="c3">Contract which implements an\n' +
'interface – public or external for abstract functions – they\n' +
'collide</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
'<li class="c8"><span class="c3">ERCs – there is not a formal way to\n' +
'describe the interface for contracts.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Have a standard repo –– this will\n' +
'lead to a canonical ABI definition –– can have semantic rules\n' +
'around this. Could run some specific unit tests against</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="4">\n' +
'<li class="c6"><span class="c9 c10">How do you handle\n' +
'testing?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">Testrpc has gotten better\n' +
'––</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Increases the speed at which you\n' +
'can dev.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
'<li class="c8"><span class="c3">Blockstream is really cool. Written\n' +
'by Mica (from Augur?), under the EthereumJS lib.</span></li>\n' +
'<li class="c8"><span class="c3">Good dealing with block re-orgs and\n' +
'changes in state.</span></li>\n' +
'<li class="c8"><span class="c3">Continuous Integration:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Doesn’t really work for smart\n' +
'contracts.</span></li>\n' +
'<li class="c5"><span class="c3">We just use testrpc.</span></li>\n' +
'<li class="c5"><span class="c3">Neufund was different than\n' +
'0x:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">Neufund was a trustee for tokens ––\n' +
'it was centralized by definition.</span></li>\n' +
'<li class="c7"><span class="c3">This made it simpler: I could\n' +
'create “open-ended” contracts –– a switch statement, that the\n' +
'default would send to another proxy contract.</span></li>\n' +
'<li class="c7"><span class="c3">But wouldn’t be able to do this\n' +
'with 0x –– e.g. if we wanted to add Shnorr signatures –– because\n' +
'it’s a governance / security issues.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="5">\n' +
'<li class="c6"><span class="c9">How do you handle smart contract\n' +
'verification and security?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">Code audits before\n' +
'deployment</span></li>\n' +
'<li class="c8"><span class="c3">Want to add a formal verification\n' +
'tool to our deployment tool.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">By analyzing the code, you can find\n' +
'patterns.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
'<li class="c8"><span class="c3">I manually did an audit in v0 of\n' +
'0x:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Make sure all functions have a\n' +
'“Read -&gt; Write -&gt; External Call” pattern, so you don’t have\n' +
'any race conditions.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="6">\n' +
'<li class="c6"><span class="c9 c10">Other bounties?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
'<li class="c8"><span class="c3">Rest of the bounties from\n' +
'Remco</span></li>\n' +
'<li class="c8"><span class="c14">State-watching –– built-in\n' +
'diff’ing of state trees</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Should be implemented in the\n' +
'Ethereum clients – Geth and Rust.</span></li>\n' +
'<li class="c5"><span class="c3">They want this feature for\n' +
'OrderWatcher.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
'<li class="c8"><span class="c3">EIP process is\n' +
'suboptimal:</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">Lacks in consensus-building.\n' +
'There’s vocal people who don’t have good ideas; there’s a lot of\n' +
'noise.</span></li>\n' +
'<li class="c5"><span class="c3">To improve: committee-based\n' +
'approach (reputable stakeholders from reputable projects who get\n' +
'together?).</span></li>\n' +
'<li class="c5"><span class="c3">Problems are getting solved at the\n' +
'wrong abstraction level.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
'<li class="c7"><span class="c3">E.g. NFT standards.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
'<li class="c8"><span class="c3">Neufund was largest Solidity\n' +
'project before –– tokenized equity.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">You want a EuroToken. You don’t\n' +
'want your company valuated in Ether.</span></li>\n' +
'<li class="c5"><span class="c3">What if blockchain forks; which\n' +
'token is actually tied to the company?</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="5">\n' +
'<li class="c8"><span class="c3">Bounty approach gives many\n' +
'different styles within the codebase.</span></li>\n' +
'</ol>\n' +
'<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
'<li class="c5"><span class="c3">This is a problem; e.g. OpenSSL\n' +
'codebase after Masters / PhDs.</span></li>\n' +
'</ol>\n' +
'<p class="c13"></p>',
},
];
export default data;

2
components/modal/index.js
View File

@ -4,7 +4,7 @@ import './style.scss';
const Modal = props => (
<div className={`modal ${props.isModalOpen ? 'modal-open' : ''} ${props.modalOnMobileOnly ? 'modal-on-mobile-only' : ''} `}>
<div className="modal-inner">
<div className="modal-inner container">
{ props.children }
<div role="button" tabIndex="0" onClick={props.closeModal} className="modal-close">x</div> {/* eslint-disable-line */}
</div>

28
components/modal/style.scss
View File

@ -10,8 +10,9 @@
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 3;
background-color: #fff;
overflow: auto;
}
&.modal-on-mobile-only {
@ -40,25 +41,23 @@
}
.modal-inner {
position: relative;
z-index: 4;
background-color: #fff;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
overflow: auto;
padding: calculateRem(20);
width: 100%;
height: 100%;
padding-top: calculateRem(24);
@media (min-width: $tablet) {
padding-top: calculateRem(60);
padding-top: calculateRem(48);
}
&.container {
max-width: calculateRem(1024);
}
}
.modal-close {
position: absolute;
top: calculateRem(12);
right: calculateRem(12);
position: fixed;
top: calculateRem(16);
right: calculateRem(16);
padding: calculateRem(4);
background-color: #cfcfcf;
text-align: center;
@ -67,6 +66,7 @@
border-radius: 50%;
cursor: pointer;
outline: none;
z-index: 4;
&:hover {
background-color: #c1c1c1;

3
styles.scss
View File

@ -13,5 +13,6 @@
.container {
max-width: calculateRem($container-width);
margin: 0 auto;
padding: 0 calculateRem($container-padding);
padding-left: calculateRem($container-padding);
padding-right: calculateRem($container-padding);
}