Amerigo SmartPiggies Token Explorer

README.md

@@ -1,10 +1,115 @@
-Alethio Gitcoin Bounties
-========================
+SmartPiggies
+<img align="right" width="300" src="app/src/Assets/Logo/piggieface_02.png">
+=
 
-Alethio is a comprehensive suite of blockchain exploration and analytics products for the Ethereum network. We're on a mission of making Ethereum more transparent and accessible to everybody.
+An open source standard for a free peer-to-peer global derivatives market.
+-
 
-We've recently launched our API as a direct way for developers to get real-time access to synthesised, indexed on-chain data in a robust and reliable way. We're looking to support and accelerate the growth of a new wave of Ethereum-powered tools, products and services and we need your help with building awesome, useful products for the Ethereum community by making use of the Alethio API to handle enriched, aggregated on-chain data in ways that haven't been possible before.
+### The initial work for this submission was done in this [repo](https://github.com/smartpiggies/amerigo/tree/master/explorer2): please view it for proof of commits to the work process.
 
-We are strong believers in open source and decentralization - so we've also released our open-source suite, comprised of the Ethereum Lite Explorer and the EthStats network monitor - two powerful tools for monitoring the activity of any Ethereum-like (private/dev or public) network. We need your help with creating additional documentation that will ultimately make these tools more easily accessible to the community.
+A hosted version of this dapp can be viewed at [explorer.smartpiggies.com](https://explorer.smartpiggies.com).
 
-Happy hacking!
+SmartPiggies are non-fungible digital contracts that provide their owners with protection against undesirable changes in the price of any asset, product, or service. They also have a native self-auctioning mechanism that allows them to globally market themselves, eliminating the need for exchanges.
+
+Historically, centralized authorities and rent collecting intermediaries have been critical due the trust and guarantees they inject into modern financial commitments. Today, with the guarantees provided by the Ethereum network and recent innovations provided by the global community, it is now possible to create robust programmable digital assets with linked to the real world, yet have no dependencies on centralized authorities or intermediaries.
+
+SmartPiggies are an example of simple, useful, globally accessible, peer-to-peer financial agreements that can exist on the Ethereum network today.
+
+For more information on the project and to read the pinkpaper please visit the [website](https://smartpiggies.com).
+
+## Work done during the hackathon
+
+For the Ethereal Hackathon we implemented the Aleth.io APIs in a React dapp to build out a token explorer for SmartPiggies. Our explorer, which we named Amerigo, constructs a React UI, using Aleth.io and Drizzle, that allows users to explore SmartPiggies non-fungible tokens. Amerigo retrieves the event data emitted from the SmartPiggies contract and displays this token data in a helpful format so users can view the current real-time global market for SmartPiggies NFTs.
+
+SmartPiggies tokens hold many parameters as well as auction information. The explorer is a critical tool for token introspection and provides market making opportunities for users.
+
+To provide users this information we use the the Aleth.io API endpoint,
+
+`https://api.goerli.aleth.io/v1/contracts/{contract}/logEntries`
+
+to fetch all event information from the SmartPiggies contract.
+
+We filter for creation events and then call,
+
+`https://api.aleth.io/v1/log-entries/{id}/transaction`
+
+to fetch the transaction associated with the creation of a new token.
+
+
+We filter this transaction information to extract a contract address for an oracle resolver that was included as an argument to create the token. We make a call with this address to,
+
+`https://api.goerli.aleth.io/v1/contracts/{address}`
+
+to fetch the oracle resolver parameters supplied during its creation. From this we get information about the associated oracle which will be called during the settlement process.
+
+From the oracle parameters we save the underlying and the data source, and api the oracle will use to return the price. From the other calls we save the token id, strike price, and expiry information for each NFT. We also make an additional filter for auction information that is returned with the first call for `logEntries.`
+
+The dapp displays this information in a component that will provide full token introspection from a clickable dropdown as well as filter options to view only tokens on auction. If the token is on auction, meaning it can be purchased, the dropdown will contain a button for purchase.
+
+Our goal is to continue to build out this design to offer a full feature explorer for the SmartPiggies platform which will include full market introspection, as well as the ability to purchase directly within the explorer.
+
+## A specific industry, user, and use case for which you are solving
+
+SmartPiggies is a decentralized financial product for use by small business and individuals to hedge against price movements of any asset, product, or service for which a price can be retrieved,
+
+SmartPiggies are effectively a price insurance product. SmartPiggies are effective for a specified period of time, provide a specified maximum amount of coverage, and pay out based on specified conditions as would any typical insurance product.   An insurance issuer receives a premium in exchange providing this insurance.
+
+We envision that the primary purchasers of SmartPiggy contracts will be small businesses that are underserved by the global financial system and are exposed to fluctuations in prices for goods, services, and exchange rates that that are inherent to their business activities.
+
+## Unique insights about the industry gathered through primary or secondary research
+
+The DeFi industry has spawned a number of lending and derivatives products, as well as novel enabling technologies such as stable tokens intended to peg to the value of “real-world” currencies. However, as far as the team is aware, no product offering price insurance in the manner of SmartPiggies yet exists. The industry in general offers users the potential to earn “passive income” on various lending products, but this often entails turning over control of one’s cryptocurrency to a lending platform with the expectation that one will be compensated in interest, and eventually, the return of one’s principal. With SmartPiggies, underwriters have the potential to earn a “passive” income stream through insurance premia, without turning their funds over to a third party -- all funds remain locked in the SmartPiggies contract with no capability for those funds to be moved by a privileged account. The only factors affecting the ultimate distribution of funds are the parameters of the smart contract which both the underwriter and purchaser agreed to at the time the option was sold.
+
+Other derivatives in the DeFi industry space do not appear to currently offer the flexibility of SmartPiggies, or the ability to easily hedge risks in non-cryptocurrency financial instruments through the use of stable token payouts. The team believes that this capability opens up many more use cases for decentralized derivatives than the industry has thus far offered to customers.
+
+## Proof that the market you've identified is primed to be disrupted in the next 6-12 months
+
+As we have seen significant cryptocurrency adoption in countries where the need is great, we also believe that small businesses and individuals around the world that suffer through fluctuations in price will immediately grasp that SmartPiggies may be useful to them.
+
+In our view we are not disrupting an existing market. We are creating an ecosystem that generates a financial service that has never before been available to the vast majority of humanity due to scale and and availability issues inherent to the existing global financial and legal system.
+
+## Proof that blockchain adds significant value to this solution over centralized alternatives
+
+The current centralized market for bespoke derivatives is largely closed to non-institutional investors, given the relationship nature of the business, and the cost of the infrastructure required for large institutions to manage their derivatives desks and legal teams. However, price insurance is not a tool which only has value to institutional investors -- many small business owners, for example, could likely utilize bespoke options to protect their enterprises from price shocks if they had access to them. With SmartPiggies, such users can realize the value of such insurance, and underwriters wishing to earn income from premia may issue SmartPiggies without being a large financial institution. Thanks to the programmability and security guarantees of the blockchain, the purchaser of a SmartPiggies option does not need to worry about the counterparty risk of any specific underwriter -- all collateral associated with the option is secured on-chain out of the control of either counterparty before the option is even sold. This increase in market access for both buyers and sellers of price insurance marks a definite improvement over the status quo in current centralized markets for bespoke options.
+
+## Project Rollout
+
+Our rollout plans are flexible at the moment.
+
+For now we are focused on on constructing the MVP contracts and minimal UI components.
+
+If we manage to raise funding at some point in the future we can consider outreach and education efforts, a more sophisticated UI, publishing research and use cases, providing a trusted exchange service, and providing liquidity to the market.
+As of now we are unfunded and as such our scope is limited to working on an MVP in our spare time.
+
+## Team
+[Michael Arief](https://www.linkedin.com/in/mikearief/)
+
+[Toby Algya](https://www.linkedin.com/in/toby-algya-58997712/)
+
+[Alex Lee](https://www.linkedin.com/in/ahlee328/)
+
+## Tech stack
+
+- Ethereum
+
+- Aleth.io
+
+- Goerli Testnet
+
+- Metamask
+
+- Solidity
+
+- OpenZeppelin
+
+- Truffle
+
+- Drizzle
+
+- Ganache
+
+- ReactJS
+
+- NodeJS
+
+- Chainlink

app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

app/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^3.9.3",
+    "blubird": "^0.0.1-security",
+    "drizzle": "^1.2.4",
+    "drizzle-react": "^1.2.0",
+    "drizzle-react-components": "^1.2.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

app/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

app/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

app/src/App.css

@@ -0,0 +1,25 @@
+.App {
+  margin: 2rem;
+}
+
+.Main {
+  position: relative;
+  top: 50px;
+  margin: 2rem auto auto;
+}
+
+.WelcomeBar {
+  padding: 10px 10px 10px;
+}
+
+.Footer {
+  position: fixed;
+  bottom: 0;
+  margin: 2rem auto auto;
+}
+
+.section {
+  text-align: left;
+  max-width: 720px;
+  margin: 4rem auto auto;
+}

app/src/App.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import { DrizzleProvider } from "drizzle-react";
+import { HashRouter,
+         Route,
+         Switch,
+         Redirect } from 'react-router-dom';
+
+import LoadingContainer from "./components/LoadingContainer";
+import Home from "./components/Home";
+
+import "./App.css";
+import drizzleOptions from "./drizzleOptions";
+
+class App extends Component {
+  render() {
+    return (
+      <DrizzleProvider options={drizzleOptions}>
+        <LoadingContainer>
+          <HashRouter>
+            <div>
+              <Switch>
+                <Route exact path="/home" component={Home} />
+
+                <Redirect from="/" to="/home" />
+              </Switch>
+            </div>
+          </HashRouter>
+        </LoadingContainer>
+      </DrizzleProvider>
+    );
+  }
+}
+
+export default App;

app/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});