├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── README.md ├── package.json ├── public ├── favicon.png ├── hulogo.png ├── index.html ├── logo128.png ├── logo192.png ├── logo200.png ├── logo200x200t.png ├── logo32.png ├── logo512-og.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── Classes │ ├── TransactionHelper.tsx │ ├── backstopClass.tsx │ ├── cTokenClass.tsx │ ├── comptrollerClass.tsx │ ├── gaugeV4Class.tsx │ ├── generalDetailsClass.tsx │ └── hundredClass.tsx ├── Components │ ├── Account │ │ ├── account.css │ │ └── account.tsx │ ├── AirdropButton │ │ ├── airdropAddresses.tsx │ │ ├── airdropButton.css │ │ └── airdropButton.tsx │ ├── BorrowLimit │ │ ├── borrowLimit.css │ │ └── borrowLimit.tsx │ ├── Button │ │ ├── button.css │ │ ├── button.tsx │ │ └── buttonLink.tsx │ ├── Content │ │ ├── content.tsx │ │ ├── fetchData.tsx │ │ ├── fetchHndRewardsData.tsx │ │ ├── fetchVotingData.tsx │ │ └── tokenHelper.tsx │ ├── Error │ │ ├── error.css │ │ └── error.tsx │ ├── Fireworks │ │ └── fireworks.ts │ ├── Footer │ │ ├── footer.css │ │ └── footer.tsx │ ├── GeneralDetails │ │ ├── generalDetails.tsx │ │ ├── generalDetailsItem.css │ │ ├── generalDetailsItem.tsx │ │ └── style.css │ ├── HundredMenu │ │ ├── hundredMenu.css │ │ └── hundredMenu.tsx │ ├── Markets │ │ ├── BorrowMarket │ │ │ ├── borrowMarket.tsx │ │ │ └── borrowMarketRow.tsx │ │ ├── MarketsDialogs │ │ │ ├── BorrowMarketDialog │ │ │ │ ├── borrowItem.tsx │ │ │ │ ├── borrowLimitSection2.tsx │ │ │ │ ├── borrowMarketsDialog.tsx │ │ │ │ ├── borrowRateSection.tsx │ │ │ │ └── repayItem.tsx │ │ │ ├── SupplyMarketDialog │ │ │ │ ├── StakeMarket.tsx │ │ │ │ ├── backstopMarketTab.tsx │ │ │ │ ├── backstopSection.tsx │ │ │ │ ├── borrowLimitSection.tsx │ │ │ │ ├── directBackstopMarketTab.tsx │ │ │ │ ├── directStakeMarketTab.tsx │ │ │ │ ├── supplyItem.tsx │ │ │ │ ├── supplyMarketDialog.tsx │ │ │ │ ├── supplyRatesSection.tsx │ │ │ │ └── withdrawItem.tsx │ │ │ ├── dialogSection.css │ │ │ ├── enterMarketDialog.css │ │ │ ├── enterMarketDialog.tsx │ │ │ ├── marketDialog.css │ │ │ ├── marketDialogButton.css │ │ │ ├── marketDialogButton.tsx │ │ │ ├── marketDialogItem.tsx │ │ │ └── marketInfoSection.tsx │ │ ├── SupplyMarkets │ │ │ ├── supplyMarket.tsx │ │ │ └── supplyMarketRow.tsx │ │ ├── aprHelpers.tsx │ │ ├── marketContainer.tsx │ │ ├── markets.tsx │ │ └── style.css │ ├── Menu │ │ ├── AddressButton │ │ │ └── addressButton.tsx │ │ ├── HundredButton │ │ │ ├── hundredButton.css │ │ │ └── hundredButton.tsx │ │ ├── NetworkButton │ │ │ ├── networkButton.css │ │ │ └── networkButton.tsx │ │ ├── menu.tsx │ │ └── tabletMenu.tsx │ ├── MessageDialog │ │ ├── exploitDialog.tsx │ │ ├── messageDialog.css │ │ ├── messageDialog.tsx │ │ ├── moonRiverDialog.tsx │ │ └── optimismDialog.tsx │ ├── Modal │ │ ├── modal.css │ │ └── modal.tsx │ ├── Navbar │ │ ├── nav-mobile.css │ │ ├── nav-mobile.tsx │ │ ├── navBarButton.tsx │ │ ├── navBarLeft.tsx │ │ ├── navBarLink.tsx │ │ ├── navBarLinks.tsx │ │ ├── navBarRight.tsx │ │ ├── navbar.css │ │ ├── navbar.tsx │ │ ├── navbarButton.css │ │ ├── navbarLogo.tsx │ │ ├── navbarMobile.tsx │ │ ├── sideMenuButton.tsx │ │ ├── themeSwitch.css │ │ └── themeSwitch.tsx │ ├── NetworksMenu │ │ ├── networksMenu.css │ │ └── networksMenu.tsx │ ├── Range │ │ ├── range.css │ │ └── range.tsx │ ├── SearchTexBox │ │ ├── searchTextBox.css │ │ └── searchTextBox.tsx │ ├── Section │ │ ├── section.tsx │ │ └── style.css │ ├── SideMenu │ │ ├── accountSettings.css │ │ ├── accountSettings.tsx │ │ ├── airdropMenu.css │ │ ├── airdropMenu.tsx │ │ ├── hundredMenu.css │ │ ├── hundredMenu.tsx │ │ ├── networksView.css │ │ ├── networksView.tsx │ │ ├── sideMenu.css │ │ └── sideMenu.tsx │ ├── Spinner │ │ └── spinner.tsx │ ├── StarBpro │ │ ├── starBpro.css │ │ └── starBpro.tsx │ ├── Switch │ │ ├── switch.css │ │ └── switch.tsx │ ├── TabControl │ │ ├── tab.css │ │ └── tabControl.tsx │ ├── Textbox │ │ ├── textBox.css │ │ └── textBox.tsx │ ├── Wallets │ │ ├── wallets.css │ │ └── wallets.tsx │ └── Wrapper │ │ ├── wrapper.css │ │ └── wrapper.tsx ├── Connectors │ ├── connectors.tsx │ ├── metamask-connector │ │ ├── declarations.ts │ │ ├── index.ts │ │ └── types.ts │ └── xdefi-connector │ │ ├── declarations.ts │ │ ├── index.ts │ │ └── types.ts ├── Hundred │ ├── Data │ │ ├── fetchData.tsx │ │ ├── fetchHndRewardsData.tsx │ │ ├── fetchVotingData.tsx │ │ ├── hndPrice.tsx │ │ ├── hundredData.tsx │ │ └── tokenHelper.tsx │ └── Views │ │ └── hundred.tsx ├── Types │ ├── data.tsx │ ├── globalContext.tsx │ ├── hundredDataContext.tsx │ ├── timers.tsx │ └── uiContext.tsx ├── abi.tsx ├── assets │ ├── Abstract_Lines │ │ ├── Abstract_Line_1.svg │ │ ├── Abstract_Line_2.svg │ │ ├── Abstract_Line_3.svg │ │ ├── Abstract_Line_4.svg │ │ └── Abstract_Line_5.svg │ ├── Cubes │ │ ├── Cubes.svg │ │ ├── cube1.svg │ │ ├── cube2.svg │ │ ├── cube3.svg │ │ ├── cube7.svg │ │ ├── cube8.svg │ │ └── cube9.svg │ ├── assets.css │ ├── assets.tsx │ ├── huIcons │ │ ├── huIcons.tsx │ │ ├── hundred-2.svg │ │ ├── hundred.png │ │ ├── hundred.svg │ │ ├── logo copy.svg │ │ ├── logo.png │ │ ├── logo.svg │ │ └── style.css │ ├── icons │ │ ├── HND 1.png │ │ ├── HND Coin.svg │ │ ├── XDEFIWallet.jpeg │ │ ├── cbw.png │ │ ├── closeIcon.png │ │ ├── discord.png │ │ ├── github.png │ │ ├── medium.png │ │ ├── mm.png │ │ ├── moon.svg │ │ ├── rating-star.svg │ │ ├── search-symbol.svg │ │ ├── sun.svg │ │ ├── twitter.png │ │ ├── unstoppable.png │ │ └── wc.png │ └── images │ │ ├── AAVE-logo.svg │ │ ├── ADA-logo.png │ │ ├── ALPHA-logo.png │ │ ├── ARBITRUM-logo.png │ │ ├── ATOM-logo.png │ │ ├── AUTO-logo.png │ │ ├── BAGS-logo.png │ │ ├── BAL-logo.png │ │ ├── BAND-logo.png │ │ ├── BAT-logo.png │ │ ├── BCH-logo.png │ │ ├── BNB-logo.png │ │ ├── BPRO-logo.svg │ │ ├── BTC-logo.svg │ │ ├── BTCB-logo.png │ │ ├── BUSD-logo.png │ │ ├── BZRX-logo.png │ │ ├── CAKE-logo.png │ │ ├── COMP-logo.svg │ │ ├── CREAM-logo.png │ │ ├── CRV-logo.png │ │ ├── DAI-logo.svg │ │ ├── DF-logo.png │ │ ├── DODO-logo.svg │ │ ├── DOT-logo.png │ │ ├── EOS-logo.png │ │ ├── ETH-logo.svg │ │ ├── FIL-logo.png │ │ ├── FRAX-logo.svg │ │ ├── FTM-logo.svg │ │ ├── GNO-logo.png │ │ ├── GNOSIS-logo.png │ │ ├── HBCH-logo.png │ │ ├── HDOT-logo.png │ │ ├── HFIL-logo.png │ │ ├── HHT-logo.png │ │ ├── HLTC-logo.png │ │ ├── HUNDRED-logo.png │ │ ├── HUSD-logo.png │ │ ├── IOTX-logo.svg │ │ ├── KNC-logo.png │ │ ├── LINA-logo.png │ │ ├── LINK-logo.svg │ │ ├── LRC-logo.png │ │ ├── LTC-logo.png │ │ ├── MANA-logo.png │ │ ├── MATIC-logo.png │ │ ├── MDX-logo.png │ │ ├── MIM-logo.svg │ │ ├── MKR-logo.png │ │ ├── MOVR-logo.png │ │ ├── ONE-logo.svg │ │ ├── OP-logo.png │ │ ├── OPT-logo.svg │ │ ├── PAXG-logo.png │ │ ├── PCT-logo.png │ │ ├── POLYGON-logo.svg │ │ ├── RAMP-logo.png │ │ ├── RENBTC-logo.png │ │ ├── REP-logo.png │ │ ├── SNX-logo.svg │ │ ├── SPELL-logo.svg │ │ ├── SUSD-logo.png │ │ ├── SUSHI-logo.svg │ │ ├── SXP-logo.png │ │ ├── TUSD-logo.png │ │ ├── TWT-logo.png │ │ ├── UNI-logo.svg │ │ ├── USDC-logo.svg │ │ ├── USDT-logo.svg │ │ ├── UST-logo.png │ │ ├── VAI-logo.png │ │ ├── WBTC-logo.svg │ │ ├── XDAI-logo.png │ │ ├── XDAI-logo.svg │ │ ├── XRP-logo.png │ │ ├── XTZ-logo.png │ │ ├── XVS-logo.png │ │ ├── YFI-logo.svg │ │ ├── YFII-logo.png │ │ ├── ZRX-logo.png │ │ ├── agEUR-logo.svg │ │ └── vGNO-logo.png ├── bigNumber.tsx ├── helpers.tsx ├── hooks │ └── useENS.ts ├── index.css ├── index.tsx ├── logo.svg ├── logos.tsx ├── networks.tsx ├── react-app-env.d.ts ├── reportWebVitals.ts ├── setupTests.ts └── theme.tsx └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | extends: [ 4 | 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 5 | 'plugin:@typescript-eslint/recommended' // Uses the recommended rules from the @typescript-eslint/eslint-plugin 6 | ], 7 | parserOptions: { 8 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 9 | sourceType: 'module', // Allows for the use of imports 10 | ecmaFeatures: { 11 | jsx: true, // Allows for the parsing of JSX 12 | }, 13 | }, 14 | rules: { 15 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 16 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 17 | "@typescript-eslint/no-explicit-any": ["off"] 18 | }, 19 | settings: { 20 | react: { 21 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 22 | }, 23 | }, 24 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode 26 | .idea 27 | yarn.lock 28 | .env -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 4, 7 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Running the testnet locally 2 | 3 | After install dependencies and building, use: 4 | 5 | ### `REACT_APP_TEST_NETWORK=1 npm run start` 6 | 7 | # Getting Started with Create React App 8 | 9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 10 | 11 | ## Available Scripts 12 | 13 | In the project directory, you can run: 14 | 15 | ### `yarn start` 16 | 17 | Runs the app in the development mode.\ 18 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 19 | 20 | The page will reload if you make edits.\ 21 | You will also see any lint errors in the console. 22 | 23 | ### `yarn test` 24 | 25 | Launches the test runner in the interactive watch mode.\ 26 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 27 | 28 | ### `yarn build` 29 | 30 | Builds the app for production to the `build` folder.\ 31 | It correctly bundles React in production mode and optimizes the build for the best performance. 32 | 33 | The build is minified and the filenames include the hashes.\ 34 | Your app is ready to be deployed! 35 | 36 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 37 | 38 | ### `yarn eject` 39 | 40 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 41 | 42 | 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. 43 | 44 | 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. 45 | 46 | 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. 47 | 48 | ## Learn More 49 | 50 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 51 | 52 | To learn React, check out the [React documentation](https://reactjs.org/). 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hundred", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.4", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@tippyjs/react": "^4.2.6", 10 | "@types/jest": "^27.4.1", 11 | "@types/node": "^17.0.23", 12 | "@types/react": "^17.0.42", 13 | "@types/react-dom": "^17.0.14", 14 | "@uauth/js": "^2.4.0", 15 | "@uauth/web3-react": "^2.4.0", 16 | "@web3-react/core": "^6.1.9", 17 | "@web3-react/injected-connector": "^6.0.7", 18 | "@web3-react/walletconnect-connector": "^6.2.13", 19 | "@web3-react/walletlink-connector": "^6.2.13", 20 | "buffer": "^6.0.3", 21 | "ethcall": "^4.3.5", 22 | "ethers": "^5.6.1", 23 | "fireworks": "^2.2.7", 24 | "keccak256": "^1.0.6", 25 | "lodash": "^4.17.21", 26 | "merkletreejs": "^0.2.31", 27 | "react": "^17.0.2", 28 | "react-dom": "^17.0.2", 29 | "react-error-boundary": "^3.1.4", 30 | "react-jazzicon": "^1.0.3", 31 | "react-modal": "^3.14.4", 32 | "react-scripts": "^5.0.0", 33 | "react-toastify": "^8.2.0", 34 | "react-tooltip": "^4.2.21", 35 | "typescript": "^4.6.2", 36 | "usehooks-ts": "2.6.0", 37 | "util": "^0.12.4", 38 | "web-vitals": "^2.1.4" 39 | }, 40 | "resolutions": { 41 | "@types/react": "^17.0.42", 42 | "@types/react-dom": "^17.0.14" 43 | }, 44 | "scripts": { 45 | "start": "GENERATE_SOURCEMAP=false react-scripts start", 46 | "build": "GENERATE_SOURCEMAP=false react-scripts build", 47 | "test": "react-scripts test", 48 | "eject": "react-scripts eject" 49 | }, 50 | "eslintConfig": { 51 | "extends": [ 52 | "react-app", 53 | "react-app/jest" 54 | ] 55 | }, 56 | "browserslist": { 57 | "production": [ 58 | ">0.2%", 59 | "not dead", 60 | "not op_mini all" 61 | ], 62 | "development": [ 63 | "last 1 chrome version", 64 | "last 1 firefox version", 65 | "last 1 safari version" 66 | ] 67 | }, 68 | "devDependencies": { 69 | "@types/lodash": "^4.14.180", 70 | "@types/react-modal": "^3.13.1", 71 | "@typescript-eslint/eslint-plugin": "^5.16.0", 72 | "@typescript-eslint/parser": "^5.16.0", 73 | "eslint": "^8.11.0", 74 | "eslint-config-prettier": "^8.5.0", 75 | "eslint-plugin-prettier": "^4.0.0", 76 | "eslint-plugin-react": "^7.29.4", 77 | "prettier": "^2.6.0" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/favicon.png -------------------------------------------------------------------------------- /public/hulogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/hulogo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 30 | Hundred Finance 31 | 32 | 33 | 34 |
35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /public/logo128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo128.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo192.png -------------------------------------------------------------------------------- /public/logo200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo200.png -------------------------------------------------------------------------------- /public/logo200x200t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo200x200t.png -------------------------------------------------------------------------------- /public/logo32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo32.png -------------------------------------------------------------------------------- /public/logo512-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo512-og.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | min-height: 100vh; 3 | width: 100%; 4 | min-width: 320px; 5 | height: 100%; 6 | position: relative; 7 | background-color: var(--background-color); 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | .wrapper{ 13 | flex: 1; 14 | } 15 | 16 | .Toastify__toast-body{ 17 | white-space: pre-line; 18 | } -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Classes/TransactionHelper.tsx: -------------------------------------------------------------------------------- 1 | import {ethers} from "ethers"; 2 | 3 | export const ExecuteWithExtraGasLimit = async ( 4 | contract: ethers.Contract, 5 | functionName: string, 6 | args: Array, 7 | gasIncreasePercentage = 0, 8 | spinner?: () => void 9 | ) : Promise => { 10 | const txGas = await contract.estimateGas[functionName](...args) 11 | if(spinner){ 12 | const tx = await contract[functionName](...args, { gasLimit: txGas.add(txGas.mul(gasIncreasePercentage).div(100))}) 13 | if (spinner) spinner() 14 | return await tx.wait() 15 | } 16 | 17 | return await contract[functionName](...args, { gasLimit: txGas.add(txGas.mul(gasIncreasePercentage).div(100))}) 18 | } 19 | 20 | export const ExecutePayableWithExtraGasLimit = async ( 21 | contract: ethers.Contract, 22 | value: ethers.BigNumber, 23 | functionName: string, 24 | args: Array, 25 | gasIncreasePercentage = 0, 26 | spinner?: ()=>void 27 | ) : Promise => { 28 | const txGas = await contract.estimateGas[functionName](...args, { value: value }) 29 | if(spinner){ 30 | const tx = await contract[functionName](...args, { gasLimit: txGas.add(txGas.mul(gasIncreasePercentage).div(100)), value: value }) 31 | if(spinner) spinner() 32 | return await tx.wait() 33 | } 34 | return await contract[functionName](...args, { gasLimit: txGas.add(txGas.mul(gasIncreasePercentage).div(100)), value: value }) 35 | } 36 | -------------------------------------------------------------------------------- /src/Classes/hundredClass.tsx: -------------------------------------------------------------------------------- 1 | import { BigNumber } from "../bigNumber" 2 | 3 | 4 | export class HundredBalance{ 5 | balance: BigNumber 6 | symbol: string 7 | constructor(balance:BigNumber, symbol: string){ 8 | this.balance = balance 9 | this.symbol = symbol 10 | } 11 | } -------------------------------------------------------------------------------- /src/Components/Account/account.css: -------------------------------------------------------------------------------- 1 | .account-settings{ 2 | height: 100%; 3 | width: 100%; 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | justify-content: center; 8 | align-items: center; 9 | gap: 2rem; 10 | } 11 | 12 | .account-settings .account-settings-address{ 13 | font-size: 2rem; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .account-settings .account-settings-address span{ 20 | padding-left: 1rem; 21 | } 22 | 23 | .account-settings .account-settings-address .network-logo{ 24 | padding: .5rem; 25 | border-radius: 50%; 26 | width: 40px; 27 | height: 40px; 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | background-color: var(--logo-background); 32 | } 33 | 34 | .account-settings .account-settings-address .network-logo img{ 35 | width: 35px; 36 | height: 35px; 37 | } -------------------------------------------------------------------------------- /src/Components/Account/account.tsx: -------------------------------------------------------------------------------- 1 | import { useWeb3React } from "@web3-react/core" 2 | import { ethers } from "ethers" 3 | import React, { useEffect } from "react" 4 | import { getShortenAddress } from "../../helpers" 5 | import { useGlobalContext } from "../../Types/globalContext" 6 | import { useUiContext } from "../../Types/uiContext" 7 | import Button from "../Button/button" 8 | import Modal from "../Modal/modal" 9 | import "./account.css" 10 | 11 | const Account: React.FC = () => { 12 | const {accountOpen, setAccountOpen} = useUiContext() 13 | const {address, setAddress, network} = useGlobalContext() 14 | const { connector, deactivate, account} = useWeb3React() 15 | 16 | const handleDisconnect = () => { 17 | try{ 18 | (connector as any).close() 19 | } 20 | catch{} 21 | 22 | window.localStorage.removeItem("provider") 23 | deactivate() 24 | 25 | setAccountOpen(false) 26 | setAddress("") 27 | } 28 | 29 | useEffect(() => { 30 | if (account) 31 | setAddress("0xd491447348c474af15c40839d3e0056a80fec352") 32 | }, [account]) 33 | 34 | return ( 35 | setAccountOpen(false)} title="Address" maxheight="220px"> 36 |
37 |
38 |
39 | 40 |
41 | {getShortenAddress(address, 4)} 42 |
43 | 46 | 47 |
48 | 49 | ) 50 | } 51 | 52 | export default Account -------------------------------------------------------------------------------- /src/Components/AirdropButton/airdropButton.css: -------------------------------------------------------------------------------- 1 | .airdrop-button { 2 | border: 1px solid var(--buttonColor); 3 | color: var(--text); 4 | margin: 0 5px; 5 | display: flex; 6 | height: 40px; 7 | min-width: 110px; 8 | max-width: 210px; 9 | border-radius: 20px; 10 | padding: 0 0px; 11 | transition: background-color 0.2s ease-out; 12 | position: relative; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .airdrop-button-hover:hover { 18 | cursor: pointer; 19 | background-color: var(--buttonColor); 20 | color: var(--buttonHover2); 21 | } 22 | 23 | .airdrop-button .airdrop-button-content { 24 | width: 100%; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | padding: 0 10px; 29 | user-select: none; 30 | } 31 | 32 | .airdrop-button .airdrop-button-content .airdrop-name { 33 | text-align: center; 34 | } 35 | 36 | .airdrop-button .airdrop-button-content .arrow { 37 | font-size: 0.7rem; 38 | } 39 | 40 | .airdrop-button .airdrop-amount { 41 | flex: 1; 42 | padding-left: 5px; 43 | } 44 | 45 | .airdrop-button-spinner{ 46 | background-color: #e9e9e9; 47 | color:#494949; 48 | } 49 | 50 | .airdrop-button-spinner .airdrop-button-content{ 51 | opacity: 0.5; 52 | } 53 | 54 | .airdrop-button .airdrop-spinner{ 55 | position: absolute; 56 | } 57 | -------------------------------------------------------------------------------- /src/Components/BorrowLimit/borrowLimit.css: -------------------------------------------------------------------------------- 1 | .borrow-limit-section{ 2 | height: 80px; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: space-between; 6 | color: var(--text); 7 | } 8 | 9 | .borrow-limit-header{ 10 | font-size: 1rem; 11 | color: var(--secondaryText); 12 | } 13 | 14 | .borrow-limit-item{ 15 | display: flex; 16 | justify-content: space-between; 17 | color: var(--secondaryText); 18 | font-size: .9rem; 19 | } 20 | 21 | .borrow-limit-item .borrow-limit-item-details span{ 22 | padding: 0 3px; 23 | } -------------------------------------------------------------------------------- /src/Components/BorrowLimit/borrowLimit.tsx: -------------------------------------------------------------------------------- 1 | import { BigNumber } from "../../bigNumber" 2 | import React from "react" 3 | import "./borrowLimit.css" 4 | import { useHundredDataContext } from "../../Types/hundredDataContext" 5 | 6 | interface Props{ 7 | newBorrowLimit?: BigNumber | null 8 | } 9 | 10 | const DialogBorrowLimitSection: React.FC = (props : Props) => { 11 | const {generalData} = useHundredDataContext(); 12 | 13 | return ( 14 |
15 |
16 | Borrow Limit 17 |
18 |
19 |
20 | Borrow Limit 21 |
22 |
23 | 24 | {`$${generalData?.totalBorrowLimit ? generalData?.totalBorrowLimit.toFixed(2) : 0}`} 25 | 26 | {props.newBorrowLimit ? ( 27 | 28 | {">"} 29 | 30 | {`$${props.newBorrowLimit.toFixed(2)}`} 31 | 32 | 33 | ) : null} 34 |
35 |
36 |
37 |
38 | Borrow Limit Used 39 |
40 |
41 | {`${generalData?.totalBorrowLimitUsedPercent ? 42 | generalData?.totalBorrowLimitUsedPercent.toFixed(2) : 0}%`} 43 | 44 | {props.newBorrowLimit ? ( 45 | 46 | {">"} 47 | 50 | {`${(generalData && generalData.totalBorrowBalance && props.newBorrowLimit) ? generalData.totalBorrowBalance.div(props.newBorrowLimit).mul(BigNumber.from("100")).toFixed(2) : 0}%`} 51 | 52 | ) : null} 53 |
54 |
55 |
56 | ) 57 | } 58 | 59 | export default DialogBorrowLimitSection 60 | -------------------------------------------------------------------------------- /src/Components/Button/button.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | import { Spinner } from "../../assets/huIcons/huIcons"; 3 | import { useUiContext } from "../../Types/uiContext"; 4 | import "./button.css" 5 | 6 | interface Props { 7 | onClick?: () => void 8 | arrow?: boolean 9 | small?: boolean 10 | large?: boolean 11 | loading?: boolean 12 | active?: boolean 13 | image?: any 14 | disabled?: boolean 15 | rectangle?:boolean 16 | searchText?: boolean 17 | children?: ReactNode 18 | } 19 | 20 | 21 | const Button: React.FC = ({onClick, arrow, small, large, loading, active, image, disabled, rectangle, searchText, children}:Props) => { 22 | const {isMobile, isTablet} = useUiContext() 23 | 24 | return( 25 |
null : onClick}> 31 | {image ? 32 |
33 | {image} 34 |
35 | : null} 36 | {loading ? 37 | 38 | 39 | : 40 | 41 | {children} 42 | } 43 | {arrow ?
▼
: null} 44 |
45 | ) 46 | } 47 | 48 | export default Button -------------------------------------------------------------------------------- /src/Components/Button/buttonLink.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./button.css" 3 | 4 | interface Props{ 5 | url: string, 6 | label: string 7 | } 8 | const ButtonLink: React.FC = ({url, label} : Props) => { 9 | return( 10 | {label} 11 | ) 12 | } 13 | 14 | export default ButtonLink -------------------------------------------------------------------------------- /src/Components/Content/fetchHndRewardsData.tsx: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | import { BigNumber } from "../../bigNumber" 3 | import { GaugeV4 } from "../../Classes/gaugeV4Class" 4 | 5 | export type hndRewardsDataType = { 6 | totalHndRewards: BigNumber, 7 | gaugeAddresses: string[] 8 | } 9 | 10 | export const fetchHndRewards = async( 11 | { gaugesData }: {gaugesData: GaugeV4[]}) : Promise => { 12 | 13 | const gaugeAddresses = Array(8).fill(ethers.constants.AddressZero); 14 | 15 | const claimableGauges = 16 | gaugesData 17 | .filter(g => !g.generalData.backstopGauge) 18 | .filter(g => g.userClaimableHnd.gt(BigNumber.from(0))) 19 | .slice(0, 7); 20 | let result = 0 21 | for (let i = 0; i < claimableGauges.length; i++) { 22 | const hndNum = +claimableGauges[i].userClaimableHnd.toString(); 23 | gaugeAddresses[i] = (claimableGauges[i].generalData.address); 24 | result += hndNum 25 | } 26 | 27 | const totalHndRewards = BigNumber.parseValue(result.noExponents()) 28 | 29 | return { 30 | totalHndRewards: totalHndRewards, 31 | gaugeAddresses: gaugeAddresses 32 | } 33 | } -------------------------------------------------------------------------------- /src/Components/Content/fetchVotingData.tsx: -------------------------------------------------------------------------------- 1 | import { Contract } from "ethcall" 2 | import {VOTING_ESCROW_ABI} from "../../abi" 3 | import { BigNumber } from "../../bigNumber" 4 | import { Comptroller } from "../../Classes/comptrollerClass" 5 | import { Network } from "../../networks" 6 | 7 | export type votingDataType = { 8 | vehndBalance: BigNumber 9 | } 10 | 11 | export const fetchVotingData = async( 12 | { userAddress, comptrollerData, network, }: 13 | {userAddress: string; comptrollerData: Comptroller; network: Network;}) : Promise => { 14 | const votingCalls = [] 15 | if (network.votingAddress) 16 | { 17 | const votingContract = new Contract(network.votingAddress, VOTING_ESCROW_ABI); 18 | votingCalls.push(votingContract.balanceOf(userAddress)) 19 | 20 | } 21 | const votingResult = await comptrollerData.ethcallProvider.all(votingCalls) 22 | 23 | const vehndBalance = votingResult[0] ? BigNumber.from(votingResult[0], 18) : BigNumber.from("0") 24 | return {vehndBalance:vehndBalance} 25 | } 26 | -------------------------------------------------------------------------------- /src/Components/Content/tokenHelper.tsx: -------------------------------------------------------------------------------- 1 | import { BigNumber } from "../../bigNumber" 2 | import { ethers } from "ethers" 3 | import { CTokenInfo } from "../../Classes/cTokenClass" 4 | 5 | const gasLimit = "250000"; 6 | 7 | export const getMaxAmount = async (market: CTokenInfo, provider: ethers.providers.Web3Provider): Promise => { 8 | if (market.isNativeToken) { 9 | const gasPrice = BigNumber.from(await provider.getGasPrice()) 10 | const price = gasPrice.mul(BigNumber.from(gasLimit)) 11 | const balance = market.underlying.walletBalance.sub(price) 12 | return balance 13 | } 14 | 15 | return market.underlying.walletBalance 16 | } 17 | 18 | export const getMaxRepayAmount = (market: CTokenInfo) : BigNumber => { 19 | const maxRepayFactor = BigNumber.from("1").add(market.borrowApy); // e.g. Borrow APY = 2% => maxRepayFactor = 1.0002 20 | if (market.isNativeToken) { 21 | return market.borrowBalanceInTokenUnit//.times(maxRepayFactor).decimalPlaces(18); // Setting it to a bit larger, this makes sure the user can repay 100%. 22 | } 23 | return market.borrowBalanceInTokenUnit.mul(maxRepayFactor); // The same as ETH for now. The transaction will use -1 anyway. 24 | } -------------------------------------------------------------------------------- /src/Components/Error/error.css: -------------------------------------------------------------------------------- 1 | .error{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | flex-direction: column; 6 | flex: 1; 7 | } 8 | 9 | .error-message{ 10 | font-size: 1.1rem; 11 | } -------------------------------------------------------------------------------- /src/Components/Error/error.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Modal from "../Modal/modal" 3 | import "./error.css" 4 | 5 | interface Props{ 6 | open: boolean, 7 | close: () => void, 8 | errorMessage?: string, 9 | button?: any 10 | } 11 | 12 | 13 | const Error: React.FC = ({open, close, errorMessage, button}: Props) => { 14 | return ( 15 | 16 | 17 |
18 |
19 | 20 | {errorMessage} 21 |
22 | {button ? button : null} 23 |
24 | 25 | ) 26 | } 27 | 28 | export default Error 29 | -------------------------------------------------------------------------------- /src/Components/Fireworks/fireworks.ts: -------------------------------------------------------------------------------- 1 | import fx from 'fireworks' 2 | 3 | const fireworksInit = (parentNode?: string) : void => { 4 | const range:any[] = [...new Array(3)] 5 | 6 | const width = window.innerWidth 7 | const height = window.innerHeight 8 | const parent = parentNode ? document.getElementById(parentNode) : undefined 9 | range.map(() => 10 | fx({ 11 | x: Math.floor(Math.random() * width / 2) + width / 4, 12 | y: Math.floor(Math.random() * height / 2) + height / 4, 13 | colors: ['#cc3333', '#4CAF50', '#81C784'], 14 | parentNode: parent ? parent : undefined, 15 | particleTimeout: 1000 16 | }) 17 | ) 18 | } 19 | 20 | export const fireworks = (parentNode?: string) : void => { 21 | for(let i=0; i<10; i++){ 22 | setTimeout(() => { 23 | fireworksInit(parentNode) 24 | }, i*500 + 1); 25 | } 26 | } -------------------------------------------------------------------------------- /src/Components/GeneralDetails/generalDetailsItem.css: -------------------------------------------------------------------------------- 1 | .general-details-item{ 2 | display: block; 3 | width: 25.5rem; 4 | z-index: 2; 5 | } 6 | 7 | .general-details-item-content{ 8 | padding: 1.2rem 2rem; 9 | text-align: left; 10 | border: 2px solid transparent; 11 | background: var(--border-background) padding-box, 12 | var(--border-line) border-box; 13 | border-radius: 5px; 14 | } 15 | 16 | .general-details-item-content-item label{ 17 | display: flex; 18 | align-items: center; 19 | gap: .3rem; 20 | 21 | } 22 | 23 | .general-details-item-content-item span{ 24 | font-style: normal; 25 | font-weight: 900; 26 | font-size: 2rem; 27 | /* line-height: 2rem; */ 28 | display: flex; 29 | align-items: center; 30 | text-align: center; 31 | letter-spacing: 0.05em; 32 | background: var(--hundred-gradient-1); 33 | -webkit-background-clip: text; 34 | -webkit-text-fill-color: transparent; 35 | background-clip: text; 36 | color: transparent; 37 | white-space: nowrap; 38 | } 39 | 40 | .general-details-item-content-item .value-details{ 41 | font-size: 1.1rem; 42 | } 43 | 44 | .general-details-item-content-item{ 45 | padding: .5rem 0 1.2rem 0; 46 | } 47 | 48 | .general-details-item-content-item:not(:last-child) { 49 | border-bottom: 2px solid transparent; 50 | background: var(--border-background) padding-box, 51 | var(--general-details-seperator) border-box; 52 | } -------------------------------------------------------------------------------- /src/Components/GeneralDetails/generalDetailsItem.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import Tippy from '@tippyjs/react'; 3 | import 'tippy.js/dist/tippy.css'; // optional 4 | import "./generalDetailsItem.css" 5 | 6 | interface Children{ 7 | children?: ReactNode 8 | } 9 | 10 | interface Title{ 11 | title: string 12 | } 13 | 14 | interface Props { 15 | label?: string, 16 | value: string, 17 | className?: string, 18 | valueDetails?: string, 19 | toolTip?: string, 20 | onClick?: (() => void) | null 21 | } 22 | 23 | const GeneralDetailsItem: React.FC = (props : Children) => { 24 | return( 25 |
26 | {props.children} 27 |
28 | ) 29 | } 30 | 31 | const GeneralDetailsItemTitle: React.FC = (props : Title) => { 32 | return( 33 | <div className = "general-details-item-title"> 34 | <h1>{props.title}</h1> 35 | </div> 36 | ) 37 | } 38 | 39 | const GeneralDetailsItemContent: React.FC<Children> = (props : Children) => { 40 | return( 41 | <div className = "general-details-item-content"> 42 | {props.children} 43 | </div> 44 | ) 45 | } 46 | 47 | const GeneralDetailsItemContentItem : React.FC<Props> = (props : Props) => { 48 | return( 49 | <div className={`general-details-item-content-item ${props.className ? props.className : ""}`} onClick={() => props.onClick ? props.onClick() : null}> 50 | {props.label ? props.toolTip ? <label><h3>{props.label}</h3> 51 | <Tippy content={props.toolTip} interactive={true}> 52 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="info-circle" viewBox="0 0 16 16" style={{userSelect: "none", outline: "none", cursor: "pointer"}}> 53 | <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> 54 | <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> 55 | </svg> 56 | </Tippy> 57 | </label> :<label><h3>{props.label}</h3></label> : ""} 58 | {props.value ? <span className={props.className ? props.className : ""}>{props.value} {props.valueDetails ? <span className="value-details">{props.valueDetails}</span> : ""}</span> : ""} 59 | 60 | </div> 61 | ) 62 | } 63 | 64 | export {GeneralDetailsItem, GeneralDetailsItemTitle, GeneralDetailsItemContent, GeneralDetailsItemContentItem} -------------------------------------------------------------------------------- /src/Components/HundredMenu/hundredMenu.css: -------------------------------------------------------------------------------- 1 | 2 | .hundred-menu .hundred-price{ 3 | font-size: 3rem; 4 | font-weight: 500; 5 | line-height: 4rem; 6 | padding: 1.5rem 0; 7 | text-align: center; 8 | overflow: hidden; 9 | } 10 | 11 | .hundred-menu .hundred-price .tvl{ 12 | font-size: 1.25rem; 13 | opacity: .5; 14 | } 15 | 16 | .hundred-menu .hundred-price .links{ 17 | display: flex; 18 | flex-wrap: wrap; 19 | gap: 1rem; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .hundred-menu .hundred-menu-account{ 25 | display: flex; 26 | flex-direction: column; 27 | font-size: 1.5rem; 28 | font-weight: 500; 29 | justify-content: space-around; 30 | gap: 1rem; 31 | } 32 | 33 | .hundred-menu .hundred-menu-account .hundred-menu-account-item{ 34 | display: flex; 35 | justify-content: space-between; 36 | gap: .1rem; 37 | } -------------------------------------------------------------------------------- /src/Components/Markets/BorrowMarket/borrowMarketRow.tsx: -------------------------------------------------------------------------------- 1 | import { BigNumber } from "../../../bigNumber" 2 | import React from "react" 3 | import { Spinner } from "../../../assets/huIcons/huIcons" 4 | import { CTokenInfo, CTokenSpinner } from "../../../Classes/cTokenClass" 5 | 6 | import "../style.css" 7 | import { useUiContext } from "../../../Types/uiContext" 8 | import { useWeb3React } from "@web3-react/core" 9 | import { providers } from "ethers" 10 | 11 | interface Props{ 12 | market: CTokenInfo | undefined, 13 | marketSpinners: CTokenSpinner | undefined, 14 | borrowMarketDialog: (market: CTokenInfo) => void, 15 | } 16 | 17 | const BorrowMarketRow: React.FC<Props> = (props : Props) => { 18 | const {setShowWallets} = useUiContext() 19 | const { account } = useWeb3React<providers.Web3Provider>() 20 | 21 | const handleOpenBorrowMarketDialog = () => { 22 | if(!account){ 23 | setShowWallets(true) 24 | return 25 | } 26 | 27 | if(props.market && !props?.marketSpinners?.spinner){ 28 | props.borrowMarketDialog(props.market) 29 | } 30 | return 31 | } 32 | 33 | return ( 34 | <tr className={props.marketSpinners?.spinner ? "disable-row" : ""} onClick={handleOpenBorrowMarketDialog}> 35 | <td> 36 | <div className="asset"> 37 | <div className="asset-logo"> 38 | <img className="rounded-circle" src={props?.market?.underlying.logo} alt=""/> 39 | </div> 40 | <span>{props?.market?.underlying.symbol}</span> 41 | </div> 42 | </td> 43 | <td className={props.market && +props.market.borrowApy.toFixed(2) > 0 ? "positive" : ""}> 44 | {`${props.market ? props.market.borrowApy.mul(BigNumber.from("100")).toFixed(2): '0.00'}%`} 45 | {/* {props?.details?.borrowPctApy?.gt(BigNumber.from("0")) ? ( 46 | <div> 47 | {`(${props.details.borrowPctApy?.times(100).toFixed(2)}% PCT)`} 48 | </div> 49 | ) : null} */} 50 | </td> 51 | <td> 52 | {props.market ? (+props.market.borrowBalanceInTokenUnit.toString() > 0.001 || +props.market.borrowBalanceInTokenUnit.toString() === 0 53 | ? +props.market.borrowBalanceInTokenUnit.toFixed(4) : "<0.001"): "0"} 54 | </td> 55 | 56 | <td> 57 | {props.market ? +props.market.underlying.walletBalance.toRound(3).toString() : "0"} 58 | </td> 59 | <td> 60 | <div className="spinner-row borrow-market-spinner"> 61 | <div className="borrow-market-liquidity">{`${props.market ? props.market.liquidity.convertToLargeNumberRepresentation(3, '$') : "$0"}`}</div> 62 | {props.marketSpinners?.spinner && (props.marketSpinners?.borrowSpinner || props.marketSpinners?.repaySpinner) ? 63 | <Spinner size={"20px"}/> 64 | : null} 65 | 66 | </div> 67 | </td> 68 | </tr> 69 | ) 70 | } 71 | 72 | export default BorrowMarketRow -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/BorrowMarketDialog/borrowRateSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { BigNumber } from "../../../../bigNumber" 3 | import Logos from "../../../../logos" 4 | import { useHundredDataContext } from "../../../../Types/hundredDataContext" 5 | import "../dialogSection.css" 6 | 7 | 8 | const BorrowRateSection: React.FC = () => { 9 | const {selectedMarket} = useHundredDataContext() 10 | 11 | return ( 12 | <div className="dialog-section"> 13 | <div className="dialog-section-title"> 14 | Borrow Rate 15 | </div> 16 | <div className="dialog-section-content"> 17 | <div className="logo-holder"> 18 | <img className="rounded-circle" 19 | style={{ width: "25px", height: "25px", margin: "0px 0px 0px 0px" }} 20 | src={selectedMarket ? {...selectedMarket}?.underlying.logo : undefined} 21 | alt=""/> 22 | </div> 23 | <div className="fill">Borrow APY</div> 24 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 25 | {`${selectedMarket ? {...selectedMarket}?.borrowApy.mul(BigNumber.from("100")).toFixed(2) : "0.00"}%`} 26 | </div> 27 | </div> 28 | <div className="dialog-section-content"> 29 | <div className="logo-holder"> 30 | <img className="rounded-circle" 31 | style={{ width: "25px", height: "25px", margin: "0px 0px 0px 0px" }} 32 | src={Logos["HND"]} 33 | alt=""/> 34 | </div> 35 | <div className="fill">HND APY</div> 36 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 37 | {`${selectedMarket ? (+{...selectedMarket}?.borrowHndApy * 100).toFixed(2) : "0.00"}%`} 38 | </div> 39 | </div> 40 | </div> 41 | ) 42 | } 43 | 44 | export default BorrowRateSection -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/SupplyMarketDialog/supplyRatesSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import {stakingApr, formatApr} from "../../aprHelpers"; 3 | import "../dialogSection.css" 4 | import { useHundredDataContext } from "../../../../Types/hundredDataContext"; 5 | import { GaugeV4 } from "../../../../Classes/gaugeV4Class"; 6 | import Logos from "../../../../logos" 7 | 8 | interface Props{ 9 | gaugeV4: GaugeV4 | null | undefined 10 | } 11 | const SupplyRateSection:React.FC<Props> = (props: Props) => { 12 | const { selectedMarket } = useHundredDataContext(); 13 | 14 | return ( 15 | selectedMarket ? 16 | <div className="dialog-section"> 17 | <div className="dialog-section-title"> 18 | Supply Rate 19 | </div> 20 | <div className="dialog-section-content"> 21 | <div className="logo-holder"> 22 | <img className="rounded-circle" 23 | style={{ width: "25px", height: "25px", margin: "0px 0px 0px 0px" }} 24 | src={{...selectedMarket}?.underlying.logo} 25 | alt=""/> 26 | </div> 27 | <div className="fill">Supply APY</div> 28 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 29 | {`${{...selectedMarket} ? formatApr({...selectedMarket}?.supplyApy) : "0.00"}%`} 30 | </div> 31 | </div> 32 | <div className="dialog-section-content"> 33 | <div className="logo-holder"> 34 | <img className="rounded-circle" 35 | style={{ width: "25px", height: "25px", margin: "0px 0px 0px 0px" }} 36 | src={Logos["HND"]} 37 | alt=""/> 38 | </div> 39 | <div className="fill">Stake APR</div> 40 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 41 | { stakingApr({...selectedMarket}, props.gaugeV4) } 42 | </div> 43 | </div> 44 | </div> 45 | : null 46 | ) 47 | } 48 | 49 | export default SupplyRateSection -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/dialogSection.css: -------------------------------------------------------------------------------- 1 | .dialog-section{ 2 | background-color: var(--dialogSectionBackground); 3 | color: var(--secondaryText); 4 | padding: 10px; 5 | display: flex; 6 | flex-direction: column; 7 | border-radius: 5px; 8 | } 9 | 10 | .dialog-section-no-top-gap{ 11 | padding-top: 0; 12 | } 13 | 14 | .dialog-section-no-bottom-gap{ 15 | padding-bottom: 0; 16 | } 17 | 18 | 19 | .dialog-section-content{ 20 | 21 | display: flex; 22 | height: 25px; 23 | justify-content: space-between; 24 | } 25 | 26 | .dialog-section .dialog-section-content .fill{ 27 | flex:1; 28 | padding-left: 12px; 29 | text-align: left; 30 | line-height: 25px; 31 | } 32 | 33 | .dialog-section .logo-holder{ 34 | width: 25px; 35 | height: 25px; 36 | border-radius: 100%; 37 | background-color: white; 38 | } 39 | 40 | .dialog-section-title{ 41 | display: none; 42 | } 43 | 44 | .dialog-section-content .dialog-section-content-header{ 45 | line-height: 25px; 46 | } 47 | 48 | .dialog-section-content .dialog-section-content-value{ 49 | line-height: 25px; 50 | display: flex; 51 | } 52 | 53 | .dialog-section-content-details{ 54 | display: flex; 55 | height: 5px; 56 | justify-content: space-between; 57 | font-size: 0.85rem; 58 | } 59 | 60 | .dialog-section-content .dialog-section-content-header-details{ 61 | line-height: 0px; 62 | } 63 | 64 | .dialog-section-content-value-details{ 65 | line-height: 0px; 66 | 67 | } 68 | 69 | .dialog-section-content .dialog-section-content-value .dialog-section-arrow{ 70 | 71 | position: relative; 72 | padding: 0 5px; 73 | display: none; 74 | 75 | } 76 | 77 | .dialog-section-content .dialog-section-content-value .dialog-section-arrow-active{ 78 | display: initial; 79 | } 80 | 81 | .dialog-section-content .dialog-section-content-value .dialog-section-arrow svg{ 82 | transform: rotate(270deg); 83 | } 84 | 85 | 86 | -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/enterMarketDialog.css: -------------------------------------------------------------------------------- 1 | .dialog{ 2 | display: none; 3 | position: fixed; 4 | top:0vh; 5 | width:100%; 6 | height: 100%; 7 | 8 | z-index: 5000; 9 | left:0; 10 | margin: 0; 11 | padding: 5px; 12 | } 13 | 14 | .open-dialog{ 15 | display: block; 16 | } 17 | 18 | .dialog-box{ 19 | max-width: 400px; 20 | min-width: 305px; 21 | min-height: 350px; 22 | -webkit-box-shadow: var(--boxShadow); 23 | box-shadow: var(--boxShadow); 24 | border-radius: 10px; 25 | padding:1rem; 26 | position: fixed; 27 | top:15%; 28 | left: 50%; 29 | transform: translateX(-50%); 30 | background-color: var(--); 31 | display: flex; 32 | flex-direction: column; 33 | 34 | } 35 | 36 | .dialog-box .dialog-close { 37 | height: 10px; 38 | width: 10px; 39 | cursor: pointer; 40 | position: absolute; 41 | top: 15px; 42 | right: 15px; 43 | } 44 | 45 | .dialog-close:hover{ 46 | opacity: 0.7; 47 | } 48 | 49 | 50 | .dialog-box .dialog-title{ 51 | display: flex; 52 | align-items: center; 53 | margin-bottom: 40px; 54 | height: 40px; 55 | color: var(--secondaryText); 56 | font-size:1.3rem; 57 | } 58 | 59 | .dialog-box .dialog-content{ 60 | position: relative; 61 | min-height: 270px; 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: space-between; 65 | padding: 10px; 66 | border-top: 1px solid var(--borderBottom); 67 | } 68 | 69 | .dialog-box .dialog-content .dialog-message{ 70 | color: var(--grayText); 71 | line-height: 1.5rem; 72 | } 73 | 74 | .dialog-box .dialog-content .dialog-button{ 75 | width: 100%; 76 | height: 50px; 77 | font-size: 1.1rem; 78 | outline: none; 79 | color: var(--text); 80 | cursor: pointer; 81 | border-radius: 25px; 82 | border: 1px solid var(--buttonColor); 83 | background-color: var(--buttonColor); 84 | } 85 | 86 | .dialog-box .dialog-content .dialog-button:hover{ 87 | background-color: var(--boxColor); 88 | color:var(--secondaryText); 89 | } 90 | 91 | .dialog-box .dialog-content .dialog-button:disabled{ 92 | pointer-events: none; 93 | background-color: var(--buttonHover2); 94 | color: var(--secondaryText); 95 | opacity: 0.6; 96 | } -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/marketDialogButton.css: -------------------------------------------------------------------------------- 1 | .market-dialog-button{ 2 | display: block; 3 | height: 60px; 4 | display: flex; 5 | text-align: center; 6 | justify-content: center; 7 | user-select: none; 8 | 9 | } 10 | 11 | .market-dialog-button button{ 12 | margin: 10px auto auto; 13 | height: 45px; 14 | width: 100%; 15 | font-size: 1.2rem; 16 | outline: none; 17 | border: 1px solid var(--buttonHover); 18 | background-color: var(--buttonColor); 19 | color:var(--text); 20 | border-radius: 5px; 21 | cursor: pointer; 22 | } 23 | 24 | .market-dialog-button button:disabled{ 25 | border: 1px solid var(--buttonColor); 26 | cursor: no-drop; 27 | } 28 | 29 | .market-dialog-button button:hover{ 30 | background-color: var(--boxBackground); 31 | color:var(--secondaryText); 32 | } 33 | 34 | .market-dialog-button button:active{ 35 | -webkit-box-shadow: 0px 0px 20px -7px rgba(65,121,241,0.75); 36 | box-shadow: 0px 0px 20px -7px rgba(65,121,241,0.75); 37 | background-color: var(--buttonHover); 38 | color: #f1f1f1; 39 | user-select: none; 40 | } 41 | 42 | .market-dialog-button button:disabled{ 43 | background-color: #e9e9e9; 44 | color:#494949; 45 | } 46 | 47 | .market-dialog-button button:disabled:hover{ 48 | -webkit-box-shadow: none; 49 | box-shadow: none; 50 | } 51 | 52 | .logo-container{ 53 | width: 30px; 54 | height: 30px; 55 | margin-right: 10px; 56 | border-radius: 100%; 57 | } 58 | -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/marketDialogButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./marketDialogButton.css" 3 | 4 | interface Props{ 5 | disabled: boolean, 6 | children: ReactNode, 7 | onClick: () => void, 8 | className?: string 9 | } 10 | 11 | const MarketDialogButton: React.FC<Props> = (props: Props) => { 12 | return ( 13 | <div className={`market-dialog-button ${props.className ? props.className : ""}`}> 14 | <button disabled={props.disabled} onClick={() => props.onClick()}>{props.children}</button> 15 | </div> 16 | ) 17 | } 18 | 19 | export default MarketDialogButton -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/marketDialogItem.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./dialogSection.css" 3 | 4 | interface Props{ 5 | title: string, 6 | value: string, 7 | className?: string 8 | } 9 | 10 | const MarketDialogItem: React.FC<Props> = (props : Props) => { 11 | return ( 12 | <div className={`dialog-section ${props.className ? props.className : ""}`}> 13 | <div className="dialog-section-content"> 14 | <div className="dialog-section-content-header"> 15 | <span>{props.title}</span> 16 | </div> 17 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 18 | {props.value} 19 | </div> 20 | </div> 21 | </div> 22 | ) 23 | } 24 | 25 | export default MarketDialogItem -------------------------------------------------------------------------------- /src/Components/Markets/MarketsDialogs/marketInfoSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { BigNumber } from "../../../bigNumber" 3 | import { useHundredDataContext } from "../../../Types/hundredDataContext" 4 | import "./dialogSection.css" 5 | 6 | interface Props{ 7 | collateralFactorText?: string, 8 | } 9 | 10 | const DialogMarketInfoSection : React.FC<Props> = (props : Props) => { 11 | const {selectedMarket} = useHundredDataContext() 12 | 13 | const getSupplyBorrowed = () : string => { 14 | if (selectedMarket){ 15 | const market = {...selectedMarket} 16 | const marketTotalBorrowInTokenUnit = +market?.marketTotalBorrowInTokenUnit.toString() 17 | const underlyingAmount = +market?.cash.toString() 18 | let value = marketTotalBorrowInTokenUnit / (marketTotalBorrowInTokenUnit + underlyingAmount) * 100 19 | if (isNaN(value)) value = 0 20 | //else value = Math.round((value + Number.EPSILON) * Math.pow(10, 18)) / Math.pow(10, 18) 21 | return BigNumber.parseValue(value.toFixed(18)).toRound(2, false, true)+"%" 22 | } 23 | return "0%" 24 | } 25 | 26 | return ( 27 | <div className="dialog-section"> 28 | <div className="dialog-section-title"> 29 | Market Info 30 | </div> 31 | {props.collateralFactorText ? ( 32 | <div className="dialog-section-content"> 33 | <div className="dialog-section-content-header"> 34 | <span>{props.collateralFactorText}</span> 35 | </div> 36 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 37 | {`${selectedMarket ? {...selectedMarket}?.collateralFactor?.mul(BigNumber.from(100)).toRound(2, false, true) : "0.00"}%`} 38 | </div> 39 | </div> 40 | ) : null} 41 | <div className="dialog-section-content"> 42 | <div className="dialog-section-content-header"> 43 | <span>% of Supply Borrowed</span> 44 | </div> 45 | <div className="dialog-section-content-value" style={{ margin: "0px 0px 0px 0px" }}> 46 | {getSupplyBorrowed()} 47 | </div> 48 | </div> 49 | </div> 50 | ) 51 | } 52 | 53 | export default DialogMarketInfoSection -------------------------------------------------------------------------------- /src/Components/Markets/aprHelpers.tsx: -------------------------------------------------------------------------------- 1 | import {CTokenInfo} from "../../Classes/cTokenClass"; 2 | import {GaugeV4} from "../../Classes/gaugeV4Class"; 3 | import {BigNumber} from "../../bigNumber"; 4 | 5 | export function stakingApr(market: CTokenInfo|null|undefined, gauge: GaugeV4|null|undefined): string { 6 | 7 | if (!market || !gauge) { 8 | return "0.00%" 9 | } 10 | 11 | if (+gauge.userWorkingStakeBalance > 0) { 12 | if (gauge.generalData.backstopGauge) { 13 | return `${formatApr(market?.veHndBackstopAPR)}%` 14 | } 15 | return `${formatApr(market?.veHndAPR)}%` 16 | } 17 | 18 | 19 | if (gauge.generalData.backstopGauge) { 20 | return `${formatApr(market?.veHndBackstopAPR)}-${formatApr(market?.veHndBackstopMaxAPR)}%` 21 | } 22 | 23 | return `${formatApr(market?.veHndAPR)}-${formatApr(market?.veHndMaxAPR)}%` 24 | } 25 | 26 | export function rewardTokenApr(market: CTokenInfo|null, gauge: GaugeV4|null|undefined): string { 27 | if (!market || !gauge) { 28 | return "0.00%" 29 | } 30 | 31 | return `${formatApr(market?.veRewardTokenAPR)}%` 32 | } 33 | 34 | export function formatApr(apr: BigNumber): string { 35 | return BigNumber.parseValue((+apr.toString() * 100).noExponents()).toRound(2, false, true) 36 | } -------------------------------------------------------------------------------- /src/Components/Markets/marketContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./style.css" 3 | 4 | interface Props{ 5 | onClick?: () => void, 6 | children?: ReactNode 7 | } 8 | 9 | const MarketContainer: React.FC<Props> = (props : Props) => { 10 | return( 11 | <div className="market-container"> 12 | {props.children} 13 | </div> 14 | ) 15 | } 16 | 17 | const MarketContainerTitle : React.FC<Props> = (props : Props) => { 18 | return( 19 | <div className="market-container-title"> 20 | {props.children} 21 | </div> 22 | ) 23 | } 24 | 25 | const MarketContainerShowMore : React.FC<Props> = (props : Props) => { 26 | return( 27 | <div className="market-container-title market-container-show-more" onClick = {props.onClick}> 28 | {props.children} 29 | </div> 30 | ) 31 | } 32 | 33 | 34 | export { 35 | MarketContainer, 36 | MarketContainerTitle, 37 | MarketContainerShowMore 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/Components/Menu/AddressButton/addressButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getShortenAddress } from '../../../helpers'; 3 | import { useUiContext } from '../../../Types/uiContext'; 4 | import { useWeb3React } from '@web3-react/core'; 5 | import { providers } from 'ethers'; 6 | import Jazzicon, { jsNumberForAddress } from 'react-jazzicon' 7 | import Button from '../../Button/button'; 8 | 9 | const AddressButton: React.FC = () => { 10 | const {setShowWallets, setMobileMenuOpen, setAccountOpen} = useUiContext() 11 | const { account } = useWeb3React<providers.Web3Provider>() 12 | //const { address} = useGlobalContext() 13 | 14 | //const { ensName } = useENS(address); 15 | 16 | const openAccount = () => { 17 | setMobileMenuOpen(false) 18 | setAccountOpen(true) 19 | } 20 | 21 | const openWallets = () => { 22 | setMobileMenuOpen(false) 23 | setShowWallets(true) 24 | } 25 | 26 | return ( 27 | account ? 28 | <Button onClick={() => openAccount()} arrow={true} image={<Jazzicon diameter={30} seed={jsNumberForAddress(account)} />}> 29 | {getShortenAddress(account)} 30 | </Button> 31 | : 32 | <Button onClick={() => openWallets()}> 33 | <span>Connect</span> 34 | </Button> 35 | ) 36 | } 37 | 38 | export default AddressButton; 39 | -------------------------------------------------------------------------------- /src/Components/Menu/HundredButton/hundredButton.css: -------------------------------------------------------------------------------- 1 | .hundred-button { 2 | border: 1px solid var(--buttonColor); 3 | color: var(--text); 4 | margin: 0 5px; 5 | display: flex; 6 | height: 40px; 7 | min-width: 110px; 8 | max-width: 210px; 9 | border-radius: 20px; 10 | cursor: pointer; 11 | padding: 0 0px; 12 | transition: background-color 0.2s ease-out; 13 | position: relative; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .hundred-button:hover { 19 | background-color: var(--buttonColor); 20 | color: var(--buttonHover2); 21 | } 22 | 23 | .hundred-button .hundred-button-content { 24 | width: 100%; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | padding: 0 10px; 29 | } 30 | 31 | .hundred-button .hundred-button-content .hundred-name { 32 | padding: 0 8px; 33 | } 34 | 35 | .hundred-button .hundred-button-content .arrow { 36 | font-size: 0.7rem; 37 | } 38 | 39 | .hundred-button .hundred-logo { 40 | width: 30px; 41 | height: 30px; 42 | border-radius: 50%; 43 | background-color: var(--text); 44 | } 45 | -------------------------------------------------------------------------------- /src/Components/Menu/HundredButton/hundredButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import hundredCoin from "../../../assets/icons/HND 1.png" 3 | import "./hundredButton.css" 4 | import { useUiContext } from "../../../Types/uiContext" 5 | import Button from "../../Button/button" 6 | 7 | const HundredButton : React.FC = () => { 8 | const {setOpenHundred, setMobileMenuOpen} = useUiContext() 9 | 10 | 11 | const handleOpenHundred = () :void => { 12 | setMobileMenuOpen(false) 13 | setOpenHundred(true) 14 | } 15 | 16 | 17 | return ( 18 | <Button onClick={() => handleOpenHundred()} arrow={true} image={<img src={hundredCoin} alt=""/>}> 19 | HND 20 | </Button> 21 | ) 22 | } 23 | 24 | export default HundredButton -------------------------------------------------------------------------------- /src/Components/Menu/NetworkButton/networkButton.css: -------------------------------------------------------------------------------- 1 | .network-button { 2 | border: 1px solid var(--buttonColor); 3 | color: var(--text); 4 | margin: 0 5px; 5 | display: flex; 6 | height: 40px; 7 | min-width: 140px; 8 | max-width: 210px; 9 | border-radius: 20px; 10 | cursor: pointer; 11 | padding: 0 0px; 12 | transition: background-color 0.2s ease-out; 13 | position: relative; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .network-button:hover { 19 | background-color: var(--buttonColor); 20 | color: var(--buttonHover2); 21 | } 22 | 23 | .network-button .network-button-content { 24 | width: 100%; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | padding: 0 10px; 29 | } 30 | 31 | .network-button .network-button-content .network-name { 32 | padding: 0 8px; 33 | } 34 | 35 | .network-button .network-button-content .arrow { 36 | font-size: 0.7rem; 37 | } 38 | 39 | .network-button .network-logo { 40 | width: 30px; 41 | height: 30px; 42 | border-radius: 50%; 43 | background-color: var(--text); 44 | overflow: hidden; 45 | } 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/Components/Menu/NetworkButton/networkButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react" 2 | import { Network } from "../../../networks" 3 | import { useGlobalContext } from "../../../Types/globalContext" 4 | import { useUiContext } from "../../../Types/uiContext" 5 | import Button from "../../Button/button" 6 | 7 | 8 | const NetworkButton : React.FC = () => { 9 | const {setOpenNetwork, setMobileMenuOpen} = useUiContext() 10 | const {network} = useGlobalContext() 11 | const netWorkRef = useRef<Network | null>(null) 12 | netWorkRef.current = network 13 | 14 | useEffect(() => { 15 | const temp = {...network} as Network 16 | if(temp) 17 | netWorkRef.current = temp 18 | }, [network]) 19 | 20 | const handleOpenNetworks = () :void => { 21 | setMobileMenuOpen(false) 22 | setOpenNetwork(true) 23 | } 24 | 25 | return ( 26 | netWorkRef.current ? 27 | <Button onClick={() => handleOpenNetworks()} arrow={true} image={<img src={netWorkRef.current?.logo} alt=""/>}> 28 | {netWorkRef.current?.network} 29 | </Button> 30 | : 31 | <Button onClick={() => handleOpenNetworks()} arrow={true}> 32 | <span className="network-name">Networks</span> 33 | </Button> 34 | ) 35 | } 36 | 37 | export default NetworkButton -------------------------------------------------------------------------------- /src/Components/Menu/menu.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Navbar from "../Navbar/navbar" 3 | import NavbarLeft from '../Navbar/navBarLeft' 4 | import NavbarLink from "../Navbar/navBarLink" 5 | import NavBarLinks from "../Navbar/navBarLinks" 6 | import NavbarLogo from "../Navbar/navbarLogo" 7 | import NavBarRight from "../Navbar/navBarRight" 8 | import ThemeSwitch from "../Navbar/themeSwitch" 9 | import AirdropButton from "../AirdropButton/airdropButton" 10 | import { useUiContext } from "../../Types/uiContext" 11 | import HundredButton from "./HundredButton/hundredButton" 12 | import NetworkButton from "./NetworkButton/networkButton" 13 | import AddressButton from "./AddressButton/addressButton" 14 | 15 | const Menu : React.FC = () => { 16 | const {isTablet, isMobile, show} = useUiContext() 17 | return( 18 | (!isTablet && !isMobile && show) ? ( 19 | <Navbar isMobile={isMobile} isTablet={isTablet}> 20 | <NavbarLeft> 21 | <NavbarLogo/> 22 | <NavBarLinks> 23 | <NavbarLink link="https://dashboard.hundred.finance" target="_blank">Dashboard</NavbarLink> 24 | <NavbarLink link="https://app.multichain.org/#/router" target="_blank">Bridge</NavbarLink> 25 | <NavbarLink link="https://docs.hundred.finance" target="_blank">Docs</NavbarLink> 26 | <NavbarLink link="https://vote.hundred.finance" target="_blank">Vote</NavbarLink> 27 | <NavbarLink link="https://lendly.hundred.finance" target="_blank">Lendly</NavbarLink> 28 | </NavBarLinks> 29 | </NavbarLeft> 30 | <NavBarRight> 31 | <AirdropButton/> 32 | <HundredButton/> 33 | <NetworkButton/> 34 | <AddressButton/> 35 | <ThemeSwitch/> 36 | {/* <SideMenuButton theme={props.theme} setSideMenu ={props.setSideMenu}/> */} 37 | </NavBarRight> 38 | </Navbar> 39 | ) : null 40 | ) 41 | } 42 | 43 | export default Menu -------------------------------------------------------------------------------- /src/Components/Menu/tabletMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import AddressButton from "./AddressButton/addressButton" 3 | import Navbar from "../Navbar/navbar" 4 | import NavBarButton from "../Navbar/navBarButton" 5 | import NavbarLink from "../Navbar/navBarLink" 6 | import NavBarLinks from "../Navbar/navBarLinks" 7 | import NavbarLogo from "../Navbar/navbarLogo" 8 | import NavbarMobile from "../Navbar/navbarMobile" 9 | import NavBarRight from "../Navbar/navBarRight" 10 | import ThemeSwitch from "../Navbar/themeSwitch" 11 | import NetworkButton from "./NetworkButton/networkButton" 12 | import HundredButton from "./HundredButton/hundredButton" 13 | import AirdropButton from "../AirdropButton/airdropButton" 14 | import { useUiContext } from "../../Types/uiContext" 15 | 16 | const TabletMenu: React.FC = () => { 17 | const {isTablet, isMobile, show} = useUiContext() 18 | 19 | return( 20 | ((isTablet || isMobile) && show) ? 21 | (<> 22 | <Navbar isMobile={isMobile} isTablet={isTablet}> 23 | <NavbarLogo/> 24 | <NavBarRight> 25 | {isTablet && !isMobile ? 26 | <> 27 | <AirdropButton/> 28 | <HundredButton /> 29 | <NetworkButton/> 30 | <AddressButton /> 31 | </> 32 | : null} 33 | <ThemeSwitch/> 34 | <NavBarButton/> 35 | </NavBarRight> 36 | </Navbar> 37 | <NavbarMobile> 38 | {isMobile ? 39 | <NavBarRight className="navbar-right-content"> 40 | <AirdropButton/> 41 | <HundredButton /> 42 | <NetworkButton /> 43 | <AddressButton /> 44 | </NavBarRight> 45 | : null} 46 | <NavBarLinks> 47 | <NavbarLink link="https://dashboard.hundred.finance" target="_blank">Dashboard</NavbarLink> 48 | <NavbarLink link="https://app.multichain.org/#/router" target="_blank">Bridge</NavbarLink> 49 | <NavbarLink link="https://docs.hundred.finance" target="_blank">Docs</NavbarLink> 50 | <NavbarLink link="https://vote.hundred.finance" target="_blank">Vote</NavbarLink> 51 | <NavbarLink link="https://lendly.hundred.finance" target="_blank">Lendly</NavbarLink> 52 | </NavBarLinks> 53 | </NavbarMobile> 54 | </> 55 | ) 56 | : null 57 | ) 58 | } 59 | 60 | export default TabletMenu 61 | -------------------------------------------------------------------------------- /src/Components/MessageDialog/exploitDialog.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Modal from "../Modal/modal"; 3 | 4 | const ExploitMessage: React.FC= () => { 5 | const [showMessage, setShowMessage] = useState<boolean>(true) 6 | 7 | 8 | const message = <div> 9 | <p>This deployment of Hundred Finance has been impacted by an exploit.</p> 10 | <p>Please visit the project <a style={{color: "#2853ff"}} href="https://v1.hundred.finance" target={"_blank"} rel="noreferrer">Discord</a> for further information.</p> 11 | </div> 12 | 13 | return( 14 | <Modal open={showMessage} close={() => setShowMessage(false)} title="Info" error={true}> 15 | <div className="error"> 16 | <div className="error-message"> 17 | 18 | <span>{message}</span> 19 | </div> 20 | </div> 21 | </Modal> 22 | ) 23 | } 24 | 25 | export default ExploitMessage -------------------------------------------------------------------------------- /src/Components/MessageDialog/messageDialog.css: -------------------------------------------------------------------------------- 1 | .mymodal { 2 | position: fixed; 3 | top: 50%; 4 | left: 50%; 5 | transform: translate(-50%, -50%); 6 | max-width: 590px; 7 | 8 | background-color: #f9fafb; 9 | overflow: auto; 10 | border-radius: 24px; 11 | border: 1px solid #000; 12 | outline: none; 13 | padding: 24px; 14 | color: #000; 15 | 16 | } 17 | 18 | .myoverlay { 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | bottom: 0; 24 | background-color: rgba(0, 0, 0, 0.5); 25 | z-index: 99999999; 26 | } 27 | 28 | 29 | .ReactModal__Overlay { 30 | opacity: 0; 31 | transition: opacity 100ms ease-in-out; 32 | } 33 | 34 | .ReactModal__Overlay--after-open { 35 | opacity: 1; 36 | } 37 | 38 | .ReactModal__Overlay--before-close { 39 | opacity: 0; 40 | } 41 | 42 | .hundred-message-title{ 43 | display: flex; 44 | justify-content: space-between; 45 | align-items: center; 46 | } 47 | 48 | .hundred-message-title .closeBtn:hover{ 49 | cursor: pointer; 50 | opacity: 0.7; 51 | } 52 | 53 | .hundred-message-item{ 54 | padding: 16px; 55 | font-family: 'Poppins', sans-serif; 56 | margin: 24px 0 0 0; 57 | border-radius: 16px; 58 | display: flex; 59 | align-items: center; 60 | user-select: none; 61 | font-style: normal; 62 | font-weight: normal; 63 | text-align: center; 64 | font-size: 14px; 65 | line-height: 24px; 66 | text-align: left; 67 | font-feature-settings: 'pnum' on, 'lnum' on, 'calt' off; 68 | } 69 | 70 | .title{ 71 | font-family: 'Poppins', sans-serif; 72 | font-style: normal; 73 | font-weight: 600; 74 | } 75 | 76 | .title18{ 77 | font-size: 18px; 78 | line-height: 28px; 79 | } 80 | 81 | .mymodal-dark{ 82 | background-color: #101010; 83 | color: #fff; 84 | border: 1px solid #fff; 85 | } -------------------------------------------------------------------------------- /src/Components/MessageDialog/messageDialog.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Modal from "react-modal" 3 | import "./messageDialog.css" 4 | 5 | Modal.setAppElement("#root") 6 | 7 | interface Props{ 8 | isOpen: boolean, 9 | onRequestClose: ()=> void, 10 | contentLabel: string, 11 | message: HTMLElement | HTMLElement[] | string | any, 12 | className?: string 13 | children?: React.ReactElement | React.ReactElement[] 14 | } 15 | const HundredMessage:React.FC<Props> = (props: Props) => { 16 | return( 17 | props.isOpen ? 18 | <Modal isOpen={props.isOpen} 19 | onRequestClose={props.onRequestClose} 20 | contentLabel={props.contentLabel} 21 | className={`mymodal theme ${props.className ? props.className : ""}`} 22 | overlayClassName="myoverlay" 23 | shouldCloseOnOverlayClick={true} 24 | shouldCloseOnEsc={true} 25 | shouldFocusAfterRender={true} 26 | shouldReturnFocusAfterClose={true} 27 | closeTimeoutMS={50}> 28 | <HundredMessageTitle onRequestClose={props.onRequestClose} darkMode={props.className?.includes("mymodal-dark") ? true : false}>{props.contentLabel}</HundredMessageTitle> 29 | <HundredMessageItem>{props.message}</HundredMessageItem> 30 | </Modal> 31 | : null 32 | ) 33 | } 34 | 35 | type TitleProps = { 36 | onRequestClose: () => void, 37 | darkMode: boolean 38 | } 39 | 40 | const HundredMessageTitle:React.FC<TitleProps> = ({onRequestClose, darkMode, children}) => { 41 | return ( 42 | <div className="hundred-message-title title title18"> 43 | {children} 44 | <svg className="closeBtn" onClick={onRequestClose} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 45 | <path d="M7 7L17 17" stroke={`${darkMode ? "white" : "black"}`} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> 46 | <path d="M7 17L17 7" stroke={`${darkMode ? "white" : "black"}`} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> 47 | </svg> 48 | </div> 49 | ) 50 | } 51 | 52 | type ItemProps = { 53 | disabled?: boolean, 54 | hover?: boolean, 55 | onClick?: () => void 56 | } 57 | 58 | const HundredMessageItem: React.FC<ItemProps> = ({disabled, hover, onClick, children}) => { 59 | return ( 60 | <div className={`hundred-message-item ${disabled ? "hundred-message-item-disabled" : ""} ${hover && !disabled ? "hundred-message-item-hover" : ""}`} onClick={onClick}> 61 | {children} 62 | </div> 63 | ) 64 | } 65 | 66 | export default HundredMessage -------------------------------------------------------------------------------- /src/Components/MessageDialog/moonRiverDialog.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useUiContext } from "../../Types/uiContext"; 3 | 4 | 5 | const MoonriverMessage: React.FC= () => { 6 | const {darkMode} = useUiContext() 7 | 8 | const [isChecked, setIsChecked] = useState<boolean>(false) 9 | const checkmark = '✔'; 10 | 11 | useEffect(() => { 12 | if(isChecked) 13 | window.localStorage.setItem("hundred-moonriver-dont-show", "true") 14 | else 15 | window.localStorage.removeItem("hundred-moonriver-dont-show") 16 | }, [isChecked]) 17 | 18 | return <div> 19 | If you had supplied in the old Moonriver deployment, please use <a style={{color: "#2853ff"}} href="https://old.hundred.finance" target={"_blank"} rel="noreferrer">https://old.hundred.finance</a> to withdraw your funds. 20 | <div className="dont-show-checkbox" style={{paddingTop: "15px", display: "flex", alignItems: "center", cursor:"pointer"}} onClick={() => setIsChecked(!isChecked)}> 21 | <div className="checkbox" style={{border: `1px solid ${darkMode ? "#fff" : "#000"}`, width: "20px", height: "20px", borderRadius: "5px", backgroundColor: `${isChecked ? "#2853ff" : ""}`, position:"relative"}} > 22 | {isChecked ? <span style={{color: "#fff", position: "absolute", top: "-3px", left: "4px"}}>{checkmark}</span> : ""} 23 | </div> 24 | <span style={{paddingLeft: "6px"}}>Don't Show again</span> 25 | </div> 26 | </div> 27 | } 28 | 29 | export default MoonriverMessage -------------------------------------------------------------------------------- /src/Components/MessageDialog/optimismDialog.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useUiContext } from "../../Types/uiContext"; 3 | import Modal from "../Modal/modal"; 4 | 5 | const OptimismMessage: React.FC= () => { 6 | const {darkMode, optimismMessage, setOptimismMessage} = useUiContext() 7 | 8 | const [isChecked, setIsChecked] = useState<boolean>(false) 9 | const [dontShow, setDontShow] = useState<boolean>(false) 10 | const checkmark = '✔'; 11 | 12 | useEffect(() => { 13 | const ds = window.localStorage.getItem("hundred-optimism-dont-show") 14 | console.log(ds) 15 | if(ds && ds === "true") 16 | { 17 | setDontShow(true) 18 | setIsChecked(true) 19 | } 20 | }, []) 21 | 22 | useEffect(() => { 23 | if(isChecked) 24 | window.localStorage.setItem("hundred-optimism-dont-show", "true") 25 | else 26 | window.localStorage.removeItem("hundred-optimism-dont-show") 27 | }, [isChecked]) 28 | 29 | const message = <div> 30 | Please visit <a style={{color: "#2853ff"}} href="https://v1.hundred.finance" target={"_blank"} rel="noreferrer">https://v1.hundred.finance</a> to Unstake, then Stake here. 31 | <div className="dont-show-checkbox" style={{paddingTop: "15px", display: "flex", alignItems: "center", cursor:"pointer"}} onClick={() => setIsChecked(!isChecked)}> 32 | <div className="checkbox" style={{border: `1px solid ${darkMode ? "#fff" : "#000"}`, width: "20px", height: "20px", borderRadius: "5px", backgroundColor: `${isChecked ? "#2853ff" : ""}`, position:"relative"}} > 33 | {isChecked ? <span style={{color: "#fff", position: "absolute", top: "-3px", left: "4px"}}>{checkmark}</span> : ""} 34 | </div> 35 | <span style={{paddingLeft: "6px"}}>Don't Show again</span> 36 | </div> 37 | </div> 38 | return !dontShow ? 39 | <Modal open={optimismMessage} close={() => setOptimismMessage(false)} title="info" error={false}> 40 | <div className="error"> 41 | <div className="error-message"> 42 | 43 | <span>{message}</span> 44 | </div> 45 | </div> 46 | </Modal> 47 | : null 48 | } 49 | 50 | export default OptimismMessage -------------------------------------------------------------------------------- /src/Components/Modal/modal.css: -------------------------------------------------------------------------------- 1 | .modal{ 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | z-index: 10000; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .modal .modal-background{ 14 | position: fixed; 15 | z-index: 10001; 16 | width: 100%; 17 | height: 100%; 18 | top: 0; 19 | bottom: 0; 20 | left: 0; 21 | right: 0; 22 | background-color: var(--modal-layout); 23 | } 24 | 25 | .modal .modal-wrapper{ 26 | z-index: 10002; 27 | width: 98%; 28 | min-height: 250px; 29 | max-width: 400px; 30 | max-height: 640px; 31 | overflow: auto; 32 | box-shadow: var(--modal-shadow); 33 | border: 2px solid transparent; 34 | border-radius: 10px; 35 | color: var(--text-color); 36 | 37 | background: var(--modal-background) padding-box, 38 | var(--modal-border) border-box; 39 | padding: 2rem; 40 | display: flex; 41 | flex-direction: column; 42 | 43 | 44 | } 45 | 46 | .modal .modal-wrapper .modal-title{ 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | font-size: 2.3rem; 51 | gap: 2rem; 52 | position: relative; 53 | } 54 | 55 | .modal .modal-wrapper .modal-title span{ 56 | text-align: center; 57 | } 58 | 59 | .modal .modal-wrapper .modal-title .title-img{ 60 | width: 30px; 61 | height: 30px; 62 | } 63 | 64 | .modal .modal-wrapper .modal-title .modal-close{ 65 | width: 25px; 66 | height: 25px; 67 | cursor: pointer; 68 | position: absolute; 69 | right: 0; 70 | top: 50%; 71 | transform: translateY(-50%); 72 | } 73 | 74 | .modal .modal-wrapper .modal-title .modal-close:hover{ 75 | opacity: .7; 76 | } 77 | 78 | .modal .modal-wrapper .modal-body{ 79 | width: 100%; 80 | height: 100%; 81 | flex: 1; 82 | display: flex; 83 | justify-content: space-between; 84 | align-items: flex-start; 85 | flex-direction: column; 86 | 87 | } 88 | 89 | .modal .modal-wrapper .modal-title .error{ 90 | display: flex; 91 | flex-direction: row; 92 | justify-content: center; 93 | align-items: center; 94 | } 95 | 96 | .modal .modal-wrapper .modal-title .error span{ 97 | background-color: #E93D3D; 98 | font-size: 2rem; 99 | line-height: 35px; 100 | padding: 0 1rem; 101 | margin-right: 1rem; 102 | border-radius: 50%; 103 | font-style: normal; 104 | font-weight: 900; 105 | } -------------------------------------------------------------------------------- /src/Components/Modal/modal.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import closeIcon from "../../assets/icons/closeIcon.png" 3 | import { useUiContext } from "../../Types/uiContext" 4 | import ReactDOM from "react-dom" 5 | import "./modal.css" 6 | 7 | interface Props { 8 | open: boolean, 9 | close: () => void, 10 | title: string, 11 | titleImg?: string, 12 | maxheight?: string, 13 | error?: boolean, 14 | children?: any, 15 | } 16 | 17 | const Modal: React.FC<Props> = ({open, close, title, titleImg, maxheight, error, children} : Props) => { 18 | const {darkMode} = useUiContext() 19 | const modalContainer = document.getElementById("modal") as Element 20 | 21 | const modal = 22 | <div className={`modal ${darkMode ? "dark" : "light"}`}> 23 | <div className="modal-background" onClick={close}></div> 24 | <div className="modal-wrapper" style={{maxHeight: maxheight ? maxheight : "82%"}}> 25 | <div className="modal-title"> 26 | 27 | {titleImg ? <img src={titleImg} alt="" className="title-img"/> : null} 28 | {error ? <span className="error"><span>!</span>{title}</span> : <span>{title}</span>} 29 | <img src={closeIcon} alt="" onClick={close} className="modal-close"/> 30 | </div> 31 | <div className="seperator"/> 32 | {children} 33 | 34 | </div> 35 | </div> 36 | 37 | 38 | return ( 39 | open ? ReactDOM.createPortal(modal, modalContainer) : null 40 | ) 41 | } 42 | 43 | export default Modal 44 | -------------------------------------------------------------------------------- /src/Components/Navbar/nav-mobile.css: -------------------------------------------------------------------------------- 1 | .nav-mobile{ 2 | position: fixed; 3 | top: 75px; 4 | width: 100%; 5 | height: 100%; 6 | z-index: 997; 7 | min-height: calc(560px + 75px); 8 | overflow: auto; 9 | } 10 | 11 | .nav-mobile .nav-mobile-background{ 12 | background-color: var(--modal-layout); 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | z-index: 998; 17 | } 18 | 19 | .nav-mobile .nav-mobile-body{ 20 | z-index: 999; 21 | padding: 2rem 0; 22 | position: fixed; 23 | background-color: var(--modal-background); 24 | width: 100%; 25 | height: 100%; 26 | min-height: 560px; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: flex-start; 31 | gap: 1.4rem; 32 | top: 75px; 33 | overflow: auto; 34 | } 35 | 36 | .nav-mobile .nav-mobile-body a{ 37 | text-decoration: none; 38 | color: var(--text-color); 39 | cursor: pointer; 40 | 41 | padding: .5rem 0; 42 | 43 | font-style: normal; 44 | font-weight: 500; 45 | font-size: 1.35rem; 46 | line-height: 1.57; 47 | 48 | display: flex; 49 | align-items: center; 50 | text-align: center; 51 | } 52 | 53 | /* @media screen and (min-width: 750px) { 54 | .nav-mobile{ 55 | display: none; 56 | } 57 | } */ -------------------------------------------------------------------------------- /src/Components/Navbar/nav-mobile.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useUiContext } from "../../Types/uiContext" 3 | import ReactDOM from "react-dom" 4 | import "./nav-mobile.css" 5 | import NavbarLink from "./navBarLink" 6 | import HundredButton from "../Menu/HundredButton/hundredButton" 7 | import NetworkButton from "../Menu/NetworkButton/networkButton" 8 | import AddressButton from "../Menu/AddressButton/addressButton" 9 | import AirdropButton from "../AirdropButton/airdropButton" 10 | 11 | const NavMobile: React.FC = () => { 12 | const {darkMode, setMobileMenuOpen, mobileMenuOpen} = useUiContext() 13 | const navMobileContainer = document.getElementById("modal") as Element 14 | 15 | const navMobile = 16 | <div className={`nav-mobile ${darkMode ? "dark" : "light"}`}> 17 | <div className="nav-mobile-background" onClick={() => setMobileMenuOpen(false)}></div> 18 | <div className="nav-mobile-body"> 19 | <AirdropButton/> 20 | <AddressButton/> 21 | <NetworkButton/> 22 | <HundredButton/> 23 | <NavbarLink link="https://dashboard.hundred.finance" target="_blank">Dashboard</NavbarLink> 24 | <NavbarLink link="https://app.multichain.org/#/router" target="_blank">Bridge</NavbarLink> 25 | <NavbarLink link="https://docs.hundred.finance" target="_blank">Docs</NavbarLink> 26 | <NavbarLink link="https://vote.hundred.finance" target="_blank">Vote</NavbarLink> 27 | <NavbarLink link="https://lendly.hundred.finance" target="_blank">Lendly</NavbarLink> 28 | </div> 29 | </div> 30 | 31 | 32 | return ( 33 | mobileMenuOpen ? ReactDOM.createPortal(navMobile, navMobileContainer) : null 34 | ) 35 | } 36 | 37 | export default NavMobile 38 | -------------------------------------------------------------------------------- /src/Components/Navbar/navBarButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useUiContext } from "../../Types/uiContext" 3 | import './navbarButton.css' 4 | 5 | const NavBarButton: React.FC = () => { 6 | const {mobileMenuOpen, setMobileMenuOpen} = useUiContext() 7 | 8 | const handleClick = () : void => { 9 | setMobileMenuOpen(!mobileMenuOpen) 10 | } 11 | 12 | return ( 13 | <div className={`navbar-button ${mobileMenuOpen ? "navbar-button-clicked" : ""}`} onClick={() => handleClick()}> 14 | <span className="bar bar1"></span> 15 | <span className="bar bar2"></span> 16 | <span className="bar bar3"></span> 17 | </div> 18 | ) 19 | } 20 | 21 | export default NavBarButton -------------------------------------------------------------------------------- /src/Components/Navbar/navBarLeft.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | import './navbar.css'; 3 | 4 | interface Props{ 5 | children?: ReactNode 6 | } 7 | 8 | const NavBarLeft : React.FC<Props> = ({children} : Props) => ( 9 | <div className='navbar-left'> 10 | {children} 11 | </div> 12 | ) 13 | 14 | export default NavBarLeft -------------------------------------------------------------------------------- /src/Components/Navbar/navBarLink.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./navbar.css" 3 | 4 | interface Props{ 5 | link: string, 6 | target?: string, 7 | children?: ReactNode 8 | } 9 | 10 | const NavbarLink: React.FC<Props> = ({link, target, children} : Props) => { 11 | 12 | return ( 13 | <li className="navbar-links-list-item"> 14 | <a className="nav-link" style={{cursor: "pointer"}} href={link} target={target ? target : ""}>{children}</a> 15 | </li> 16 | ) 17 | } 18 | 19 | export default NavbarLink -------------------------------------------------------------------------------- /src/Components/Navbar/navBarLinks.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./navbar.css" 3 | 4 | interface Props{ 5 | children?: ReactNode 6 | } 7 | 8 | const NavBarLinks: React.FC<Props> = ({children} : Props) => { 9 | return ( 10 | <div className="navbar-links"> 11 | <ul className="navbar-links-list"> 12 | {children} 13 | </ul> 14 | </div> 15 | ) 16 | } 17 | 18 | export default NavBarLinks -------------------------------------------------------------------------------- /src/Components/Navbar/navBarRight.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./navbar.css" 3 | 4 | interface Props{ 5 | className?: string 6 | children?: ReactNode 7 | } 8 | 9 | const NavBarRight: React.FC<Props> = (props : Props) => { 10 | return ( 11 | <div className={`navbar-right ${props.className ? props.className : ""}`}> 12 | {props.children} 13 | </div> 14 | ) 15 | } 16 | 17 | export default NavBarRight -------------------------------------------------------------------------------- /src/Components/Navbar/navbar.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./navbar.css" 3 | 4 | interface Props { 5 | isTablet: boolean, 6 | isMobile: boolean, 7 | children?: ReactNode 8 | } 9 | 10 | const Navbar: React.FC<Props> = (props: Props) => { 11 | return ( 12 | <div className={`navbar ${props.isTablet || props.isMobile ? "navbar-mobile" : ""}`}> 13 | <div className="navbar-content"> 14 | {props.children} 15 | </div> 16 | </div> 17 | ) 18 | } 19 | 20 | export default Navbar -------------------------------------------------------------------------------- /src/Components/Navbar/navbarButton.css: -------------------------------------------------------------------------------- 1 | .navbar-button{ 2 | width: 40px; 3 | height: 27px; 4 | position: relative; 5 | cursor: pointer; 6 | transition: all .2s ease-out; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: space-between; 11 | } 12 | 13 | 14 | 15 | .navbar-button .bar{ 16 | background-color: var(--hamburger-menu); 17 | width: 36px; 18 | height: 5px; 19 | border: 1px solid var(--hamburger-menu); 20 | border-radius: 3px; 21 | display: block; 22 | transition: all .2s ease-out; 23 | } 24 | 25 | .navbar-button-clicked .bar1{ 26 | position: absolute; 27 | top: 50%; 28 | transform: translateY(-50%) rotate(45deg); 29 | } 30 | 31 | .navbar-button-clicked .bar2{ 32 | opacity: 0; 33 | } 34 | 35 | .navbar-button-clicked .bar3{ 36 | position: absolute; 37 | top: 50%; 38 | transform: translateY(-50%) rotate(-45deg); 39 | } 40 | 41 | -------------------------------------------------------------------------------- /src/Components/Navbar/navbarLogo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { HundredLogo } from "../../assets/assets" 3 | 4 | const NavbarLogo: React.FC = () => { 5 | return ( 6 | <div className="navbar-logo"> 7 | <div className="navbar-logo"> 8 | <HundredLogo width="162" height="29"/> 9 | </div> 10 | </div> 11 | ) 12 | } 13 | 14 | export default NavbarLogo -------------------------------------------------------------------------------- /src/Components/Navbar/navbarMobile.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import { useUiContext } from "../../Types/uiContext" 3 | import "./navbar.css" 4 | 5 | interface Props { 6 | children?: ReactNode 7 | } 8 | 9 | const NavbarMobile: React.FC<Props> = ({children}: Props) => { 10 | const {mobileMenuOpen} = useUiContext() 11 | return ( 12 | <div className={`navbar-mobile-content ${mobileMenuOpen ? "navbar-mobile-content-open" : ""}`}> 13 | {children} 14 | </div> 15 | ) 16 | } 17 | 18 | export default NavbarMobile -------------------------------------------------------------------------------- /src/Components/Navbar/sideMenuButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | 3 | interface Props { 4 | setSideMenu: React.Dispatch<React.SetStateAction<boolean>>, 5 | 6 | } 7 | 8 | const SideMenuButton: React.FC<Props> = ({setSideMenu}: Props) => { 9 | const [hover, setHover] = useState(false) 10 | 11 | // const style = { 12 | // //border: `0px solid ${props.theme.text}`, 13 | // borderRadius: '10px', 14 | // display: 'block', 15 | // width: '0px', 16 | // height: '40px', 17 | // margin: '0 10px', 18 | // position: 'relative', 19 | // cursor: 'pointer', 20 | // transition: 'all 0.2s ease-out', 21 | // padding:"0 10px" 22 | // } 23 | 24 | // const dot1 = { 25 | // display: 'block', 26 | // width: '5px', 27 | // height: '5px', 28 | // // backgroundColor: `${props.theme.text}`, 29 | // // border: `1px solid ${props.theme.text}`, 30 | // borderRadius: '3px', 31 | // position:'absolute', 32 | // left: '50%', 33 | // top: `${hover ? '15%' : '20%'}`, 34 | // transform: 'translate(-50%, -20%)', 35 | // transition: 'all 0.1s ease-in-out' 36 | // } 37 | 38 | // const dot2 = { 39 | // display: 'block', 40 | // width: '5px', 41 | // height: '5px', 42 | // // backgroundColor: `${props.theme.text}`, 43 | // // border: `1px solid ${props.theme.text}`, 44 | // borderRadius: '50%', 45 | // position:'absolute', 46 | // left: '50%', 47 | // top:'50%', 48 | // transform: 'translate(-50%, -50%)', 49 | // transition: 'all 0.1s ease-in-out', 50 | // } 51 | 52 | // const dot3 = { 53 | // display: 'block', 54 | // width: '5px', 55 | // height: '5px', 56 | // // backgroundColor: `${props.theme.text}`, 57 | // // border: `1px solid ${props.theme.text}`, 58 | // borderRadius: '50%', 59 | // position:'absolute', 60 | // left: '50%', 61 | // top:`${hover ? '85%' : '80%'}`, 62 | // transform: 'translate(-50%, -80%)', 63 | // transition: 'all 0.1s ease-in-out', 64 | // } 65 | 66 | return ( 67 | <div className="menu-button" onClick={() => setSideMenu(true)} onMouseOver={() => setHover(true)} onMouseOut = {() => {setHover(false)}}> 68 | <span className="dot"></span> 69 | <span className="dot"></span> 70 | <span className="dot"></span> 71 | </div> 72 | ) 73 | } 74 | 75 | export default SideMenuButton -------------------------------------------------------------------------------- /src/Components/Navbar/themeSwitch.css: -------------------------------------------------------------------------------- 1 | .theme-switch{ 2 | width: 60px; 3 | height: 30px; 4 | border: 2px solid var(--switch-theme-border); 5 | background-color: var(--switch-theme-background); 6 | border-radius: 30px; 7 | display: -webkit-box; 8 | display: -ms-flexbox; 9 | display: flex; 10 | -webkit-box-align: center; 11 | -ms-flex-align: center; 12 | align-items: center; 13 | -ms-flex-pack: distribute; 14 | justify-content: space-around; 15 | cursor: pointer; 16 | } -------------------------------------------------------------------------------- /src/Components/Navbar/themeSwitch.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./themeSwitch.css" 3 | import { Sun, Moon } from "../../assets/assets"; 4 | import { useUiContext } from "../../Types/uiContext"; 5 | 6 | const ThemeSwitch: React.FC = () => { 7 | const {darkMode, setDarkMode} = useUiContext() 8 | const handleSwitchTheme = () => { 9 | setDarkMode(!darkMode) 10 | } 11 | return ( 12 | <div className={`theme-switch ${darkMode ? "theme-switch-dark-mode" : ""}`} onClick={handleSwitchTheme}> 13 | <Moon/> 14 | <Sun/> 15 | </div> 16 | ) 17 | } 18 | 19 | export default ThemeSwitch -------------------------------------------------------------------------------- /src/Components/NetworksMenu/networksMenu.css: -------------------------------------------------------------------------------- 1 | .networks-view{ 2 | height: 100%; 3 | width: 100%; 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | justify-content: flex-start; 8 | align-items: center; 9 | gap: .2rem; 10 | overflow: auto; 11 | } 12 | 13 | .networks-view .network-item{ 14 | font-size: 1.2rem; 15 | width: 100%; 16 | padding: 0 0 0 calc(100% / 5); 17 | display: flex; 18 | align-items: center; 19 | justify-content: flex-start; 20 | gap: 1rem; 21 | height: 4rem; 22 | } 23 | 24 | .networks-view .network-item:hover, .networks-view .network-item:active{ 25 | background-color: var(--wallet-hover); 26 | cursor: pointer; 27 | } 28 | 29 | .networks-view .network-selected:hover, .networks-view .network-selected:active{ 30 | cursor: not-allowed; 31 | background-color: transparent; 32 | } 33 | 34 | .networks-view .network-item .network-logo{ 35 | width: 30px; 36 | height: 30px; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | border-radius: 50%; 41 | background-color: var(--logo-background); 42 | overflow: hidden; 43 | } 44 | 45 | .networks-view .network-item .network-logo img{ 46 | width: 25px; 47 | height: 25px; 48 | } -------------------------------------------------------------------------------- /src/Components/Range/range.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import "./range.css" 3 | 4 | interface Props{ 5 | setRatio?: (x:number) => void 6 | disabled?: boolean 7 | } 8 | 9 | const Range: React.FC<Props> = (props: Props) => { 10 | const [value, setValue] = useState(0) 11 | 12 | const valueChange = (e: any) => { 13 | const min = e.target.min 14 | const max = e.target.max 15 | const val = e.target.value 16 | 17 | let width = (val - min) * 100 18 | console.log(width) 19 | if(width === 2500) 20 | width +=100 21 | else if(width === 7500) 22 | width -= 100 23 | 24 | e.target.style.backgroundSize = width / (max - min) + '% 100%' 25 | setValue(Number(val)) 26 | if(props.setRatio){ 27 | props.setRatio(val/100) 28 | } 29 | } 30 | return ( 31 | <div className="range"> 32 | <div className={`slider-container ${props.disabled ? "slider-container-disabled" : ""}`}> 33 | <input disabled={props.disabled} className="slider" type={"range"} value={value} min={0} max={100} step={25} 34 | onInput={(e) => valueChange(e)}/> 35 | </div> 36 | <div className="range-span">{value}%</div> 37 | </div> 38 | ) 39 | } 40 | 41 | export default Range -------------------------------------------------------------------------------- /src/Components/SearchTexBox/searchTextBox.css: -------------------------------------------------------------------------------- 1 | .search-textbox{ 2 | flex: 1; 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | width: 100%; 7 | } 8 | 9 | .search-textbox-button{ 10 | width: 80px; 11 | } 12 | 13 | .search-text{ 14 | border: 1.5px solid transparent; 15 | background: var(--textbox-background) padding-box, 16 | var(--button-hover-border) border-box; 17 | border-width: 1.5px 1.5px 1.5px 0; 18 | border-radius: 0 5px 5px 0; 19 | display: flex; 20 | flex: 1; 21 | height: 39px; 22 | align-items: center; 23 | } 24 | 25 | .search-text .search-text-icon{ 26 | background: url(../../assets/icons/search-symbol.svg); 27 | width: 30px; 28 | height: 30px; 29 | background-position: center center; 30 | background-repeat: no-repeat; 31 | margin-left: .5rem; 32 | } 33 | 34 | .search-text input{ 35 | height: 35px; 36 | border: none; 37 | background-color: transparent; 38 | color: var(--textbox-color); 39 | outline: none; 40 | box-sizing: border-box; 41 | width: 100%; 42 | padding: 0 .5rem; 43 | } 44 | 45 | .search-text input::placeholder{ 46 | color: var(--textbox-color); 47 | opacity: .5; 48 | } 49 | 50 | input[type="search"]::-webkit-search-decoration:hover, 51 | input[type="search"]::-webkit-search-cancel-button:hover { 52 | cursor:pointer; 53 | } -------------------------------------------------------------------------------- /src/Components/SearchTexBox/searchTextBox.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Button from "../Button/button" 3 | import "./searchTextBox.css" 4 | 5 | interface Props{ 6 | searchText: string, 7 | setSearchText: React.Dispatch<React.SetStateAction<string>> 8 | } 9 | const SearchTextBox: React.FC<Props> = ({searchText, setSearchText} : Props) => { 10 | 11 | return <div className="search-textbox"> 12 | <div className="search-textbox-button"> 13 | <Button onClick={() => setSearchText("")} rectangle={true} arrow={true} searchText={true} large={true}> 14 | All 15 | </Button> 16 | </div> 17 | <div className="search-text"> 18 | <div className="search-text-icon"/> 19 | <input type={"search"} value={searchText} onInput={(e: any) => setSearchText(e.target.value)} placeholder={"SEARCH HERE"}/> 20 | </div> 21 | </div> 22 | 23 | } 24 | 25 | export default SearchTextBox -------------------------------------------------------------------------------- /src/Components/Section/section.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import "./style.css" 3 | 4 | interface Props{ 5 | className?: string, 6 | children?: ReactNode 7 | } 8 | 9 | const Section: React.FC<Props> = (props : Props) => { 10 | return ( 11 | <div className={`section ${props.className ? props.className : ""}`}> 12 | <div className="section-content"> 13 | {props.children} 14 | </div> 15 | </div> 16 | ) 17 | } 18 | 19 | export default Section -------------------------------------------------------------------------------- /src/Components/Section/style.css: -------------------------------------------------------------------------------- 1 | .secondary-section{ 2 | margin-top: 20px; 3 | } 4 | 5 | .section .section-content{ 6 | display: block; 7 | max-width: 1200px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | } -------------------------------------------------------------------------------- /src/Components/SideMenu/accountSettings.css: -------------------------------------------------------------------------------- 1 | .account-settings-item .account-settings-item-label { 2 | display: flex; 3 | justify-content: space-between; 4 | padding-bottom: 10px; 5 | } 6 | 7 | .account-settings-item .account-settings-item-button { 8 | border: 1px solid var(--buttonColor); 9 | color: var(--text); 10 | font-weight: bold; 11 | display: flex; 12 | height: 40px; 13 | margin-top: 10px; 14 | padding: 5px; 15 | border-radius: 40px; 16 | cursor: pointer; 17 | user-select: none; 18 | transition: all 0.1s ease-out; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .account-settings-item .account-settings-item-button:hover { 24 | background-color: var(--buttonColor); 25 | color: var(--buttonHover2); 26 | } 27 | 28 | .account-settings-item .account-settings-item-button:active { 29 | border: 1px solid #eee; 30 | color: #444; 31 | background-color: #eee; 32 | } 33 | 34 | .account-settings-item .account-settings-item-button-disabled { 35 | border: 1px solid #bbb; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | height: 40px; 40 | margin-top: 10px; 41 | padding: 5px; 42 | border-radius: 40px; 43 | cursor: not-allowed; 44 | user-select: none; 45 | transition: all 0.1s ease-out; 46 | background-color: rgba(241, 241, 241, 0.767); 47 | } 48 | 49 | .account-settings hr { 50 | margin: 20px 0; 51 | } 52 | 53 | .account-settings .account-settings-item hr { 54 | margin: 0; 55 | margin-bottom: 20px; 56 | } 57 | -------------------------------------------------------------------------------- /src/Components/SideMenu/accountSettings.tsx: -------------------------------------------------------------------------------- 1 | import { useWeb3React } from "@web3-react/core" 2 | import { ethers } from "ethers" 3 | import React from "react" 4 | import { getShortenAddress } from "../../helpers" 5 | import { useGlobalContext } from "../../Types/globalContext" 6 | import { useUiContext } from "../../Types/uiContext" 7 | import "./accountSettings.css" 8 | 9 | const AccountSettings: React.FC = () => { 10 | const {setSideMenu, setOpenAddress} = useUiContext() 11 | const {address, setAddress} = useGlobalContext() 12 | const { connector, deactivate} = useWeb3React<ethers.providers.Web3Provider>() 13 | 14 | const handleDisconnect = () => { 15 | try{ 16 | (connector as any).close() 17 | } 18 | catch{} 19 | 20 | window.localStorage.removeItem("provider") 21 | deactivate() 22 | 23 | setSideMenu(false) 24 | setOpenAddress(false) 25 | setAddress("") 26 | } 27 | 28 | return ( 29 | <div className="account-settings"> 30 | <div className="account-settings-item"> 31 | <hr/> 32 | <div className="account-settings-item-label"><label>Address </label><span>{getShortenAddress(address)}</span></div> 33 | <div className="account-settings-item-button" onClick={() => handleDisconnect()}>Disconnect</div> 34 | </div> 35 | </div> 36 | ) 37 | } 38 | 39 | export default AccountSettings -------------------------------------------------------------------------------- /src/Components/SideMenu/hundredMenu.css: -------------------------------------------------------------------------------- 1 | .hundred-menu-item .hundred-menu-item-label { 2 | display: flex; 3 | justify-content: space-between; 4 | padding-bottom: 10px; 5 | } 6 | 7 | .hundred-menu-item .hundred-menu-link{ 8 | text-decoration: none; 9 | color: rgb(73, 166, 219); 10 | font-weight: bold; 11 | } 12 | 13 | .hundred-menu-item .hundred-menu-link:hover{ 14 | text-decoration:underline; 15 | } 16 | 17 | .hundred-menu-item .hundred-menu-item-button { 18 | border: 1px solid var(--buttonColor); 19 | color: var(--text); 20 | font-weight: bold; 21 | display: flex; 22 | height: 40px; 23 | margin-top: 10px; 24 | padding: 5px; 25 | border-radius: 40px; 26 | cursor: pointer; 27 | user-select: none; 28 | transition: all 0.1s ease-out; 29 | justify-content: center; 30 | align-items: center; 31 | } 32 | 33 | .hundred-menu-item .hundred-menu-item-button:hover { 34 | background-color: var(--buttonColor); 35 | color: var(--buttonHover2); 36 | } 37 | 38 | .hundred-menu-item .hundred-menu-item-button:active { 39 | border: 1px solid #eee; 40 | color: #444; 41 | background-color: #eee; 42 | } 43 | 44 | .hundred-menu-item .hundred-menu-item-button-disabled { 45 | border: 1px solid #bbb; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | height: 40px; 50 | margin-top: 10px; 51 | padding: 5px; 52 | border-radius: 40px; 53 | cursor: not-allowed; 54 | user-select: none; 55 | transition: all 0.1s ease-out; 56 | background-color: rgba(241, 241, 241, 0.767); 57 | pointer-events: none; 58 | } 59 | 60 | .hundred-menu hr { 61 | margin-top: -10px; 62 | margin-bottom: 20px; 63 | } 64 | 65 | .hundred-menu .hundred-menu-item hr{ 66 | margin-top: 10px; 67 | margin-bottom: 20px; 68 | } 69 | -------------------------------------------------------------------------------- /src/Components/SideMenu/networksView.css: -------------------------------------------------------------------------------- 1 | /* .networks-view { 2 | color: var(--text); 3 | } 4 | 5 | .networks-view .networks-caption { 6 | font-size: 1.2rem; 7 | padding-bottom: 10px; 8 | } 9 | 10 | .networks-view .network-item { 11 | border: 1px solid transparent; 12 | text-align: left; 13 | padding: 10px 5px; 14 | cursor: pointer; 15 | margin-top: 5px; 16 | border-radius: 5px; 17 | display: flex; 18 | align-items: center; 19 | justify-content: space-between; 20 | } 21 | 22 | .networks-view .network-logo { 23 | width: 20px; 24 | height: 20px; 25 | border-radius: 50%; 26 | background-color: var(--text); 27 | margin-left: 5px; 28 | } 29 | 30 | .networks-view .network-item:hover { 31 | border: 1px solid var(--buttonColor); 32 | } 33 | 34 | .networks-view .network-item span { 35 | flex: 1; 36 | padding-left: 10px; 37 | } 38 | 39 | .networks-view .network-item-disabled{ 40 | opacity: .5; 41 | cursor: default; 42 | } 43 | 44 | .networks-view .network-item-disabled:hover { 45 | border: 1px solid transparent; 46 | } 47 | 48 | .networks-view .network-selected { 49 | background-color: var(--buttonColor); 50 | color: var(--buttonHover2); 51 | cursor: default; 52 | } */ 53 | -------------------------------------------------------------------------------- /src/Components/SideMenu/sideMenu.css: -------------------------------------------------------------------------------- 1 | .sideMenu{ 2 | position: fixed; 3 | width: 100%; 4 | height: 100%; 5 | top: 0; 6 | left: 0; 7 | margin: 0; 8 | padding: 0; 9 | overflow: hidden; 10 | z-index: 9000; 11 | } 12 | 13 | .sideMenu .sideMenu-overlay{ 14 | float: left; 15 | display: block; 16 | height: 100%; 17 | width: 100%; 18 | background-color: var(--overlayBackground); 19 | } 20 | 21 | .sideMenu .sideMenu-wrapper{ 22 | display: flex; 23 | flex-direction: column; 24 | min-width: 220px; 25 | max-width: 300px; 26 | height: 100%; 27 | background-color: var(--navBackground); 28 | color: var(--text); 29 | position: fixed; 30 | right: 0; 31 | margin: 0; 32 | padding: 80px 10px 10px 10px; 33 | transition: all .2s ease-in-out; 34 | } 35 | 36 | .sideMenu .close{ 37 | border: 1px solid rgba(243, 243, 243, 0); 38 | display: block; 39 | width:30px; 40 | height: 30px; 41 | float: right; 42 | position: absolute; 43 | padding: 0; 44 | margin: 0; 45 | transition: transform 0.2s ease-in-out, 46 | border-color 0.2s ease-in-out 0.1s, 47 | background-color 0.2s ease-out; 48 | cursor: pointer; 49 | user-select: none; 50 | border-radius: 50%; 51 | top:15px; 52 | right: 10px; 53 | } 54 | 55 | .sideMenu .close:hover{ 56 | border-color: rgba(243, 243, 243, 1); 57 | transform: rotate(90deg); 58 | background-color: #444; 59 | } 60 | 61 | .sideMenu .close::before{ 62 | content: ""; 63 | display: block; 64 | width: 60%; 65 | height: 3px; 66 | background-color: #f3f3f3f3; 67 | position: absolute; 68 | top:50%; 69 | left: 49%; 70 | transform: translate(-50%, -50%) rotate(45deg); 71 | transition: all 0.2s ease-out; 72 | } 73 | 74 | .sideMenu .close::after{ 75 | content: ""; 76 | display: block; 77 | width: 60%; 78 | height: 3px; 79 | background-color: #f3f3f3f3; 80 | position: absolute; 81 | top:50%; 82 | left: 49%; 83 | transform: translate(-50%, -50%) rotate(-45deg); 84 | transition: all 0.2s ease-out; 85 | } 86 | 87 | .sideMenu .close:active{ 88 | background-color: #f3f3f3f3; 89 | } 90 | 91 | .sideMenu .close:active::after, .sideMenu .close:active::before{ 92 | background-color: #444; 93 | } 94 | 95 | .side-menu-hidden{ 96 | display: none; 97 | } 98 | 99 | -------------------------------------------------------------------------------- /src/Components/SideMenu/sideMenu.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import { useUiContext } from "../../Types/uiContext" 3 | import "./sideMenu.css" 4 | 5 | interface Props{ 6 | children: ReactNode 7 | } 8 | 9 | const SideMenu: React.FC<Props> = ({children} : Props) => { 10 | const {sideMenu, setSideMenu, setOpenAddress, setOpenNetwork, setOpenAirdrop, setOpenHundred} = useUiContext() 11 | 12 | const handleClose = () => { 13 | setSideMenu(false) 14 | setOpenAddress(false) 15 | setOpenNetwork(false) 16 | setOpenHundred(false) 17 | setOpenAirdrop(false) 18 | } 19 | 20 | 21 | return ( 22 | sideMenu ?( 23 | <div id="side-menu" className="sideMenu"> 24 | <div className="sideMenu-overlay" onClick={() => handleClose()}> 25 | </div> 26 | <div className="sideMenu-wrapper"> 27 | <span className="close" onClick={() => handleClose()}> 28 | </span> 29 | <div className="sideMenu-content"> 30 | {children} 31 | </div> 32 | </div> 33 | </div>) : null 34 | ) 35 | } 36 | 37 | export default SideMenu -------------------------------------------------------------------------------- /src/Components/Spinner/spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react" 2 | import { HuLogoSpinner } from "../../assets/huIcons/huIcons" 3 | import { useUiContext } from "../../Types/uiContext" 4 | 5 | const Spinner: React.FC = () => { 6 | const {spinnerVisible, theme} = useUiContext() 7 | 8 | const style : React.CSSProperties ={ 9 | position: 'fixed', 10 | minHeight: `${spinnerVisible ? '100%' : '0'}`, 11 | height: `${spinnerVisible ? '100%' : '0'}`, 12 | width: `${spinnerVisible ? '100%' : '0'}`, 13 | top: `${spinnerVisible ? '0' : '50%'}`, 14 | left: `${spinnerVisible ? '0' : '50%'}`, 15 | backgroundColor: `${theme ? theme.overlayBackground : 'rgba(0, 0, 0, 0.2)'}`, 16 | overflow: 'hidden', 17 | zIndex: 9999 18 | } 19 | 20 | const loader : React.CSSProperties ={ 21 | position: 'fixed', 22 | top: '50%', 23 | left: '50%', 24 | transform: 'translate(-50%, -50%)', 25 | display: `${spinnerVisible ? 'block' : 'none'}`, 26 | } 27 | 28 | useEffect(() => { 29 | /** 30 | * Alert if clicked on outside of element 31 | */ 32 | if(spinnerVisible){ 33 | document.getElementsByTagName("body")[0].style.overflow = 'hidden' 34 | } 35 | else{ 36 | document.getElementsByTagName("body")[0].style.overflow = 'auto' 37 | } 38 | }, [spinnerVisible]); 39 | 40 | return( 41 | spinnerVisible ? ( 42 | <div style={style} > 43 | <HuLogoSpinner style={loader} width="80px" height="80px" color={theme.spinnerColor}/> 44 | </div>) : null 45 | ) 46 | } 47 | 48 | export default Spinner -------------------------------------------------------------------------------- /src/Components/StarBpro/starBpro.css: -------------------------------------------------------------------------------- 1 | /* .star{ 2 | padding: 0; 3 | width: 15px; 4 | height: 15px; 5 | padding-right: 3px; 6 | margin-right: 2px; 7 | margin-bottom: 2px; 8 | } */ 9 | 10 | .a { 11 | color: #fff; 12 | } 13 | .a:hover { 14 | color: var(--link-color); 15 | } 16 | .star-bpro-icons img{ 17 | width:16px; 18 | height: 16px; 19 | padding-right: 3px; 20 | } -------------------------------------------------------------------------------- /src/Components/Switch/switch.css: -------------------------------------------------------------------------------- 1 | .switch-button{ 2 | height: 15px; 3 | width: 48px; 4 | border-radius: 15px; 5 | border: 1px solid #069BEF; 6 | position: relative; 7 | cursor: pointer; 8 | cursor: pointer; 9 | } 10 | 11 | .switch-button::before{ 12 | content: ""; 13 | position: absolute; 14 | height: 23px; 15 | width: 23px; 16 | border-radius: 50%; 17 | -webkit-box-shadow: linear-gradient(180deg, #00CEFF 0%, #069BEF 100%); 18 | box-shadow: linear-gradient(180deg, #00CEFF 0%, #069BEF 100%); 19 | background: linear-gradient(180deg, #00CEFF 0%, #069BEF 100%); 20 | left: -6px; 21 | top: 50%; 22 | transform: translateY(-50%); 23 | } 24 | 25 | .switch-button-checked{ 26 | background: linear-gradient(180deg, #00CEFF 0%, #069BEF 100%); 27 | } 28 | 29 | .switch-button-checked::before{ 30 | border: 1.5px solid #069BEF; 31 | background: var(--background-color); 32 | left: initial; 33 | right: -6px; 34 | } 35 | 36 | .switch-button-disabled{ 37 | opacity: .6; 38 | cursor: default; 39 | } 40 | -------------------------------------------------------------------------------- /src/Components/Switch/switch.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Tippy from '@tippyjs/react'; 3 | import 'tippy.js/dist/tippy.css'; // optional 4 | import "./switch.css" 5 | 6 | interface Props{ 7 | disabled: boolean, 8 | checked?: boolean, 9 | onClick?: () => void 10 | switchToolTip?: string | null 11 | } 12 | 13 | const SwitchButton: React.FC<Props> = (props : Props) => { 14 | 15 | const handleClick = () =>{ 16 | if(!props.disabled && props.onClick) 17 | props.onClick() 18 | } 19 | 20 | return ( 21 | props.switchToolTip ? 22 | <Tippy content={props.switchToolTip}> 23 | <div className={`switch-button ${props.checked ? "switch-button-checked" : ""} ${props.disabled ? "switch-button-disabled" : ""}`} onClick={handleClick}/> 24 | </Tippy> 25 | : 26 | <div className={`switch-button ${props.checked ? "switch-button-checked" : ""} ${props.disabled ? "switch-button-disabled" : ""}`} onClick={handleClick}/> 27 | ) 28 | } 29 | 30 | export default SwitchButton -------------------------------------------------------------------------------- /src/Components/TabControl/tab.css: -------------------------------------------------------------------------------- 1 | .tab{ 2 | overflow: hidden; 3 | position: relative; 4 | flex: 1; 5 | height: 100%; 6 | box-sizing: border-box; 7 | display: flex; 8 | flex-direction: column; 9 | /*position: relative; 10 | display: flex; 11 | flex-direction: column; 12 | flex: 1; 13 | border: 1px solid red;*/ 14 | 15 | } 16 | 17 | .tab-header{ 18 | 19 | height: 40px; 20 | display: flex; 21 | flex: 1; 22 | justify-content: space-evenly; 23 | align-items: center; 24 | position: relative; 25 | margin-top: 5px; 26 | } 27 | 28 | .tab-header-item{ 29 | line-height: 30px; 30 | width:50%; 31 | text-align: center; 32 | cursor: pointer; 33 | transition: all 0.2s ease-in-out; 34 | user-select: none; 35 | color: var(--secondaryText); 36 | } 37 | 38 | .tab-content{ 39 | box-sizing: border-box; 40 | overflow-y: auto; 41 | height: 100%; 42 | width: 100%; 43 | position: relative; 44 | margin-top: 20px; 45 | } 46 | 47 | .tab-content-item{ 48 | padding: 0 5px; 49 | position: relative; 50 | top:0; 51 | display: block; 52 | height: 0; 53 | overflow:hidden; 54 | transform: scale(0.9); 55 | opacity: 0; 56 | transition: opacity 0.2s ease-in-out, 57 | transform 0.2s ease-in-out; 58 | 59 | /* 60 | padding-right: 10px; 61 | top:-200%; 62 | position: absolute; 63 | height: 100%; 64 | width: calc(100% - 20px); 65 | overflow-y: auto; 66 | transform: scale(0.9); 67 | opacity: 0; 68 | transition: opacity 0.2s ease-in-out, 69 | transform 0.2s ease-in-out; 70 | */ 71 | } 72 | 73 | .tab-content-item div:not(:last-child){ 74 | margin-bottom: 5px; 75 | } 76 | 77 | .tab-content .active{ 78 | height: 100%; 79 | top:0; 80 | opacity: 1; 81 | transform: scale(1); 82 | overflow-y: auto; 83 | } 84 | 85 | .tab-header .active{ 86 | background-color: var(--tab-active); 87 | transition: all 0.2s ease-in-out; 88 | } 89 | 90 | /* .indicator{ 91 | position: absolute; 92 | left:0; 93 | bottom: 5px; 94 | height: 2px; 95 | background-color: var(--tab-active); 96 | transition: left 0.2s ease-in-out; 97 | } */ -------------------------------------------------------------------------------- /src/Components/Wallets/wallets.css: -------------------------------------------------------------------------------- 1 | .wallets { 2 | margin-top: 3rem; 3 | display: flex; 4 | flex-direction: column; 5 | padding: 0 20px; 6 | justify-content: space-around; 7 | gap: 1.2rem; 8 | } 9 | 10 | .wallets .wallet-item{ 11 | display: flex; 12 | align-items: center; 13 | padding: 10px 10px; 14 | gap: 15px; 15 | padding-left: 4rem; 16 | cursor: pointer; 17 | font-size: 1.3rem; 18 | transition: all 200ms ease-in; 19 | } 20 | 21 | .wallets .wallet-item .wallet-item-icon img{ 22 | width: 30px; 23 | height: 30px; 24 | } 25 | 26 | .wallets .wallet-item:hover{ 27 | background-color: var(--wallet-hover); 28 | 29 | } 30 | 31 | .wallets .wallet-item:active{ 32 | background-color: var(--wallet-hover); 33 | 34 | } -------------------------------------------------------------------------------- /src/Components/Wallets/wallets.tsx: -------------------------------------------------------------------------------- 1 | import Modal from "../Modal/modal" 2 | import React from "react" 3 | import mm from '../../assets/icons/mm.png' 4 | import wc from '../../assets/icons/wc.png' 5 | import cbw from '../../assets/icons/cbw.png' 6 | import xdefi from "../../assets/icons/XDEFIWallet.jpeg" 7 | import { connectrorsEnum, GetConnector } from "../../Connectors/connectors" 8 | import { useUiContext } from "../../Types/uiContext" 9 | import { useWeb3React } from "@web3-react/core" 10 | import { providers } from "ethers" 11 | import { useGlobalContext } from "../../Types/globalContext" 12 | import "./wallets.css" 13 | 14 | const Wallets: React.FC = () =>{ 15 | const {showWallets, setShowWallets} = useUiContext() 16 | const {network} = useGlobalContext() 17 | const { activate } = useWeb3React<providers.Web3Provider>() 18 | 19 | const handleConnect = (c: any) => { 20 | setShowWallets(false) 21 | const con = GetConnector(c, network ? network.chainId : undefined) 22 | console.log(con) 23 | // setActivatingConnector(con) 24 | try{ 25 | activate( con ) 26 | window.localStorage.setItem("hundred-provider", c) 27 | } 28 | catch(err){ 29 | console.log(err) 30 | } 31 | } 32 | 33 | return( 34 | <Modal open={showWallets} close={() => setShowWallets(false)} title="Connect Wallet"> 35 | <div className='wallets'> 36 | <div className='wallet-item' onClick={() => handleConnect(connectrorsEnum.Metamask)}> 37 | <div className='wallet-item-icon'> 38 | <img src={mm} alt=""/> 39 | </div> 40 | <div className='wallet-item-name'>Metamask</div> 41 | </div> 42 | <div className='wallet-item' onClick={() => handleConnect(connectrorsEnum.WalletConnect)}> 43 | <div className='wallet-item-icon'> 44 | <img src={wc} alt=""/> 45 | </div> 46 | <div className='wallet-item-name'>Wallet Connect</div> 47 | </div> 48 | <div className='wallet-item' onClick={() => handleConnect(connectrorsEnum.Coinbase)}> 49 | <div className='wallet-item-icon'> 50 | <img src={cbw} alt=""/> 51 | </div> 52 | <div className='wallet-item-name'>Coinbase Wallet</div> 53 | </div> 54 | <div className='wallet-item' onClick={() => handleConnect(connectrorsEnum.xDefi)}> 55 | <div className='wallet-item-icon'> 56 | <img src={xdefi} alt=""/> 57 | </div> 58 | <div className='wallet-item-name'>xDefi Wallet</div> 59 | </div> 60 | </div> 61 | </Modal> 62 | ) 63 | } 64 | 65 | export default Wallets 66 | -------------------------------------------------------------------------------- /src/Components/Wrapper/wrapper.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | left: 0; 6 | top: 0; 7 | transition: all .2s ease-out; 8 | 9 | } 10 | 11 | .wrapper-side{ 12 | left: 0px; 13 | } 14 | 15 | @media (max-width: 712px) { 16 | .wrapper{ 17 | padding-bottom: 185px; 18 | } 19 | } 20 | 21 | @media (max-width: 330px){ 22 | .wrapper{ 23 | padding-bottom: 320px; 24 | } 25 | } -------------------------------------------------------------------------------- /src/Components/Wrapper/wrapper.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react" 2 | import { useUiContext } from "../../Types/uiContext" 3 | import "./wrapper.css" 4 | 5 | interface Props { 6 | children?: ReactNode 7 | } 8 | 9 | const Wrapper: React.FC<Props> = (props:Props) => { 10 | const {sideMenu} = useUiContext() 11 | return ( 12 | <section className={`wrapper ${sideMenu ? "wrapper-side" : ""}`}> 13 | {props.children} 14 | </section> 15 | ) 16 | } 17 | 18 | export default Wrapper -------------------------------------------------------------------------------- /src/Connectors/metamask-connector/declarations.ts: -------------------------------------------------------------------------------- 1 | export interface Ethereum { 2 | send: unknown 3 | enable: () => Promise<string[]> 4 | on?: (method: string, listener: (...args: any[]) => void) => void 5 | removeListener?: (method: string, listener: (...args: any[]) => void) => void 6 | } 7 | -------------------------------------------------------------------------------- /src/Connectors/metamask-connector/types.ts: -------------------------------------------------------------------------------- 1 | export type SendReturnResult = { result: any } 2 | export type SendReturn = any 3 | 4 | export type Send = (method: string, params?: any[]) => Promise<SendReturnResult | SendReturn> 5 | export type SendOld = ({ method }: { method: string }) => Promise<SendReturnResult | SendReturn> 6 | -------------------------------------------------------------------------------- /src/Connectors/xdefi-connector/declarations.ts: -------------------------------------------------------------------------------- 1 | export interface Ethereum { 2 | send: unknown 3 | enable: () => Promise<string[]> 4 | on?: (method: string, listener: (...args: any[]) => void) => void 5 | removeListener?: (method: string, listener: (...args: any[]) => void) => void 6 | } 7 | 8 | export interface XFI { 9 | ethereum?: Ethereum 10 | } 11 | 12 | export declare const __DEV__: boolean 13 | -------------------------------------------------------------------------------- /src/Connectors/xdefi-connector/types.ts: -------------------------------------------------------------------------------- 1 | export type SendReturnResult = { result: any } 2 | export type SendReturn = any 3 | 4 | export type Send = (method: string, params?: any[]) => Promise<SendReturnResult | SendReturn> 5 | export type SendOld = ({ method }: { method: string }) => Promise<SendReturnResult | SendReturn> 6 | -------------------------------------------------------------------------------- /src/Hundred/Data/fetchHndRewardsData.tsx: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | import { BigNumber } from "../../bigNumber" 3 | import { GaugeV4 } from "../../Classes/gaugeV4Class" 4 | 5 | export type hndRewardsDataType = { 6 | totalHndRewards: BigNumber, 7 | secondaryTokenRewards: BigNumber, 8 | secondaryTokenSymbol: string | undefined, 9 | gaugeAddresses: string[] 10 | } 11 | 12 | export const fetchHndRewards = async( 13 | { gaugesData }: {gaugesData: GaugeV4[]}) : Promise<hndRewardsDataType> => { 14 | 15 | const gaugeAddresses = Array(8).fill(ethers.constants.AddressZero); 16 | 17 | const claimableGauges = 18 | gaugesData 19 | .filter(g => !g.generalData.backstopGauge) 20 | .filter(g => g.userClaimableHnd.gt(BigNumber.from(0))) 21 | .slice(0, 7); 22 | let totalHndRewards = 0 23 | let totalSecondaryTokenRewards = 0 24 | let secondaryTokenSymbol = undefined; 25 | for (let i = 0; i < claimableGauges.length; i++) { 26 | gaugeAddresses[i] = (claimableGauges[i].generalData.address); 27 | 28 | totalHndRewards += +claimableGauges[i].userClaimableHnd.toString() 29 | totalSecondaryTokenRewards += +claimableGauges[i].claimable_reward.toString() 30 | secondaryTokenSymbol = claimableGauges[i].reward_token_symbol; 31 | } 32 | 33 | return { 34 | totalHndRewards: BigNumber.parseValue(totalHndRewards.noExponents()), 35 | secondaryTokenRewards: BigNumber.parseValue(totalSecondaryTokenRewards.noExponents()), 36 | secondaryTokenSymbol: secondaryTokenSymbol, 37 | gaugeAddresses: gaugeAddresses 38 | } 39 | } -------------------------------------------------------------------------------- /src/Hundred/Data/fetchVotingData.tsx: -------------------------------------------------------------------------------- 1 | import { Contract } from "ethcall" 2 | import {VOTING_ESCROW_ABI} from "../../abi" 3 | import { BigNumber } from "../../bigNumber" 4 | import { Comptroller } from "../../Classes/comptrollerClass" 5 | import { Network } from "../../networks" 6 | 7 | export type votingDataType = { 8 | vehndBalance: BigNumber 9 | } 10 | 11 | export const fetchVotingData = async( 12 | { userAddress, comptrollerData, network, }: 13 | {userAddress: string; comptrollerData: Comptroller; network: Network;}) : Promise<votingDataType> => { 14 | const votingCalls = [] 15 | if (network.votingAddress) { 16 | const votingContract = new Contract(network.votingAddress, VOTING_ESCROW_ABI); 17 | votingCalls.push(votingContract.balanceOf(userAddress)) 18 | } 19 | const votingResult = await comptrollerData.ethcallProvider.all(votingCalls) 20 | 21 | const vehndBalance = votingResult[0] ? BigNumber.from(votingResult[0], 18) : BigNumber.from("0") 22 | return {vehndBalance:vehndBalance} 23 | } 24 | -------------------------------------------------------------------------------- /src/Hundred/Data/hndPrice.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | import { useGlobalContext } from "../../Types/globalContext" 3 | 4 | const useHndPrice = async () => { 5 | const timeoutId = useRef<string | number | NodeJS.Timeout | undefined>(); 6 | const {setHndPrice, setTerraUsd} = useGlobalContext() 7 | 8 | useEffect(() => { 9 | 10 | const updatePrice = async () => { 11 | if(timeoutId) clearTimeout((Number(timeoutId.current))) 12 | try{ 13 | const url = "https://api.coingecko.com/api/v3/simple/price?ids=terrausd%2Chundred-finance&vs_currencies=usd" 14 | const headers = {} 15 | const response = await fetch(url, 16 | { 17 | method: "GET", 18 | mode: 'cors', 19 | headers: headers 20 | } 21 | ) 22 | const data = await response.json() 23 | const hnd = data ? data["hundred-finance"] : null 24 | const terra = data ? data["terrausd"] : null 25 | 26 | const hundred: number = hnd ? +hnd.usd : 0 27 | const ust: number = terra ? +terra.usd: 0 28 | 29 | setHndPrice(hundred) 30 | setTerraUsd(ust) 31 | } 32 | catch(err){ 33 | console.log(err) 34 | } 35 | finally{ 36 | const id = setTimeout(updatePrice, 60000) 37 | timeoutId.current = id 38 | } 39 | } 40 | 41 | updatePrice() 42 | return () => clearTimeout(Number(timeoutId.current)); 43 | }, []) 44 | } 45 | 46 | export default useHndPrice -------------------------------------------------------------------------------- /src/Hundred/Data/tokenHelper.tsx: -------------------------------------------------------------------------------- 1 | import { BigNumber } from "../../bigNumber" 2 | import { ethers } from "ethers" 3 | import { CTokenInfo } from "../../Classes/cTokenClass" 4 | 5 | const gasLimit = "250000"; 6 | 7 | export const getMaxAmount = async (market: CTokenInfo, provider: ethers.providers.Web3Provider): Promise<BigNumber> => { 8 | if (market.isNativeToken) { 9 | const gasPrice = BigNumber.from(await provider.getGasPrice()) 10 | const price = gasPrice.mul(BigNumber.from(gasLimit)) 11 | const balance = market.underlying.walletBalance.sub(price) 12 | return balance 13 | } 14 | 15 | return market.underlying.walletBalance 16 | } 17 | 18 | export const getMaxRepayAmount = (market: CTokenInfo) : BigNumber => { 19 | const maxRepayFactor = BigNumber.from("1").add(market.borrowApy); // e.g. Borrow APY = 2% => maxRepayFactor = 1.0002 20 | if (market.isNativeToken) { 21 | return market.borrowBalanceInTokenUnit//.times(maxRepayFactor).decimalPlaces(18); // Setting it to a bit larger, this makes sure the user can repay 100%. 22 | } 23 | return market.borrowBalanceInTokenUnit.mul(maxRepayFactor); // The same as ETH for now. The transaction will use -1 anyway. 24 | } -------------------------------------------------------------------------------- /src/Types/data.tsx: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | 3 | export type Data = { 4 | signer: ethers.providers.JsonRpcSigner | null, 5 | comptroller: Comptroller | null, 6 | markets: HTokenInfo[], 7 | interestRateModels: InterestRateModel[] 8 | } 9 | 10 | export type Comptroller = { 11 | address: string, 12 | comptroller: ethers.Contract, 13 | oracleAddress: string, 14 | oracle: ethers.Contract, 15 | allMarkets: string[], 16 | borrowPaused: boolean, 17 | borrowPausedLoading: boolean, 18 | mintPaused: boolean, 19 | mintPausedLoading: boolean, 20 | seizePaused: boolean, 21 | seizePausedLoading: boolean, 22 | transferPaused: boolean, 23 | transferPausedLoading: boolean, 24 | admin: string, 25 | closeFactor: number, 26 | closeFactorEdit: number, 27 | closeFactorLoading: boolean, 28 | compRate: number, 29 | hundred: string, 30 | liquidationIncentive: number, 31 | liquidationIncentiveEdit : number, 32 | liquidationIncentiveLoading : boolean, 33 | maxAssets: number, 34 | pauseGuardian: string, 35 | implementation: string 36 | } 37 | 38 | export type UnderlyingInfo = { 39 | address: string, 40 | symbol: string, 41 | logo: string, 42 | name: string, 43 | decimals: number, 44 | totalSupply: any 45 | } 46 | 47 | export type HTokenInfo = { 48 | address: string, 49 | symbol: string, 50 | totalSupply: number, 51 | borrows: number, 52 | reserves: number, 53 | reserveFactor: number, 54 | reserveFactorEdit: number, 55 | reserveFactorLoading: boolean, 56 | cash: number, 57 | decimals: number, 58 | exchangeRate: number, 59 | supplyRate: number, 60 | borrowRate: number, 61 | utilizationRate: number, 62 | interestRateModel : string, 63 | interestRateContract: ethers.Contract, 64 | mintPaused: boolean, 65 | mintPausedLoading: boolean, 66 | borrowPaused: boolean, 67 | borrowPausedLoading: boolean, 68 | compSpeeds: number, 69 | price: number, 70 | underlying: UnderlyingInfo, 71 | collateralFactor: number, 72 | collateralFactorEdit: number, 73 | collateralFactorLoading: boolean, 74 | isComped: boolean, 75 | isCompedLoading: boolean, 76 | hndAPR: number, 77 | admin: string, 78 | } 79 | 80 | export type InterestRateModel = { 81 | address : string, 82 | name: string, 83 | baseRatePerBlock: number, 84 | baseRatePerYear : number, 85 | jumpMultiplierPerBlock : number, 86 | jumpMultiplierPerYear : number, 87 | kink : number, 88 | multiplierPerBlock: number, 89 | multiplierPerYear : number, 90 | blocksPerYear: number, 91 | owner: string 92 | } 93 | 94 | export type Admins = { 95 | Unitroller: string, 96 | Oracle: string, 97 | Hundred: string, 98 | PauseGuardian: string 99 | } -------------------------------------------------------------------------------- /src/Types/globalContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | import { AirdropType } from "../Components/AirdropButton/airdropButton"; 3 | import { Network } from "../networks"; 4 | 5 | export type GlobalContext = { 6 | network: Network | null, 7 | setNetwork: (n: Network | null) => void, 8 | address: string, 9 | setAddress: (a: string) => void 10 | hndPrice: number, 11 | setHndPrice: (p: number) => void 12 | terraUsd: number, 13 | setTerraUsd: (p: number) => void 14 | hasClaimed: boolean, 15 | setHasClaimed: (c: boolean) => void, 16 | airdrops: AirdropType[], 17 | setAirdrops: (a: AirdropType[]) => void 18 | updateEarned: boolean, 19 | setUpdateEarned: (e: boolean) => void, 20 | } 21 | 22 | export const MyGlobalContext = createContext<GlobalContext>({ 23 | network: null, 24 | setNetwork: () => undefined, 25 | address: "", 26 | setAddress: () => undefined, 27 | hndPrice: 0, 28 | setHndPrice: () => undefined, 29 | terraUsd: 0, 30 | setTerraUsd: () => undefined, 31 | hasClaimed: false, 32 | setHasClaimed: () => undefined, 33 | airdrops: [], 34 | setAirdrops: () => undefined, 35 | updateEarned: false, 36 | setUpdateEarned: () => undefined 37 | }) 38 | 39 | export const useGlobalContext = () : GlobalContext => useContext(MyGlobalContext) -------------------------------------------------------------------------------- /src/Types/timers.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | export type TimersContext = { 4 | hndPriceTimer: string | number | NodeJS.Timeout | undefined, 5 | setHndPriceTimer: (h: string | number | NodeJS.Timeout | undefined) => void, 6 | } 7 | 8 | export const MyTimersContext = createContext<TimersContext>({ 9 | hndPriceTimer: undefined, 10 | setHndPriceTimer: () => undefined, 11 | }) 12 | 13 | export const useTimersContext = () : TimersContext => useContext(MyTimersContext) -------------------------------------------------------------------------------- /src/assets/Abstract_Lines/Abstract_Line_1.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1924 643.32"><defs><style>.cls-1{opacity:0.4;}.cls-2{fill:none;stroke:#069bef;stroke-miterlimit:10;}.cls-3{fill:#069bef;}</style></defs><title>Abstract Line 1_4 -------------------------------------------------------------------------------- /src/assets/Abstract_Lines/Abstract_Line_2.svg: -------------------------------------------------------------------------------- 1 | Abstract Line 2 -------------------------------------------------------------------------------- /src/assets/Abstract_Lines/Abstract_Line_3.svg: -------------------------------------------------------------------------------- 1 | Abstract Line 3_1 -------------------------------------------------------------------------------- /src/assets/Abstract_Lines/Abstract_Line_4.svg: -------------------------------------------------------------------------------- 1 | Abstract Line 4 -------------------------------------------------------------------------------- /src/assets/Abstract_Lines/Abstract_Line_5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/Cubes/cube7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/assets/Cubes/cube8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/assets/Cubes/cube9.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/assets/assets.css: -------------------------------------------------------------------------------- 1 | 2 | .stop_color1{ 3 | stop-color: var(--stop-color-1); 4 | } 5 | 6 | .stop_color2{ 7 | stop-color: var(--stop-color-2); 8 | } 9 | 10 | .stop_color3{ 11 | stop-color: var(--stop-color-3); 12 | } 13 | 14 | .stop_color4{ 15 | stop-color: var(--stop-color-4); 16 | } 17 | 18 | .stop_color5{ 19 | stop-color: var(--stop-color-5); 20 | } 21 | 22 | .stop_color6{ 23 | stop-color: var(--stop-color-6); 24 | } 25 | 26 | .stop_color7{ 27 | stop-color: var(--stop-color-7); 28 | } 29 | 30 | .stop_color8{ 31 | stop-color: var(--stop-color-8); 32 | } 33 | 34 | .stop_color9{ 35 | stop-color: var(--stop-color-9); 36 | } 37 | 38 | .stop_color10{ 39 | stop-color: var(--stop-color-10); 40 | } 41 | 42 | .cls_8{ 43 | font-size:80px;font-family:"Roboto Flex", Inter;font-weight:800;letter-spacing:0.2em; 44 | } 45 | .cls_8, 46 | .cls_9{ 47 | fill:var(--hundred-logo-text); 48 | } 49 | .cls_9{ 50 | font-size:60px;font-family:Inter-SemiBold, "Roboto Flex";font-weight:600;letter-spacing:0.63em; 51 | } 52 | 53 | .ve_cls_1{fill:url(#linear-gradient);} 54 | .ve_cls_2{fill:url(#linear-gradient-2);} 55 | .ve_cls_3{fill:var(--stop-color-7);} 56 | 57 | .bc_cls_1{fill:url(#bc-linear-gradient);} 58 | .bc_cls_2{fill:url(#bc-linear-gradient-2);} 59 | .bc_cls_3{fill:url(#bc-linear-gradient-3);} 60 | .bc_cls_4{fill:url(#bc-linear-gradient-4);} 61 | .bc_cls_5{fill:url(#bc-linear-gradient-5);} 62 | .bc_cls_6{fill:url(#bc-linear-gradient-6);} 63 | .bc_cls_7{fill:url(#bc-linear-gradient-7);} 64 | .bc_cls_8{fill:url(#bc-linear-gradient-8);} 65 | .bc_cls_9{fill:url(#bc-linear-gradient-9);} 66 | .bc_cls_10{fill:url(#bc-linear-gradient-10);} 67 | .bc_cls_11{fill:url(#bc-linear-gradient-11);} 68 | .bc_cls_12{fill:url(#bc-linear-gradient-12);} 69 | 70 | .la_cls_1{fill:url(#la-linear-gradient);} 71 | .la_cls_2{fill:url(#la-linear-gradient-2);} 72 | .la_cls_3{fill:url(#la-linear-gradient-3);} 73 | .la_cls_4{fill:url(#la-linear-gradient-4);} 74 | 75 | .moon{ 76 | fill: var(--moon); 77 | } 78 | 79 | .sun{ 80 | fill: var(--sun); 81 | } -------------------------------------------------------------------------------- /src/assets/huIcons/hundred.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/huIcons/hundred.png -------------------------------------------------------------------------------- /src/assets/huIcons/logo copy.svg: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 18 | 21 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/assets/huIcons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/huIcons/logo.png -------------------------------------------------------------------------------- /src/assets/huIcons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 14 | 18 | 26 | 31 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/assets/huIcons/style.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | animation: rotate 2s linear infinite; 3 | padding-left: 5px; 4 | padding-right: 5px; 5 | } 6 | .spinner .path { 7 | stroke: var(--spinner-color); 8 | stroke-linecap: round; 9 | animation: dash 1.5s ease-in-out infinite; 10 | stroke-width: 5; 11 | } 12 | 13 | 14 | 15 | @keyframes rotate { 16 | 100% { 17 | transform: rotate(360deg); 18 | } 19 | } 20 | 21 | @keyframes dash { 22 | 0% { 23 | stroke-dasharray: 1, 150; 24 | stroke-dashoffset: 0; 25 | } 26 | 50% { 27 | stroke-dasharray: 90, 150; 28 | stroke-dashoffset: -35; 29 | } 30 | 100% { 31 | stroke-dasharray: 90, 150; 32 | stroke-dashoffset: -124; 33 | } 34 | } -------------------------------------------------------------------------------- /src/assets/icons/HND 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/HND 1.png -------------------------------------------------------------------------------- /src/assets/icons/XDEFIWallet.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/XDEFIWallet.jpeg -------------------------------------------------------------------------------- /src/assets/icons/cbw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/cbw.png -------------------------------------------------------------------------------- /src/assets/icons/closeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/closeIcon.png -------------------------------------------------------------------------------- /src/assets/icons/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/discord.png -------------------------------------------------------------------------------- /src/assets/icons/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/github.png -------------------------------------------------------------------------------- /src/assets/icons/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/medium.png -------------------------------------------------------------------------------- /src/assets/icons/mm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/mm.png -------------------------------------------------------------------------------- /src/assets/icons/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/icons/rating-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/icons/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | 26 | 27 | 29 | 30 | 31 | 33 | 34 | 35 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/assets/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/twitter.png -------------------------------------------------------------------------------- /src/assets/icons/unstoppable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/unstoppable.png -------------------------------------------------------------------------------- /src/assets/icons/wc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/icons/wc.png -------------------------------------------------------------------------------- /src/assets/images/AAVE-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/assets/images/ADA-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/ADA-logo.png -------------------------------------------------------------------------------- /src/assets/images/ALPHA-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/ALPHA-logo.png -------------------------------------------------------------------------------- /src/assets/images/ARBITRUM-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/ARBITRUM-logo.png -------------------------------------------------------------------------------- /src/assets/images/ATOM-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/ATOM-logo.png -------------------------------------------------------------------------------- /src/assets/images/AUTO-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/AUTO-logo.png -------------------------------------------------------------------------------- /src/assets/images/BAGS-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BAGS-logo.png -------------------------------------------------------------------------------- /src/assets/images/BAL-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BAL-logo.png -------------------------------------------------------------------------------- /src/assets/images/BAND-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BAND-logo.png -------------------------------------------------------------------------------- /src/assets/images/BAT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BAT-logo.png -------------------------------------------------------------------------------- /src/assets/images/BCH-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BCH-logo.png -------------------------------------------------------------------------------- /src/assets/images/BNB-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BNB-logo.png -------------------------------------------------------------------------------- /src/assets/images/BTC-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/BTCB-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BTCB-logo.png -------------------------------------------------------------------------------- /src/assets/images/BUSD-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BUSD-logo.png -------------------------------------------------------------------------------- /src/assets/images/BZRX-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/BZRX-logo.png -------------------------------------------------------------------------------- /src/assets/images/CAKE-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/CAKE-logo.png -------------------------------------------------------------------------------- /src/assets/images/COMP-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/images/CREAM-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/CREAM-logo.png -------------------------------------------------------------------------------- /src/assets/images/CRV-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/CRV-logo.png -------------------------------------------------------------------------------- /src/assets/images/DAI-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/images/DF-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/DF-logo.png -------------------------------------------------------------------------------- /src/assets/images/DOT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/DOT-logo.png -------------------------------------------------------------------------------- /src/assets/images/EOS-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/EOS-logo.png -------------------------------------------------------------------------------- /src/assets/images/ETH-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/images/FIL-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/FIL-logo.png -------------------------------------------------------------------------------- /src/assets/images/FRAX-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/FTM-logo.svg: -------------------------------------------------------------------------------- 1 | fa -------------------------------------------------------------------------------- /src/assets/images/GNO-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/GNO-logo.png -------------------------------------------------------------------------------- /src/assets/images/GNOSIS-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/GNOSIS-logo.png -------------------------------------------------------------------------------- /src/assets/images/HBCH-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HBCH-logo.png -------------------------------------------------------------------------------- /src/assets/images/HDOT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HDOT-logo.png -------------------------------------------------------------------------------- /src/assets/images/HFIL-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HFIL-logo.png -------------------------------------------------------------------------------- /src/assets/images/HHT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HHT-logo.png -------------------------------------------------------------------------------- /src/assets/images/HLTC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HLTC-logo.png -------------------------------------------------------------------------------- /src/assets/images/HUNDRED-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HUNDRED-logo.png -------------------------------------------------------------------------------- /src/assets/images/HUSD-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/HUSD-logo.png -------------------------------------------------------------------------------- /src/assets/images/IOTX-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/KNC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/KNC-logo.png -------------------------------------------------------------------------------- /src/assets/images/LINA-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/LINA-logo.png -------------------------------------------------------------------------------- /src/assets/images/LINK-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/LRC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/LRC-logo.png -------------------------------------------------------------------------------- /src/assets/images/LTC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/LTC-logo.png -------------------------------------------------------------------------------- /src/assets/images/MANA-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/MANA-logo.png -------------------------------------------------------------------------------- /src/assets/images/MATIC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/MATIC-logo.png -------------------------------------------------------------------------------- /src/assets/images/MDX-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/MDX-logo.png -------------------------------------------------------------------------------- /src/assets/images/MKR-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/MKR-logo.png -------------------------------------------------------------------------------- /src/assets/images/MOVR-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/MOVR-logo.png -------------------------------------------------------------------------------- /src/assets/images/ONE-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/OP-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/OP-logo.png -------------------------------------------------------------------------------- /src/assets/images/OPT-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/images/PAXG-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/PAXG-logo.png -------------------------------------------------------------------------------- /src/assets/images/PCT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/PCT-logo.png -------------------------------------------------------------------------------- /src/assets/images/POLYGON-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/images/RAMP-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/RAMP-logo.png -------------------------------------------------------------------------------- /src/assets/images/RENBTC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/RENBTC-logo.png -------------------------------------------------------------------------------- /src/assets/images/REP-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/REP-logo.png -------------------------------------------------------------------------------- /src/assets/images/SNX-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/assets/images/SUSD-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/SUSD-logo.png -------------------------------------------------------------------------------- /src/assets/images/SXP-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/SXP-logo.png -------------------------------------------------------------------------------- /src/assets/images/TUSD-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/TUSD-logo.png -------------------------------------------------------------------------------- /src/assets/images/TWT-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/TWT-logo.png -------------------------------------------------------------------------------- /src/assets/images/USDC-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/images/USDT-logo.svg: -------------------------------------------------------------------------------- 1 | tether-usdt-logo -------------------------------------------------------------------------------- /src/assets/images/UST-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/UST-logo.png -------------------------------------------------------------------------------- /src/assets/images/VAI-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/VAI-logo.png -------------------------------------------------------------------------------- /src/assets/images/WBTC-logo.svg: -------------------------------------------------------------------------------- 1 | wrapped-bitcoin-wbtc -------------------------------------------------------------------------------- /src/assets/images/XDAI-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/XDAI-logo.png -------------------------------------------------------------------------------- /src/assets/images/XRP-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/XRP-logo.png -------------------------------------------------------------------------------- /src/assets/images/XTZ-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/XTZ-logo.png -------------------------------------------------------------------------------- /src/assets/images/XVS-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/XVS-logo.png -------------------------------------------------------------------------------- /src/assets/images/YFI-logo.svg: -------------------------------------------------------------------------------- 1 | yearn-finance-yfi -------------------------------------------------------------------------------- /src/assets/images/YFII-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/YFII-logo.png -------------------------------------------------------------------------------- /src/assets/images/ZRX-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/ZRX-logo.png -------------------------------------------------------------------------------- /src/assets/images/agEUR-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/vGNO-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hundred-finance/hundred-interface/d177b50057d35274cfcea71c6539cbc45978c716/src/assets/images/vGNO-logo.png -------------------------------------------------------------------------------- /src/hooks/useENS.ts: -------------------------------------------------------------------------------- 1 | import { UAuthConnector } from '@uauth/web3-react'; 2 | import { useWeb3React } from '@web3-react/core'; 3 | import { ethers } from 'ethers'; 4 | import { useEffect, useState } from 'react'; 5 | 6 | const useENS = (address: string | null | undefined): { ensName: string | null } => { 7 | const [ensName, setENSName] = useState(null); 8 | const { connector } = useWeb3React() 9 | 10 | useEffect(() => { 11 | const resolveENS = async () => { 12 | if (address && connector && ethers.utils.isAddress(address)) { 13 | if(connector instanceof UAuthConnector){ 14 | (connector as UAuthConnector).uauth.user() 15 | .then((user) => { 16 | setENSName(user.sub) 17 | }) 18 | .catch(() => { 19 | console.log("No User Found") 20 | }) 21 | } 22 | else{ 23 | const provider = ethers.providers.getDefaultProvider(); 24 | const ensName = await provider.lookupAddress(address); 25 | setENSName(ensName); 26 | } 27 | } 28 | else{ 29 | setENSName(null) 30 | } 31 | }; 32 | resolveENS(); 33 | }, [address]); 34 | 35 | return { ensName }; 36 | }; 37 | 38 | export default useENS; 39 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Web3Provider } from '@ethersproject/providers'; 7 | import { Web3ReactProvider } from '@web3-react/core'; 8 | 9 | 10 | function getLibrary(provider: any): Web3Provider { 11 | const library = new Web3Provider(provider) 12 | library.pollingInterval = 12000 13 | return library 14 | } 15 | 16 | ReactDOM.render( 17 | 18 | 19 | 20 | 21 | , 22 | document.getElementById('root') 23 | ); 24 | 25 | // If you want to start measuring performance in your app, pass a function 26 | // to log results (for example: reportWebVitals(console.log)) 27 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 28 | reportWebVitals(); 29 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) : void => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/theme.tsx: -------------------------------------------------------------------------------- 1 | export type Theme = { 2 | navBackground?: string, 3 | background?: string, 4 | sectionBackground?: string, 5 | text?: string, 6 | bottomShadow?: string, 7 | overlayBackground?: string, 8 | buttonColor?: string, 9 | buttonHover?: string, 10 | buttonHover2?: string, 11 | textShadow?: string, 12 | spinnerColor?: string, 13 | boxShadow?: string, 14 | } 15 | 16 | export const lightTheme: Theme = { 17 | navBackground: '#f0f0f0', 18 | background: '#f9fafb', 19 | sectionBackground: '#f9f9f9', 20 | text: '#333', 21 | bottomShadow: '0px 1px 10px 1px rgba(17, 162, 234, 0.2)', 22 | overlayBackground: 'rgba(0, 0, 0, 0.6)', 23 | buttonColor: '#444', 24 | buttonHover: '#1abc9c', 25 | buttonHover2: '#f0f0f0', 26 | textShadow: '1px 1px 1px rgba(0,0,0,.2)', 27 | spinnerColor: '#f0f0f0', 28 | boxShadow: '0px 1px 10px 1px rgba(97, 97, 97, 0.5)', 29 | } 30 | 31 | export const darkTheme: Theme = { 32 | navBackground: '#101010', 33 | background: '#101010', 34 | sectionBackground: '#282828', 35 | text: '#EEE', 36 | buttonColor: '#444', 37 | bottomShadow: '0px 1px 10px 1px rgba(17, 162, 234, 0.2)', 38 | overlayBackground: 'rgba(250, 250, 250, 0.3)', 39 | boxShadow: '0px 1px 10px 1px rgba(230, 230, 230, 0.5)', 40 | spinnerColor: '#f0f0f0', 41 | buttonHover2: "#f0f0f0" 42 | } 43 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx", 22 | "sourceMap": true, // Generate corrresponding .map file 23 | "declaration": true, // Generate corresponding .d.ts file 24 | "noUnusedLocals": false, // Report errors on unused locals 25 | "noUnusedParameters": true, // Report errors on unused parameters 26 | "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk 27 | }, 28 | "include": [ 29 | "src", 30 | "./typings/**/*.ts" 31 | ] 32 | } 33 | --------------------------------------------------------------------------------