fix: Tweak kit for exchange integration (#98)

src/index.ts

@@ -19,7 +19,7 @@ export * from "./components/Toggle";
 export { default as Footer } from "./widgets/Footer";
 export * from "./widgets/Modal";
 export { default as Nav } from "./widgets/Nav";
-export { default as useWalletModal } from "./widgets/WalletModal";
+export * from "./widgets/WalletModal";
 
 // Theme
 export { default as ResetCSS } from "./ResetCSS";

src/widgets/Footer/index.tsx

@@ -7,6 +7,7 @@ const StyledFooter = styled.footer`
   display: flex;
   justify-content: center;
   flex-direction: column;
+  width: 100%;
   padding: 32px;
   a:not(:last-child) {
     margin-bottom: 16px;

src/widgets/Modal/Modal.tsx

@@ -4,10 +4,10 @@ import Heading from "../../components/Heading/Heading";
 import Button from "../../components/Button/Button";
 import Flex from "../../components/Flex/Flex";
 import { CloseIcon } from "../../components/Svg";
+import { ModalProps } from "./types";
 
-interface Props {
+interface Props extends ModalProps {
   title: string;
-  onDismiss: () => void;
 }
 
 const StyledModal = styled.div`

src/widgets/Modal/ModalContext.tsx

@@ -1,6 +1,11 @@
 import React, { createContext, useState } from "react";
 import styled from "styled-components";
 import Overlay from "../../components/Overlay/Overlay";
+import { ModalProps } from "./types";
+
+interface ModalsContext extends ModalProps {
+  onPresent: (node: React.ReactNode, key?: string) => void;
+}
 
 const ModalWrapper = styled.div`
   display: flex;
@@ -15,11 +20,6 @@ const ModalWrapper = styled.div`
   z-index: ${({ theme }) => theme.zIndices.modal - 1};
 `;
 
-interface ModalsContext {
-  onPresent: (node: React.ReactNode, key?: string) => void;
-  onDismiss: () => void;
-}
-
 export const Context = createContext<ModalsContext>({
   onPresent: () => null,
   onDismiss: () => null,

src/widgets/Modal/index.tsx

@@ -1,3 +1,4 @@
 export { default as Modal } from "./Modal";
 export { default as ModalProvider } from "./ModalContext";
 export { default as useModal } from "./useModal";
+export type { ModalProps } from "./types";

src/widgets/Modal/types.ts

@@ -1,3 +1,7 @@
-export type ModalTheme = {
+export interface ModalTheme {
   background: string;
-};
+}
+
+export interface ModalProps {
+  onDismiss: () => void;
+}

src/widgets/Nav/Panel.tsx

@@ -63,7 +63,7 @@ const LinkBlock = styled.div`
     width: 100%;
     min-height: 40px;
     padding: 8px 40px;
-    font-weight: bold;
+    font-weight: 600;
     transition: background-color 0.2s;
     color: ${({ theme }) => theme.colors.primary};
     :hover {
@@ -148,7 +148,7 @@ const Panel: React.FC<Props> = ({
         <Dropdown
           target={
             <MenuButton startIcon={<Language color="primary" />} mr="4px">
-              {currentLang}
+              {currentLang.toUpperCase()}
             </MenuButton>
           }
         >

src/widgets/Nav/UserBlock.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import Button from "../../components/Button/Button";
-import useWalletModal from "../WalletModal";
+import { useWalletModal } from "../WalletModal";
 import { Login } from "../WalletModal/types";
 
 interface Props {

src/widgets/Nav/index.tsx

@@ -13,6 +13,7 @@ const StyledNav = styled.nav`
   justify-content: space-between;
   align-items: center;
   padding: 0 18px;
+  width: 100%;
   height: 64px;
   background-color: ${({ theme }) => theme.nav.background};
   ${({ theme }) => theme.mediaQueries.nav} {

src/widgets/WalletModal/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "../../components/Button/Button";
 import Flex from "../../components/Flex/Flex";
-import useWalletModal from "./index";
+import useWalletModal from "./useWalletModal";
 
 export default {
   title: "WalletModal",

src/widgets/WalletModal/index.tsx

@@ -1,18 +1,2 @@
-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: Login, logout: () => void, account?: string): ReturnType => {
-  const [onPresentConnectModal] = useModal(<ConnectModal login={login} />);
-  const [onPresentAccountModal] = useModal(<AccountModal account={account} logout={logout} />);
-  return { onPresentConnectModal, onPresentAccountModal };
-};
-
-export default useWalletModal;
+export { default as useWalletModal } from "./useWalletModal";
+export type { ConnectorId, Login } from "./types";

src/widgets/WalletModal/useWalletModal.tsx

@@ -0,0 +1,18 @@
+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: Login, logout: () => void, account?: string): ReturnType => {
+  const [onPresentConnectModal] = useModal(<ConnectModal login={login} />);
+  const [onPresentAccountModal] = useModal(<AccountModal account={account} logout={logout} />);
+  return { onPresentConnectModal, onPresentAccountModal };
+};
+
+export default useWalletModal;