├── .env ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public └── _redirects ├── src ├── App.css ├── App.jsx ├── abi │ ├── InterestRateModel.json │ ├── MarketPositionManager.json │ ├── PriceOracle.json │ └── SFProtocolToken.json ├── assets │ ├── BrandingAssets-main │ │ ├── Brand │ │ │ ├── Icon.png │ │ │ ├── Logo.svg │ │ │ ├── LogoBG.jpg │ │ │ └── LogoWhite.svg │ │ ├── Graphics │ │ │ ├── MainImg.png │ │ │ ├── Second.png │ │ │ └── Third.png │ │ ├── Icons │ │ │ ├── blade.png │ │ │ ├── close-icon.png │ │ │ ├── discord_black.svg │ │ │ ├── discord_white.svg │ │ │ ├── docs_black.svg │ │ │ ├── docs_white.svg │ │ │ ├── github_black.svg │ │ │ ├── github_white.svg │ │ │ ├── hashpack.png │ │ │ ├── icons8-rocket.gif │ │ │ ├── metamask.svg │ │ │ ├── telegram_black.svg │ │ │ ├── telegram_white.svg │ │ │ ├── twitter_black.svg │ │ │ ├── twitter_white.svg │ │ │ ├── website_black.svg │ │ │ └── website_white.svg │ │ ├── LICENSE │ │ ├── Partners │ │ │ ├── flux.png │ │ │ ├── headstarter.png │ │ │ ├── hedera.png │ │ │ └── ocean.png │ │ └── README.md │ └── Gilroy │ │ ├── Gilroy-Black.ttf │ │ ├── Gilroy-BlackItalic.ttf │ │ ├── Gilroy-Bold.ttf │ │ ├── Gilroy-BoldItalic.ttf │ │ ├── Gilroy-ExtraBold.otf │ │ ├── Gilroy-ExtraBoldItalic.ttf │ │ ├── Gilroy-Heavy.ttf │ │ ├── Gilroy-HeavyItalic.ttf │ │ ├── Gilroy-Medium.ttf │ │ ├── Gilroy-MediumItalic.ttf │ │ ├── Gilroy-Regular.ttf │ │ ├── Gilroy-SemiBold.ttf │ │ ├── Gilroy-SemiBoldItalic.ttf │ │ ├── Gilroy-Thin.ttf │ │ └── Gilroy-UltraLight.ttf ├── components │ ├── BalanceStatus │ │ ├── BalanceStatus.jsx │ │ └── balanceStatus.css │ ├── CenterNetStatus │ │ ├── CenterNetStatus.jsx │ │ └── centerNetStatus.css │ ├── DashBoardMarkets │ │ ├── DashboardMarkets.jsx │ │ ├── MarketStatusContainerListItem.jsx │ │ └── dashboardMarkets.css │ ├── Footer │ │ ├── Footer.jsx │ │ └── footer.css │ ├── Header │ │ ├── Header.jsx │ │ └── header.css │ ├── LinkedIcon.jsx │ ├── MarketStatus │ │ ├── MarketStatus.jsx │ │ └── marketStatus.css │ ├── MarketStatusContainer │ │ └── MarketStatusContainer.jsx │ ├── Modal │ │ ├── BorrowBorrow.jsx │ │ ├── BorrowRepay.jsx │ │ ├── Modal.jsx │ │ ├── ModalBorrow.jsx │ │ ├── ModalConnectWallet.jsx │ │ ├── ModalDashboard.jsx │ │ ├── ModalListItem.jsx │ │ ├── ModalRisk.jsx │ │ ├── ModalSupply.jsx │ │ ├── SupplySupply.jsx │ │ ├── SupplyWithdraw.jsx │ │ └── modal.css │ ├── homePageMain │ │ ├── index.jsx │ │ └── style.css │ ├── homepageContainers │ │ ├── fifthContainer │ │ │ ├── index.jsx │ │ │ └── style.css │ │ ├── firstContainer │ │ │ ├── index.jsx │ │ │ └── style.css │ │ ├── fourthContainer │ │ │ ├── index.jsx │ │ │ └── style.css │ │ ├── secondContainer │ │ │ └── index.jsx │ │ ├── sixthContainer │ │ │ ├── index.jsx │ │ │ └── style.css │ │ └── thirdContainer │ │ │ └── index.jsx │ ├── homepageFooter │ │ ├── index.jsx │ │ └── style.css │ ├── marketIndividualStats │ │ ├── index.jsx │ │ └── style.css │ ├── marketStats │ │ ├── index.jsx │ │ └── style.css │ ├── marketscontainer │ │ ├── AllMarketListItem.jsx │ │ ├── ListItemWithMin.jsx │ │ ├── index.jsx │ │ └── style.css │ └── sidebar │ │ ├── index.jsx │ │ └── sidebar.css ├── config │ ├── constants.jsx │ ├── index.jsx │ ├── networks.jsx │ └── type.jsx ├── contexts │ ├── BladeContext.jsx │ ├── HashconnectContext.jsx │ └── MetamaskContext.jsx ├── index.css ├── main.jsx ├── pages │ ├── AppRoot.jsx │ ├── Dashboard.jsx │ ├── HomePage.jsx │ ├── HomeRoot.jsx │ ├── Markets.jsx │ └── Vote.jsx ├── services │ └── wallets │ │ ├── AllWalletsProvider.jsx │ │ ├── blade │ │ └── bladeClient.jsx │ │ ├── contractFunctionParameterBuilder.jsx │ │ ├── hashconnect │ │ └── hashconnectClient.jsx │ │ ├── metamask │ │ └── metamaskClient.jsx │ │ ├── mirrorNodeClient.jsx │ │ ├── useWalletInterface.jsx │ │ └── walletInterface.jsx └── util │ ├── HexToDecimal.jsx │ ├── TokenList.jsx │ └── modalContext.jsx ├── vite.config.js └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | HTTPS=true 2 | VITE_MARKETING_CA = -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:react/recommended", 7 | "plugin:react/jsx-runtime", 8 | "plugin:react-hooks/recommended", 9 | ], 10 | ignorePatterns: ["dist", ".eslintrc.cjs"], 11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" }, 12 | settings: { react: { version: "18.2" } }, 13 | plugins: ["react-refresh"], 14 | rules: { 15 | "react-refresh/only-export-components": [ 16 | "warn", 17 | { allowConstantExport: true }, 18 | ], 19 | "react/prop-types": "off", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sirio Finance 7 | 14 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sirio-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@bladelabs/blade-web3.js": "^1.0.3", 14 | "@hashgraph/sdk": "^2.39.0", 15 | "@metamask/sdk-react": "^0.14.1", 16 | "buffer": "^6.0.3", 17 | "dotenv": "^16.3.1", 18 | "ethers": "^5.7.2", 19 | "hashconnect": "^0.2.9", 20 | "prop-types": "^15.8.1", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "react-router-dom": "^6.21.1", 24 | "viem": "^2.0.3", 25 | "wagmi": "^2.0.3", 26 | "web3modal": "^1.9.12" 27 | }, 28 | "devDependencies": { 29 | "@types/react": "^18.2.43", 30 | "@types/react-dom": "^18.2.17", 31 | "@vitejs/plugin-react": "^4.2.1", 32 | "eslint": "^8.55.0", 33 | "eslint-plugin-react": "^7.33.2", 34 | "eslint-plugin-react-hooks": "^4.6.0", 35 | "eslint-plugin-react-refresh": "^0.4.5", 36 | "vite": "^5.0.8" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Gilroy-Regular"; 3 | src: url("./assets/Gilroy/Gilroy-Regular.ttf") format("truetype"); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | @font-face { 9 | font-family: "Gilroy-SemiBold"; 10 | src: url("./assets/Gilroy/Gilroy-SemiBold.ttf") format("truetype"); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | @font-face { 16 | font-family: "Gilroy-Bold"; 17 | src: url("./assets/Gilroy/Gilroy-Bold.ttf") format("truetype"); 18 | font-weight: normal; 19 | font-style: normal; 20 | } 21 | 22 | @font-face { 23 | font-family: "Gilroy-Black"; 24 | src: url("./assets/Gilroy/Gilroy-Black.ttf") format("truetype"); 25 | font-weight: normal; 26 | font-style: normal; 27 | } 28 | 29 | @font-face { 30 | font-family: "Gilroy-Thin"; 31 | src: url("./assets/Gilroy/Gilroy-UltraLight.ttf") format("truetype"); 32 | font-weight: normal; 33 | font-style: normal; 34 | } 35 | 36 | * { 37 | margin: 0; 38 | padding: 0; 39 | -webkit-box-sizing: border-box; 40 | box-sizing: border-box; 41 | } 42 | 43 | body { 44 | font-family: "Gilroy-Regular", sans-serif; 45 | font-weight: 900; 46 | overflow-x: hidden !important; 47 | background: -webkit-gradient( 48 | linear, 49 | left top, 50 | right top, 51 | from(rgba(131, 139, 197, 0.2)), 52 | color-stop(rgba(131, 139, 197, 0.4)), 53 | color-stop(rgba(131, 139, 197, 0.4)), 54 | to(rgba(131, 139, 197, 0.2)) 55 | ); 56 | background: linear-gradient( 57 | to right, 58 | rgba(131, 139, 197, 0.2), 59 | rgba(131, 139, 197, 0.4), 60 | rgba(131, 139, 197, 0.4), 61 | rgba(131, 139, 197, 0.2) 62 | ); 63 | } 64 | 65 | button { 66 | font-family: "Gilroy-Bold", sans-serif; 67 | } 68 | 69 | a { 70 | text-decoration: none !important; 71 | } 72 | 73 | body .primary-btn { 74 | font-family: "Gilroy-Bold", sans-serif; 75 | padding: 15px 30px; 76 | color: white; 77 | background-color: #3251bf; 78 | cursor: pointer; 79 | outline: none; 80 | border: none; 81 | border-radius: 4px; 82 | } 83 | 84 | body .disabled { 85 | opacity: 0.5; /* Adjust the opacity value as needed */ 86 | pointer-events: none; /* Optional: Disable pointer events on the button */ 87 | } 88 | 89 | body .lower-padding { 90 | padding: 7px 20px !important; 91 | } 92 | 93 | body .app-page .content-container { 94 | width: 100%; 95 | max-width: 1400px; 96 | margin: auto; 97 | padding: 20px; 98 | } 99 | 100 | body .liquidations-container { 101 | padding: 40px; 102 | } 103 | 104 | body .liquidations-container .liquidation-header { 105 | font-size: 32px; 106 | font-family: "Gilroy-SemiBold", sans-serif; 107 | padding-left: 30px; 108 | } 109 | 110 | body .liquidations-container .liquidations-info-container { 111 | background-color: white; 112 | min-height: 600px; 113 | width: 100%; 114 | border-radius: 5px; 115 | margin-top: 30px; 116 | padding: 60px 30px; 117 | } 118 | 119 | body .liquidations-container .liquidations-info-container .liquidation-info { 120 | display: -webkit-box; 121 | display: -ms-flexbox; 122 | display: flex; 123 | gap: 20px; 124 | -webkit-box-align: center; 125 | -ms-flex-align: center; 126 | align-items: center; 127 | } 128 | 129 | body 130 | .liquidations-container 131 | .liquidations-info-container 132 | .liquidation-info 133 | .img-container { 134 | height: 70px; 135 | } 136 | 137 | body 138 | .liquidations-container 139 | .liquidations-info-container 140 | .liquidation-info 141 | .img-container 142 | img { 143 | height: 70px; 144 | } 145 | 146 | body 147 | .liquidations-container 148 | .liquidations-info-container 149 | .liquidation-info 150 | .input-whole-container { 151 | display: -webkit-box; 152 | display: -ms-flexbox; 153 | display: flex; 154 | -webkit-box-pack: justify; 155 | -ms-flex-pack: justify; 156 | justify-content: space-between; 157 | -webkit-box-align: center; 158 | -ms-flex-align: center; 159 | align-items: center; 160 | padding: 0 20px; 161 | width: 100%; 162 | border: 4px solid #3251bf; 163 | border-radius: 10px; 164 | height: 70px; 165 | background: -webkit-gradient( 166 | linear, 167 | left top, 168 | right top, 169 | from(rgba(131, 139, 197, 0.2)), 170 | color-stop(rgba(131, 139, 197, 0.4)), 171 | color-stop(rgba(131, 139, 197, 0.4)), 172 | to(rgba(131, 139, 197, 0.2)) 173 | ); 174 | background: linear-gradient( 175 | to right, 176 | rgba(131, 139, 197, 0.2), 177 | rgba(131, 139, 197, 0.4), 178 | rgba(131, 139, 197, 0.4), 179 | rgba(131, 139, 197, 0.2) 180 | ); 181 | font-size: 12px; 182 | font-family: "Gilroy-Bold", sans-serif; 183 | } 184 | 185 | body 186 | .liquidations-container 187 | .liquidations-info-container 188 | .liquidation-info 189 | .input-whole-container 190 | input { 191 | outline: none; 192 | border: none; 193 | min-width: 100px; 194 | width: 80%; 195 | font-family: "Gilroy-SemiBold", sans-serif; 196 | padding-left: 10px; 197 | background-color: transparent; 198 | } 199 | 200 | body 201 | .liquidations-container 202 | .liquidations-info-container 203 | .liquidation-info 204 | .input-whole-container 205 | input::-webkit-input-placeholder { 206 | color: black; 207 | opacity: 1; 208 | font-family: "Gilroy-Regular", sans-serif; 209 | } 210 | 211 | body 212 | .liquidations-container 213 | .liquidations-info-container 214 | .liquidation-info 215 | .input-whole-container 216 | input:-ms-input-placeholder { 217 | color: black; 218 | opacity: 1; 219 | font-family: "Gilroy-Regular", sans-serif; 220 | } 221 | 222 | body 223 | .liquidations-container 224 | .liquidations-info-container 225 | .liquidation-info 226 | .input-whole-container 227 | input::-ms-input-placeholder { 228 | color: black; 229 | opacity: 1; 230 | font-family: "Gilroy-Regular", sans-serif; 231 | } 232 | 233 | body 234 | .liquidations-container 235 | .liquidations-info-container 236 | .liquidation-info 237 | .input-whole-container 238 | input::placeholder { 239 | color: black; 240 | opacity: 1; 241 | font-family: "Gilroy-Regular", sans-serif; 242 | } 243 | 244 | body 245 | .liquidations-container 246 | .liquidations-info-container 247 | .liquidation-info 248 | .input-whole-container 249 | input::-ms-input-placeholder { 250 | color: black; 251 | font-family: "Gilroy-Regular", sans-serif; 252 | } 253 | 254 | body 255 | .liquidations-container 256 | .liquidations-info-container 257 | .liquidation-info 258 | button { 259 | border-radius: 10px; 260 | height: 70px; 261 | } 262 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { RouterProvider, createBrowserRouter } from "react-router-dom"; 2 | import "./App.css"; 3 | import AppRootLayout from "./pages/AppRoot"; 4 | import Dashboard from "./pages/Dashboard"; 5 | import Markets from "./pages/Markets"; 6 | import Vote from "./pages/Vote"; 7 | import HomeRootLayout from "./pages/HomeRoot"; 8 | import HomePage from "./pages/HomePage"; 9 | import { ModalContextProvider } from "./util/modalContext"; 10 | import { AllWalletsProvider } from "./services/wallets/AllWalletsProvider"; 11 | import { Buffer } from "buffer"; 12 | 13 | window.global = window.global ?? window; 14 | window.Buffer = window.Buffer ?? Buffer; 15 | window.process = window.process ?? { env: {} }; 16 | 17 | const router = createBrowserRouter([ 18 | { 19 | path: "/", 20 | element: , 21 | children: [ 22 | { index: true, element: }, 23 | { 24 | path: "/app", 25 | element: , 26 | children: [ 27 | { index: true, element: }, 28 | { path: "markets", element: }, 29 | { path: "vote", element: }, 30 | ], 31 | }, 32 | ], 33 | }, 34 | ]); 35 | 36 | function App() { 37 | return ( 38 | <> 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | } 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /src/abi/InterestRateModel.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [ 4 | { 5 | "internalType": "uint256", 6 | "name": "_blocksPerYear", 7 | "type": "uint256" 8 | }, 9 | { 10 | "internalType": "uint256", 11 | "name": "_baseRatePerYear", 12 | "type": "uint256" 13 | }, 14 | { 15 | "internalType": "uint256", 16 | "name": "_multiplierPerYear", 17 | "type": "uint256" 18 | }, 19 | { 20 | "internalType": "uint256", 21 | "name": "_jumpMultiplierPerYear", 22 | "type": "uint256" 23 | }, 24 | { 25 | "internalType": "uint256", 26 | "name": "_kink", 27 | "type": "uint256" 28 | }, 29 | { 30 | "internalType": "address", 31 | "name": "owner_", 32 | "type": "address" 33 | }, 34 | { 35 | "internalType": "string", 36 | "name": "_name", 37 | "type": "string" 38 | } 39 | ], 40 | "stateMutability": "nonpayable", 41 | "type": "constructor" 42 | }, 43 | { 44 | "anonymous": false, 45 | "inputs": [ 46 | { 47 | "indexed": false, 48 | "internalType": "uint256", 49 | "name": "baseRatePerBlock", 50 | "type": "uint256" 51 | }, 52 | { 53 | "indexed": false, 54 | "internalType": "uint256", 55 | "name": "multiplierPerBlock", 56 | "type": "uint256" 57 | }, 58 | { 59 | "indexed": false, 60 | "internalType": "uint256", 61 | "name": "jumpMultiplierPerBlock", 62 | "type": "uint256" 63 | }, 64 | { 65 | "indexed": false, 66 | "internalType": "uint256", 67 | "name": "kink", 68 | "type": "uint256" 69 | } 70 | ], 71 | "name": "NewInterestParams", 72 | "type": "event" 73 | }, 74 | { 75 | "anonymous": false, 76 | "inputs": [ 77 | { 78 | "indexed": true, 79 | "internalType": "address", 80 | "name": "previousOwner", 81 | "type": "address" 82 | }, 83 | { 84 | "indexed": true, 85 | "internalType": "address", 86 | "name": "newOwner", 87 | "type": "address" 88 | } 89 | ], 90 | "name": "OwnershipTransferStarted", 91 | "type": "event" 92 | }, 93 | { 94 | "anonymous": false, 95 | "inputs": [ 96 | { 97 | "indexed": true, 98 | "internalType": "address", 99 | "name": "previousOwner", 100 | "type": "address" 101 | }, 102 | { 103 | "indexed": true, 104 | "internalType": "address", 105 | "name": "newOwner", 106 | "type": "address" 107 | } 108 | ], 109 | "name": "OwnershipTransferred", 110 | "type": "event" 111 | }, 112 | { 113 | "inputs": [], 114 | "name": "acceptOwnership", 115 | "outputs": [], 116 | "stateMutability": "nonpayable", 117 | "type": "function" 118 | }, 119 | { 120 | "inputs": [], 121 | "name": "baseRatePerBlock", 122 | "outputs": [ 123 | { 124 | "internalType": "uint256", 125 | "name": "", 126 | "type": "uint256" 127 | } 128 | ], 129 | "stateMutability": "view", 130 | "type": "function" 131 | }, 132 | { 133 | "inputs": [], 134 | "name": "blocksPerYear", 135 | "outputs": [ 136 | { 137 | "internalType": "uint256", 138 | "name": "", 139 | "type": "uint256" 140 | } 141 | ], 142 | "stateMutability": "view", 143 | "type": "function" 144 | }, 145 | { 146 | "inputs": [ 147 | { 148 | "internalType": "uint256", 149 | "name": "_cash", 150 | "type": "uint256" 151 | }, 152 | { 153 | "internalType": "uint256", 154 | "name": "_borrows", 155 | "type": "uint256" 156 | }, 157 | { 158 | "internalType": "uint256", 159 | "name": "_reserves", 160 | "type": "uint256" 161 | } 162 | ], 163 | "name": "getBorrowRate", 164 | "outputs": [ 165 | { 166 | "internalType": "uint256", 167 | "name": "", 168 | "type": "uint256" 169 | } 170 | ], 171 | "stateMutability": "view", 172 | "type": "function" 173 | }, 174 | { 175 | "inputs": [ 176 | { 177 | "internalType": "uint256", 178 | "name": "_cash", 179 | "type": "uint256" 180 | }, 181 | { 182 | "internalType": "uint256", 183 | "name": "_borrows", 184 | "type": "uint256" 185 | }, 186 | { 187 | "internalType": "uint256", 188 | "name": "_reserves", 189 | "type": "uint256" 190 | }, 191 | { 192 | "internalType": "uint256", 193 | "name": "_reserveFactorMantissa", 194 | "type": "uint256" 195 | } 196 | ], 197 | "name": "getSupplyRate", 198 | "outputs": [ 199 | { 200 | "internalType": "uint256", 201 | "name": "", 202 | "type": "uint256" 203 | } 204 | ], 205 | "stateMutability": "view", 206 | "type": "function" 207 | }, 208 | { 209 | "inputs": [], 210 | "name": "jumpMultiplierPerBlock", 211 | "outputs": [ 212 | { 213 | "internalType": "uint256", 214 | "name": "", 215 | "type": "uint256" 216 | } 217 | ], 218 | "stateMutability": "view", 219 | "type": "function" 220 | }, 221 | { 222 | "inputs": [], 223 | "name": "kink", 224 | "outputs": [ 225 | { 226 | "internalType": "uint256", 227 | "name": "", 228 | "type": "uint256" 229 | } 230 | ], 231 | "stateMutability": "view", 232 | "type": "function" 233 | }, 234 | { 235 | "inputs": [], 236 | "name": "multiplierPerBlock", 237 | "outputs": [ 238 | { 239 | "internalType": "uint256", 240 | "name": "", 241 | "type": "uint256" 242 | } 243 | ], 244 | "stateMutability": "view", 245 | "type": "function" 246 | }, 247 | { 248 | "inputs": [], 249 | "name": "name", 250 | "outputs": [ 251 | { 252 | "internalType": "string", 253 | "name": "", 254 | "type": "string" 255 | } 256 | ], 257 | "stateMutability": "view", 258 | "type": "function" 259 | }, 260 | { 261 | "inputs": [], 262 | "name": "owner", 263 | "outputs": [ 264 | { 265 | "internalType": "address", 266 | "name": "", 267 | "type": "address" 268 | } 269 | ], 270 | "stateMutability": "view", 271 | "type": "function" 272 | }, 273 | { 274 | "inputs": [], 275 | "name": "pendingOwner", 276 | "outputs": [ 277 | { 278 | "internalType": "address", 279 | "name": "", 280 | "type": "address" 281 | } 282 | ], 283 | "stateMutability": "view", 284 | "type": "function" 285 | }, 286 | { 287 | "inputs": [], 288 | "name": "renounceOwnership", 289 | "outputs": [], 290 | "stateMutability": "nonpayable", 291 | "type": "function" 292 | }, 293 | { 294 | "inputs": [ 295 | { 296 | "internalType": "address", 297 | "name": "newOwner", 298 | "type": "address" 299 | } 300 | ], 301 | "name": "transferOwnership", 302 | "outputs": [], 303 | "stateMutability": "nonpayable", 304 | "type": "function" 305 | }, 306 | { 307 | "inputs": [ 308 | { 309 | "internalType": "uint256", 310 | "name": "_blocksPerYear", 311 | "type": "uint256" 312 | } 313 | ], 314 | "name": "updateBlocksPerYear", 315 | "outputs": [], 316 | "stateMutability": "nonpayable", 317 | "type": "function" 318 | }, 319 | { 320 | "inputs": [ 321 | { 322 | "internalType": "uint256", 323 | "name": "_baseRatePerYear", 324 | "type": "uint256" 325 | }, 326 | { 327 | "internalType": "uint256", 328 | "name": "_multiplierPerYear", 329 | "type": "uint256" 330 | }, 331 | { 332 | "internalType": "uint256", 333 | "name": "_jumpMultiplierPerYear", 334 | "type": "uint256" 335 | }, 336 | { 337 | "internalType": "uint256", 338 | "name": "_kink", 339 | "type": "uint256" 340 | } 341 | ], 342 | "name": "updateJumpRateModel", 343 | "outputs": [], 344 | "stateMutability": "nonpayable", 345 | "type": "function" 346 | }, 347 | { 348 | "inputs": [ 349 | { 350 | "internalType": "uint256", 351 | "name": "_cash", 352 | "type": "uint256" 353 | }, 354 | { 355 | "internalType": "uint256", 356 | "name": "_borrows", 357 | "type": "uint256" 358 | }, 359 | { 360 | "internalType": "uint256", 361 | "name": "_reserves", 362 | "type": "uint256" 363 | } 364 | ], 365 | "name": "utilizationRate", 366 | "outputs": [ 367 | { 368 | "internalType": "uint256", 369 | "name": "", 370 | "type": "uint256" 371 | } 372 | ], 373 | "stateMutability": "pure", 374 | "type": "function" 375 | } 376 | ] 377 | -------------------------------------------------------------------------------- /src/abi/PriceOracle.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [ 4 | { 5 | "internalType": "address", 6 | "name": "_baseToken", 7 | "type": "address" 8 | }, 9 | { 10 | "internalType": "address", 11 | "name": "_swapRouter", 12 | "type": "address" 13 | } 14 | ], 15 | "stateMutability": "nonpayable", 16 | "type": "constructor" 17 | }, 18 | { 19 | "anonymous": false, 20 | "inputs": [ 21 | { 22 | "indexed": true, 23 | "internalType": "address", 24 | "name": "previousOwner", 25 | "type": "address" 26 | }, 27 | { 28 | "indexed": true, 29 | "internalType": "address", 30 | "name": "newOwner", 31 | "type": "address" 32 | } 33 | ], 34 | "name": "OwnershipTransferStarted", 35 | "type": "event" 36 | }, 37 | { 38 | "anonymous": false, 39 | "inputs": [ 40 | { 41 | "indexed": true, 42 | "internalType": "address", 43 | "name": "previousOwner", 44 | "type": "address" 45 | }, 46 | { 47 | "indexed": true, 48 | "internalType": "address", 49 | "name": "newOwner", 50 | "type": "address" 51 | } 52 | ], 53 | "name": "OwnershipTransferred", 54 | "type": "event" 55 | }, 56 | { 57 | "inputs": [], 58 | "name": "acceptOwnership", 59 | "outputs": [], 60 | "stateMutability": "nonpayable", 61 | "type": "function" 62 | }, 63 | { 64 | "inputs": [], 65 | "name": "baseToken", 66 | "outputs": [ 67 | { 68 | "internalType": "address", 69 | "name": "", 70 | "type": "address" 71 | } 72 | ], 73 | "stateMutability": "view", 74 | "type": "function" 75 | }, 76 | { 77 | "inputs": [], 78 | "name": "factory", 79 | "outputs": [ 80 | { 81 | "internalType": "address", 82 | "name": "", 83 | "type": "address" 84 | } 85 | ], 86 | "stateMutability": "view", 87 | "type": "function" 88 | }, 89 | { 90 | "inputs": [ 91 | { 92 | "internalType": "address", 93 | "name": "_token", 94 | "type": "address" 95 | } 96 | ], 97 | "name": "getTokenPrice", 98 | "outputs": [ 99 | { 100 | "internalType": "uint256", 101 | "name": "", 102 | "type": "uint256" 103 | } 104 | ], 105 | "stateMutability": "view", 106 | "type": "function" 107 | }, 108 | { 109 | "inputs": [ 110 | { 111 | "internalType": "address", 112 | "name": "_token", 113 | "type": "address" 114 | } 115 | ], 116 | "name": "getUnderlyingPrice", 117 | "outputs": [ 118 | { 119 | "internalType": "uint256", 120 | "name": "", 121 | "type": "uint256" 122 | } 123 | ], 124 | "stateMutability": "view", 125 | "type": "function" 126 | }, 127 | { 128 | "inputs": [], 129 | "name": "isPriceOracle", 130 | "outputs": [ 131 | { 132 | "internalType": "bool", 133 | "name": "", 134 | "type": "bool" 135 | } 136 | ], 137 | "stateMutability": "view", 138 | "type": "function" 139 | }, 140 | { 141 | "inputs": [], 142 | "name": "owner", 143 | "outputs": [ 144 | { 145 | "internalType": "address", 146 | "name": "", 147 | "type": "address" 148 | } 149 | ], 150 | "stateMutability": "view", 151 | "type": "function" 152 | }, 153 | { 154 | "inputs": [], 155 | "name": "pendingOwner", 156 | "outputs": [ 157 | { 158 | "internalType": "address", 159 | "name": "", 160 | "type": "address" 161 | } 162 | ], 163 | "stateMutability": "view", 164 | "type": "function" 165 | }, 166 | { 167 | "inputs": [], 168 | "name": "renounceOwnership", 169 | "outputs": [], 170 | "stateMutability": "nonpayable", 171 | "type": "function" 172 | }, 173 | { 174 | "inputs": [], 175 | "name": "swapRouter", 176 | "outputs": [ 177 | { 178 | "internalType": "address", 179 | "name": "", 180 | "type": "address" 181 | } 182 | ], 183 | "stateMutability": "view", 184 | "type": "function" 185 | }, 186 | { 187 | "inputs": [ 188 | { 189 | "internalType": "address", 190 | "name": "newOwner", 191 | "type": "address" 192 | } 193 | ], 194 | "name": "transferOwnership", 195 | "outputs": [], 196 | "stateMutability": "nonpayable", 197 | "type": "function" 198 | }, 199 | { 200 | "inputs": [ 201 | { 202 | "internalType": "address", 203 | "name": "_baseToken", 204 | "type": "address" 205 | } 206 | ], 207 | "name": "updateBaseToken", 208 | "outputs": [], 209 | "stateMutability": "nonpayable", 210 | "type": "function" 211 | } 212 | ] 213 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Brand/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Brand/Icon.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Brand/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 16 | 18 | 20 | 22 | 26 | 27 | 29 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Brand/LogoBG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Brand/LogoBG.jpg -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Brand/LogoWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 16 | 18 | 20 | 22 | 26 | 27 | 29 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Graphics/MainImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Graphics/MainImg.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Graphics/Second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Graphics/Second.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Graphics/Third.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Graphics/Third.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/blade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Icons/blade.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/close-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Icons/close-icon.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/discord_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/discord_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/docs_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/docs_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/github_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/github_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 14 | 16 | 18 | 20 | 22 | 24 | 25 | 27 | 28 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/hashpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Icons/hashpack.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/icons8-rocket.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Icons/icons8-rocket.gif -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/metamask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 51 | 52 | 54 | 56 | 57 | 58 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/telegram_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/telegram_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/twitter_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/twitter_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/website_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Icons/website_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Partners/flux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Partners/flux.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Partners/headstarter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Partners/headstarter.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Partners/hedera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Partners/hedera.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/Partners/ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/BrandingAssets-main/Partners/ocean.png -------------------------------------------------------------------------------- /src/assets/BrandingAssets-main/README.md: -------------------------------------------------------------------------------- 1 | # Branding Assets 2 | Welcome to Sirio Finance Official Github Account. In this repository, you will find everything related to Sirio brand asset, from logo to graphics. 3 | -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Black.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-BlackItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Bold.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-BoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-ExtraBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-ExtraBold.otf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Heavy.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Heavy.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-HeavyItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-HeavyItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Medium.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-MediumItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Regular.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-SemiBold.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-Thin.ttf -------------------------------------------------------------------------------- /src/assets/Gilroy/Gilroy-UltraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/assets/Gilroy/Gilroy-UltraLight.ttf -------------------------------------------------------------------------------- /src/components/BalanceStatus/BalanceStatus.jsx: -------------------------------------------------------------------------------- 1 | import { useWalletInterface } from "../../services/wallets/useWalletInterface"; 2 | import { useEffect, useState } from "react"; 3 | import { ethers } from "ethers"; 4 | 5 | import SFProtocolABI from "../../abi/SFProtocolToken.json"; 6 | 7 | import "./balanceStatus.css"; 8 | 9 | export default function BalanceStatus() { 10 | const { accountId } = useWalletInterface(); 11 | const [supplyAmount, setSupplyAmount] = useState(0); 12 | const [collateralAmount, setCollateralAmount] = useState(0); 13 | const [borrowAmount, setBorrowAmount] = useState(0); 14 | const [borrowLimit, setBorrowLimit] = useState(0); 15 | 16 | useEffect(() => { 17 | const func = async () => { 18 | if (accountId && accountId !== null && accountId.length !== 0) { 19 | const provider = new ethers.providers.Web3Provider(window.ethereum); 20 | const signer = provider.getSigner(accountId); 21 | const ProtocolContract = new ethers.Contract( 22 | "0x0800E04533Afc1279c55c85734d49a2f61785539", 23 | SFProtocolABI, 24 | signer 25 | ); 26 | // console.log("ProtocolContract", ProtocolContract); 27 | let value = await ProtocolContract.getSuppliedAmount(accountId); 28 | await setSupplyAmount(parseInt(value._hex, 16)); 29 | } 30 | }; 31 | func(); 32 | }, [accountId]); 33 | return ( 34 |
35 |
36 |
37 |

Supply Balance

38 |

${supplyAmount}

39 |
40 |
41 |

Collateral Balance

42 |

$0

43 |
44 |
45 |

Borrow Balance

46 |

$0

47 |
48 |
49 |
50 |

Borrow Limit : 20%

51 |
52 |
53 |
54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/components/BalanceStatus/balanceStatus.css: -------------------------------------------------------------------------------- 1 | body .balance-status .balance-container { 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | width: 100%; 6 | max-width: 900px; 7 | margin: auto; 8 | -webkit-box-pack: justify; 9 | -ms-flex-pack: justify; 10 | justify-content: space-between; 11 | text-align: center; 12 | gap: 10px; 13 | } 14 | 15 | body .balance-status .balance-container p { 16 | font-size: 14px; 17 | } 18 | 19 | body .balance-status .balance-container .balance { 20 | font-size: 25px; 21 | margin-top: 10px; 22 | font-weight: 900; 23 | font-family: "Gilroy-SemiBold"; 24 | } 25 | 26 | body .balance-status .balance-line { 27 | margin-top: 40px; 28 | display: -webkit-box; 29 | display: -ms-flexbox; 30 | display: flex; 31 | max-width: 1200px; 32 | -webkit-box-align: center; 33 | -ms-flex-align: center; 34 | align-items: center; 35 | } 36 | 37 | body .balance-status .balance-line p { 38 | line-height: 0; 39 | min-width: 150px; 40 | } 41 | 42 | body .balance-status .balance-line .line { 43 | width: 100%; 44 | height: 6px; 45 | background: -webkit-gradient( 46 | linear, 47 | left top, 48 | right top, 49 | color-stop(20%, #3251bf), 50 | color-stop(9%, rgba(131, 139, 197, 0.5)) 51 | ); 52 | background: linear-gradient( 53 | 90deg, 54 | #3251bf 20%, 55 | rgba(131, 139, 197, 0.5) 9% 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/CenterNetStatus/CenterNetStatus.jsx: -------------------------------------------------------------------------------- 1 | import "./centerNetStatus.css"; 2 | 3 | export default function CenterNetStatus() { 4 | return ( 5 |
6 |
7 |

Net Apy

8 |

---

9 |
10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/CenterNetStatus/centerNetStatus.css: -------------------------------------------------------------------------------- 1 | body .center-net-status { 2 | margin: 20px 0 40px; 3 | } 4 | 5 | body .center-net-status .center-circle { 6 | margin: auto; 7 | width: 140px; 8 | height: 140px; 9 | background-color: white; 10 | border-radius: 800px; 11 | font-size: 20px; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | -webkit-box-orient: vertical; 16 | -webkit-box-direction: normal; 17 | -ms-flex-direction: column; 18 | flex-direction: column; 19 | -webkit-box-align: center; 20 | -ms-flex-align: center; 21 | align-items: center; 22 | border: 8px solid #3251bf; 23 | } 24 | 25 | body .center-net-status .center-circle p { 26 | font-weight: 900; 27 | font-size: 13px; 28 | margin-top: 15px; 29 | } 30 | body .center-net-status .center-circle .net-value { 31 | font-size: 24px; 32 | margin-top: 15px; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/DashBoardMarkets/DashboardMarkets.jsx: -------------------------------------------------------------------------------- 1 | import iconImg from "../../assets/BrandingAssets-main/Brand/Icon.png"; 2 | import MarketListItem from "./MarketStatusContainerListItem"; 3 | import MarketStatusContainer from "../MarketStatusContainer/MarketStatusContainer"; 4 | import MarketStatus from "../MarketStatus/MarketStatus"; 5 | import { useWalletInterface } from "../../services/wallets/useWalletInterface"; 6 | import { ethers } from "ethers"; 7 | import { useEffect } from "react"; 8 | 9 | import MarketPositionABI from "../../abi/MarketPositionManager.json"; 10 | import SFProtocolABI from "../../abi/SFProtocolToken.json"; 11 | 12 | import "./dashboardMarkets.css"; 13 | 14 | export default function DashBoardMarkets() { 15 | const { accountId } = useWalletInterface(); 16 | useEffect(() => { 17 | const func = async () => { 18 | if (accountId && accountId !== null && accountId.length !== 0) { 19 | const provider = new ethers.providers.Web3Provider(window.ethereum); 20 | const signer = provider.getSigner(accountId); 21 | const MarketManagerContract = new ethers.Contract( 22 | "0xe0990E4699C606e79d074A770D4A8a603a4669C2", 23 | MarketPositionABI, 24 | signer 25 | ); 26 | const ProtocolContract = new ethers.Contract( 27 | "0xC651E1F7D24fB1E1cAe14cb5f9818F1C1dFb9FeD", 28 | SFProtocolABI, 29 | signer 30 | ); 31 | // let borrowAmount = await MarketManagerContract.getBorrowableAmount( 32 | // accountId, 33 | // "0xC651E1F7D24fB1E1cAe14cb5f9818F1C1dFb9FeD" 34 | // ); 35 | // console.log("BorrowAmount:", borrowAmount); 36 | // console.log( 37 | // "Marketing:", 38 | // await MarketManagerContract.getBorrowableAmount( 39 | // accountId, 40 | // "0xC651E1F7D24fB1E1cAe14cb5f9818F1C1dFb9FeD" 41 | // ) 42 | // ); 43 | // console.log("Market:", MarketManagerContract); 44 | // console.log( 45 | // "==============", 46 | // await MarketManagerContract.( 47 | // accountId, 48 | // "0x000000000000000000000000000000000006f89a" 49 | // ) 50 | // ); 51 | // console.log("Protocol:", ProtocolContract.address); 52 | } 53 | }; 54 | func(); 55 | }, [accountId]); 56 | 57 | return ( 58 | 59 | 60 | 67 | 74 | 81 | 88 | 95 | 96 | 97 | 98 | 105 | 112 | 119 | 126 | 133 | 134 | 135 | ); 136 | } 137 | -------------------------------------------------------------------------------- /src/components/DashBoardMarkets/MarketStatusContainerListItem.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useState } from "react"; 2 | import ModalContext from "../../util/modalContext"; 3 | 4 | export default function MarketListItem({ 5 | title, 6 | img, 7 | apy, 8 | amount, 9 | collateral, 10 | availableBorrow, 11 | }) { 12 | const [collateralState, setCollateralState] = useState(""); 13 | 14 | const modalCtx = useContext(ModalContext); 15 | 16 | function handleSupplyOpen() { 17 | modalCtx.giveTitle(title); 18 | modalCtx.showSupply(); 19 | } 20 | function handleBorrowOpen() { 21 | modalCtx.giveTitle(title); 22 | modalCtx.showBorrow(); 23 | } 24 | 25 | function handleCollateralClick() { 26 | setCollateralState((state) => (state === "" ? "on" : "")); 27 | } 28 | 29 | let collateralClass = "button"; 30 | if (collateralState === "on") { 31 | collateralClass = "button on"; 32 | } else if (collateralState === "") { 33 | collateralClass = "button"; 34 | } 35 | 36 | const claimHandler = (e) => { 37 | e.stopPropagation(); 38 | console.log("Claim Button Clicked"); 39 | }; 40 | 41 | return ( 42 | <> 43 |
47 | 48 | 49 | {title} 50 | 51 | {apy}% 52 | {amount} 53 | {collateral ? ( 54 |
55 | 61 |
62 | ) : null} 63 | {availableBorrow ? ( 64 | {availableBorrow} 65 | ) : null} 66 |
67 | 68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/components/DashBoardMarkets/dashboardMarkets.css: -------------------------------------------------------------------------------- 1 | body .markets-status .markets .market-table #collateral-btn { 2 | border-radius: 80px; 3 | width: 40px; 4 | height: 10px; 5 | border: none; 6 | background-color: transparent; 7 | margin: 0; 8 | padding: 0; 9 | cursor: pointer; 10 | position: relative; 11 | background-color: rgba(131, 139, 197, 0.5); 12 | } 13 | 14 | body .markets-status .markets .market-table #collateral-btn .button { 15 | background-color: #3251bf; 16 | margin-top: -3px; 17 | height: 15px; 18 | width: 15px; 19 | border-radius: 80px; 20 | -webkit-transition: all 500ms; 21 | transition: all 500ms; 22 | } 23 | 24 | body .markets-status .markets .market-table #collateral-btn .button.on { 25 | -webkit-transform: translateX(30px); 26 | transform: translateX(30px); 27 | } 28 | 29 | .z-10 { 30 | z-index: 10 !important; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import Logo from "../../assets/BrandingAssets-main/Brand/LogoWhite.svg"; 2 | import WebsiteWhite from "../../assets/BrandingAssets-main/Icons/website_white.svg"; 3 | import DocsWhite from "../../assets/BrandingAssets-main/Icons/docs_white.svg"; 4 | import TwitterWhite from "../../assets/BrandingAssets-main/Icons/twitter_white.svg"; 5 | import TelegramWhite from "../../assets/BrandingAssets-main/Icons/telegram_white.svg"; 6 | import DiscordWhite from "../../assets/BrandingAssets-main/Icons/discord_white.svg"; 7 | import GithubWhite from "../../assets/BrandingAssets-main/Icons/github_white.svg"; 8 | 9 | import Icon from "../LinkedIcon"; 10 | import "./footer.css"; 11 | 12 | export default function Footer() { 13 | return ( 14 |
15 |
16 |
17 | sirio 18 |
19 |
20 | Developed with ❤️ by 21 | 22 | Astrid Network 23 | 24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |
34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | body footer { 2 | margin-top: 60px; 3 | width: 100%; 4 | background-color: #3251bf; 5 | opacity: 1; 6 | } 7 | 8 | body footer .footer-content { 9 | max-width: 1400px; 10 | margin: auto; 11 | color: white; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | -webkit-box-pack: justify; 16 | -ms-flex-pack: justify; 17 | justify-content: space-between; 18 | -webkit-box-align: center; 19 | -ms-flex-align: center; 20 | align-items: center; 21 | padding: 20px 20px; 22 | } 23 | 24 | @media screen and (max-width: 700px) { 25 | body footer .footer-content { 26 | -webkit-box-orient: vertical; 27 | -webkit-box-direction: normal; 28 | -ms-flex-direction: column; 29 | flex-direction: column; 30 | -webkit-box-align: start; 31 | -ms-flex-align: start; 32 | align-items: flex-start; 33 | gap: 15px; 34 | } 35 | } 36 | 37 | body footer .logo { 38 | width: 80px; 39 | } 40 | 41 | body footer .footer-content a { 42 | color: white; 43 | } 44 | 45 | @media screen and (min-width: 950px) { 46 | body footer .footer-content .text-container { 47 | margin-left: 175px; 48 | } 49 | } 50 | 51 | body footer .footer-social img { 52 | height: 24px; 53 | width: 24px; 54 | margin-right: 15px; 55 | } 56 | -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect } from "react"; 2 | import Logo from "../../assets/BrandingAssets-main/Brand/Logo.svg"; 3 | import "./header.css"; 4 | import { NavLink } from "react-router-dom"; 5 | import ModalContext from "../../util/modalContext"; 6 | import { useWalletInterface } from "../../services/wallets/useWalletInterface"; 7 | 8 | export default function Header() { 9 | const modalCtx = useContext(ModalContext); 10 | const { accountId, walletInterface } = useWalletInterface(); 11 | 12 | const handleConnectWalletModal = () => { 13 | if (accountId) { 14 | walletInterface.disconnect(); 15 | } else { 16 | modalCtx.showConnectWallet(); 17 | } 18 | }; 19 | return ( 20 | <> 21 |
22 | sirio 23 | 34 | 35 |
36 | 39 |
40 |
41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 20px; 6 | width: 100%; 7 | max-width: 1400px; 8 | margin: auto; 9 | } 10 | 11 | header .logo { 12 | width: 90px; 13 | } 14 | 15 | header nav { 16 | margin-left: 20px; 17 | } 18 | 19 | header nav button { 20 | color: black; 21 | background-color: transparent; 22 | border: none; 23 | outline: none; 24 | font-size: 16px; 25 | padding: 8px 25px; 26 | cursor: pointer; 27 | font-family: "Gilroy-SemiBold", sans-serif; 28 | } 29 | 30 | header nav button a { 31 | color: black; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/LinkedIcon.jsx: -------------------------------------------------------------------------------- 1 | export default function Icon({ img, text, link }) { 2 | return ( 3 | 4 | {text} 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/MarketStatus/MarketStatus.jsx: -------------------------------------------------------------------------------- 1 | import "./marketStatus.css"; 2 | 3 | export default function MarketStatus(props) { 4 | return ( 5 |
6 |
{props.children}
7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/MarketStatus/marketStatus.css: -------------------------------------------------------------------------------- 1 | body .markets-status { 2 | margin-top: 40px; 3 | } 4 | 5 | body .markets-status .markets-container { 6 | display: -webkit-box; 7 | display: -ms-flexbox; 8 | display: flex; 9 | gap: 30px; 10 | } 11 | 12 | @media screen and (max-width: 950px) { 13 | body .markets-status .markets-container { 14 | -webkit-box-orient: vertical; 15 | -webkit-box-direction: normal; 16 | -ms-flex-direction: column; 17 | flex-direction: column; 18 | } 19 | } 20 | 21 | body .markets-status .markets { 22 | background-color: white; 23 | min-height: 700px; 24 | width: 100%; 25 | border-radius: 15px; 26 | padding: 20px; 27 | } 28 | 29 | body .markets-status .markets .table-title { 30 | font-size: 20px; 31 | font-family: "Gilroy-Bold", sans-serif; 32 | font-weight: 100 !important; 33 | padding-left: 10px; 34 | padding-bottom: 15px; 35 | border-bottom: 2px solid lightgray; 36 | } 37 | 38 | body .markets-status .markets .market-table { 39 | display: -webkit-box; 40 | display: -ms-flexbox; 41 | display: flex; 42 | -webkit-box-orient: vertical; 43 | -webkit-box-direction: normal; 44 | -ms-flex-direction: column; 45 | flex-direction: column; 46 | margin-top: 10px; 47 | } 48 | 49 | body .markets-status .markets .market-table .row { 50 | display: -webkit-box; 51 | display: -ms-flexbox; 52 | display: flex; 53 | -webkit-box-pack: justify; 54 | -ms-flex-pack: justify; 55 | justify-content: space-between; 56 | -webkit-box-align: center; 57 | -ms-flex-align: center; 58 | align-items: center; 59 | padding: 10px; 60 | } 61 | 62 | body .markets-status .markets .market-table .row.header { 63 | font-family: "Gilroy-Bold", sans-serif; 64 | } 65 | 66 | body .markets-status .markets .market-table span { 67 | -ms-flex-preferred-size: 30%; 68 | flex-basis: 25%; 69 | text-align: center; 70 | } 71 | body .markets-status .markets .market-table .cell { 72 | flex-basis: 25%; 73 | text-align: center; 74 | } 75 | 76 | body .markets-status .markets .market-table .asset-cell { 77 | display: -webkit-box; 78 | display: -ms-flexbox; 79 | display: flex; 80 | gap: 5px; 81 | -webkit-box-align: center; 82 | -ms-flex-align: center; 83 | align-items: center; 84 | } 85 | 86 | body .markets-status .markets .market-table .available { 87 | flex-basis: 35%; 88 | } 89 | 90 | body 91 | .markets-status 92 | .markets 93 | .market-table 94 | .table-data 95 | .table-data-row { 96 | cursor: pointer; 97 | margin-bottom: 5px; 98 | } 99 | 100 | body 101 | .markets-status 102 | .markets 103 | .market-table 104 | .table-data 105 | .table-data-row 106 | img { 107 | height: 30px; 108 | width: 30px; 109 | } 110 | 111 | body 112 | .markets-status 113 | .markets 114 | .market-table 115 | .table-data 116 | .table-data-row:hover { 117 | background-color: rgba(211, 211, 211, 0.6); 118 | border-radius: 7px; 119 | } 120 | -------------------------------------------------------------------------------- /src/components/MarketStatusContainer/MarketStatusContainer.jsx: -------------------------------------------------------------------------------- 1 | export default function MarketStatusContainer({ title, children }) { 2 | return ( 3 |
4 |

{title}

5 |
6 |
7 |
8 | {title === "Supply Markets" && ( 9 | <> 10 | Asset 11 | Supply APY 12 | Wallet 13 | Claim Earnings 14 | 15 | )} 16 | {title === "Borrow Markets" && ( 17 | <> 18 | Asset 19 | Borrow APY 20 | Total Borrow 21 | Available Borrow 22 | 23 | )} 24 | {title === "All Markets" && ( 25 | <> 26 | Market 27 | Total Supply 28 | Supply Apy 29 | Total Borrow 30 | Borrow Apy 31 | 32 | )} 33 |
34 |
35 |
{children}
36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/components/Modal/BorrowBorrow.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import ModalContext from "../../util/modalContext"; 3 | 4 | export default function BorrowBox({}) { 5 | const modalCtx = useContext(ModalContext); 6 | 7 | function handleBorrow() { 8 | modalCtx.showRisk(); 9 | } 10 | return ( 11 | <> 12 |
13 |
14 | 17 |
18 |
19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Modal/BorrowRepay.jsx: -------------------------------------------------------------------------------- 1 | export default function RepayBox({ approveHanlder, repayHanlder }) { 2 | return ( 3 | <> 4 |
5 |
6 | 9 | 12 |
13 |
14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useRef } from "react"; 2 | import { createPortal } from "react-dom"; 3 | import "./modal.css"; 4 | import closeImg from "../../assets/BrandingAssets-main/Icons/close-icon.png"; 5 | import ModalContext from "../../util/modalContext"; 6 | 7 | function Modal({ children, open, onClose }) { 8 | const dialog = useRef(); 9 | 10 | const modalCtx = useContext(ModalContext); 11 | 12 | useEffect(() => { 13 | const modal = dialog.current; 14 | if (open) { 15 | modal.showModal(); 16 | } 17 | return () => modal.close(); 18 | }, [open]); 19 | 20 | const handleClose = () => { 21 | modalCtx.hideModal(); 22 | }; 23 | 24 | return createPortal( 25 | 26 | 29 | {children} 30 | , 31 | document.getElementById("modal") 32 | ); 33 | } 34 | 35 | export default Modal; 36 | -------------------------------------------------------------------------------- /src/components/Modal/ModalBorrow.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useState } from "react"; 2 | import ModalDashboard from "./ModalDashboard"; 3 | import ModalListItem from "./ModalListItem"; 4 | import BorrowBox from "./BorrowBorrow"; 5 | import RepayBox from "./BorrowRepay"; 6 | import Modal from "./Modal"; 7 | 8 | import logoImg from "../../assets/BrandingAssets-main/Brand/Icon.png"; 9 | import ModalContext from "../../util/modalContext"; 10 | 11 | export default function ModalBorrow() { 12 | const [displayState, setDisplayState] = useState("borrow"); 13 | 14 | const [bal, setBal] = useState(""); 15 | 16 | const modalCtx = useContext(ModalContext); 17 | 18 | useEffect(() => { 19 | setBal(""); 20 | }, [modalCtx]); 21 | 22 | function handleInputChange(e) { 23 | let val = e.target.value; 24 | if (val >= 0) { 25 | setBal(val); 26 | } 27 | } 28 | 29 | function handleBorrowDisplay() { 30 | setDisplayState("borrow"); 31 | } 32 | 33 | function handleRepayDisplay() { 34 | setDisplayState("repay"); 35 | } 36 | 37 | function handleHideBorrow() { 38 | modalCtx.hideModal(); 39 | } 40 | 41 | return ( 42 | 46 |
47 |
48 | 49 |

{modalCtx.title}

50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 | 64 |
65 | 66 | 67 | 68 | 69 |
70 |
71 |
72 | {displayState === "borrow" && } 73 | {displayState === "repay" && } 74 |
75 |
76 |
77 | ); 78 | } 79 | -------------------------------------------------------------------------------- /src/components/Modal/ModalConnectWallet.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from "react"; 2 | import metamaskImg from "../../assets/BrandingAssets-main/Icons/metamask.svg"; 3 | import hashpackImg from "../../assets/BrandingAssets-main/Icons/hashpack.png"; 4 | import bladeImg from "../../assets/BrandingAssets-main/Icons/blade.png"; 5 | import ModalContext from "../../util/modalContext"; 6 | import Modal from "./Modal"; 7 | 8 | import { connectToMetamask } from "../../services/wallets/metamask/metamaskClient"; 9 | import { connectToBladeWallet } from "../../services/wallets/blade/bladeClient"; 10 | import { hashConnect } from "../../services/wallets/hashconnect/hashconnectClient"; 11 | 12 | export default function ModalConnectWallet() { 13 | const modalCtx = useContext(ModalContext); 14 | 15 | const MetaMaskConnectHandler = () => { 16 | handleCloseWallet(); 17 | connectToMetamask(); 18 | }; 19 | 20 | const HashPackConnectHandler = () => { 21 | handleCloseWallet(); 22 | hashConnect.connectToLocalWallet(); 23 | }; 24 | 25 | const BladeConnectHandler = () => { 26 | handleCloseWallet(); 27 | connectToBladeWallet(); 28 | }; 29 | 30 | function handleCloseWallet() { 31 | modalCtx.hideModal(); 32 | } 33 | return ( 34 | 38 |
39 |

Connect Wallet

40 |
41 | 45 | 49 | 53 |
54 |
55 |
56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Modal/ModalDashboard.jsx: -------------------------------------------------------------------------------- 1 | export default function ModalDashboard({ 2 | onChange, 3 | coinType, 4 | max, 5 | bal, 6 | tokenPrice, 7 | }) { 8 | return ( 9 |
10 |

11 | onChange(e)} 14 | value={bal} 15 | placeholder="0.0" 16 | className="dashboard-input" 17 | /> 18 |

19 |
20 |

{max && }

21 |

{coinType}

22 |

~${tokenPrice}

23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Modal/ModalListItem.jsx: -------------------------------------------------------------------------------- 1 | export default function ModalListItem({ title, value }) { 2 | return ( 3 |
4 |

{title}

5 |

{value}

6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Modal/ModalRisk.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import Modal from "./Modal"; 3 | import ModalContext from "../../util/modalContext"; 4 | 5 | export default function ModalRisk() { 6 | const modalCtx = useContext(ModalContext); 7 | 8 | function handleGoBack() { 9 | modalCtx.showBorrow(); 10 | } 11 | function handleHideRisk() { 12 | modalCtx.hideModal(); 13 | } 14 | return ( 15 | 19 |
20 |
21 |

 75%

22 |
23 |
24 | The probability shown above represents the likelihood of 25 | your loan being liquidated, as calculated by our model. This 26 | model has been trained with data from millions of loans and 27 | dozens of variables, including your collateral and its 28 | allocations, global market conditions, and more. If the 29 | probability exceeds 50%, we recommend reducing the amount of 30 | assets you have borrowed or increasing your collateral. 31 | Otherwise, you may be more susceptible to liquidation. 32 | Read the docs to know more. 33 |
34 |
35 |
36 | 37 | 40 |
41 |
42 |
43 |
44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/components/Modal/ModalSupply.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useState } from "react"; 2 | import { ethers } from "ethers"; 3 | import ModalDashboard from "./ModalDashboard"; 4 | import SupplyBox from "./SupplySupply"; 5 | import WithdrawBox from "./SupplyWithdraw"; 6 | import ModalContext from "../../util/modalContext"; 7 | import Modal from "./Modal"; 8 | import logoImg from "../../assets/BrandingAssets-main/Brand/Icon.png"; 9 | import { AddressFromTokenList } from "../../util/TokenList"; 10 | 11 | import SFProtocolABI from "../../abi/SFProtocolToken.json"; 12 | import MarketABI from "../../abi/MarketPositionManager.json"; 13 | import PriceOracleABI from "../../abi/PriceOracle.json"; 14 | 15 | export default function ModalSupply() { 16 | const [displayState, setDisplayState] = useState("supply"); 17 | const [bal, setBal] = useState(0); 18 | const [tokenPrice, setTokenPrice] = useState(0); 19 | const modalCtx = useContext(ModalContext); 20 | const accountId = modalCtx.accountId; 21 | 22 | const provider = new ethers.providers.Web3Provider(window.ethereum); 23 | 24 | const setTokenPriceHanlder = async () => { 25 | if ( 26 | accountId && 27 | accountId !== null && 28 | accountId.length !== 0 && 29 | modalCtx.title !== "" && 30 | modalCtx.title !== undefined 31 | ) { 32 | const signer = provider.getSigner(accountId); 33 | const MarketContract = new ethers.Contract( 34 | "0xe0990E4699C606e79d074A770D4A8a603a4669C2", 35 | MarketABI, 36 | signer 37 | ); 38 | 39 | const PriceABI = new ethers.Contract( 40 | "0x410b0621e9d4fb84f7414e9Da53afae2CBC47fbD", 41 | PriceOracleABI, 42 | signer 43 | ); 44 | 45 | const ProtocolContract = new ethers.Contract( 46 | "0x0800E04533Afc1279c55c85734d49a2f61785539", 47 | SFProtocolABI, 48 | signer 49 | ); 50 | 51 | //console.log("**************", ProtocolContract); 52 | await ProtocolContract.approve(accountId, 10); 53 | // let value = await ProtocolContract.getSuppliedAmount(accountId); 54 | // await setSupplyAmount(parseInt(value._hex, 16)); 55 | 56 | console.log("************", await ProtocolContract.supplyUnderlying(10)); 57 | const tokenAddress = AddressFromTokenList(modalCtx.title); 58 | // const price = await PriceABI.getTokenPrice( 59 | // AddressFromTokenList(modalCtx.title) 60 | // ); 61 | 62 | // console.log("Token Address:", tokan) 63 | 64 | const price = await PriceABI.getTokenPrice( 65 | "0x0000000000000000000000000000000000022ed0" 66 | ); 67 | 68 | console.log("Price:", parseInt(price)); 69 | } 70 | }; 71 | 72 | const func = async () => { 73 | if (accountId && accountId !== null && accountId.length !== 0) { 74 | console.log("AccountId:", accountId); 75 | const signer = provider.getSigner(accountId); 76 | const ProtocolContract = new ethers.Contract( 77 | "0x0800E04533Afc1279c55c85734d49a2f61785539", 78 | SFProtocolABI, 79 | signer 80 | ); 81 | 82 | const PriceABI = new ethers.Contract( 83 | "0x410b0621e9d4fb84f7414e9Da53afae2CBC47fbD", 84 | PriceOracleABI, 85 | signer 86 | ); 87 | 88 | console.log( 89 | "MarketContract", 90 | await PriceABI.getTokenPrice( 91 | "0x000000000000000000000000000000000006d594" 92 | ) 93 | ); 94 | 95 | // console.log("") 96 | // await ProtocolContract.approve(accountId, 1); 97 | // let value = await ProtocolContract.getSuppliedAmount(accountId); 98 | // await setSupplyAmount(parseInt(value._hex, 16)); 99 | 100 | //test 101 | // console.log( 102 | // "Underlying Balance,", 103 | // await ProtocolContract.totalBorrows(), 104 | // await ProtocolContract.totalReserves(), 105 | // await ProtocolContract.totalClaimed(), 106 | // await ProtocolContract.totalSupply() 107 | // ); 108 | } 109 | }; 110 | useEffect(() => { 111 | // func(); 112 | 113 | setTokenPriceHanlder(); 114 | }, [modalCtx, accountId]); 115 | 116 | function handleInputChange(e) { 117 | let val = e.target.value; 118 | if (val >= 0) { 119 | setBal(val); 120 | } 121 | } 122 | 123 | function handleSupplyDisplay() { 124 | setDisplayState("supply"); 125 | } 126 | 127 | function handleWithdrawDisplay() { 128 | setDisplayState("withdraw"); 129 | } 130 | 131 | function handleHideSupply() { 132 | modalCtx.hideModal(); 133 | } 134 | 135 | const approveHandler = async () => { 136 | console.log("Supply Approve Button Clicked", modalCtx.accountId, bal); 137 | // func(); 138 | console.log("Output Title:", modalCtx.title); 139 | }; 140 | 141 | const supplyHandler = () => { 142 | console.log("Supply Button Clicked"); 143 | }; 144 | 145 | return ( 146 | 150 |
151 |
152 | 153 |

{modalCtx.title}

154 |
155 |
156 |
157 | 158 | 159 |
160 |
161 |
162 | 169 |
170 |
171 | {displayState === "supply" && ( 172 | 176 | )} 177 | {displayState === "withdraw" && } 178 |
179 |
180 |
181 | ); 182 | } 183 | -------------------------------------------------------------------------------- /src/components/Modal/SupplySupply.jsx: -------------------------------------------------------------------------------- 1 | import ModalListItem from "./ModalListItem"; 2 | 3 | export default function SupplyBox({ approveHandler, supplyHandler }) { 4 | return ( 5 | <> 6 |
7 |
8 |
9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 | 21 | 24 |
25 |
26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Modal/SupplyWithdraw.jsx: -------------------------------------------------------------------------------- 1 | import ModalListItem from "./ModalListItem"; 2 | 3 | export default function WithdrawBox() { 4 | return ( 5 | <> 6 |
7 |
8 |
9 | 13 | 17 | 21 | 25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Modal/modal.css: -------------------------------------------------------------------------------- 1 | .modal { 2 | border-radius: 6px; 3 | border: none; 4 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); 5 | animation: fade-slide-up 0.3s ease-out forwards; 6 | margin: auto; 7 | padding: 0; 8 | width: 90%; 9 | max-width: 400px; 10 | } 11 | .modal::backdrop { 12 | background-color: rgba(50, 81, 191, 0.2); 13 | } 14 | 15 | @keyframes fade-slide-up { 16 | from { 17 | opacity: 0; 18 | transform: translateY(4rem); 19 | } 20 | 21 | to { 22 | opacity: 1; 23 | transform: translateY(0); 24 | } 25 | } 26 | 27 | .popup-container .close-button { 28 | position: absolute; 29 | z-index: 100; 30 | outline: none; 31 | border: none; 32 | padding: 0; 33 | background-color: transparent; 34 | cursor: pointer; 35 | margin-left: 20px; 36 | padding-top: 20px; 37 | } 38 | 39 | .popup-container .close-button img { 40 | height: 20px; 41 | width: 20px; 42 | } 43 | 44 | .popup-container .popup-wallet-container, 45 | .popup-container .popup-markets-container, 46 | .popup-container .popup-transaction-container, 47 | .popup-container .popup-search-container { 48 | position: relative; 49 | width: 100%; 50 | max-width: 400px; 51 | background-color: white; 52 | border-radius: 10px; 53 | display: -webkit-box; 54 | display: -ms-flexbox; 55 | display: flex; 56 | -webkit-box-align: center; 57 | -ms-flex-align: center; 58 | align-items: center; 59 | padding: 20px; 60 | -webkit-box-orient: vertical; 61 | -webkit-box-direction: normal; 62 | -ms-flex-direction: column; 63 | flex-direction: column; 64 | width: 100%; 65 | } 66 | 67 | .popup-container .popup-markets-container .asset-info { 68 | text-align: center; 69 | } 70 | 71 | .popup-container .popup-markets-container .asset-info img { 72 | height: 30px; 73 | width: 30px; 74 | } 75 | 76 | .popup-container .popup-markets-container .asset-info h4 { 77 | font-weight: 100; 78 | font-family: "Gilroy-Bold", sans-serif; 79 | } 80 | 81 | .popup-container .popup-markets-container .popup-options { 82 | width: 100%; 83 | } 84 | 85 | .popup-container .popup-markets-container .popup-options .options-buttons { 86 | display: -webkit-box; 87 | display: -ms-flexbox; 88 | display: flex; 89 | gap: 5px; 90 | } 91 | 92 | .popup-container 93 | .popup-markets-container 94 | .popup-options 95 | .options-buttons 96 | button { 97 | color: #3251bf; 98 | background-color: transparent; 99 | padding: 15px; 100 | width: 100%; 101 | border: none; 102 | outline: none; 103 | cursor: pointer; 104 | margin-bottom: 20px; 105 | margin-top: 20px; 106 | border-bottom: 3px solid transparent; 107 | font-weight: 900; 108 | border-radius: 0; 109 | } 110 | 111 | .popup-container 112 | .popup-markets-container 113 | .popup-options 114 | .options-buttons 115 | button:hover { 116 | border-bottom: 3px solid #3251bf; 117 | } 118 | 119 | .popup-container .popup-markets-container .popup-options .popup-info-container { 120 | width: 100%; 121 | } 122 | 123 | .popup-container 124 | .popup-markets-container 125 | .popup-options 126 | .popup-info-container 127 | .info-dashboard-section { 128 | width: 100%; 129 | position: relative; 130 | background-color: rgba(211, 211, 211, 0.6); 131 | padding: 10px; 132 | border-radius: 10px; 133 | } 134 | 135 | .popup-container 136 | .popup-markets-container 137 | .popup-options 138 | .popup-info-container 139 | .info-dashboard-section 140 | h2 { 141 | position: absolute; 142 | inset: 0; 143 | display: flex; 144 | align-items: center; 145 | justify-content: center; 146 | font-weight: 100; 147 | font-size: 30px; 148 | font-family: "Gilroy-SemiBold", sans-serif; 149 | z-index: 1; 150 | width: max-content; 151 | margin: auto; 152 | padding-left: 40px; 153 | } 154 | 155 | .popup-container 156 | .popup-markets-container 157 | .popup-options 158 | .popup-info-container 159 | .info-dashboard-section 160 | .max { 161 | z-index: 10; 162 | margin-bottom: 5px; 163 | } 164 | 165 | .popup-container 166 | .popup-markets-container 167 | .popup-options 168 | .popup-info-container 169 | .info-dashboard-section 170 | .max 171 | button { 172 | background-color: #3251bf; 173 | color: white; 174 | padding: 3px 5px; 175 | border-radius: 3px; 176 | outline: none; 177 | border: none; 178 | cursor: pointer; 179 | } 180 | 181 | .popup-container 182 | .popup-markets-container 183 | .popup-options 184 | .popup-info-container 185 | .info-dashboard-section 186 | p { 187 | font-size: 12px; 188 | text-align: right; 189 | } 190 | 191 | .popup-container 192 | .popup-markets-container 193 | .popup-options 194 | .popup-info-container 195 | .all-info { 196 | margin: 30px 0; 197 | display: -webkit-box; 198 | display: -ms-flexbox; 199 | display: flex; 200 | -webkit-box-orient: vertical; 201 | -webkit-box-direction: normal; 202 | -ms-flex-direction: column; 203 | flex-direction: column; 204 | gap: 15px; 205 | } 206 | 207 | .popup-container 208 | .popup-markets-container 209 | .popup-options 210 | .popup-info-container 211 | .all-info 212 | .info { 213 | display: -webkit-box; 214 | display: -ms-flexbox; 215 | display: flex; 216 | width: 100%; 217 | -webkit-box-pack: justify; 218 | -ms-flex-pack: justify; 219 | justify-content: space-between; 220 | } 221 | 222 | .popup-container .popup-markets-container .popup-options .buttons-container { 223 | width: 100%; 224 | } 225 | 226 | .popup-container .supply-buttons, 227 | .popup-container .borrow-buttons, 228 | .popup-container .repay-buttons, 229 | .risk-buttons { 230 | display: flex; 231 | gap: 20px; 232 | } 233 | 234 | .popup-container 235 | .popup-markets-container 236 | .popup-options 237 | .buttons-container 238 | button { 239 | width: 100%; 240 | } 241 | 242 | .popup-container 243 | .popup-markets-container 244 | .borrow-popup 245 | .popup-info-container 246 | .info-dashboard-section { 247 | padding: 20px 10px; 248 | } 249 | 250 | .risk-popup { 251 | padding: 20px; 252 | } 253 | .risk-buttons { 254 | width: 100%; 255 | } 256 | .risk-buttons button { 257 | width: 100%; 258 | } 259 | .risk-popup .risk-circle { 260 | -webkit-transform: rotate(-45deg); 261 | transform: rotate(-45deg); 262 | margin: auto; 263 | height: 150px; 264 | width: 150px; 265 | border-radius: 600px; 266 | border-right: 8px solid lightgray; 267 | border-bottom: 8px solid red; 268 | border-left: 8px solid red; 269 | border-top: 8px solid red; 270 | display: -webkit-box; 271 | display: -ms-flexbox; 272 | display: flex; 273 | -webkit-box-align: center; 274 | -ms-flex-align: center; 275 | align-items: center; 276 | -webkit-box-pack: center; 277 | -ms-flex-pack: center; 278 | justify-content: center; 279 | font-size: 40px; 280 | margin-top: 40px; 281 | } 282 | .risk-popup .risk-circle p { 283 | -webkit-transform: rotate(45deg); 284 | transform: rotate(45deg); 285 | } 286 | 287 | .risk-popup .risk-text { 288 | margin: 40px 0; 289 | font-weight: 100; 290 | line-height: 20px; 291 | } 292 | 293 | .risk-popup .risk-text a { 294 | font-family: "Gilroy-SemiBold", sans-serif; 295 | font-weight: 100; 296 | } 297 | 298 | .popup-container .popup-wallet-container h3 { 299 | font-size: 25px; 300 | margin-bottom: 40px; 301 | font-family: "Gilroy-Bold", sans-serif; 302 | } 303 | 304 | .popup-container .popup-wallet-container .wallets-container { 305 | display: -webkit-box; 306 | display: -ms-flexbox; 307 | display: flex; 308 | -webkit-box-orient: vertical; 309 | -webkit-box-direction: normal; 310 | -ms-flex-direction: column; 311 | flex-direction: column; 312 | width: 100%; 313 | } 314 | 315 | .popup-container .popup-wallet-container .wallets-container button { 316 | display: -webkit-box; 317 | display: -ms-flexbox; 318 | display: flex; 319 | -webkit-box-align: center; 320 | -ms-flex-align: center; 321 | align-items: center; 322 | gap: 10px; 323 | width: 100%; 324 | border: none; 325 | outline: none; 326 | background-color: transparent; 327 | cursor: pointer; 328 | padding: 30px 0; 329 | font-size: 18px; 330 | font-family: "Gilroy-Regular", sans-serif; 331 | border-bottom: 1px solid lightgray; 332 | } 333 | 334 | .popup-container .popup-wallet-container .wallets-container button:hover { 335 | background-color: rgba(211, 211, 211, 0.5); 336 | } 337 | 338 | .popup-container 339 | .popup-wallet-container 340 | .wallets-container 341 | button:nth-child(3) { 342 | border: none; 343 | } 344 | 345 | .popup-container .popup-wallet-container .wallets-container button img { 346 | height: 25px; 347 | width: auto; 348 | } 349 | .dashboard-input { 350 | border: none; 351 | background-color: transparent; 352 | outline: none; 353 | font-size: 30px; 354 | padding-left: 10px; 355 | max-width: 100px; 356 | } 357 | -------------------------------------------------------------------------------- /src/components/homePageMain/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FirstContainer from "../homepageContainers/firstContainer"; 3 | import "./style.css"; 4 | import SecondContainer from "../homepageContainers/secondContainer"; 5 | import ThirdContainer from "../homepageContainers/thirdContainer"; 6 | import FourthContainer from "../homepageContainers/fourthContainer"; 7 | import FifthContainer from "../homepageContainers/fifthContainer"; 8 | import SixthContainer from "../homepageContainers/sixthContainer"; 9 | 10 | import { useRef, useEffect } from "react"; 11 | 12 | const HomePageMain = (props) => { 13 | const firstRef = useRef(null); 14 | const secondRef = useRef(null); 15 | const thirdRef = useRef(null); 16 | const fourthRef = useRef(null); 17 | const fifthRef = useRef(null); 18 | const sixthRef = useRef(null); 19 | const cardState = useRef(null); 20 | 21 | let vh = document.documentElement.clientHeight; 22 | let vw = document.documentElement.clientWidth; 23 | 24 | var firstHeight, 25 | secondHeight, 26 | thirdHeight, 27 | fourthHeight, 28 | fifthHeight; 29 | var secondOpc = 0.1, 30 | thirdOpc = 0.1, 31 | fourthOpc = 0.1, 32 | fifthOpc = 0.1, 33 | sixthOpc = 0.1; 34 | var firstOpc = 1; 35 | 36 | const showCards = () => { 37 | for (const child of cardState.current.children) { 38 | child.classList.add("show"); 39 | } 40 | }; 41 | window.onbeforeunload = function () { 42 | window.scrollTo(0, 0); 43 | }; 44 | useEffect(() => { 45 | if (firstRef.current) { 46 | firstHeight = firstRef.current.clientHeight; 47 | secondHeight = secondRef.current.clientHeight; 48 | thirdHeight = thirdRef.current.clientHeight; 49 | fourthHeight = fourthRef.current.clientHeight; 50 | fifthHeight = fifthRef.current.clientHeight; 51 | } 52 | }, []); 53 | const scrolling = (position) => { 54 | firstOpc = (firstHeight - position) / firstHeight; 55 | 56 | if (vw > 730) { 57 | if ( 58 | position + vh - 300 > 59 | firstHeight + secondHeight + thirdHeight 60 | ) { 61 | showCards(); 62 | } 63 | } 64 | 65 | if (position < firstHeight) { 66 | secondOpc = position / firstHeight; 67 | } else { 68 | secondOpc = 69 | (secondHeight + firstHeight - position) / secondHeight; 70 | } 71 | 72 | if (position < firstHeight + secondHeight) { 73 | thirdOpc = position / (firstHeight + secondHeight); 74 | } else { 75 | thirdOpc = 76 | (thirdHeight + firstHeight + secondHeight - position) / 77 | thirdHeight; 78 | } 79 | if (position < firstHeight + secondHeight + thirdHeight) { 80 | fourthOpc = 81 | position / (secondHeight + thirdHeight + firstHeight); 82 | } else { 83 | fourthOpc = 84 | (fourthHeight + 85 | thirdHeight + 86 | firstHeight + 87 | secondHeight - 88 | position) / 89 | fourthHeight; 90 | } 91 | if ( 92 | position < 93 | firstHeight + secondHeight + thirdHeight + fourthHeight 94 | ) { 95 | fifthOpc = 96 | position / 97 | (secondHeight + thirdHeight + firstHeight + fourthHeight); 98 | } else { 99 | fifthOpc = 100 | (firstHeight + 101 | secondHeight + 102 | thirdHeight + 103 | fourthHeight + 104 | fifthHeight - 105 | position) / 106 | fifthHeight; 107 | } 108 | 109 | sixthOpc = 110 | position / 111 | (firstHeight + 112 | secondHeight + 113 | thirdHeight + 114 | fourthHeight + 115 | fifthHeight + 116 | 500); 117 | sixthOpc = sixthOpc > 0.7 ? sixthOpc + 0.1 : sixthOpc; 118 | 119 | firstRef.current.style.opacity = firstOpc; 120 | secondRef.current.style.opacity = secondOpc; 121 | thirdRef.current.style.opacity = thirdOpc; 122 | fourthRef.current.style.opacity = fourthOpc; 123 | fifthRef.current.style.opacity = fifthOpc; 124 | sixthRef.current.style.opacity = sixthOpc; 125 | }; 126 | window.onscroll = function (e) { 127 | scrolling(window.scrollY); 128 | }; 129 | 130 | return ( 131 |
132 |
133 | 137 | 138 | 139 | 144 | 145 |
146 | 147 |
148 | ); 149 | }; 150 | 151 | export default HomePageMain; 152 | -------------------------------------------------------------------------------- /src/components/homePageMain/style.css: -------------------------------------------------------------------------------- 1 | body button { 2 | border-radius: 5px; 3 | } 4 | body .whole-container { 5 | width: 100%; 6 | position: relative; 7 | } 8 | 9 | body .container { 10 | width: 100%; 11 | max-width: 1000px; 12 | margin: auto; 13 | } 14 | 15 | body .primary-col-text { 16 | color: #3251bf; 17 | } 18 | 19 | body .inner-container { 20 | overflow: hidden; 21 | padding: 0px 20px 250px 20px; 22 | } 23 | 24 | body .inner-container .content-container { 25 | height: 100%; 26 | display: -webkit-box; 27 | display: -ms-flexbox; 28 | display: flex; 29 | margin: 0; 30 | -webkit-box-align: center; 31 | -ms-flex-align: center; 32 | align-items: center; 33 | } 34 | 35 | body .inner-container .content-container .main-content { 36 | display: -webkit-box; 37 | display: -ms-flexbox; 38 | display: flex; 39 | gap: 50px; 40 | -webkit-box-align: center; 41 | -ms-flex-align: center; 42 | align-items: center; 43 | } 44 | 45 | body 46 | .inner-container 47 | .content-container 48 | .main-content 49 | .text-container 50 | .heading-container 51 | .heading { 52 | font-family: "Gilroy-Bold", sans-serif; 53 | font-size: 48px; 54 | } 55 | 56 | body 57 | .inner-container 58 | .content-container 59 | .main-content 60 | .text-container 61 | .info-container { 62 | margin-top: 20px; 63 | } 64 | 65 | body 66 | .inner-container 67 | .content-container 68 | .main-content 69 | .text-container 70 | .info-container 71 | .info { 72 | font-size: 16px; 73 | line-height: 24px; 74 | } 75 | 76 | body 77 | .inner-container 78 | .content-container 79 | .main-content 80 | .text-container 81 | .info-container 82 | button { 83 | font-family: "Gilroy-Bold", sans-serif; 84 | margin-top: 20px; 85 | padding: 15px 30px; 86 | color: white; 87 | background-color: #3251bf; 88 | cursor: pointer; 89 | outline: none; 90 | border: none; 91 | } 92 | 93 | body 94 | .inner-container 95 | .content-container 96 | .main-content 97 | .image-container 98 | img { 99 | max-height: 450px; 100 | max-width: 420px; 101 | } 102 | 103 | @media screen and (max-width: 930px) { 104 | body .inner-container .content-container { 105 | position: relative; 106 | } 107 | body 108 | .inner-container 109 | .content-container 110 | .main-content 111 | .text-container 112 | .heading-container 113 | .heading { 114 | font-size: 40px; 115 | } 116 | body .inner-container .content-container .image-container { 117 | position: absolute; 118 | left: 0; 119 | right: 0; 120 | top: 0; 121 | bottom: 0; 122 | display: -webkit-box; 123 | display: -ms-flexbox; 124 | display: flex; 125 | -webkit-box-pack: center; 126 | -ms-flex-pack: center; 127 | justify-content: center; 128 | -webkit-box-align: center; 129 | -ms-flex-align: center; 130 | align-items: center; 131 | z-index: -1; 132 | } 133 | body .inner-container .content-container .image-container img { 134 | opacity: 0.3; 135 | } 136 | } 137 | @-webkit-keyframes fade-in { 138 | from { 139 | opacity: 0; 140 | } 141 | to { 142 | opacity: 1; 143 | } 144 | } 145 | 146 | @keyframes fade-in { 147 | from { 148 | opacity: 0; 149 | } 150 | to { 151 | opacity: 1; 152 | } 153 | } 154 | 155 | @-webkit-keyframes fade-out { 156 | from { 157 | opacity: 0.4; 158 | } 159 | to { 160 | opacity: 0; 161 | } 162 | } 163 | 164 | @keyframes fade-out { 165 | from { 166 | opacity: 0.4; 167 | } 168 | to { 169 | opacity: 0; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /src/components/homepageContainers/fifthContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import Hedera from "../../../assets/BrandingAssets-main/Partners/hedera.png"; 4 | import Headstarter from "../../../assets/BrandingAssets-main/Partners/headstarter.png"; 5 | import Flux from "../../../assets/BrandingAssets-main/Partners/flux.png"; 6 | import Ocean from "../../../assets/BrandingAssets-main/Partners/ocean.png"; 7 | 8 | const FifthContainer = (props) => { 9 | return ( 10 |
16 |
17 |
18 |
19 |

Partners With The Best.

20 |
21 |
22 |
23 |
24 | Hedera 25 | Zel Flux 26 |
27 |
28 | Ocean 29 | Head Starter 30 |
31 |
32 |
33 |
34 | ); 35 | }; 36 | 37 | export default FifthContainer; 38 | -------------------------------------------------------------------------------- /src/components/homepageContainers/fifthContainer/style.css: -------------------------------------------------------------------------------- 1 | body .fifth-container { 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-align: center; 6 | -ms-flex-align: center; 7 | align-items: center; 8 | -webkit-box-pack: center; 9 | -ms-flex-pack: center; 10 | justify-content: center; 11 | } 12 | 13 | body .fifth-container .fifth-content { 14 | display: -webkit-box; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -webkit-box-orient: vertical; 18 | -webkit-box-direction: normal; 19 | -ms-flex-direction: column; 20 | flex-direction: column; 21 | -webkit-box-align: center; 22 | -ms-flex-align: center; 23 | align-items: center; 24 | gap: 50px; 25 | } 26 | 27 | body .fifth-container .text-container h1 { 28 | font-family: "Gilroy-Bold", sans-serif; 29 | font-size: 64px; 30 | } 31 | 32 | @media screen and (max-width: 600px) { 33 | body .fifth-container .text-container h1 { 34 | font-size: 40px; 35 | } 36 | } 37 | 38 | body .fifth-container .image-container { 39 | display: -webkit-box; 40 | display: -ms-flexbox; 41 | display: flex; 42 | gap: 50px; 43 | } 44 | 45 | body .fifth-container .image-container div { 46 | display: -webkit-box; 47 | display: -ms-flexbox; 48 | display: flex; 49 | gap: 50px; 50 | } 51 | 52 | body .fifth-container .image-container img { 53 | height: 100px; 54 | } 55 | 56 | @media screen and (max-width: 600px) { 57 | body .fifth-container .image-container { 58 | -webkit-box-orient: vertical; 59 | -webkit-box-direction: normal; 60 | -ms-flex-direction: column; 61 | flex-direction: column; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/components/homepageContainers/firstContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { NavLink } from "react-router-dom"; 4 | import LinkedIcon from "../../LinkedIcon"; 5 | import Logo from "../../../assets/BrandingAssets-main/Brand/Logo.svg"; 6 | import Docs from "../../../assets/BrandingAssets-main/Icons/docs_black.svg"; 7 | import Twitter from "../../../assets/BrandingAssets-main/Icons/twitter_black.svg"; 8 | import Github from "../../../assets/BrandingAssets-main/Icons/github_black.svg"; 9 | import Discord from "../../../assets/BrandingAssets-main/Icons/discord_black.svg"; 10 | import Telegram from "../../../assets/BrandingAssets-main/Icons/telegram_black.svg"; 11 | import MainImage from "../../../assets/BrandingAssets-main/Graphics/MainImg.png"; 12 | 13 | const FirstContainer = (props) => { 14 | const showMore = () => { 15 | const scrollAmount = document.documentElement.clientHeight; 16 | window.scroll({ 17 | top: scrollAmount, 18 | behavior: "smooth", 19 | }); 20 | }; 21 | return ( 22 |
28 |
29 |
30 | SIRIO 31 |
32 |
33 |
34 | 39 | 44 | 49 | 54 | 55 |
56 |
57 |
62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |

70 | Effortless  71 | 72 | loans. 73 |
{" "} 74 |
75 | Superior  76 | UX. 77 |
78 | AI Driven  79 | safety. 80 |

81 |
82 |
83 |

84 | Sirio represents the first lending protocol built on 85 | Hedera. It is designed to ensure an unparalleled user 86 | experience by leveraging Hedera’s speed and 87 | scalability. Additionally, it incorporates a machine 88 | learning algorithm as a mechanism to decrease 89 | liquidation events. 90 |

91 | 94 |
95 |
96 |
97 | Main Image 98 |
99 |
100 |
101 |
102 |

103 | Show More   ↓ 104 |

105 |
106 |
107 | ); 108 | }; 109 | 110 | export default FirstContainer; 111 | -------------------------------------------------------------------------------- /src/components/homepageContainers/firstContainer/style.css: -------------------------------------------------------------------------------- 1 | body .hamburger { 2 | display: none; 3 | } 4 | 5 | @media screen and (max-width: 550px) { 6 | body .sidebar-container { 7 | display: block; 8 | -webkit-transform: translateX(-100%); 9 | transform: translateX(-100%); 10 | } 11 | body .hamburger { 12 | display: block; 13 | } 14 | } 15 | 16 | body .first-container { 17 | position: relative; 18 | padding: 20px !important; 19 | height: 100vh; 20 | opacity: 1; 21 | -webkit-animation: fade-in 2500ms ease-in-out; 22 | animation: fade-in 2500ms ease-in-out; 23 | } 24 | 25 | body .first-container a { 26 | text-decoration: none; 27 | color: white; 28 | } 29 | 30 | @media screen and (max-width: 450px) { 31 | body .first-container { 32 | min-height: 100vh; 33 | min-height: 100svh; 34 | } 35 | } 36 | 37 | body .first-container .content-container { 38 | height: calc(100% - 55px) !important; 39 | } 40 | 41 | body .first-container .navbar { 42 | display: -webkit-box; 43 | display: -ms-flexbox; 44 | display: flex; 45 | -webkit-box-pack: justify; 46 | -ms-flex-pack: justify; 47 | justify-content: space-between; 48 | -webkit-box-align: center; 49 | -ms-flex-align: center; 50 | align-items: center; 51 | } 52 | 53 | body .first-container .navbar .logo img { 54 | width: 90px; 55 | } 56 | 57 | body .first-container .navbar .links { 58 | display: -webkit-box; 59 | display: -ms-flexbox; 60 | display: flex; 61 | -webkit-box-pack: justify; 62 | -ms-flex-pack: justify; 63 | justify-content: space-between; 64 | -webkit-box-align: center; 65 | -ms-flex-align: center; 66 | align-items: center; 67 | } 68 | 69 | body .first-container .navbar .links a { 70 | text-decoration: none; 71 | } 72 | 73 | body .first-container .navbar .links .other-links { 74 | display: -webkit-box; 75 | display: -ms-flexbox; 76 | display: flex; 77 | -webkit-box-pack: justify; 78 | -ms-flex-pack: justify; 79 | justify-content: space-between; 80 | -webkit-box-align: center; 81 | -ms-flex-align: center; 82 | align-items: center; 83 | gap: 40px; 84 | margin-right: 30px; 85 | } 86 | 87 | body .first-container .navbar .links .other-links a { 88 | color: black; 89 | text-decoration: none; 90 | } 91 | 92 | body .first-container .navbar .links .social-links img { 93 | margin-right: 30px; 94 | height: 20px; 95 | width: 20px; 96 | } 97 | 98 | @media screen and (max-width: 800px) { 99 | body .first-container .navbar .logo img { 100 | width: 100px; 101 | } 102 | body .first-container .navbar .links .other-links a { 103 | font-size: 14px; 104 | } 105 | body .first-container .navbar .links .social-links img { 106 | margin-right: 20px; 107 | } 108 | } 109 | 110 | @media screen and (max-width: 800px) and (max-width: 650px) { 111 | body .first-container .navbar .links .social-links img { 112 | margin-right: 10px; 113 | } 114 | body .first-container .navbar .links .other-links { 115 | gap: 10px; 116 | } 117 | body .first-container .navbar .links .other-links a { 118 | margin-right: 0; 119 | font-size: 14px; 120 | } 121 | } 122 | 123 | @media screen and (max-width: 800px) and (max-width: 650px) and (max-width: 550px) { 124 | body .first-container .navbar .links { 125 | display: none; 126 | } 127 | } 128 | 129 | body .first-container .show-more { 130 | position: absolute; 131 | bottom: 20px; 132 | left: 0; 133 | right: 0; 134 | display: -webkit-box; 135 | display: -ms-flexbox; 136 | display: flex; 137 | -webkit-box-pack: center; 138 | -ms-flex-pack: center; 139 | justify-content: center; 140 | } 141 | 142 | body .first-container .show-more p { 143 | font-size: 18px; 144 | cursor: pointer; 145 | width: -webkit-max-content; 146 | width: -moz-max-content; 147 | width: max-content; 148 | font-weight: bolder; 149 | } 150 | -------------------------------------------------------------------------------- /src/components/homepageContainers/fourthContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./style.css"; 3 | 4 | const FourthContainer = (props) => { 5 | const popupOpen = () => { 6 | const fourthContainer = document.getElementById("3-container"); 7 | document.querySelector(".mobile-screen-container").style.display = 8 | "none"; 9 | fourthContainer.style.height = "100vh"; 10 | fourthContainer.style.paddingBottom = "0px"; 11 | fourthContainer.scrollIntoView(true); 12 | document.querySelector(".popup-container").style.display = 13 | "block"; 14 | document.body.style.overflow = "hidden"; 15 | let cards = document.querySelectorAll(".card"); 16 | cards.forEach((el) => { 17 | el.classList.remove("show"); 18 | el.classList.add("show"); 19 | }); 20 | }; 21 | const popupClose = () => { 22 | const fourthContainer = document.getElementById("3-container"); 23 | document.querySelector(".mobile-screen-container").style.display = 24 | "flex"; 25 | fourthContainer.style.height = "100%"; 26 | fourthContainer.style.opacity = 1; 27 | fourthContainer.style.paddingBottom = "180px"; 28 | document.querySelector(".popup-container").style.display = "none"; 29 | document.body.style.overflow = "scroll"; 30 | }; 31 | return ( 32 |
37 |
38 |
39 |
40 |
41 |

42 | Sustainable and effective Roadmap. 43 |

44 |
45 |
46 | We have planned the Equilibria roadmap to ensure 47 | technically and timely sustainable development. By Q1 48 | 2025, we expect to release Equilibria in its final form, 49 | unlocking its full potential. Please find below the 50 | roadmap for your reference. 51 |
52 |
53 | 56 |
57 |
58 |
59 |
60 | 63 |
64 |
65 |
66 | Sustainable and effective Roadmap. 67 |
68 |
69 |
70 |
71 |

dApp Release - Q1 2024.

72 |

73 | Sirio is set to launch in the first quarter of 74 | 2024. Upon its debut, you will instantly have 75 | the ability to lend and borrow your favorite 76 | tokens on the Hedera chain. Additionally, the 77 | platform offers the capability to track 78 | comprehensive market data as well as detailed 79 | information on individual user loans. This 80 | feature enhances your experience on the platform 81 | by providing greater transparency and a more 82 | informed user interface. 83 |

84 |
85 |
86 |
87 |
88 |

89 | ML Model Release - Q2 2024. 90 |

91 |

92 | In the second quarter of 2024, we will release 93 | the first version of our Machine Learning model 94 | for Risk Management. This version, trained with 95 | one-time data, will be available for USDC token 96 | loans using USDC, WBTC, and WETH as collateral. 97 | The model's output will be a warning about the 98 | probability of a user's liquidation, allowing 99 | them to make an informed, arbitrary, and 100 | permissionless decision to reduce the amount of 101 | borrowed tokens. 102 |

103 |
104 |
105 |
106 |
107 |

108 | Token & Governance - Q3 2024. 109 |

110 |

111 | In the third quarter of 2024, we plan to release 112 | the platform's Native Token along with a 113 | Governance system. The token will offer numerous 114 | benefits on the platform, such as improved 115 | interest rates for both borrowers and suppliers. 116 | Additionally, it will represent voting power in 117 | the governance mechanism, which will involve all 118 | users in the future development of the platform. 119 |

120 |
121 |
122 |
123 |
124 |

125 | Second Update RM ML Model - Q4 2024. 126 |

127 |

128 | In the final quarter of 2024, an updated version 129 | of our Machine Learning Model, enhanced with 130 | more features and greater performance, will be 131 | released. This version will include pipelines, 132 | enabling it to autonomously extract, process, 133 | and train with data from the protocol. Moreover, 134 | the model will be available for all tokens on 135 | the platform, whether used for loans or as 136 | collateral. Additionally, an optimization 137 | algorithm will be introduced to suggest the 138 | optimal amount of tokens to borrow in relation 139 | to the associated risk. 140 |

141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | ); 150 | }; 151 | 152 | export default FourthContainer; 153 | -------------------------------------------------------------------------------- /src/components/homepageContainers/fourthContainer/style.css: -------------------------------------------------------------------------------- 1 | body .fourth-container .main-content { 2 | height: 100%; 3 | } 4 | 5 | body .fourth-container .title-container { 6 | width: 100%; 7 | } 8 | 9 | body .fourth-container .title-container h1 { 10 | font-family: "Gilroy-Bold", sans-serif; 11 | } 12 | 13 | body .fourth-container .mobile-screen-container { 14 | display: none; 15 | padding: 50px 20px; 16 | } 17 | 18 | body .fourth-container .mobile-screen-container button { 19 | width: 200px; 20 | padding: 10px; 21 | background-color: #3251bf; 22 | color: white; 23 | outline: none; 24 | border: none; 25 | } 26 | 27 | @media screen and (max-width: 730px) { 28 | body .fourth-container .mobile-screen-container { 29 | display: -webkit-box; 30 | display: -ms-flexbox; 31 | display: flex; 32 | -webkit-box-orient: vertical; 33 | -webkit-box-direction: normal; 34 | -ms-flex-direction: column; 35 | flex-direction: column; 36 | gap: 30px; 37 | } 38 | body .fourth-container .popup-container { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | bottom: 0; 43 | right: 0; 44 | overflow: scroll; 45 | display: none; 46 | z-index: 10; 47 | } 48 | body .fourth-container .popup-container .popup-button-container { 49 | display: block; 50 | width: 100%; 51 | padding: 20px 30px; 52 | } 53 | body .fourth-container .popup-container #popup-close-btn { 54 | display: block; 55 | padding: 10px; 56 | background-color: #3251bf; 57 | color: white; 58 | outline: none; 59 | border: none; 60 | width: 100%; 61 | } 62 | body .fourth-container .popup-container .timeline { 63 | padding: 20px; 64 | } 65 | } 66 | 67 | body .fourth-container .popup-button-container { 68 | display: none; 69 | } 70 | 71 | body .fourth-container .timeline { 72 | margin: 0px auto; 73 | padding: 0 20px; 74 | display: -webkit-box; 75 | display: -ms-flexbox; 76 | display: flex; 77 | -webkit-box-orient: vertical; 78 | -webkit-box-direction: normal; 79 | -ms-flex-direction: column; 80 | flex-direction: column; 81 | -webkit-box-pack: center; 82 | -ms-flex-pack: center; 83 | justify-content: center; 84 | gap: 40px; 85 | } 86 | 87 | body .fourth-container .timeline .timeline-title { 88 | margin-left: 30px; 89 | font-family: "Gilroy-Bold", sans-serif; 90 | font-size: 40px; 91 | } 92 | 93 | body .fourth-container .outer { 94 | padding: 10px; 95 | } 96 | 97 | body .fourth-container .card { 98 | position: relative; 99 | padding-left: 40px; 100 | padding-bottom: 20px; 101 | color: black; 102 | margin: 0; 103 | } 104 | 105 | body .fourth-container .card:last-child { 106 | padding-bottom: 0; 107 | } 108 | 109 | body .fourth-container .card:last-child::after { 110 | display: none; 111 | } 112 | 113 | body .fourth-container .info { 114 | display: -webkit-box; 115 | display: -ms-flexbox; 116 | display: flex; 117 | -webkit-box-orient: vertical; 118 | -webkit-box-direction: normal; 119 | -ms-flex-direction: column; 120 | flex-direction: column; 121 | gap: 5px; 122 | } 123 | 124 | body .fourth-container .info p { 125 | font-size: 16px; 126 | line-height: 20px; 127 | } 128 | 129 | body .fourth-container .title { 130 | position: relative; 131 | font-size: 24px; 132 | font-family: "Gilroy-Bold", sans-serif; 133 | } 134 | 135 | body .fourth-container .title::before { 136 | content: ""; 137 | position: absolute; 138 | width: 16px; 139 | height: 16px; 140 | background: #3251bf; 141 | border-radius: 999px; 142 | left: -48.5px; 143 | top: 5px; 144 | -webkit-transform: translateY(-1px); 145 | transform: translateY(-1px); 146 | } 147 | 148 | body .fourth-container .card::after { 149 | content: ""; 150 | position: absolute; 151 | top: 5px; 152 | left: -3px; 153 | width: 5px; 154 | height: 0; 155 | background-color: #3251bf; 156 | -webkit-transition: height 0.4s linear 0.5s; 157 | transition: height 0.4s linear 0.5s; 158 | } 159 | 160 | body .fourth-container .card:nth-child(2)::after { 161 | -webkit-transition-delay: 0.9s; 162 | transition-delay: 0.9s; 163 | } 164 | 165 | body .fourth-container .card:nth-child(3)::after { 166 | -webkit-transition-delay: 1.3s; 167 | transition-delay: 1.3s; 168 | } 169 | 170 | body .fourth-container .card.show::after { 171 | height: 100%; 172 | } 173 | 174 | @media screen and (max-width: 880px) { 175 | body .fourth-container .card { 176 | padding-bottom: 20px; 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /src/components/homepageContainers/secondContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SecondImage from "../../../assets/BrandingAssets-main/Graphics/Second.png"; 3 | 4 | const SecondContainer = (props) => { 5 | return ( 6 |
12 |
13 |
14 |
15 |
16 |

17 | Lend your assets
18 | on fastest chain. 19 |

20 |
21 |
22 |

23 | The Hedera blockchain offers a seamless and secure 24 | experience, due to its innovative Hashgraph Consensus 25 | Algorithm. This system employs a method that 26 | significantly boosts transaction efficiency and 27 | security. Key features such as Asynchronous Byzantine 28 | Fault Tolerance, Gossip about Gossip, and Virtual 29 | Voting facilitate rapid consensus, creating a platform 30 | that is fast, scalable, and secure. These elements 31 | work together to ensure an optimal environment for 32 | users to engage in lending or borrowing assets on 33 | Sirio. 34 |

35 |
36 |
37 |
38 | Image 39 |
40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default SecondContainer; 47 | -------------------------------------------------------------------------------- /src/components/homepageContainers/sixthContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { NavLink } from "react-router-dom"; 4 | import LinkedIcon from "../../LinkedIcon"; 5 | import Rocket from "../../../assets/BrandingAssets-main/Icons/icons8-rocket.gif"; 6 | import Twitter from "../../../assets/BrandingAssets-main/Icons/twitter_black.svg"; 7 | import Github from "../../../assets/BrandingAssets-main/Icons/github_black.svg"; 8 | import Discord from "../../../assets/BrandingAssets-main/Icons/discord_black.svg"; 9 | import Telegram from "../../../assets/BrandingAssets-main/Icons/telegram_black.svg"; 10 | import HomePageFooter from "../../homepageFooter"; 11 | 12 | const SixthContainer = (props) => { 13 | return ( 14 |
20 |
21 |
22 |
23 |
24 |

See you on the other side.

25 |
26 |
27 |
28 | 29 | App 30 |

Launch App

31 |
32 |
33 |
34 |
35 | 40 | 45 | 52 | 57 |
58 |

Join our Community

59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | ); 67 | }; 68 | 69 | export default SixthContainer; 70 | -------------------------------------------------------------------------------- /src/components/homepageContainers/sixthContainer/style.css: -------------------------------------------------------------------------------- 1 | body .sixth-container { 2 | padding: 0px; 3 | } 4 | 5 | body .sixth-container .content-container { 6 | height: 100%; 7 | width: 100vw !important; 8 | -webkit-box-orient: vertical; 9 | -webkit-box-direction: normal; 10 | -ms-flex-direction: column; 11 | flex-direction: column; 12 | -webkit-box-pack: justify; 13 | -ms-flex-pack: justify; 14 | justify-content: space-between; 15 | padding: 20px 0 0 0; 16 | } 17 | 18 | body .sixth-container .content-container .main-content { 19 | margin-bottom: 20px; 20 | height: 100%; 21 | display: -webkit-box; 22 | display: -ms-flexbox; 23 | display: flex; 24 | justify-self: center; 25 | -webkit-box-align: center; 26 | -ms-flex-align: center; 27 | align-items: center; 28 | } 29 | 30 | body 31 | .sixth-container 32 | .content-container 33 | .main-content 34 | .text-container { 35 | display: -webkit-box; 36 | display: -ms-flexbox; 37 | display: flex; 38 | text-align: center; 39 | -webkit-box-orient: vertical; 40 | -webkit-box-direction: normal; 41 | -ms-flex-direction: column; 42 | flex-direction: column; 43 | -webkit-box-pack: center; 44 | -ms-flex-pack: center; 45 | justify-content: center; 46 | -webkit-box-align: center; 47 | -ms-flex-align: center; 48 | align-items: center; 49 | } 50 | 51 | body 52 | .sixth-container 53 | .content-container 54 | .main-content 55 | .text-container 56 | p { 57 | font-family: "Gilroy-Bold", sans-serif; 58 | margin: 10px 0; 59 | font-size: 20px; 60 | } 61 | 62 | body 63 | .sixth-container 64 | .content-container 65 | .main-content 66 | .text-container 67 | .whole-links-container { 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | gap: 30px; 72 | margin-top: 30px; 73 | } 74 | 75 | @media screen and (max-width: 540px) { 76 | body 77 | .sixth-container 78 | .content-container 79 | .main-content 80 | .text-container 81 | .whole-links-container { 82 | -webkit-box-orient: vertical; 83 | -webkit-box-direction: normal; 84 | -ms-flex-direction: column; 85 | flex-direction: column; 86 | gap: 20px; 87 | margin-top: 15px; 88 | } 89 | } 90 | 91 | body 92 | .sixth-container 93 | .content-container 94 | .main-content 95 | .text-container 96 | .whole-links-container 97 | .links-container { 98 | padding: 30px; 99 | background-color: white; 100 | border-radius: 10px; 101 | min-width: 210px; 102 | display: -webkit-box; 103 | display: -ms-flexbox; 104 | display: flex; 105 | -webkit-box-align: center; 106 | -ms-flex-align: center; 107 | align-items: center; 108 | -webkit-box-pack: center; 109 | -ms-flex-pack: center; 110 | justify-content: center; 111 | -webkit-box-orient: vertical; 112 | -webkit-box-direction: normal; 113 | -ms-flex-direction: column; 114 | flex-direction: column; 115 | } 116 | 117 | body 118 | .sixth-container 119 | .content-container 120 | .main-content 121 | .text-container 122 | .whole-links-container 123 | .links-container 124 | img { 125 | height: 45px; 126 | } 127 | 128 | body 129 | .sixth-container 130 | .content-container 131 | .main-content 132 | .text-container 133 | .last-social-links { 134 | display: -webkit-box; 135 | display: -ms-flexbox; 136 | display: flex; 137 | -webkit-box-align: center; 138 | -ms-flex-align: center; 139 | align-items: center; 140 | -webkit-box-pack: center; 141 | -ms-flex-pack: center; 142 | justify-content: center; 143 | } 144 | 145 | body 146 | .sixth-container 147 | .content-container 148 | .main-content 149 | .text-container 150 | .last-social-links 151 | a { 152 | text-decoration: none; 153 | } 154 | 155 | body 156 | .sixth-container 157 | .content-container 158 | .main-content 159 | .text-container 160 | .last-social-links 161 | img { 162 | height: 25px; 163 | width: 25px; 164 | margin: 0 15px 0 10px; 165 | } 166 | -------------------------------------------------------------------------------- /src/components/homepageContainers/thirdContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ThirdImage from "../../../assets/BrandingAssets-main/Graphics/Third.png"; 3 | const ThirdContainer = (props) => { 4 | return ( 5 |
11 |
12 |
13 |
14 | Image 15 |
16 |
17 |
18 |

19 | Minimize liquidations
20 | with usage of AI. 21 |

22 |
23 |
24 |

25 | The Sirio team has worked on developing a 26 | permissionless and arbitrary Machine Learning 27 | algorithm. We have gathered data on millions of loans 28 | and considered over 20 features related to market 29 | conditions, liquidity, volatility, and much more, 30 | training the model with any crucial condition. Its 31 | output is the probability that a given loan will be 32 | liquidated, warning the user and making them aware of 33 | the risk associated with their loan before it is made. 34 |

35 | 36 | 37 | 38 |
39 |
40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default ThirdContainer; 47 | -------------------------------------------------------------------------------- /src/components/homepageFooter/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { NavLink } from "react-router-dom"; 4 | import Twitter from "../../assets/BrandingAssets-main/Icons/twitter_white.svg"; 5 | import Telegram from "../../assets/BrandingAssets-main/Icons/telegram_white.svg"; 6 | import Discord from "../../assets/BrandingAssets-main/Icons/discord_white.svg"; 7 | import Github from "../../assets/BrandingAssets-main/Icons/github_white.svg"; 8 | import LogoWhite from "../../assets/BrandingAssets-main/Brand/LogoWhite.svg"; 9 | import LinkedIcon from "../LinkedIcon"; 10 | 11 | const HomePageFooter = (props) => { 12 | return ( 13 |
14 |
15 |
16 |
17 | Sirio 18 |
19 | 24 | 25 | 30 | 35 |
36 |
37 |
38 |
39 |

Useful Links

40 | App 41 | Documentation 42 |
43 |
44 |

Brand Links

45 | Brand Assets 46 |
47 |
48 |
49 |
50 | Developed with ❤️ by 51 | 52 | Astrid Network 53 | 54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | export default HomePageFooter; 61 | -------------------------------------------------------------------------------- /src/components/homepageFooter/style.css: -------------------------------------------------------------------------------- 1 | body .sixth-container .footer-container { 2 | margin-top: 60px; 3 | width: 100%; 4 | background-color: #3251bf; 5 | opacity: 1; 6 | } 7 | 8 | body .sixth-container .footer-container .footer-content { 9 | max-width: 1000px; 10 | margin: auto; 11 | color: white; 12 | padding-top: 40px; 13 | } 14 | 15 | body 16 | .sixth-container 17 | .footer-container 18 | .footer-content 19 | .footer-social { 20 | margin-top: 20px; 21 | } 22 | 23 | body 24 | .sixth-container 25 | .footer-container 26 | .footer-content 27 | .footer-social 28 | img { 29 | height: 24px; 30 | width: 24px; 31 | margin-right: 15px; 32 | } 33 | 34 | body .sixth-container .footer-container .footer-content .footer-text { 35 | display: -webkit-box; 36 | display: -ms-flexbox; 37 | display: flex; 38 | -webkit-box-align: start; 39 | -ms-flex-align: start; 40 | align-items: flex-start; 41 | -webkit-box-pack: justify; 42 | -ms-flex-pack: justify; 43 | justify-content: space-between; 44 | gap: 50px; 45 | padding: 20px; 46 | } 47 | 48 | @media screen and (max-width: 540px) { 49 | body 50 | .sixth-container 51 | .footer-container 52 | .footer-content 53 | .footer-text { 54 | -webkit-box-orient: vertical; 55 | -webkit-box-direction: normal; 56 | -ms-flex-direction: column; 57 | flex-direction: column; 58 | } 59 | } 60 | 61 | body 62 | .sixth-container 63 | .footer-container 64 | .footer-content 65 | .footer-links { 66 | display: -webkit-box; 67 | display: -ms-flexbox; 68 | display: flex; 69 | -webkit-box-orient: horizontal; 70 | -webkit-box-direction: normal; 71 | -ms-flex-direction: row; 72 | flex-direction: row; 73 | margin-bottom: 20px; 74 | gap: 60px; 75 | } 76 | 77 | body 78 | .sixth-container 79 | .footer-container 80 | .footer-content 81 | .footer-links 82 | h4 { 83 | margin-bottom: 20px; 84 | color: #e8e8e8; 85 | } 86 | 87 | body 88 | .sixth-container 89 | .footer-container 90 | .footer-content 91 | .footer-links 92 | a { 93 | display: block; 94 | margin-bottom: 10px; 95 | } 96 | 97 | body 98 | .sixth-container 99 | .footer-container 100 | .footer-content 101 | .text-container { 102 | margin-top: 10px; 103 | padding: 30px 0; 104 | border-top: 1px solid white; 105 | text-align: center; 106 | } 107 | 108 | body .sixth-container .footer-container .footer-content img { 109 | width: 120px; 110 | } 111 | 112 | body .sixth-container .footer-container .footer-content a { 113 | color: white; 114 | } 115 | -------------------------------------------------------------------------------- /src/components/marketIndividualStats/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | 4 | const MarketIndividualStats = (props) => { 5 | return ( 6 |
7 |

{props.header}

8 |
9 |

{props.amount}

10 |

Top 3 Markets

11 | {props.markets.map((el) => { 12 | return ( 13 |
14 |
15 |

{el.name}

16 |

{el.per}%

17 |
18 |
24 |
25 | ); 26 | })} 27 |
28 |
29 | ); 30 | }; 31 | 32 | export default MarketIndividualStats; 33 | -------------------------------------------------------------------------------- /src/components/marketIndividualStats/style.css: -------------------------------------------------------------------------------- 1 | .global-stats-container .market-stats { 2 | width: 100%; 3 | border-radius: 10px; 4 | } 5 | .global-stats-container .market-stats .markets-info-container { 6 | padding: 0 40px 30px; 7 | background-color: white; 8 | border-bottom-right-radius: 10px; 9 | border-bottom-left-radius: 10px; 10 | } 11 | .global-stats-container .market-stats h1 { 12 | padding-left: 40px; 13 | padding-bottom: 10px; 14 | padding-top: 20px; 15 | margin-bottom: 1px; 16 | font-size: 22px; 17 | background-color: white; 18 | border-top-right-radius: 10px; 19 | border-top-left-radius: 10px; 20 | } 21 | .global-stats-container .market-stats h3 { 22 | font-size: 24px; 23 | padding-top: 30px; 24 | } 25 | .global-stats-container .market-stats .markets-info-container .light { 26 | font-size: 14px; 27 | color: gray; 28 | } 29 | .market-stats .topMarketsInfo { 30 | display: flex; 31 | justify-content: space-between; 32 | margin-top: 20px; 33 | } 34 | .market-stats .marketsLine { 35 | margin-top: 10px; 36 | width: 100%; 37 | height: 4px; 38 | } 39 | -------------------------------------------------------------------------------- /src/components/marketStats/index.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import MarketIndividualStats from "../marketIndividualStats"; 3 | import "./style.css"; 4 | 5 | const MarketStats = () => { 6 | const [supplyAmt, setSupplyAmt] = useState("$4.97M"); 7 | const [borrowAmt, setBorrowAmt] = useState("$1.81M"); 8 | const [borrowMarkets, setBorrowMarkets] = useState([ 9 | { name: "GLP", per: 40.63 }, 10 | { name: "WBTC", per: 17.87 }, 11 | { name: "USDC.E", per: 13.71 }, 12 | ]); 13 | const [supplyMarkets, setSupplyMarkets] = useState([ 14 | { name: "USDC.E", per: 35.58 }, 15 | { name: "WBTC", per: 90.87 }, 16 | { name: "WETH", per: 31.71 }, 17 | ]); 18 | return ( 19 | <> 20 |
21 | 26 | 31 |
32 | 33 | ); 34 | }; 35 | 36 | export default MarketStats; 37 | -------------------------------------------------------------------------------- /src/components/marketStats/style.css: -------------------------------------------------------------------------------- 1 | .global-stats-container { 2 | margin-top: 50px; 3 | width: 100%; 4 | display: flex; 5 | gap: 30px; 6 | flex-direction: row; 7 | } 8 | @media (max-width: 600px) { 9 | .global-stats-container { 10 | flex-direction: column; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/marketscontainer/AllMarketListItem.jsx: -------------------------------------------------------------------------------- 1 | import MinItem from "./ListItemWithMin"; 2 | 3 | export default function MarketListItem({ 4 | title, 5 | img, 6 | supply, 7 | supplyApy, 8 | totalBorrow, 9 | supplyMin, 10 | supplyApyMIn, 11 | totalBorrowMin, 12 | borrowApy, 13 | }) { 14 | return ( 15 | <> 16 |
24 | 25 | 26 | {title} 27 | 28 | 29 | 30 | 31 | {borrowApy} 32 |
33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/marketscontainer/ListItemWithMin.jsx: -------------------------------------------------------------------------------- 1 | import "./style.css"; 2 | 3 | export default function MinItem({ max, min }) { 4 | return ( 5 |
6 | {max} 7 | {min} 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/marketscontainer/index.jsx: -------------------------------------------------------------------------------- 1 | import MarketStatusContainer from "../MarketStatusContainer/MarketStatusContainer"; 2 | import MarketStats from "../marketStats"; 3 | import AllMarketListItem from "./AllMarketListItem"; 4 | import SirioImage from "../../assets/BrandingAssets-main/Brand/Icon.png"; 5 | 6 | const MarketsContainer = () => { 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 | 14 | 25 | 36 | 37 |
38 |
39 |
40 |
41 | ); 42 | }; 43 | 44 | export default MarketsContainer; 45 | -------------------------------------------------------------------------------- /src/components/marketscontainer/style.css: -------------------------------------------------------------------------------- 1 | body .markets-container .markets-inner-container { 2 | width: 100%; 3 | max-width: 1100px; 4 | margin: auto; 5 | } 6 | 7 | body .markets-container .markets-inner-container h2 { 8 | font-size: 40px; 9 | font-family: "Gilroy-SemiBold", sans-serif; 10 | font-weight: 100; 11 | } 12 | 13 | .markets-small { 14 | display: flex; 15 | width: 100%; 16 | flex-direction: column; 17 | flex-basis: 25%; 18 | align-items: center; 19 | } 20 | .markets-small .small-text { 21 | margin-top: 8px; 22 | font-size: 12px; 23 | padding: 4px; 24 | width: max-content; 25 | background-color: #3251bf; 26 | color: white; 27 | } 28 | .markets-inner-container .table-data { 29 | margin-top: 10px; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/sidebar/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./sidebar.css"; 3 | 4 | const Sidebar = (props) => { 5 | return ( 6 | 123 | ); 124 | }; 125 | 126 | export default Sidebar; 127 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.css: -------------------------------------------------------------------------------- 1 | body .sidebar-container { 2 | background-color: #3251bf; 3 | padding: 30px 50px 50px 50px; 4 | position: relative; 5 | position: absolute; 6 | left: 0; 7 | right: 0; 8 | top: 0; 9 | bottom: 0; 10 | display: none; 11 | overflow: hidden; 12 | z-index: 100; 13 | padding-top: 60px; 14 | } 15 | 16 | body .sidebar-container.side-bar-show { 17 | -webkit-animation: slide-right 0.5s ease-in-out forwards; 18 | animation: slide-right 0.5s ease-in-out forwards; 19 | } 20 | 21 | body .sidebar-container.side-bar-hide { 22 | -webkit-animation: sidebar-slide-left 0.5s ease-in-out forwards; 23 | animation: sidebar-slide-left 0.5s ease-in-out forwards; 24 | } 25 | 26 | @-webkit-keyframes slide-right { 27 | from { 28 | -webkit-transform: translateX(-100%); 29 | transform: translateX(-100%); 30 | } 31 | to { 32 | -webkit-transform: translateX(0%); 33 | transform: translateX(0%); 34 | } 35 | } 36 | 37 | @keyframes slide-right { 38 | from { 39 | -webkit-transform: translateX(-100%); 40 | transform: translateX(-100%); 41 | } 42 | to { 43 | -webkit-transform: translateX(0%); 44 | transform: translateX(0%); 45 | } 46 | } 47 | 48 | @-webkit-keyframes sidebar-slide-left { 49 | from { 50 | -webkit-transform: translateX(0%); 51 | transform: translateX(0%); 52 | } 53 | to { 54 | -webkit-transform: translateX(-100%); 55 | transform: translateX(-100%); 56 | } 57 | } 58 | 59 | @keyframes sidebar-slide-left { 60 | from { 61 | -webkit-transform: translateX(0%); 62 | transform: translateX(0%); 63 | } 64 | to { 65 | -webkit-transform: translateX(-100%); 66 | transform: translateX(-100%); 67 | } 68 | } 69 | 70 | body .sidebar-container ul { 71 | list-style: none; 72 | color: white; 73 | margin-top: 40px; 74 | } 75 | 76 | body .sidebar-container ul li { 77 | margin-bottom: 20px; 78 | } 79 | 80 | body .sidebar-container ul li a { 81 | color: white; 82 | text-decoration: none; 83 | } 84 | 85 | body .sidebar-container .logo img { 86 | width: 125px; 87 | } 88 | 89 | body .sidebar-container .close { 90 | position: absolute; 91 | right: 10px; 92 | top: 30px; 93 | padding: 5px 10px; 94 | color: white; 95 | } 96 | 97 | body .sidebar-container .sidebar-social { 98 | width: -webkit-max-content; 99 | width: -moz-max-content; 100 | width: max-content; 101 | background-color: #fff; 102 | padding: 10px; 103 | border-radius: 10px; 104 | } 105 | 106 | body .sidebar-container .sidebar-social a { 107 | text-decoration: none; 108 | } 109 | 110 | body .sidebar-container .sidebar-social svg { 111 | height: 30px; 112 | fill: #3251bf; 113 | } 114 | -------------------------------------------------------------------------------- /src/config/constants.jsx: -------------------------------------------------------------------------------- 1 | export const METAMASK_GAS_LIMIT_ASSOCIATE=800_000; 2 | export const METAMASK_GAS_LIMIT_TRANSFER_FT=50_000; 3 | export const METAMASK_GAS_LIMIT_TRANSFER_NFT=100_000; 4 | -------------------------------------------------------------------------------- /src/config/index.jsx: -------------------------------------------------------------------------------- 1 | import { networkConfig } from "./networks"; 2 | import { AppConfig } from "./type"; 3 | import * as constants from "./constants.jsx"; 4 | 5 | export * from "./type"; 6 | 7 | export const appConfig = { 8 | networks: networkConfig, 9 | constants: constants, 10 | }; 11 | -------------------------------------------------------------------------------- /src/config/networks.jsx: -------------------------------------------------------------------------------- 1 | import { NetworkConfigs } from "./type"; 2 | 3 | export const networkConfig = { 4 | testnet: { 5 | network: "testnet", 6 | jsonRpcUrl: "https://testnet.hashio.io/api", // check out the readme for alternative RPC Relay urls 7 | mirrorNodeUrl: "https://testnet.mirrornode.hedera.com", 8 | chainId: "0x128", 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/config/type.jsx: -------------------------------------------------------------------------------- 1 | export const NetworkName = "testnet"; 2 | export const ChainId = "0x128"; 3 | export const NetworkConfig = { 4 | network: NetworkName, 5 | jsonRpcUrl: "", 6 | mirrorNodeUrl: "", 7 | chainId: ChainId, 8 | }; 9 | 10 | // purpose of this file is to define the type of the config object 11 | export const NetworkConfigs = { 12 | [NetworkName]: { 13 | network: NetworkName, 14 | jsonRpcUrl: "", 15 | mirrorNodeUrl: "", 16 | chainId: ChainId, 17 | }, 18 | }; 19 | 20 | export const AppConfig = { 21 | networks: NetworkConfigs, 22 | }; 23 | -------------------------------------------------------------------------------- /src/contexts/BladeContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | 3 | const defaultValue = { 4 | accountId: "", 5 | setAccountId: (newValue) => {}, 6 | isConnected: false, 7 | setIsConnected: (newValue) => {}, 8 | }; 9 | 10 | export const BladeContext = createContext(defaultValue); 11 | 12 | export const BladeContextProvider = (props) => { 13 | const [accountId, setAccountId] = useState(defaultValue.accountId); 14 | const [isConnected, setIsConnected] = useState(defaultValue.isConnected); 15 | return ( 16 | 24 | {props.children} 25 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /src/contexts/HashconnectContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | 3 | const defaultValue = { 4 | accountId: "", 5 | setAccountId: (newValue) => {}, 6 | isConnected: false, 7 | setIsConnected: (newValue) => {}, 8 | }; 9 | 10 | export const HashconnectContext = createContext(defaultValue); 11 | 12 | export const HashconnectContextProvider = (props) => { 13 | const [accountId, setAccountId] = useState(defaultValue.accountId); 14 | const [isConnected, setIsConnected] = useState(defaultValue.isConnected); 15 | 16 | return ( 17 | 25 | {props.children} 26 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/contexts/MetamaskContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | 3 | const defaultValue = { 4 | metamaskAccountAddress: "", 5 | setMetamaskAccountAddress: (newValue) => {}, 6 | }; 7 | 8 | export const MetamaskContext = createContext(defaultValue); 9 | 10 | export const MetamaskContextProvider = (props) => { 11 | const [metamaskAccountAddress, setMetamaskAccountAddress] = useState(""); 12 | 13 | return ( 14 | 20 | {props.children} 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ORCID777/Hedera_integration/77e99ffee07b2fbe36949ea623ae8894751d8ad6/src/index.css -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | 5 | import "./index.css"; 6 | 7 | ReactDOM.createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /src/pages/AppRoot.jsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom"; 2 | import Header from "../components/Header/Header"; 3 | import Footer from "../components/Footer/Footer"; 4 | 5 | export default function AppRootLayout() { 6 | window.onscroll = null; 7 | 8 | return ( 9 | <> 10 |
11 |
12 | 13 |
14 |