Added custom wallet and default wallet logic, added modal component

src/components/Modal/Modal.css

@@ -1,96 +0,0 @@
-.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.styles.ts

@@ -0,0 +1,98 @@
+export default `
+.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

@@ -1,6 +1,6 @@
 import React from "react";
-import providers from "../../providers";
-import "./Modal.css";
+import { wallets } from "../../providers/wallets";
+import styles from "./Modal.styles";
 
 function Modal(props: any): JSX.Element {
   function handleCloseModal(event: any) {
@@ -25,28 +25,37 @@ function Modal(props: any): JSX.Element {
   }
 
   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>
+      <style>{styles}</style>
+      <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) => {
+                if (!wallets.getWallet(provider)) return null;
+                return (
+                  <li
+                    key={wallets.getWallet(provider).getName()}
+                    onClick={() => {
+                      wallets.getWallet(provider).connect();
+                      props.onClose();
+                    }}
+                  >
+                    <div title={wallets.getWallet(provider).getDescription()}>
+                      <img
+                        src={wallets.getWallet(provider).getIcon()}
+                        alt={wallets.getWallet(provider).getName()}
+                      />
+                      <span>{wallets.getWallet(provider).getName()}</span>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </div>
       </div>
     </div>

src/index.ts

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

src/providers/index.ts

@@ -1,31 +1,3 @@
-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";
+import * as wallets from "./wallets";
 
-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();
+export { wallets };

src/providers/wallets/CustomWallet.ts

@@ -11,6 +11,10 @@ export default class CustomWallet extends BaseWallet {
   ) {
     super(name, description, icon);
 
+    this.setOnConnectFunction(onConnectFunction);
+  }
+
+  setOnConnectFunction(onConnectFunction: Function) {
     this.onConnectFunction = onConnectFunction;
   }
 

src/providers/wallets/LedgerWallet.ts

@@ -9,5 +9,7 @@ export default class LedgerWallet extends BaseWallet {
     );
   }
 
-  connect() {}
+  connect() {
+    alert("Ledger Wallet is not supported yet.");
+  }
 }

src/providers/wallets/NarWallet.ts

@@ -9,5 +9,7 @@ export default class NarWallet extends BaseWallet {
     );
   }
 
-  connect() {}
+  connect() {
+    alert("Nar Wallet is not supported yet.");
+  }
 }

src/providers/wallets/SenderWallet.ts

@@ -9,5 +9,7 @@ export default class SenderWallet extends BaseWallet {
     );
   }
 
-  connect() {}
+  connect() {
+    alert("Sender Wallet is not supported yet.");
+  }
 }

src/providers/wallets/index.ts

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