{"id":23213439,"url":"https://github.com/nagipragalathan/odin_protocol_ui","last_synced_at":"2026-05-07T11:33:00.842Z","repository":{"id":241116378,"uuid":"804356062","full_name":"NagiPragalathan/odin_protocol_UI","owner":"NagiPragalathan","description":"Welcome to the Odin Protocol UI project repository. This project is a user interface for the Odin Protocol, developed using Next.js, a React framework that enables server-side rendering and static site generation. This repository includes the necessary code to set up and run the Odin Protocol UI.","archived":false,"fork":false,"pushed_at":"2024-06-20T13:33:21.000Z","size":498,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T04:55:27.119Z","etag":null,"topics":["blockchainui","frontenddevelopment","javascript","nextjs","odinprotocolui","opensource","protocolinteraction","react","techcommunity","webdevelopment"],"latest_commit_sha":null,"homepage":"https://odin-protocol-ui.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NagiPragalathan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-22T12:47:03.000Z","updated_at":"2024-06-20T13:34:14.000Z","dependencies_parsed_at":"2024-05-22T14:31:48.503Z","dependency_job_id":"eb5a5170-c158-484c-8c7e-b7a3445267b7","html_url":"https://github.com/NagiPragalathan/odin_protocol_UI","commit_stats":null,"previous_names":["nagipragalathan/odin_protocol_ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2Fodin_protocol_UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2Fodin_protocol_UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2Fodin_protocol_UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2Fodin_protocol_UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NagiPragalathan","download_url":"https://codeload.github.com/NagiPragalathan/odin_protocol_UI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchainui","frontenddevelopment","javascript","nextjs","odinprotocolui","opensource","protocolinteraction","react","techcommunity","webdevelopment"],"created_at":"2024-12-18T19:17:36.191Z","updated_at":"2026-05-07T11:32:55.819Z","avatar_url":"https://github.com/NagiPragalathan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Odin Protocol UI\n\nWelcome to the Odin Protocol UI project repository. This project is a user interface for the Odin Protocol, developed using Next.js, a React framework that enables server-side rendering and static site generation. This repository includes the necessary code to set up and run the Odin Protocol UI.\n\n## Overview\n\nThe Odin Protocol UI is designed to provide users with a seamless and intuitive experience when interacting with the Odin Protocol. This UI offers various features to help users manage and monitor their interactions with the protocol effectively.\n\n## Features\n\n- **User Dashboard**: View your current status and activity within the Odin Protocol.\n- **Transaction Management**: Easily manage and track your transactions.\n- **Protocol Interactions**: Interact with the Odin Protocol directly from the UI.\n- **Responsive Design**: Optimized for both desktop and mobile devices.\n\n## Tech Stack\n\n- **Framework**: Next.js\n- **Frontend**: React, HTML, CSS, JavaScript\n- **State Management**: Redux\n- **API Interaction**: Axios\n- **Styling**: Tailwind CSS\n- **Database**: SQLite3\n\n## Installation and Setup\n\n### Prerequisites\n\n- Node.js\n- npm (Node Package Manager) or yarn\n\n### Steps\n\n1. **Clone the Repository**\n\n    `git clone https://github.com/NagiPragalathan/odin_protocol_UI.git\n    cd odin_protocol_UI` \n    \n2. **Install Dependencies**\n    \n    Using npm:\n    \n    `npm install` \n    \n    Using yarn:\n    \n    `yarn install` \n    \n3. **Run the Development Server**\n    \n    Using npm:\n    \n    `npm run dev` \n    \n    Using yarn:\n    \n    `yarn dev` \n    \n    Open your browser and navigate to `http://localhost:3000` to see the UI.\n    \n\n## Project Structure\n\n`odin_protocol_UI/\n├── components/\n│   ├── Header.js\n│   ├── Footer.js\n│   ├── Dashboard.js\n│   ├── TransactionList.js\n│   └── ProtocolInteraction.js\n├── pages/\n│   ├── index.js\n│   ├── dashboard.js\n│   └── transactions.js\n├── public/\n│   ├── favicon.ico\n│   └── logo.png\n├── styles/\n│   ├── Home.module.css\n│   └── globals.css\n├── .gitignore\n├── package.json\n└── README.md` \n\n## Components\n\n### Header.js\n\n`import Link from 'next/link';\n\nconst Header = () =\u003e (\n  \u003cheader\u003e\n    \u003cnav\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/\"\u003eHome\u003c/Link\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/dashboard\"\u003eDashboard\u003c/Link\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/transactions\"\u003eTransactions\u003c/Link\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  \u003c/header\u003e\n);\n\nexport default Header;` \n\n### Footer.js\n\n`const Footer = () =\u003e (\n  \u003cfooter\u003e\n    \u003cp\u003e\u0026copy; 2024 Odin Protocol UI\u003c/p\u003e\n  \u003c/footer\u003e\n);\n\nexport default Footer;` \n\n### Dashboard.js\n\n`const Dashboard = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eDashboard\u003c/h1\u003e\n    \u003cp\u003eWelcome to your dashboard.\u003c/p\u003e\n  \u003c/div\u003e\n);\n\nexport default Dashboard;` \n\n### TransactionList.js\n\n`const TransactionList = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eTransactions\u003c/h1\u003e\n    \u003cp\u003eList of your transactions.\u003c/p\u003e\n  \u003c/div\u003e\n);\n\nexport default TransactionList;` \n\n### ProtocolInteraction.js\n\n`const ProtocolInteraction = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eInteract with Odin Protocol\u003c/h1\u003e\n    \u003cp\u003eManage your protocol interactions here.\u003c/p\u003e\n  \u003c/div\u003e\n);\n\nexport default ProtocolInteraction;` \n\n## Pages\n\n### index.js\n\n`import Layout from '../components/Layout';\nimport styles from '../styles/Home.module.css';\n\nexport default function Home() {\n  return (\n    \u003cLayout\u003e\n      \u003cdiv className={styles.container}\u003e\n        \u003ch1\u003eWelcome to Odin Protocol UI\u003c/h1\u003e\n        \u003cp\u003eThis is the home page.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/Layout\u003e\n  );\n}` \n\n### dashboard.js\n\n`import Layout from '../components/Layout';\nimport Dashboard from '../components/Dashboard';\n\nexport default function DashboardPage() {\n  return (\n    \u003cLayout\u003e\n      \u003cDashboard /\u003e\n    \u003c/Layout\u003e\n  );\n}` \n\n### transactions.js\n\n`import Layout from '../components/Layout';\nimport TransactionList from '../components/TransactionList';\n\nexport default function TransactionsPage() {\n  return (\n    \u003cLayout\u003e\n      \u003cTransactionList /\u003e\n    \u003c/Layout\u003e\n  );\n}` \n\n## Styles\n\n### globals.css\n\n`body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  background-color: #f0f0f0;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n}\n\nnav ul {\n  display: flex;\n  gap: 1rem;\n}` \n\n### Home.module.css\n\n`.container {\n  padding: 2rem;\n  text-align: center;\n}\n\nh1 {\n  color: #0070f3;\n}\n\np {\n  color: #333;\n}` \n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagipragalathan%2Fodin_protocol_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnagipragalathan%2Fodin_protocol_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagipragalathan%2Fodin_protocol_ui/lists"}