Added basic component and provider classes and interfaces

README.md

@@ -0,0 +1 @@
+# near-walletsender

src/components/Modal/Modal.css

@@ -0,0 +1,96 @@
+.Modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.25);
+  display: flex;
+}
+
+.Modal .Modal-content {
+  max-width: 700px;
+  max-height: 70vh;
+  min-width: 400px;
+  background-color: white;
+  margin: auto;
+  border-radius: 5px;
+  padding: 1.5em;
+}
+
+.Modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(214, 214, 214);
+  padding-bottom: 0.5em;
+}
+
+.Modal-header button {
+  border: 0;
+  cursor: pointer;
+}
+
+.Modal-header h3 {
+  margin: 0;
+}
+
+.Modal-option-list {
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.Modal-option-list li {
+  padding: 1em;
+  cursor: pointer;
+  border: 1px solid rgb(214, 214, 214);
+  border-radius: 5px;
+  display: flex;
+}
+
+.Modal-option-list li div {
+  margin: auto;
+}
+
+.Modal-option-list li:hover {
+  border-color: black;
+}
+
+.Modal-option-list li img {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 5px;
+  max-width: 50px;
+}
+
+.Modal-dark-theme .Modal-content {
+  background-color: #26292a;
+  color: white;
+}
+
+.Modal-dark-theme .Modal-content .Modal-option-list li {
+  border-color: black;
+}
+
+.Modal-dark-theme .Modal-content .Modal-option-list li:hover {
+  border-color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .Modal:not(.Modal-light-theme) .Modal-content {
+    background-color: #26292a !important;
+    color: white;
+  }
+
+  .Modal:not(.Modal-light-theme) .Modal-content .Modal-option-list li {
+    border-color: black;
+  }
+
+  .Modal:not(.Modal-light-theme) .Modal-content .Modal-option-list li:hover {
+    border-color: white;
+  }
+}

src/components/Modal/Modal.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import providers from "../../providers";
+import "./Modal.css";
+
+function Modal(props: any): JSX.Element {
+  function handleCloseModal(event: any) {
+    event.preventDefault();
+    if (event.target === event.currentTarget) props.onClose();
+  }
+
+  function getThemeClass(theme: string) {
+    let themeClass = "";
+    switch (theme) {
+      case "dark":
+        themeClass = "Modal-dark-theme";
+        break;
+      case "light":
+        themeClass = "Modal-light-theme";
+        break;
+      default:
+        themeClass = "";
+        break;
+    }
+    return themeClass;
+  }
+
+  return (
+    <div
+      className={`Modal ${getThemeClass(props.options.theme)}`}
+      onClick={handleCloseModal}
+    >
+      <div className="Modal-content">
+        <div className="Modal-body">
+          <ul className="Modal-option-list">
+            {props.options.providers.map((provider: string) => (
+              <li
+                key={providers.getProvider(provider).getName()}
+                onClick={providers.getProvider(provider).connect}
+              >
+                <div title={providers.getProvider(provider).getDescription()}>
+                  <img
+                    src={providers.getProvider(provider).getIcon()}
+                    alt={providers.getProvider(provider).getName()}
+                  />
+                  <span>{providers.getProvider(provider).getName()}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

src/index.ts

@@ -0,0 +1,5 @@
+import Modal from "./components/Modal/Modal";
+
+export * from "./providers";
+
+export default Modal;

src/providers/index.ts

@@ -0,0 +1,31 @@
+import IWallet from "./interfaces/IWallet";
+import CustomWallet from "./wallets/CustomWallet";
+import LedgerWallet from "./wallets/LedgerWallet";
+import NarWallet from "./wallets/NarWallet";
+import NearWallet from "./wallets/NearWallet";
+import SenderWallet from "./wallets/SenderWallet";
+
+class Providers {
+  private wallets = {
+    nearwallet: new NearWallet(),
+    senderwallet: new SenderWallet(),
+    ledgerwallet: new LedgerWallet(),
+    narwallet: new NarWallet(),
+  };
+
+  public addCustomProvider(name: string, options: any) {
+    const customWallet = new CustomWallet(
+      options.name,
+      options.description,
+      options.icon,
+      options.onConnectFunction
+    );
+    this.wallets[name] = customWallet;
+  }
+
+  public getProvider(name: string): IWallet {
+    return this.wallets[name];
+  }
+}
+
+export default new Providers();

src/providers/interfaces/IWallet.ts

@@ -0,0 +1,7 @@
+export default interface IWallet {
+  getName(): string;
+  getDescription(): string;
+  getIcon(): string;
+
+  connect(): void;
+}

src/providers/wallets/BaseWallet.ts

@@ -0,0 +1,27 @@
+import IWallet from "../interfaces/IWallet";
+
+export default abstract class BaseWallet implements IWallet {
+  protected name = "Wallet";
+  protected description = "A near wallet";
+  protected icon = "https://cryptologos.cc/logos/near-protocol-near-logo.png";
+
+  constructor(name: string, description: string, icon: string) {
+    this.name = name;
+    this.description = description;
+    this.icon = icon;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getDescription(): string {
+    return this.description;
+  }
+
+  getIcon(): string {
+    return this.icon;
+  }
+
+  abstract connect(): void;
+}

src/providers/wallets/CustomWallet.ts

@@ -0,0 +1,20 @@
+import BaseWallet from "./BaseWallet";
+
+export default class CustomWallet extends BaseWallet {
+  private onConnectFunction: Function;
+
+  constructor(
+    name: string,
+    description: string,
+    icon: string,
+    onConnectFunction: Function
+  ) {
+    super(name, description, icon);
+
+    this.onConnectFunction = onConnectFunction;
+  }
+
+  connect() {
+    this.onConnectFunction();
+  }
+}

src/providers/wallets/LedgerWallet.ts

@@ -0,0 +1,13 @@
+import BaseWallet from "./BaseWallet";
+
+export default class LedgerWallet extends BaseWallet {
+  constructor() {
+    super(
+      "Ledger Wallet",
+      "Ledger Wallet",
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAYFBMVEX///8zN0aZm6Jwc305PUtiZXGvsbbi4uSmp67n5+m+v8Q1OUdFSVb6+vr19fY+QlDt7e56fYbT1NdTVmPHyMyGiJFqbXdbXmlWWWWgoah7foeSlJx1eIJLT1yztbrw8fKmGsZBAAACeklEQVR4nO3d2XKCMBhAYSIUAUEQt9b1/d+yetPaGshMlp+0nnMN0k8lUGZMkoSIiIiIiIiIiIiIXr6mK+cP6Ta5zp0ruyYkostXa/WjTLfZTPnonBbat8m9ard4OlpAyL19vvTPWOuOFBiiVF34/Y6VO/1xgkOUeu89Oqp24CgCELX48Ob4GDyIBESpg6ev13H4EDIQlXqRDH8eYhB18uCoxg4gBVEzZ0c5dJ7LQtTGFTIw7opDzo6XxtEvliREHd0g2uv5JJCsc3EYPhBJiNv5Pn6GyEJqh4tJ93y/Ox3EZeDKTa8tCtnaQ1ZRQdb2EMOYJQxR1peSxvjSshDr/0yukUEqW0gZGeRiC5lHBsmBAAECBAgQIEBukMxU+zcglgEBAgQIECBAgAABAgQIECBAAkOuM2N/A/J/HgcBAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIC8GKRLTWl/MH8x7maZ80/BiYiIiIiIiCiuyjdTO91uuXE37exlW+Nu1hO8BHsclOp2ewv3OAgIECBAgAAB8p8gweags4RYz0HXRQaxvmkMNk+jJcR+Bvk6Loj9jL9pVJDa2pEUUUFW9hDj+CsKsR60bu0jgrQu85SbZi6WhDjMW3wbgA3jliBk4bY+jOF0F4QcnBxJ8x4JpC3dIEk/OlG5HMT9R/ljq3bIQXys2zE2VbkUZO9j9aRm5EZFCLJ2WlfhW3KaGLL347j/aUNnvAjk5HFVrs15MkjrdxKR5TGbBLI4uF4/nuqOmtuVwJBsG2Tdumaz/b3YQkhIvbr4X7Luq2Vf5cVDum36wpT2KUL1sEFe9d5GKiIiIiIiIiIiIqKX6xNYBUsKTAn7+wAAAABJRU5ErkJggg=="
+    );
+  }
+
+  connect() {}
+}

src/providers/wallets/NarWallet.ts

@@ -0,0 +1,13 @@
+import BaseWallet from "./BaseWallet";
+
+export default class NarWallet extends BaseWallet {
+  constructor() {
+    super(
+      "Nar Wallet",
+      "Nar Wallet",
+      "https://narwallets.com/assets/img/logo.png"
+    );
+  }
+
+  connect() {}
+}

src/providers/wallets/NearWallet.ts

@@ -0,0 +1,15 @@
+import BaseWallet from "./BaseWallet";
+
+export default class NearWallet extends BaseWallet {
+  constructor() {
+    super(
+      "Near Wallet",
+      "Near Wallet",
+      "https://cryptologos.cc/logos/near-protocol-near-logo.png"
+    );
+  }
+
+  connect() {
+    alert("Near Wallet is not supported yet.");
+  }
+}

src/providers/wallets/SenderWallet.ts

@@ -0,0 +1,13 @@
+import BaseWallet from "./BaseWallet";
+
+export default class SenderWallet extends BaseWallet {
+  constructor() {
+    super(
+      "Sender Wallet",
+      "Sender Wallet",
+      "https://lh3.googleusercontent.com/G1LUgHqvRoGNt9xCk5rPqD8zStAWX42xpSO4vOHiUveoivhGvqmBpzTmoe6k7UpkmtvmLi2VjzEdL1X_TYvS3e5y2vs=w128-h128-e365-rj-sc0x00ffffff"
+    );
+  }
+
+  connect() {}
+}