avax page

src/app.ts

@@ -6,8 +6,11 @@ import { Router } from "@web/core/router";
 
 import { Dashboard } from "@web/pages/dashboard";
 import { CscStakingPage } from "@web/pages/csc";
+import { AvaxStaking } from "@web/pages/avax";
 import { MaticStaking } from "@web/pages/polygon";
 import { FantomStaking } from "@web/pages/fantom";
+
+
 const ROOT_TEMPLATE = xml`
 <div id="wrapper">
 	<Sidebar />
@@ -54,7 +57,7 @@ export class Root extends Component {
 		this.routeType = 'hash';
 		this.state = useState(new RootState());
 		this.routes = [
-			Dashboard, CscStakingPage, MaticStaking, FantomStaking
+			Dashboard, CscStakingPage,AvaxStaking, MaticStaking, FantomStaking, 
 		];
 	}
 }

src/pages/avax.ts

@@ -37,3 +37,120 @@ How many AVAX you are staking
 The address to send any rewards to
 
 */ 
+
+import { Component, xml, useState, reactive, useRef, } from "@odoo/owl";
+import { useContract, useWallet, switchChain } from "@web/core/wallet";
+import {OPage} from "@web/components/page";
+
+import avaxABI from "@web/data/avax.json"
+import "./avax.xml";
+import "./avax.scss";
+
+
+const genzAdderss = "0x5a1b57f87b59e093d332c945c66b602843099f97";
+const testAddress = "0xaa3a160e91f63f1db959640e0a7b8911b6bd5b95";
+const avaxContract = "0xFC00FACE00000000000000000000000000000000";
+const weiRate = 1000000000000000000;
+const testnetChainId = "0xfa2";
+const mainnetChainId = "0xfa";
+
+
+
+export class AvaxStaking extends OPage {
+    static title = "avax";
+    static logo = "./img/avax.svg";
+	static route = '/staking/avax';
+    static template = 'pages.avax';
+
+    wallet = useWallet();
+    state = useState({
+        staking: false,
+        unstaking: false,
+        value: 0,
+    });
+
+
+    /**
+     * Stake the amount value from the input
+     * 
+     * @returns promise | undefinde
+     */
+    async stakeit() {
+        if (this.state.staking || !this._checkChainId()) {
+            await switchChain(mainnetChainId, 'avax Opera', 'https://rpcapi.avax.network/')
+            return;
+        }
+        this.state.staking = true;
+        let contract = useContract(this.wallet.chainId, avaxContract, avaxABI);
+        var amount = this.state.value*weiRate;
+        var val = "0x" + amount.toString(16)
+        return contract.methods
+            .delegate( this.getVerifierAddress())
+            .send({
+                from: this.wallet.account,val
+
+            }).catch(ex => {
+                alert("Fail to performe the stake action");
+                console.error(ex);
+            }).finally(() => this.state.staking = false);
+    }
+
+    /**
+     * Unstake all m from the default Validator
+     * 
+     * @returns promise to performe
+     */
+    unstakeit() {
+        if (this.state.unstaking || !this._checkChainId()) {
+            // wait for end 
+            return;
+        }
+        this.state.unstaking = true;
+        let contract = useContract(this.wallet.chainId, avaxContract, avaxABI);
+        contract.handleRevert = true
+        contract.methods
+            .unstake(this.getVerifierAddress())
+            .send({
+                from: this.wallet.account
+            }).catch(ex => {
+                alert("Fail to unstake!!");
+            }).finally(async() => {
+
+                this.state.unstaking = false;
+            });
+            this.withdrawStaking()
+    }
+    withdrawStaking(){
+        let contract = useContract(this.wallet.chainId, avaxContract, avaxABI);
+        return contract.methods
+            .withdrawStaking(this.getVerifierAddress())
+            .send({
+                from: this.wallet.account
+            }).catch(ex => {
+                alert("Fail to unstake!!",ex);
+            });
+    }
+
+    _checkChainId() {
+        if (this.wallet.chainId !== mainnetChainId && this.wallet.chainId !== testnetChainId) {
+            alert("Unsupported Chain ID :" + this.wallet.chainId);
+            return false;
+        }
+        return true;
+    }
+
+    getVerifierAddress() {
+        if (this.wallet.chainId === mainnetChainId) {
+            return genzAdderss;
+        }
+        return testAddress;
+    }
+}
+
+
+
+
+
+
+
+

src/pages/avax.xml

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="pages.avax" owl="1">
+        <div class="container-lg bg-white justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center">
+                <img class="figure-img img-fluid p-3" 
+                    style="width:128px;"
+                    src="./img/avax.svg" />
+            </div>
+
+            <div class="row p-5 justify-content-center align-items-center nav-justified ">
+                <!-- Nav tabs -->
+                <ul class="nav nav-tabs" id="myTab" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link active" id="stake-tab" data-bs-toggle="tab"
+                            data-bs-target="#stake" type="button" role="tab" aria-controls="stake"
+                            aria-selected="true"
+                            style="color:green;"
+                            >
+                            Stake
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="unstake-tab" data-bs-toggle="tab" 
+                            data-bs-target="#unstake" type="button" role="tab" aria-controls="unstake" 
+                            aria-selected="false"
+                            style="color:green;"
+                            >
+                            Unstake
+                        </button>
+                    </li>
+                </ul>
+
+                <!-- Tab panes -->
+                <div class="tab-content justify-content-center align-items-center m-5">
+                    <div class="tab-pane active" id="stake" role="tabpanel" aria-labelledby="stake-tab">     
+                        <div class="row justify-content-center align-items-center">
+                            <div class="card mb-5" 
+                                style="width: 800px; border: none; ">
+                                <div class="card-body">
+                                    <h2 class="text-center">
+                                        <t t-if="wallet.chainId === '${mainnetChainId}'">Stake CET</t>
+                                        <t t-if="wallet.chainId === '${testnetChainId}'">Stake CET TestNet</t>
+                                        <t t-if="wallet.chainId !== '${mainnetChainId}' and wallet.chainId !== '${testnetChainId}'">Not Connected/Unsupported Network !!</t>
+                                    </h2> 
+                                    <div class="p-2">
+                                        <div class="input-group justify-content-center align-items-center">
+                                            <input class="form-control"
+                                                id="myInp" 
+                                                placeholder="Enter Cet Amount" 
+                                                t-model="state.value"
+                                                type="number"
+                                                aria-label="Example text with two button addons" />
+                                            <button class="btn btn-outline-secondary text-center"
+                                            type="button">
+                                            <img class=""
+                                                src="./img/avax.svg" 
+                                                style="width: 16px" />
+                                            </button>
+                                        </div>
+                                    </div> 
+                                    <div class="d-flex flex-row justify-content-center align-items-center"
+                                    id="actions">
+                                        <button class="btn btn-success text-white m-2"
+                                        t-on-click="stakeit"
+                                        t-if="wallet.chainId === '${mainnetChainId}' or wallet.chainId === '${testnetChainId}'"
+                                        id="stakeBtn">
+                                            <span t-if="wallet.isConnected and wallet.chainId === '${mainnetChainId}'">Stake <t t-esc="state.value" /> CET</span>
+                                            <span t-if="wallet.isConnected and wallet.chainId === '${testnetChainId}'">Stake <t t-esc="state.value" /> CET Test</span>
+                                            <span t-if="state.staking"><span class="spinner-border spinner-grow spinner-grow-sm"
+                                                role="status" 
+                                                aria-hidden="true"></span>Loading...</span>
+                                        </button>
+                                        <button class="btn btn-success text-white m-2"
+                                            t-on-click="stakeit"
+                                            t-if="wallet.chainId !== '${mainnetChainId}' and wallet.chainId !== '${testnetChainId}'"
+                                            id="switch-to-cet-network">
+                                            <span>Switch Network</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tab-pane" id="unstake" role="tabpanel" aria-labelledby="unstake-tab"><div class="row justify-content-center align-items-center p-2 ml-5">
+                        <h2 class="text-center">
+                        <t t-if="wallet.chainId === '${mainnetChainId}'">Un-stake CET</t>
+                        <t t-if="wallet.chainId === '${testnetChainId}'">Un-stake CET Test Net</t>
+                        <t t-if="wallet.chainId !== '${mainnetChainId}' and wallet.chainId !== '${testnetChainId}'">Not Connected/Unsupported Network !!</t>
+                        </h2> 
+                        <div class="card mb-3 " style="width: 700px; border: none;">
+                            <div class="card-body ">
+                                <div id="actions" class="d-flex flex-row justify-content-center align-items-center">
+                                    <button class="btn btn-outline-success" 
+                                        t-on-click="unstakeit" 
+                                        t-if="wallet.chainId === '${mainnetChainId}' or wallet.chainId === '${testnetChainId}'"
+                                        id="unstakeBtn">
+                                        <span t-if="wallet.isConnected and wallet.chainId === '${mainnetChainId}'">Un-stake CET</span>
+                                        <span t-if="wallet.isConnected and wallet.chainId === '${testnetChainId}'">Un-stake CET Test</span>
+                                        <span t-if="state.unstaking"><span class="spinner-border spinner-grow spinner-grow-sm"
+                                            role="status" 
+                                            aria-hidden="true"></span>Loading...</span>
+                                    </button>
+                                    <button class="btn btn-success text-white m-2"
+                                        t-on-click="stakeit"
+                                        t-if="wallet.chainId !== '${mainnetChainId}' and wallet.chainId !== '${testnetChainId}'"
+                                        id="switch-to-cet-network">
+                                        <span>Switch Network</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <br/>
+                        </div>
+                    </div>
+                </div>          
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

src/pages/dashboard.xml

@@ -81,7 +81,7 @@
 								</div>
 							</div>
 							<br/>
-							<a href="#/staking/fantom" class="btn btn" style="color:white;background-color:#6d6df2;">Stake avax</a>
+							<a href="#/staking/avax" class="btn btn" style="color:white;background-color:#6d6df2;">Stake avax</a>
 						</div>
 					</div>
 				</div>