added position names and logos

stevenbenmoha · Nov 28, 2021 · fbd4141 · fbd4141
1 parent 65a7152
commit fbd4141
Show file tree

Hide file tree

Showing 13 changed files with 4,862 additions and 219 deletions.
diff --git a/.env.prod b/.env.prod
@@ -1,9 +1,5 @@
-REACT_APP_SETJS_CONTROLLER=0xa4c8d221d8BB851f83aadd0223a8900A6921A349
-REACT_APP_SETJS_SET_TOKEN_CREATOR_ADDRESS=0xeF72D3278dC3Eba6Dc2614965308d1435FFd748a
-REACT_APP_SETJS_BASIC_ISSUANCE_MODULE=0xd8EF3cACe8b4907117a45B0b125c68560532F94D
-REACT_APP_SETJS_DEBT_ISSUANCE_MODULE=0x39F024d621367C044BacE2bf0Fb15Fb3612eCB92
-REACT_APP_SETJS_STREAMING_FEE_MODULE=0x08f866c74205617B6F3903EF481798EcED10cDEC
-REACT_APP_SETJS_TRADE_MODULE=0x90F765F63E7DC5aE97d6c576BF693FB6AF41C129
-REACT_APP_SETJS_NAV_ISSUANCE_MODULE=0xaB9a964c6b95fA529CA7F27DAc1E7175821f2334
-REACT_APP_SETJS_PROTOCOL_VIEWER=0x74391125304f1e4ce11bDb8aaAAABcF3A3Ae2f41
-REACT_APP_SETJS_MASTER_ORACLE_ADDRESS=0xA60f9e1641747762aDE7FD5F881b90B691E92B0a
+REACT_APP_SETJS_CONTROLLER=
+REACT_APP_SETJS_SET_TOKEN_CREATOR_ADDRESS=
+REACT_APP_SETJS_BASIC_ISSUANCE_MODULE=
+REACT_APP_SETJS_DEBT_ISSUANCE_MODULE=
+REACT_APP_SETJS_STREAMING_FEE_MODULE=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/material": "^5.2.1",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -13,8 +17,10 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "set.js": "^0.3.3",
     "typescript": "^4.5.2",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "web3": "^1.6.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       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>
+    <title>Explore Token Sets</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,117 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+// src/App.js
+
+import React, {Component} from 'react';
+import Set from "set.js";
+import {
+    basicIssuanceModuleAddress,
+    controllerAddress,
+    debtIssuanceModuleAddress,
+    governanceModuleAddress,
+    masterOracleAddress,
+    navIssuanceModuleAddress,
+    protocolViewerAddress,
+    setTokenCreatorAddress,
+    streamingFeeModuleAddress,
+    tradeModuleAddress
+} from "./constants/ethContractAddresses";
+import {infuraMainnetUrl} from "./constants/web3Providers";
+import {defiPulseAddress, layerTwoAddress, metaverseAddress} from "./constants/tokens";
+import {DisplaySet, Position} from "./classes/DisplaySet";
+import SetList from "./components/SetList";
+import tokenList from "./constants/ethereum.tokenlist.json"
+
+const Web3 = require('web3');
+
+class App extends Component {
+
+    web3: any;
+    mainConfig: any;
+    setToken: any;
+    myAddress = '0xA817fDf9b769D2E74D12e8e28294eFa2c331B799';
+    tokenSets = [defiPulseAddress, metaverseAddress, layerTwoAddress];
+    displayedSets: DisplaySet[] = [];
+    showSets = false;
+
+    state = {
+        setList: this.displayedSets
+    }
+
+    render() {
+        return (
+            <SetList setList={this.state.setList}/>
+        );
+    }
+
+    async componentDidMount() {
+        await this.instantiateSetToken();
+        await this.mapSetDetailsToDisplaySets();
+        await this.setChildState();
+    }
+
+    private async instantiateSetToken() {
+        this.web3 = new Web3(infuraMainnetUrl);
+        this.mainConfig = {
+            web3Provider: this.web3.currentProvider,
+            basicIssuanceModuleAddress: basicIssuanceModuleAddress,
+            controllerAddress: controllerAddress,
+            masterOracleAddress: masterOracleAddress,
+            navIssuanceModuleAddress: navIssuanceModuleAddress,
+            protocolViewerAddress: protocolViewerAddress,
+            setTokenCreatorAddress: setTokenCreatorAddress,
+            streamingFeeModuleAddress: streamingFeeModuleAddress,
+            tradeModuleAddress: tradeModuleAddress,
+            debtIssuanceModuleAddress: debtIssuanceModuleAddress,
+            debtIssuanceModuleV2Address: debtIssuanceModuleAddress,
+            governanceModuleAddress: governanceModuleAddress
+        }
+        this.setToken = new Set(this.mainConfig).setToken;
+    }
+
+    private async mapSetDetailsToDisplaySets() {
+        for (const set of this.tokenSets) {
+
+            await this.fetchSetDetails(set, this.myAddress).then(async res => {
+                const positionAddresses: string[] = [];
+                res.positions.forEach((pos: string[]) => {
+                    positionAddresses.push(pos[0]);
+                })
+                const positionsObj = await this.fetchTokenPositionList(positionAddresses);
+                this.displayedSets.push(new DisplaySet(res.name, res.symbol, set, positionsObj));
+            });
+        }
+        console.log("finished mapping -> ", this.displayedSets);
+    }
+
+    private async setChildState() {
+        this.setState({setList: this.displayedSets});
+    }
+
+    private async fetchSetDetails(setAddress: string, callerAddress: string): Promise<any> {
+        if (this.setToken) {
+            const modules = await this.setToken.getModulesAsync(setAddress, callerAddress);
+            return await this.setToken.fetchSetDetailsAsync(setAddress, modules, callerAddress);
+        }
+    }
+
+    private async fetchTokenPositionList(positions: string[]) {
+
+        const fullPositionList: any[] = [];
+
+        // For each address, fetch the name and logo from a hashmap created from json file of coingecko tokens
+        for (const address of positions) {
+            const array = tokenList.tokens;
+            const result = new Map<String, String>(array.map(obj => [obj.address.toLowerCase(), obj.name + '^' + obj.logoURI]));
+            let mapEntryPosition = result.get(address.toLowerCase());
+
+            if (mapEntryPosition) {
+                //  To avoid complex multi-value map, both name and logo stored in value. extracted below:
+                const name = mapEntryPosition.split('^')[0];
+                const logoURI = mapEntryPosition.split('^')[1];
+                fullPositionList.push(new Position(name, address.toLowerCase(), logoURI));
+            }
+        }
+        return fullPositionList;
+    }
 }
 
 export default App;
diff --git a/src/classes/DisplaySet.tsx b/src/classes/DisplaySet.tsx
@@ -2,6 +2,37 @@ export class DisplaySet {
     name: string;
     symbol: string;
     address: string;
-    currentPosition: string[];
+    currentPositions: Position[];
+
+    constructor(name: string, symbol: string, address: string, currentPositions: Position[]) {
+        this.name = name;
+        this.symbol = symbol;
+        this.address = address;
+        this.currentPositions = currentPositions;
+    }
+}
+
+export class Position {
+    name?: string;
+    address: string;
+    logoURI?: string;
+
+    constructor(name: string, address: string, logoURI: string) {
+        this.name = name;
+        this.address = address;
+        this.logoURI = logoURI;
+    }
+}
+
+/*
+export class PartialPosition {
+    address: string;
+    positionValue: number;
+
+    constructor(address: string, positionValue: string) {
+        this.address = address;
+        this.positionValue = parseInt(positionValue, 16);
+    }
 }
+*/
 
diff --git a/src/components/SetList.tsx b/src/components/SetList.tsx
@@ -1,21 +1,93 @@
+import {
+    Box,
+    Card,
+    CardActions,
+    CardContent,
+    Collapse,
+    IconButton,
+    IconButtonProps,
+    styled,
+} from '@mui/material';
 import React from 'react';
 import {DisplaySet} from "../classes/DisplaySet";
+import "../styles/SetList.css"
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+interface ExpandMoreProps extends IconButtonProps {
+    expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+    const {expand, ...other} = props;
+    return <IconButton {...other} />;
+})(({theme, expand}) => ({
+    transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shortest,
+    }),
+}));
+
+
+const SetList = ({setList}: { setList: DisplaySet[] }) => {
+
+    const [expanded, setExpanded] = React.useState(false);
+
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
 
-const SetList = ({setList}: {setList: DisplaySet[]}) => {
     return (
         <div>
-            <h1>Set List</h1>
-            <h2>fuck</h2>
-            {setList.map((set) => (
-                <div className="card">
-                    <div className="card-body">
-                        <h5 className="card-title">{set.name}</h5>
-                        <h6 className="card-subtitle mb-2 text-muted">{set.symbol}</h6>
-                        <h6 className="card-subtitle mb-2 text-muted">{set.address}</h6>
-                        <p className="card-text">{set.currentPositions}</p>
-                    </div>
-                </div>
-            ))}
+            <h1 className="graphik-font page-title">Explore Token Sets</h1>
+            <Box sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                '& > :not(style)': {
+                    m: 3,
+                    width: 400
+                },
+                justifyContent: 'center'
+            }}>
+                <br/>
+                {setList.map((set, index) =>
+                    <Card className="rounded-border" elevation={12}>
+                        <CardContent className="unified-style card-header">
+                            <div className="card-title">
+                                {set.name} - ${set.symbol}
+                            </div>
+                            <div className="address">
+                                Address:
+                            </div>
+                            <div className="address">
+                                <a href={'https://etherscan.io/address/' + set.address}>{set.address}</a>
+                            </div>
+                        </CardContent>
+                        <CardActions disableSpacing>
+                            <ExpandMore
+                                expand={expanded}
+                                onClick={handleExpandClick}
+                                aria-expanded={expanded}
+                                aria-label="show more">
+                                <ExpandMoreIcon/>
+                            </ExpandMore>
+                        </CardActions>
+                        <Collapse in={expanded} timeout="auto" unmountOnExit>
+                            <CardContent className="graphik-font">
+                                <div className="positions-header">
+                                    Positions:
+                                </div>
+                                {set.currentPositions.map((position, index) =>
+                                    <div className="positions"><a href={'https://etherscan.io/address/' + position.address}><img
+                                        src={position.logoURI}
+                                        alt="logo"
+                                    /><span className="position-name">{position.name}</span></a></div>
+                                )}
+                            </CardContent>
+                        </Collapse>
+                    </Card>
+                )}
+            </Box>
         </div>
     )
 };

diff --git a/src/constants/ethContractAddresses.tsx b/src/constants/ethContractAddresses.tsx
@@ -0,0 +1,24 @@
+// Set JS Contract Addresses - Mainnet
+export const controllerAddress = '0xa4c8d221d8BB851f83aadd0223a8900A6921A349';
+export const setTokenCreatorAddress = '0xeF72D3278dC3Eba6Dc2614965308d1435FFd748a';
+export const basicIssuanceModuleAddress = '0xd8EF3cACe8b4907117a45B0b125c68560532F94D';
+export const debtIssuanceModuleAddress = '0x39F024d621367C044BacE2bf0Fb15Fb3612eCB92';
+export const streamingFeeModuleAddress = '0x08f866c74205617B6F3903EF481798EcED10cDEC'
+export const tradeModuleAddress = '0x90F765F63E7DC5aE97d6c576BF693FB6AF41C129';
+export const navIssuanceModuleAddress = '0xaB9a964c6b95fA529CA7F27DAc1E7175821f2334';
+export const protocolViewerAddress = '0x74391125304f1e4ce11bDb8aaAAABcF3A3Ae2f41';
+export const masterOracleAddress = '0xA60f9e1641747762aDE7FD5F881b90B691E92B0a';
+export const governanceModuleAddress = 'x5C87b042494cDcebA44C541fbB3BC8bFF179d500';
+
+// Set JS Contract Addresses - Kovan
+export const basicIssuanceModuleAddressTest = '0x8a070235a4B9b477655Bf4Eb65a1dB81051B3cC1';
+export const controllerAddressTest = '0x9048278cA7e874F9338e4898C436Ab07AA454701';
+export const masterOracleAddressTest = '0xDFEA02F2824Ee177733d6f108005E95C85D1D4bE';
+export const navIssuanceModuleAddressTest = '0x5dB52450a8C0eb5e0B777D4e08d7A93dA5a9c848';
+export const protocolViewerAddressTest = '0xbbC86C6099B148383941e8E592847fDC61a03283';
+export const setTokenCreatorAddressTest = '0xB24F7367ee8efcB5EAbe4491B42fA222EC68d411';
+export const streamingFeeModuleAddressTest = '0xE038E59DEEC8657d105B6a3Fb5040b3a6189Dd51';
+export const tradeModuleAddressTest = '0xC93c8CDE0eDf4963ea1eea156099B285A945210a';
+export const debtIssuanceModuleAddressTest = '0xe34031E7F4D8Ba4eFab190ce5f4D8451eD1B6A82';
+export const debtIssuanceModuleV2AddressTest = '0xe34031E7F4D8Ba4eFab190ce5f4D8451eD1B6A82';
+
diff --git a/src/constants/ethereum.tokenlist.json b/src/constants/ethereum.tokenlist.json
diff --git a/src/constants/tokens.tsx b/src/constants/tokens.tsx
@@ -0,0 +1,3 @@
+export const defiPulseAddress = '0x1494CA1F11D487c2bBe4543E90080AeBa4BA3C2b';
+export const metaverseAddress = '0x72e364f2abdc788b7e918bc238b21f109cd634d7';
+export const layerTwoAddress = '0x693391144D1e079e20cC64f795e9450C94966171';
diff --git a/src/constants/web3Providers.tsx b/src/constants/web3Providers.tsx
@@ -0,0 +1,3 @@
+export const infuraMainnetUrl = 'https://mainnet.infura.io/v3/a195ae3eaf104a6c944903d74f668de9';
+
+export const infuraKovanUrl = 'https://kovan.infura.io/v3/a195ae3eaf104a6c944903d74f668de9';
diff --git a/src/index.css b/src/index.css
@@ -5,9 +5,15 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #F4F4F4;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@font-face {
+  font-family: 'Graphik';
+  src: local('Graphik'), url(./assets/fonts/Graphik-Font-Family/GraphikSemibold.otf) format('opentype');
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const infuraMainnetUrl = 'https://mainnet.infura.io/v3/a195ae3eaf104a6c944903d74f668de9';

		export const infuraKovanUrl = 'https://kovan.infura.io/v3/a195ae3eaf104a6c944903d74f668de9';