├── .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 |
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 |
59 | Claim
60 |
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 |
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 |
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 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/MarketStatus/MarketStatus.jsx:
--------------------------------------------------------------------------------
1 | import "./marketStatus.css";
2 |
3 | export default function MarketStatus(props) {
4 | return (
5 |
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 |
15 | Borrow
16 |
17 |
18 |
19 | >
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/Modal/BorrowRepay.jsx:
--------------------------------------------------------------------------------
1 | export default function RepayBox({ approveHanlder, repayHanlder }) {
2 | return (
3 | <>
4 |
5 |
6 |
7 | 1. Approve
8 |
9 |
10 | 2. Repay
11 |
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 |
27 |
28 |
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 | Borrow
54 | Repay
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 |
42 |
43 | Metamask
44 |
45 |
46 |
47 | HashPack
48 |
49 |
50 |
51 | Blade
52 |
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 && 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 |
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 | Continue
37 |
38 | Go Back
39 |
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 | Supply
158 | Withdraw
159 |
160 |
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 |
19 | 1. Approve
20 |
21 |
22 | 2. Supply
23 |
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 | Withdraw
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 |
25 |
26 |
27 |
28 |
29 |
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 |
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 |
92 | Launch dApp
93 |
94 |
95 |
96 |
97 |
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 |
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 |
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 |
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 | Whitepaper
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 |
18 |
19 |
24 |
25 |
30 |
35 |
36 |
37 |
48 |
49 |
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 |
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 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
40 |
122 |
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 |
15 | >
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/pages/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import BalanceStatus from "../components/BalanceStatus/BalanceStatus";
2 | import CenterNetStatus from "../components/CenterNetStatus/CenterNetStatus";
3 | import ModalBorrow from "../components/Modal/ModalBorrow";
4 | import ModalConnectWallet from "../components/Modal/ModalConnectWallet";
5 | import ModalRisk from "../components/Modal/ModalRisk";
6 | import ModalSupply from "../components/Modal/ModalSupply";
7 | import DashboardMarkets from "../components/DashBoardMarkets/DashboardMarkets";
8 |
9 | function Dashboard() {
10 | return (
11 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | export default Dashboard;
32 |
--------------------------------------------------------------------------------
/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
1 | import Sidebar from "../components/sidebar";
2 | import { useState } from "react";
3 | import HomePageMain from "../components/homePageMain";
4 |
5 | export default function HomePage() {
6 | const [sidebarStatus, setSidebarStatus] = useState(null);
7 | const sidebarSwitch = () => {
8 | if (sidebarStatus === null || sidebarStatus === false) {
9 | document.body.style.overflow = "hidden";
10 | setSidebarStatus(true);
11 | } else {
12 | document.body.style.overflow = "auto";
13 | setSidebarStatus(false);
14 | }
15 | };
16 |
17 | return (
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/HomeRoot.jsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 |
3 | export default function HomeRootLayout() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/Markets.jsx:
--------------------------------------------------------------------------------
1 | import MarketsContainer from "../components/marketscontainer";
2 | import ModalConnectWallet from "../components/Modal/ModalConnectWallet";
3 |
4 | export default function Markets() {
5 | return (
6 | <>
7 |
8 |
9 | >
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/pages/Vote.jsx:
--------------------------------------------------------------------------------
1 | export default function Vote() {
2 | return This is the Vote Page ;
3 | }
4 |
--------------------------------------------------------------------------------
/src/services/wallets/AllWalletsProvider.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BladeContextProvider } from "../../contexts/BladeContext";
3 | import { HashconnectContextProvider } from "../../contexts/HashconnectContext";
4 | import { MetamaskContextProvider } from "../../contexts/MetamaskContext";
5 | import { BladeClient } from "./blade/bladeClient";
6 | import { HashConnectClient } from "./hashconnect/hashconnectClient";
7 | import { MetaMaskClient } from "./metamask/metamaskClient";
8 |
9 | export const AllWalletsProvider = (props) => {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 | {props.children}
18 |
19 |
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/services/wallets/blade/bladeClient.jsx:
--------------------------------------------------------------------------------
1 | import { BladeConnector, HederaNetwork } from "@bladelabs/blade-web3.js";
2 | import {
3 | AccountId,
4 | ContractExecuteTransaction,
5 | ContractId,
6 | TokenAssociateTransaction,
7 | TokenId,
8 | TransferTransaction,
9 | } from "@hashgraph/sdk";
10 | import EventEmitter from "events";
11 | import { useCallback, useContext, useEffect, useState } from "react";
12 | import { BladeContext } from "../../../contexts/BladeContext";
13 |
14 | const env = HederaNetwork.Testnet;
15 | const bladeLocalStorage = "usedBladeForWalletPairing";
16 |
17 | const appMetadata = {
18 | network: env,
19 | dAppCode: "hederaCraTemplate",
20 | };
21 | const bladeConnector = new BladeConnector();
22 |
23 | // We need an event emitter to trigger syncWithBladeSession and syncWithBladeDisconnected
24 | // from outside of the BladeClient component.
25 | //
26 | // The BladeWallet.disconnect() method fires the syncDisconnect event, which triggers
27 | // the syncWithBladeDisconnected callback in the BladeClient component.
28 | //
29 | // The connectToBladeWallet() function fires the syncSession event, which triggers
30 | // the syncWithBladeSession callback in the BladeClient component.
31 | const syncWithBladeEvent = new EventEmitter();
32 |
33 | class BladeWallet {
34 | async transferHBAR(toAddress, amount) {
35 | const bladeSigner = bladeConnector.getSigner();
36 | if (!bladeSigner) {
37 | return null;
38 | }
39 |
40 | const transferHBARTransaction = await new TransferTransaction()
41 | .addHbarTransfer(bladeSigner.getAccountId().toString(), -amount)
42 | .addHbarTransfer(toAddress, amount)
43 | .freezeWithSigner(bladeSigner);
44 |
45 | const transactionId = await transferHBARTransaction
46 | .executeWithSigner(bladeSigner)
47 | .then((txResult) => txResult.transactionId)
48 | .catch((error) => {
49 | console.log(error.message ? error.message : error);
50 | return null;
51 | });
52 | return transactionId;
53 | }
54 |
55 | async transferFungibleToken(toAddress, tokenId, amount) {
56 | const bladeSigner = bladeConnector.getSigner();
57 | if (!bladeSigner) {
58 | return null;
59 | }
60 |
61 | const transferTokenTransaction = await new TransferTransaction()
62 | .addTokenTransfer(tokenId, bladeSigner.getAccountId().toString(), -amount)
63 | .addTokenTransfer(tokenId, toAddress, amount)
64 | .freezeWithSigner(bladeSigner);
65 |
66 | const transactionId = await transferTokenTransaction
67 | .executeWithSigner(bladeSigner)
68 | .then((txResult) => txResult.transactionId)
69 | .catch((error) => {
70 | console.log(error.message ? error.message : error);
71 | return null;
72 | });
73 | return transactionId;
74 | }
75 |
76 | async transferNonFungibleToken(toAddress, tokenId, serialNumber) {
77 | const bladeSigner = bladeConnector.getSigner();
78 | if (!bladeSigner) {
79 | return null;
80 | }
81 |
82 | const transferTokenTransaction = await new TransferTransaction()
83 | .addNftTransfer(
84 | tokenId,
85 | serialNumber,
86 | bladeSigner.getAccountId().toString(),
87 | toAddress
88 | )
89 | .freezeWithSigner(bladeSigner);
90 |
91 | const transactionId = await transferTokenTransaction
92 | .executeWithSigner(bladeSigner)
93 | .then((txResult) => txResult.transactionId)
94 | .catch((error) => {
95 | console.log(error.message ? error.message : error);
96 | return null;
97 | });
98 | return transactionId;
99 | }
100 |
101 | async associateToken(tokenId) {
102 | const bladeSigner = bladeConnector.getSigner();
103 | if (!bladeSigner) {
104 | return null;
105 | }
106 |
107 | const associateTokenTransaction = await new TokenAssociateTransaction()
108 | .setAccountId(bladeSigner.getAccountId().toString())
109 | .setTokenIds([tokenId])
110 | .freezeWithSigner(bladeSigner);
111 |
112 | const transactionId = await associateTokenTransaction
113 | .executeWithSigner(bladeSigner)
114 | .then((txResult) => txResult.transactionId)
115 | .catch((error) => {
116 | console.log(error.message ? error.message : error);
117 | return null;
118 | });
119 | return transactionId;
120 | }
121 |
122 | // Purpose: build contract execute transaction and send to hashconnect for signing and execution
123 | // Returns: Promise
124 | async executeContractFunction(
125 | contractId,
126 | functionName,
127 | functionParameters,
128 | gasLimit
129 | ) {
130 | const bladeSigner = bladeConnector.getSigner();
131 | if (!bladeSigner) {
132 | return null;
133 | }
134 |
135 | // Grab the topic and account to sign from the last pairing event
136 | const tx = new ContractExecuteTransaction()
137 | .setContractId(contractId)
138 | .setGas(gasLimit)
139 | .setFunction(functionName, functionParameters.buildHAPIParams());
140 |
141 | const txFrozen = await tx.freezeWithSigner(bladeSigner);
142 | const transactionId = await txFrozen
143 | .executeWithSigner(bladeSigner)
144 | .then((txResult) => txResult.transactionId)
145 | .catch((error) => {
146 | console.log(error.message ? error.message : error);
147 | return null;
148 | });
149 |
150 | // in order to read the contract call results, you will need to query the contract call's results form a mirror node using the transaction id
151 | // after getting the contract call results, use ethers and abi.decode to decode the call_result
152 | return transactionId;
153 | }
154 | disconnect() {
155 | syncWithBladeEvent.emit("syncDisconnect");
156 | localStorage.removeItem(bladeLocalStorage);
157 | }
158 | }
159 | export const bladeWallet = new BladeWallet();
160 |
161 | export const connectToBladeWallet = async (skipKillSession = false) => {
162 | try {
163 | if (!skipKillSession) {
164 | await bladeConnector.killSession(); // kill any existing session to allow pairing a new account
165 | }
166 | await bladeConnector.createSession(appMetadata);
167 | syncWithBladeEvent.emit("syncSession");
168 | localStorage.setItem(bladeLocalStorage, "true");
169 | } catch (error) {
170 | console.log(error);
171 | }
172 | };
173 |
174 | export const BladeClient = () => {
175 | const [usedBlade, setUsedBlade] = useState(false);
176 |
177 | // use the BladeContext to keep track of the hashpack account and connection
178 | const { setAccountId, setIsConnected } = useContext(BladeContext);
179 |
180 | // sync with blade state with the context so the context is aware of connected account id
181 | const syncWithBladeSession = useCallback(() => {
182 | try {
183 | const bladeSigner = bladeConnector.getSigner();
184 | if (bladeSigner) {
185 | const accountId = bladeSigner.getAccountId();
186 | setAccountId(accountId.toString());
187 | setIsConnected(true);
188 | } else {
189 | setAccountId("");
190 | setIsConnected(false);
191 | }
192 | } catch (error) {
193 | console.log(error);
194 | setAccountId("");
195 | setIsConnected(false);
196 | }
197 | }, [setIsConnected, setAccountId]);
198 | const syncWithBladeDisconnected = useCallback(() => {
199 | setAccountId("");
200 | setIsConnected(false);
201 | }, [setIsConnected, setAccountId]);
202 |
203 | // sync the blade state with the context
204 | useEffect(() => {
205 | const sessionCallback = () => {
206 | syncWithBladeSession();
207 | };
208 | const disconnectCallback = () => {
209 | syncWithBladeDisconnected();
210 | };
211 |
212 | if (usedBlade) {
213 | connectToBladeWallet(true);
214 | }
215 |
216 | syncWithBladeEvent.on("syncSession", sessionCallback);
217 | syncWithBladeEvent.on("syncDisconnect", disconnectCallback);
218 |
219 | return () => {
220 | syncWithBladeEvent.off("syncSession", sessionCallback);
221 | syncWithBladeEvent.off("syncDisconnect", disconnectCallback);
222 | };
223 | }, [syncWithBladeSession, syncWithBladeDisconnected, usedBlade]);
224 |
225 | useEffect(() => {
226 | setUsedBlade(localStorage.getItem(bladeLocalStorage) === "true");
227 | }, []);
228 |
229 | return null;
230 | };
231 |
--------------------------------------------------------------------------------
/src/services/wallets/contractFunctionParameterBuilder.jsx:
--------------------------------------------------------------------------------
1 | import { ContractFunctionParameters } from "@hashgraph/sdk";
2 |
3 | export class ContractFunctionParameterBuilder {
4 | constructor() {
5 | this.params = [];
6 | }
7 |
8 | addParam(param) {
9 | this.params.push(param);
10 | return this;
11 | }
12 |
13 | buildAbiFunctionParams() {
14 | return this.params.map((param) => `${param.type} ${param.name}`).join(", ");
15 | }
16 |
17 | buildEthersParams() {
18 | return this.params.map((param) => param.value.toString());
19 | }
20 |
21 | buildHAPIParams() {
22 | const contractFunctionParams = new ContractFunctionParameters();
23 | for (const param of this.params) {
24 | const alphanumericIdentifier = /^[a-zA-Z][a-zA-Z0-9]*$/;
25 | if (!param.type.match(alphanumericIdentifier)) {
26 | throw new Error(
27 | `Invalid type: ${param.type}. Type must only contain alphanumeric characters.`
28 | );
29 | }
30 | const type = param.type.charAt(0).toUpperCase() + param.type.slice(1);
31 | const functionName = `add${type}`;
32 | if (functionName in contractFunctionParams) {
33 | contractFunctionParams[functionName](param.value);
34 | } else {
35 | throw new Error(
36 | `Invalid type: ${param.type}. Could not find function ${functionName} in ContractFunctionParameters class.`
37 | );
38 | }
39 | }
40 |
41 | return contractFunctionParams;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/services/wallets/hashconnect/hashconnectClient.jsx:
--------------------------------------------------------------------------------
1 | import { HashConnect } from "hashconnect";
2 | import { HashconnectContext } from "../../../contexts/HashconnectContext";
3 | import { useCallback, useContext, useEffect } from "react";
4 |
5 | import {
6 | AccountId,
7 | ContractExecuteTransaction,
8 | ContractId,
9 | TokenAssociateTransaction,
10 | TokenId,
11 | TransferTransaction,
12 | } from "@hashgraph/sdk";
13 | import { appConfig } from "../../../config";
14 |
15 | const currentNetworkConfig = appConfig.networks.testnet;
16 | const hederaNetwork = currentNetworkConfig.network;
17 |
18 | export const hashConnect = new HashConnect();
19 |
20 | class HashConnectWallet {
21 | getSigner() {
22 | const pairingData =
23 | hashConnect.hcData.pairingData[hashConnect.hcData.pairingData.length - 1];
24 | const provider = hashConnect.getProvider(
25 | hederaNetwork,
26 | pairingData.topic,
27 | pairingData.accountIds[0]
28 | );
29 | return hashConnect.getSigner(provider);
30 | }
31 |
32 | async transferHBAR(toAddress, amount) {
33 | // Grab the topic and account to sign from the last pairing event
34 | const signer = this.getSigner();
35 |
36 | const transferHBARTransaction = await new TransferTransaction()
37 | .addHbarTransfer(signer.getAccountId(), -amount)
38 | .addHbarTransfer(toAddress, amount)
39 | .freezeWithSigner(signer);
40 |
41 | const txResult = await transferHBARTransaction.executeWithSigner(signer);
42 | return txResult.transactionId;
43 | }
44 |
45 | async transferFungibleToken(toAddress, tokenId, amount) {
46 | // Grab the topic and account to sign from the last pairing event
47 | const signer = this.getSigner();
48 |
49 | const transferTokenTransaction = await new TransferTransaction()
50 | .addTokenTransfer(tokenId, signer.getAccountId(), -amount)
51 | .addTokenTransfer(tokenId, toAddress, amount)
52 | .freezeWithSigner(signer);
53 |
54 | const txResult = await transferTokenTransaction.executeWithSigner(signer);
55 | return txResult.transactionId;
56 | }
57 |
58 | async transferNonFungibleToken(toAddress, tokenId, serialNumber) {
59 | // Grab the topic and account to sign from the last pairing event
60 | const signer = this.getSigner();
61 |
62 | const transferTokenTransaction = await new TransferTransaction()
63 | .addNftTransfer(tokenId, serialNumber, signer.getAccountId(), toAddress)
64 | .freezeWithSigner(signer);
65 |
66 | const txResult = await transferTokenTransaction.executeWithSigner(signer);
67 | return txResult.transactionId;
68 | }
69 |
70 | async associateToken(tokenId) {
71 | const signer = this.getSigner();
72 |
73 | const associateTokenTransaction = await new TokenAssociateTransaction()
74 | .setAccountId(signer.getAccountId())
75 | .setTokenIds([tokenId])
76 | .freezeWithSigner(signer);
77 |
78 | const txResult = await associateTokenTransaction.executeWithSigner(signer);
79 | return txResult.transactionId;
80 | }
81 |
82 | // Purpose: build contract execute transaction and send to hashconnect for signing and execution
83 | // Returns: Promise
84 | async executeContractFunction(
85 | contractId,
86 | functionName,
87 | functionParameters,
88 | gasLimit
89 | ) {
90 | // Grab the topic and account to sign from the last pairing event
91 | const pairingData =
92 | hashConnect.hcData.pairingData[hashConnect.hcData.pairingData.length - 1];
93 |
94 | const provider = hashConnect.getProvider(
95 | hederaNetwork,
96 | pairingData.topic,
97 | pairingData.accountIds[0]
98 | );
99 | const signer = hashConnect.getSigner(provider);
100 |
101 | const tx = new ContractExecuteTransaction()
102 | .setContractId(contractId)
103 | .setGas(gasLimit)
104 | .setFunction(functionName, functionParameters.buildHAPIParams());
105 |
106 | const txFrozen = await tx.freezeWithSigner(signer);
107 | await txFrozen.executeWithSigner(signer);
108 |
109 | // in order to read the contract call results, you will need to query the contract call's results form a mirror node using the transaction id
110 | // after getting the contract call results, use ethers and abi.decode to decode the call_result
111 | return txFrozen.transactionId;
112 | }
113 | disconnect() {
114 | const pairingData =
115 | hashConnect.hcData.pairingData[hashConnect.hcData.pairingData.length - 1];
116 | hashConnect.disconnect(pairingData.topic);
117 | }
118 | }
119 | export const hashConnectWallet = new HashConnectWallet();
120 |
121 | const getPairingInfo = () => {
122 | if (hashConnect.hcData.pairingData.length > 0) {
123 | return hashConnect.hcData.pairingData[
124 | hashConnect.hcData.pairingData.length - 1
125 | ];
126 | }
127 | };
128 |
129 | // set the necessary metadata for your app
130 | // call hashconnects init function which will return your pairing code & any previously connected pariaings
131 | // this will also start the pairing event listener
132 | const hashConnectInitPromise = new Promise(async (resolve) => {
133 | /* this metadata is used to display the app so the
134 | wallet can display what app is requesting access from the user
135 | */
136 | const appMetadata = {
137 | name: "SirioFi",
138 | description: "Sirio Finance",
139 | icon: window.location.origin + "/logo192.png",
140 | };
141 | const initResult = await hashConnect.init(appMetadata, hederaNetwork, true);
142 | resolve(initResult);
143 | });
144 |
145 | // this component will sync the hashconnect state with the context
146 | export const HashConnectClient = () => {
147 | // use the HashpackContext to keep track of the hashpack account and connection
148 | const { setAccountId, setIsConnected } = useContext(HashconnectContext);
149 |
150 | // sync the hashconnect state with the context
151 | const syncWithHashConnect = useCallback(() => {
152 | const accountId = getPairingInfo()?.accountIds[0];
153 | if (accountId) {
154 | setAccountId(accountId);
155 | setIsConnected(true);
156 | } else {
157 | setAccountId("");
158 | setIsConnected(false);
159 | }
160 | }, [setAccountId, setIsConnected]);
161 |
162 | useEffect(() => {
163 | // when the component renders, sync the hashconnect state with the context
164 | syncWithHashConnect();
165 | // when hashconnect is initialized, sync the hashconnect state with the context
166 | hashConnectInitPromise.then(() => {
167 | syncWithHashConnect();
168 | });
169 |
170 | // when pairing an account, sync the hashconnect state with the context
171 | hashConnect.pairingEvent.on(syncWithHashConnect);
172 |
173 | // when the connection status changes, sync the hashconnect state with the context
174 | hashConnect.connectionStatusChangeEvent.on(syncWithHashConnect);
175 |
176 | return () => {
177 | // remove the event listeners when the component unmounts
178 | hashConnect.pairingEvent.off(syncWithHashConnect);
179 | hashConnect.connectionStatusChangeEvent.off(syncWithHashConnect);
180 | };
181 | }, [syncWithHashConnect]);
182 | return null;
183 | };
184 |
--------------------------------------------------------------------------------
/src/services/wallets/metamask/metamaskClient.jsx:
--------------------------------------------------------------------------------
1 | import { ContractId, AccountId } from "@hashgraph/sdk";
2 | import { ethers } from "ethers";
3 | import { useContext, useEffect } from "react";
4 | import { appConfig } from "../../../config";
5 | import { MetamaskContext } from "../../../contexts/MetamaskContext";
6 | import { ContractFunctionParameterBuilder } from "../contractFunctionParameterBuilder";
7 |
8 | const currentNetworkConfig = appConfig.networks.testnet;
9 |
10 | export const switchToHederaNetwork = async (ethereum) => {
11 | try {
12 | await ethereum.request({
13 | method: "wallet_switchEthereumChain",
14 | params: [{ chainId: currentNetworkConfig.chainId }], // chainId must be in hexadecimal numbers
15 | });
16 | } catch (error) {
17 | if (error.code === 4902) {
18 | try {
19 | await ethereum.request({
20 | method: "wallet_addEthereumChain",
21 | params: [
22 | {
23 | chainName: `Hedera (${currentNetworkConfig.network})`,
24 | chainId: currentNetworkConfig.chainId,
25 | nativeCurrency: {
26 | name: "HBAR",
27 | symbol: "HBAR",
28 | decimals: 18,
29 | },
30 | rpcUrls: [currentNetworkConfig.jsonRpcUrl],
31 | },
32 | ],
33 | });
34 | } catch (addError) {
35 | console.error(addError);
36 | }
37 | }
38 | console.error(error);
39 | }
40 | };
41 |
42 | const { ethereum } = window;
43 | const getProvider = () => {
44 | if (!ethereum) {
45 | throw new Error("Metamask is not installed! Go install the extension!");
46 | }
47 |
48 | return new ethers.providers.Web3Provider(ethereum);
49 | };
50 |
51 | // returns a list of accounts
52 | // otherwise empty array
53 | export const connectToMetamask = async () => {
54 | const provider = getProvider();
55 |
56 | // keep track of accounts returned
57 | let accounts = [];
58 |
59 | try {
60 | await switchToHederaNetwork(ethereum);
61 | accounts = await provider.send("eth_requestAccounts", []);
62 | } catch (error) {
63 | if (error.code === 4001) {
64 | // EIP-1193 userRejectedRequest error
65 | console.warn("Please connect to Metamask.");
66 | } else {
67 | console.error(error);
68 | }
69 | }
70 |
71 | return accounts;
72 | };
73 |
74 | class MetaMaskWallet {
75 | convertAccountIdToSolidityAddress(accountId) {
76 | const accountIdString =
77 | accountId.evmAddress !== null
78 | ? accountId.evmAddress.toString()
79 | : accountId.toSolidityAddress();
80 |
81 | return `0x${accountIdString}`;
82 | }
83 |
84 | // Purpose: Transfer HBAR
85 | // Returns: Promise
86 | // Note: Use JSON RPC Relay to search by transaction hash
87 | async transferHBAR(toAddress, amount) {
88 | const provider = getProvider();
89 | const signer = await provider.getSigner();
90 | // build the transaction
91 | const tx = await signer.populateTransaction({
92 | to: this.convertAccountIdToSolidityAddress(toAddress),
93 | value: ethers.utils.parseEther(amount.toString()),
94 | });
95 | try {
96 | // send the transaction
97 | const { hash } = await signer.sendTransaction(tx);
98 | await provider.waitForTransaction(hash);
99 |
100 | return hash;
101 | } catch (error) {
102 | console.warn(error.message ? error.message : error);
103 | return null;
104 | }
105 | }
106 |
107 | async transferFungibleToken(toAddress, tokenId, amount) {
108 | const hash = await this.executeContractFunction(
109 | ContractId.fromString(tokenId.toString()),
110 | "transfer",
111 | new ContractFunctionParameterBuilder()
112 | .addParam({
113 | type: "address",
114 | name: "recipient",
115 | value: this.convertAccountIdToSolidityAddress(toAddress),
116 | })
117 | .addParam({
118 | type: "uint256",
119 | name: "amount",
120 | value: amount,
121 | }),
122 | appConfig.constants.METAMASK_GAS_LIMIT_TRANSFER_FT
123 | );
124 |
125 | return hash;
126 | }
127 |
128 | async transferNonFungibleToken(toAddress, tokenId, serialNumber) {
129 | const provider = getProvider();
130 | const addresses = await provider.listAccounts();
131 | const hash = await this.executeContractFunction(
132 | ContractId.fromString(tokenId.toString()),
133 | "transferFrom",
134 | new ContractFunctionParameterBuilder()
135 | .addParam({
136 | type: "address",
137 | name: "from",
138 | value: addresses[0],
139 | })
140 | .addParam({
141 | type: "address",
142 | name: "to",
143 | value: this.convertAccountIdToSolidityAddress(toAddress),
144 | })
145 | .addParam({
146 | type: "uint256",
147 | name: "nftId",
148 | value: serialNumber,
149 | }),
150 | appConfig.constants.METAMASK_GAS_LIMIT_TRANSFER_NFT
151 | );
152 |
153 | return hash;
154 | }
155 |
156 | async associateToken(tokenId) {
157 | // send the transaction
158 | // convert tokenId to contract id
159 | const hash = await this.executeContractFunction(
160 | ContractId.fromString(tokenId.toString()),
161 | "associate",
162 | new ContractFunctionParameterBuilder(),
163 | appConfig.constants.METAMASK_GAS_LIMIT_ASSOCIATE
164 | );
165 |
166 | return hash;
167 | }
168 |
169 | // Purpose: build contract execute transaction and send to hashconnect for signing and execution
170 | // Returns: Promise
171 | async executeContractFunction(
172 | contractId,
173 | functionName,
174 | functionParameters,
175 | gasLimit
176 | ) {
177 | const provider = getProvider();
178 | const signer = await provider.getSigner();
179 | const abi = [
180 | `function ${functionName}(${functionParameters.buildAbiFunctionParams()})`,
181 | ];
182 |
183 | // create contract instance for the contract id
184 | // to call the function, use contract[functionName](...functionParameters, ethersOverrides)
185 | const contract = new ethers.Contract(
186 | `0x${contractId.toSolidityAddress()}`,
187 | abi,
188 | signer
189 | );
190 | try {
191 | const txResult = await contract[functionName](
192 | ...functionParameters.buildEthersParams(),
193 | {
194 | gasLimit: gasLimit === -1 ? undefined : gasLimit,
195 | }
196 | );
197 | return txResult.hash;
198 | } catch (error) {
199 | console.warn(error.message ? error.message : error);
200 | return null;
201 | }
202 | }
203 |
204 | disconnect() {
205 | alert("Please disconnect using the Metamask extension.");
206 | }
207 | }
208 |
209 | export const metamaskWallet = new MetaMaskWallet();
210 |
211 | export const MetaMaskClient = () => {
212 | const { setMetamaskAccountAddress } = useContext(MetamaskContext);
213 | useEffect(() => {
214 | // set the account address if already connected
215 | try {
216 | const provider = getProvider();
217 | provider.listAccounts().then((signers) => {
218 | if (signers.length !== 0) {
219 | setMetamaskAccountAddress(signers[0]);
220 | } else {
221 | setMetamaskAccountAddress("");
222 | }
223 | });
224 |
225 | // listen for account changes and update the account address
226 | ethereum.on("accountsChanged", (accounts) => {
227 | if (accounts.length !== 0) {
228 | setMetamaskAccountAddress(accounts[0]);
229 | } else {
230 | setMetamaskAccountAddress("");
231 | }
232 | });
233 |
234 | // cleanup by removing listeners
235 | return () => {
236 | ethereum.removeAllListeners("accountsChanged");
237 | };
238 | } catch (error) {
239 | console.error(error.message ? error.message : error);
240 | }
241 | }, [setMetamaskAccountAddress]);
242 |
243 | return null;
244 | };
245 |
--------------------------------------------------------------------------------
/src/services/wallets/mirrorNodeClient.jsx:
--------------------------------------------------------------------------------
1 | export class MirrorNodeClient {
2 | url;
3 | constructor(networkConfig) {
4 | this.url = networkConfig.mirrorNodeUrl;
5 | }
6 |
7 | async getAccountInfo(accountId) {
8 | const accountInfo = await fetch(
9 | `${this.url}/api/v1/accounts/${accountId}`,
10 | { method: "GET" }
11 | );
12 | const accountInfoJson = await accountInfo.json();
13 | return accountInfoJson;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/services/wallets/useWalletInterface.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { BladeContext } from "../../contexts/BladeContext";
3 | import { HashconnectContext } from "../../contexts/HashconnectContext";
4 | import { MetamaskContext } from "../../contexts/MetamaskContext";
5 | import { bladeWallet } from "./blade/bladeClient";
6 | import { hashConnectWallet } from "./hashconnect/hashconnectClient";
7 | import { metamaskWallet } from "./metamask/metamaskClient";
8 |
9 | // Purpose: This hook is used to determine which wallet interface to use
10 | // Example: const { accountId, walletInterface } = useWalletInterface();
11 | // Returns: { accountId: string | null, walletInterface: WalletInterface | null }
12 | export const useWalletInterface = () => {
13 | const hashconnectCtx = useContext(HashconnectContext);
14 | const bladeCtx = useContext(BladeContext);
15 | const metamaskCtx = useContext(MetamaskContext);
16 |
17 | if (hashconnectCtx.accountId) {
18 | return {
19 | accountId: hashconnectCtx.accountId,
20 | walletInterface: hashConnectWallet,
21 | };
22 | } else if (bladeCtx.accountId) {
23 | return {
24 | accountId: bladeCtx.accountId,
25 | walletInterface: bladeWallet,
26 | };
27 | } else if (metamaskCtx.metamaskAccountAddress) {
28 | return {
29 | accountId: metamaskCtx.metamaskAccountAddress,
30 | walletInterface: metamaskWallet,
31 | };
32 | } else {
33 | return {
34 | accountId: null,
35 | walletInterface: null,
36 | };
37 | }
38 | };
39 |
--------------------------------------------------------------------------------
/src/services/wallets/walletInterface.jsx:
--------------------------------------------------------------------------------
1 | export const executeContractFunction = (
2 | contractId,
3 | functionName,
4 | functionParameters,
5 | gasLimit
6 | ) => {
7 | // Function implementation
8 | };
9 |
10 | export const disconnect = () => {
11 | // Function implementation
12 | };
13 |
14 | export const transferHBAR = (toAddress, amount) => {
15 | // Function implementation
16 | };
17 |
18 | export const transferFungibleToken = (toAddress, tokenId, amount) => {
19 | // Function implementation
20 | };
21 |
22 | export const transferNonFungibleToken = (toAddress, tokenId, serialNumber) => {
23 | // Function implementation
24 | };
25 |
26 | export const associateToken = (tokenId) => {
27 | // Function implementation
28 | };
29 |
--------------------------------------------------------------------------------
/src/util/HexToDecimal.jsx:
--------------------------------------------------------------------------------
1 | export const HexToDecimal = ({ hexValue }) => {
2 | return parseInt(hexValue, 16);
3 | };
4 |
--------------------------------------------------------------------------------
/src/util/TokenList.jsx:
--------------------------------------------------------------------------------
1 | export const AddressFromTokenList = (TokenName) => {
2 | switch (TokenName) {
3 | case "WBTC":
4 | return "0x000000000000000000000000000000000068017d";
5 | case "WETH":
6 | return "0x00000000000000000000000000000000006801b3";
7 | case "HBARX":
8 | return "0x000000000000000000000000000000000000e6a2";
9 | case "USDC":
10 | return "0x00000000000000000000000000000000006801ba";
11 | default:
12 | return null;
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/util/modalContext.jsx:
--------------------------------------------------------------------------------
1 | import { createContext, useEffect, useState } from "react";
2 | import { useWalletInterface } from "../services/wallets/useWalletInterface";
3 |
4 | const ModalContext = createContext({
5 | modal: "",
6 | title: "",
7 | accountId: "",
8 | showSupply: () => {},
9 | showBorrow: () => {},
10 | showRisk: () => {},
11 | showConnectWallet: () => {},
12 | hideModal: () => {},
13 | giveTitle: () => {},
14 | });
15 |
16 | export function ModalContextProvider({ children }) {
17 | const { accountId } = useWalletInterface();
18 |
19 | const [modal, setModal] = useState("");
20 | const [title, setTitle] = useState("");
21 |
22 | function giveTitle(title) {
23 | setTitle(title);
24 | }
25 |
26 | function showSupply() {
27 | setModal("supply");
28 | }
29 | function showBorrow() {
30 | setModal("borrow");
31 | }
32 | function showRisk() {
33 | setModal("risk");
34 | }
35 | function showConnectWallet() {
36 | setModal("wallet");
37 | }
38 | function hideModal() {
39 | setModal("");
40 | }
41 |
42 | const modalContext = {
43 | modal,
44 | title,
45 | accountId,
46 | giveTitle,
47 | showSupply,
48 | showBorrow,
49 | showRisk,
50 | showConnectWallet,
51 | hideModal,
52 | };
53 |
54 | return (
55 |
56 | {children}
57 |
58 | );
59 | }
60 |
61 | export default ModalContext;
62 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | define: {
8 | global: {},
9 | },
10 | });
11 |
--------------------------------------------------------------------------------