Jennifer/ten gateway (#1657)

* wip: Tenscan gateway

* wip: gateway revamp

* refactor: UI and logic

* chore: move constants and account connections

* refactor: services and wallet context

* styles: update custom font and logo

* remove logs

* fix: metamask error handling

* fix: conection method

* fix connect method

* feat: error handling

* separate gateway frontend concerns to folder

* feat: authenticate account with EIP712
- refactor error handling
- add loading state

* add `README` file

* - update css variables and constant urls
- fix: remove conditional params

* move gateway base to `walletextension/frontend`

* update readme

* refactor: account signing and authentication

* add docs and error pages

* feat: add SEO tags and GTAG

* refactor: separate eth and gateway requests

* fix: change toast type

* chore: cleanup functions and error msgs

* fix (dis)connection errors

* update toast methods

* update meta description

* add env example file

* remove log

* update README to configure env

* fix build error

* move `GOOGLE_ANALYTICS_ID` to env file

* update review suggestions

* rm redundant click handler

tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table-toolbar.tsx

@@ -28,14 +28,6 @@ export function DataTableToolbar<TData>({
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">
-        {/* <Input
-          placeholder="Search..."
-          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
-          onChange={(event) =>
-            table.getColumn("title")?.setFilterValue(event.target.value)
-          }
-          className="h-8 w-[150px] lg:w-[250px]"
-        /> */}
         {toolbar?.map(
           (item, index) =>
             table.getColumn(item.column) && (

tools/walletextension/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

tools/walletextension/frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

tools/walletextension/frontend/README.md

@@ -0,0 +1,74 @@
+# Ten Gateway
+
+Ten Gateway is a Next.js and Tailwind CSS-powered application.
+
+## Folder Structure
+
+```
+📁 Ten Gateway
+├── 📁 api - Contains server-side code, such as API routes or server logic
+├── 📁 public - This directory is used to serve static assets. Files inside this directory can be referenced in your code with a URL path
+├── 📁 src - Main source code directory for this project
+│   ├── 📁 components - Contains reusable React components used throughout the application
+│   ├── 📁 pages - Typically used for Next.js pages. Each .tsx or .js file in this directory becomes a route in your application
+│   ├── 📁 hooks - Custom React hooks that can be shared and reused across components
+│   ├── 📁 lib - Utility functions or modules that provide common functionalities across the application
+│   ├── 📁 routes - Route-related logic or configuration can be placed in this directory
+│   ├── 📁 services - Used for services that interact with external APIs or handle other data-related tasks
+│   └── 📁 types - Type definitions (.d.ts files or TypeScript files) for TypeScript, describing the shape of data and objects used in the application
+└── 📁 styles - Global styles, stylesheets, or styling-related configurations for this project
+```
+
+## Getting Started
+
+1. **Clone the Repository:**
+   ```bash
+   git clone https://github.com/ten-protocol/go-ten.git
+   cd go-ten/tools/walletextension/frontend
+   ```
+
+2. **Install Dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Configure Environment Variables:**
+Create a `.env.local` file in the root directory of the project and add the following environment variables:
+
+   ```bash
+   NEXT_PUBLIC_API_GATEWAY_URL=********
+   ```
+
+   Possible values for `NEXT_PUBLIC_API_GATEWAY_URL` are:
+   - `https://https://uat-testnet.obscu.ro`
+   - `https://https://sepolia-testnet.obscu.ro`
+   - `https://https://dev-testnet.obscu.ro`
+
+4. **Run the Development Server:**
+   ```bash
+   npm run dev
+   ```
+
+   The application will be accessible at [http://localhost:3000](http://localhost:3000).
+
+## Usage
+
+- Connect to Ten Testnet using the button in the top right corner of the application or on the homepage
+- You can request tokens from the Discord bot by typing `!faucet <your address>` in the #faucet channel
+- You can also revoke accounts by clicking the "Revoke Accounts" button on the homepage
+
+## Built With
+
+- [Next.js](https://nextjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Shadcn-UI](https://shadcn.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+
+## Contributing
+
+Contributions are welcome! Please follow our [contribution guidelines](/docs/_docs/community/contributions.md).
+
+## License
+
+This project is licensed under the [GNU Affero General Public License v3.0](/LICENSE).

tools/walletextension/frontend/env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_GATEWAY_URL=
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=

tools/walletextension/frontend/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig