feat: draft layouts, MetaMask and WalletConnect integration, ethers.js wrapper and GraphQL draft wrapper

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "prettier",
+    "@vue/eslint-config-typescript",
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  },
+};

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,2 +1,15 @@
-# stakepad-frontend
-Designing a Better World Through Decentralized Technologies
+## Description of the project
+
+Stakepad is the Web3 platform that aims to be convenient and powerful tool for the common user interactions with the staking pools and for the managing staking pools based on the ERC-20 and ERC-721 protocols. It allows to:
+
+- Stake, unstake tokens and claim rewards
+- Create a staking pool
+- Manage an existing staking pool
+- View a statistics about the staking pool
+
+
+## How to launch?
+
+1. Clone the repository
+2. Install the dependencies with the command `npm i`. Node version 18+ is required.
+3. Site is now available at the `localhost:5173`

__mocks__/ethers.ts

@@ -0,0 +1,114 @@
+import BigNumber from "bignumber.js";
+
+type MockWeb3Provider = {
+  gas: string;
+  address: string;
+  api_key: string;
+  getCode(): string;
+  getGasPrice(): BigNumber;
+  estimateGas(): string;
+  getFeeData(): { gasPrice: BigNumber };
+  getTransactionCount(): string;
+  getSigner(): any;
+};
+
+type MockJsonRpcProvider = {
+  gas: string;
+  node: string;
+  getGasPrice(): BigNumber;
+  estimateGas(): string;
+  getFeeData(): { gasPrice: BigNumber };
+  getTransactionCount(): string;
+  getCode(): string;
+  getSigner(): any;
+};
+
+type MockContract = {
+  decimals: () => number;
+  estimateGas: {
+    transfer: () => BigNumber;
+  };
+  transfer: () => {
+    hash: string;
+  };
+  connect: any
+};
+
+const gas = "21000";
+const nonce = "1";
+const code = "0x";
+const getSigner = () => {
+  return {
+    getTransactionCount: () => 100,
+    sendTransaction: (..._: any) => ({
+      hash: "0x0"
+    }),
+    signMessage: (message: string) => ({
+      message
+    })
+  }
+}
+
+export const ethers = {
+  providers: {
+    Web3Provider: function (
+      this: MockWeb3Provider,
+      address: string,
+      apiKey: string,
+    ) {
+      this.gas = gas;
+      this.address = address;
+      this.api_key = apiKey;
+      this.getCode = () => code;
+      this.getGasPrice = () => new BigNumber(this.gas);
+      this.estimateGas = () => this.gas;
+      this.getFeeData = () => ({ gasPrice: new BigNumber(this.gas) });
+      this.getTransactionCount = () => nonce;
+      this.getSigner = getSigner
+    },
+    JsonRpcProvider: function (this: MockJsonRpcProvider, node: string) {
+      this.gas = gas;
+      this.node = node;
+      this.getGasPrice = () =>
+        Promise.resolve(new BigNumber(this.gas)) as unknown as BigNumber;
+      this.estimateGas = () => this.gas;
+      this.getFeeData = () => ({ gasPrice: new BigNumber(this.gas) });
+      this.getTransactionCount = () => nonce;
+      this.getCode = () => code;
+      this.getSigner = getSigner
+    },
+  },
+  utils: {
+    parseEther: (amount: string | number) => {
+      return new BigNumber(amount).mul(Math.pow(10, 18)).toString();
+    },
+    formatEther: (amount: string | number) => {
+      return "0.000001";
+    },
+    parseUnits: (amount: string, decimals: number) => {
+      return new BigNumber(amount).mul(Math.pow(10, decimals)).toString();
+    },
+    isAddress: (address: string) => {
+      return /^(0x)?[0-9a-fA-F]{40}$/.test(address);
+    },
+    hexlify: (amount: number) => {
+      const value = amount.toString(16);
+      if (value.length % 2) {
+        return "0x0" + value;
+      }
+      return code + value;
+    },
+  },
+  Contract: function (this: MockContract) {
+    this.decimals = () => 18;
+    this.estimateGas = {
+      transfer: () => new BigNumber(21000),
+    };
+    this.transfer = () => ({
+      hash: "0x5555555555555555555555555555555555555555555555555555555555555555",
+    });
+    this.connect = (contract: any) => ({
+      ...contract,
+    })
+  },
+};

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Staking</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>