fix: Wallet types (#59)

src/widgets/Nav/UserBlock.tsx

@@ -2,11 +2,12 @@ import React from "react";
 import styled from "styled-components";
 import Button from "../../components/Button";
 import useWalletModal from "../WalletModal";
+import { Login } from "../WalletModal/types";
 
 interface Props {
   account?: string;
   closeNav: () => void;
-  login: () => void;
+  login: Login;
   logout: () => void;
 }
 

src/widgets/Nav/types.ts

@@ -1,3 +1,5 @@
+import { Login } from "../WalletModal/types";
+
 export type NavTheme = {
   background: string;
   hover: string;
@@ -10,7 +12,7 @@ export interface LangType {
 
 export interface NavProps {
   account?: string;
-  login: () => void;
+  login: Login;
   logout: () => void;
   isDark: boolean;
   toggleTheme: (isDark: boolean) => void;

src/widgets/WalletModal/AccountModal.tsx

@@ -5,6 +5,7 @@ import Link from "../../components/Link";
 import Flex from "../../components/Flex";
 import { OpenNewIcon } from "../../components/Svg";
 import { Modal } from "../Modal";
+import { localStorageKey } from "./config";
 
 interface Props {
   account?: string;
@@ -37,6 +38,7 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
         variant="secondary"
         onClick={() => {
           logout();
+          window.localStorage.removeItem(localStorageKey);
           onDismiss();
         }}
       >

src/widgets/WalletModal/ConnectModal.tsx

@@ -5,9 +5,10 @@ import { HelpIcon } from "../../components/Svg";
 import { Modal } from "../Modal";
 import WalletCard from "./WalletCard";
 import config from "./config";
+import { Login } from "./types";
 
 interface Props {
-  login: () => void;
+  login: Login;
   onDismiss?: () => void;
 }
 

src/widgets/WalletModal/WalletCard.tsx

@@ -1,17 +1,12 @@
-import React, { FC } from "react";
+import React from "react";
 import Button from "../../components/Button";
 import Text from "../../components/Text";
-import SvgProps from "../../components/Svg/types";
-
-interface Config {
-  title: string;
-  icon: FC<SvgProps>;
-  connectorId: string;
-}
+import { localStorageKey } from "./config";
+import { Login, Config } from "./types";
 
 interface Props {
   walletConfig: Config;
-  login: (id: string) => void;
+  login: Login;
   onDismiss: () => void;
   mb: string;
 }
@@ -24,7 +19,7 @@ const WalletCard: React.FC<Props> = ({ login, walletConfig, onDismiss, mb }) =>
       variant="tertiary"
       onClick={() => {
         login(walletConfig.connectorId);
-        window.localStorage.setItem("accountStatus", "1");
+        window.localStorage.setItem(localStorageKey, "1");
         onDismiss();
       }}
       style={{ justifyContent: "space-between" }}

src/widgets/WalletModal/config.tsx

@@ -3,8 +3,9 @@ import MathWallet from "./icons/MathWallet";
 import TokenPocket from "./icons/TokenPocket";
 import TrustWallet from "./icons/TrustWallet";
 import WalletConnect from "./icons/WalletConnect";
+import { Config } from "./types";
 
-export default [
+const connectors: Config[] = [
   {
     title: "Metamask",
     icon: Metamask,
@@ -31,3 +32,6 @@ export default [
     connectorId: "walletconnect",
   },
 ];
+
+export default connectors;
+export const localStorageKey = "accountStatus";

src/widgets/WalletModal/index.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { useModal } from "../Modal";
 import ConnectModal from "./ConnectModal";
 import AccountModal from "./AccountModal";
+import { Login } from "./types";
 
 interface ReturnType {
   onPresentConnectModal: () => void;
   onPresentAccountModal: () => void;
 }
 
-const useWalletModal = (login: () => void, logout: () => void, account?: string): ReturnType => {
+const useWalletModal = (login: Login, logout: () => void, account?: string): ReturnType => {
   const [onPresentConnectModal] = useModal(<ConnectModal login={login} />);
   const [onPresentAccountModal] = useModal(<AccountModal account={account} logout={logout} />);
   return { onPresentConnectModal, onPresentAccountModal };

src/widgets/WalletModal/types.ts

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import SvgProps from "../../components/Svg/types";
+
+export type ConnectorId =
+  | "authereum"
+  | "fortmatic"
+  | "frame"
+  | "injected"
+  | "portis"
+  | "squarelink"
+  | "torus"
+  | "walletconnect"
+  | "walletlink";
+
+export type Login = (connectorId: ConnectorId) => void;
+
+export interface Config {
+  title: string;
+  icon: FC<SvgProps>;
+  connectorId: ConnectorId;
+}