@miden-sdk/miden-wallet-adapter-reactui 0.15.2 → 0.16.0-rc.5

package/src/WalletModal.tsx

@@ -1,23 +1,18 @@
-import type { FC, MouseEvent } from 'react';
-import {
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
+import type { FC, MouseEvent } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   AllowedPrivateData,
   PrivateDataPermission,
   WalletAdapterNetwork,
   WalletName,
   WalletReadyState,
-} from '@miden-sdk/miden-wallet-adapter-base';
-import { useWallet, Wallet } from '@miden-sdk/miden-wallet-adapter-react';
-import { useWalletModal } from './useWalletModal';
-import { WalletListItem } from './WalletListItem';
-import { DiscoverMidenMessage } from './DiscoverMidenMessage';
+} from "@miden-sdk/miden-wallet-adapter-base";
+import { useWallet, Wallet } from "@miden-sdk/miden-wallet-adapter-react";
+import { MidenWalletName } from "@miden-sdk/miden-wallet-adapter-miden";
+import { useWalletModal } from "./useWalletModal";
+import { WalletListItem } from "./WalletListItem";
+import { DiscoverMidenMessage } from "./DiscoverMidenMessage";
 
 export interface WalletModalProps {
   className?: string;
@@ -28,8 +23,8 @@ export interface WalletModalProps {
 }
 
 export const WalletModal: FC<WalletModalProps> = ({
-  className = '',
-  container = 'body',
+  className = "",
+  container = "body",
   privateDataPermission,
   network,
   allowedPrivateData,
@@ -64,7 +59,7 @@ export const WalletModal: FC<WalletModalProps> = ({
         installedWallets[0]!
       : wallets.find(
           (wallet: { adapter: { name: WalletName } }) =>
-            wallet.adapter.name === 'Miden Wallet'
+            wallet.adapter.name === MidenWalletName
         ) ||
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           otherWallets[0]!;
@@ -103,7 +98,7 @@ export const WalletModal: FC<WalletModalProps> = ({
       if (!node) return;
 
       // here we query all focusable elements
-      const focusableElements = node.querySelectorAll('button');
+      const focusableElements = node.querySelectorAll("button");
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const firstElement = focusableElements[0]!;
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -128,9 +123,9 @@ export const WalletModal: FC<WalletModalProps> = ({
 
   useLayoutEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         hideModal();
-      } else if (event.key === 'Tab') {
+      } else if (event.key === "Tab") {
         handleTabKey(event);
       }
     };
@@ -140,14 +135,14 @@ export const WalletModal: FC<WalletModalProps> = ({
     // Hack to enable fade in animation after mount
     setTimeout(() => setFadeIn(true), 0);
     // Prevent scrolling on mount
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
     // Listen for keydown events
-    window.addEventListener('keydown', handleKeyDown, false);
+    window.addEventListener("keydown", handleKeyDown, false);
 
     return () => {
       // Re-enable scrolling when component unmounts
       document.body.style.overflow = overflow;
-      window.removeEventListener('keydown', handleKeyDown, false);
+      window.removeEventListener("keydown", handleKeyDown, false);
     };
   }, [hideModal, handleTabKey]);
 
@@ -175,7 +170,7 @@ export const WalletModal: FC<WalletModalProps> = ({
         aria-labelledby="wallet-adapter-modal-title"
         aria-modal="true"
         className={`wallet-adapter-modal ${
-          fadeIn && 'wallet-adapter-modal-fade-in'
+          fadeIn && "wallet-adapter-modal-fade-in"
         } ${className}`}
         ref={ref}
         role="dialog"
@@ -196,7 +191,7 @@ export const WalletModal: FC<WalletModalProps> = ({
             {installedWallets.length ? (
               <>
                 <div className="wallet-adapter-modal-content">
-                  Connect your Miden Wallet and start exploring its powerful
+                  Connect your Bread Wallet and start exploring its powerful
                   features now!
                   <hr />
                 </div>

package/src/WalletModalButton.tsx

@@ -1,23 +1,31 @@
-import type { FC, MouseEvent } from 'react';
-import { useCallback } from 'react';
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-import { useWalletModal } from './useWalletModal';
+import type { FC, MouseEvent } from "react";
+import { useCallback } from "react";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+import { useWalletModal } from "./useWalletModal";
 
-export const WalletModalButton: FC<ButtonProps> = ({ children = 'Select Wallet', onClick, ...props }) => {
-    const { visible, setVisible } = useWalletModal();
+export const WalletModalButton: FC<ButtonProps> = ({
+  children = "Select Wallet",
+  onClick,
+  ...props
+}) => {
+  const { visible, setVisible } = useWalletModal();
 
-    const handleClick = useCallback(
-        (event: MouseEvent<HTMLButtonElement>) => {
-            if (onClick) onClick(event);
-            if (!event.defaultPrevented) setVisible(!visible);
-        },
-        [onClick, setVisible, visible]
-    );
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      if (onClick) onClick(event);
+      if (!event.defaultPrevented) setVisible(!visible);
+    },
+    [onClick, setVisible, visible]
+  );
 
-    return (
-        <Button className="wallet-adapter-button-trigger" onClick={handleClick} {...props}>
-            {children}
-        </Button>
-    );
+  return (
+    <Button
+      className="wallet-adapter-button-trigger"
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
 };

package/src/WalletModalProvider.tsx

@@ -1,25 +1,28 @@
-import type { FC, ReactNode } from 'react';
-import React, { useState } from 'react';
-import { WalletModalContext } from './useWalletModal';
-import type { WalletModalProps } from './WalletModal';
-import { WalletModal } from './WalletModal';
+import type { FC, ReactNode } from "react";
+import React, { useState } from "react";
+import { WalletModalContext } from "./useWalletModal";
+import type { WalletModalProps } from "./WalletModal";
+import { WalletModal } from "./WalletModal";
 
 export interface WalletModalProviderProps extends WalletModalProps {
-    children: ReactNode;
+  children: ReactNode;
 }
 
-export const WalletModalProvider: FC<WalletModalProviderProps> = ({ children, ...props }) => {
-    const [visible, setVisible] = useState(false);
+export const WalletModalProvider: FC<WalletModalProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
 
-    return (
-        <WalletModalContext.Provider
-            value={{
-                visible,
-                setVisible,
-            }}
-        >
-            {children}
-            {visible && <WalletModal {...props} />}
-        </WalletModalContext.Provider>
-    );
+  return (
+    <WalletModalContext.Provider
+      value={{
+        visible,
+        setVisible,
+      }}
+    >
+      {children}
+      {visible && <WalletModal {...props} />}
+    </WalletModalContext.Provider>
+  );
 };

package/src/WalletMultiButton.tsx

@@ -1,18 +1,12 @@
-import type { FC } from 'react';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useWallet } from '@miden-sdk/miden-wallet-adapter-react';
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-import { useWalletModal } from './useWalletModal';
-import { WalletConnectButton } from './WalletConnectButton';
-import { WalletIcon } from './WalletIcon';
-import { WalletModalButton } from './WalletModalButton';
+import type { FC } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useWallet } from "@miden-sdk/miden-wallet-adapter-react";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+import { useWalletModal } from "./useWalletModal";
+import { WalletConnectButton } from "./WalletConnectButton";
+import { WalletIcon } from "./WalletIcon";
+import { WalletModalButton } from "./WalletModalButton";
 
 export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
   const { address, wallet, disconnect } = useWallet();
@@ -25,7 +19,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
     if (children) return children;
     if (!wallet || !address) return null;
 
-    const underscoreIndex = address.indexOf('_');
+    const underscoreIndex = address.indexOf("_");
     const frontPart = address.slice(0, 6);
     const middlePart = address.slice(underscoreIndex - 4, underscoreIndex);
     return `${frontPart}...${middlePart}`;
@@ -62,12 +56,12 @@ export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
       closeDropdown();
     };
 
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
 
     return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
     };
   }, [ref, closeDropdown]);
 
@@ -82,12 +76,12 @@ export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
         aria-expanded={active}
         className="wallet-adapter-button-trigger"
         style={{
-          pointerEvents: active ? 'none' : 'auto',
-          width: '100%',
-          backgroundColor: '#FFFFFF',
-          border: '1px solid #D7D7D7',
-          color: 'black',
-          ...props.style
+          pointerEvents: active ? "none" : "auto",
+          width: "100%",
+          backgroundColor: "#FFFFFF",
+          border: "1px solid #D7D7D7",
+          color: "black",
+          ...props.style,
         }}
         onClick={openDropdown}
         startIcon={<WalletIcon wallet={wallet} />}
@@ -98,7 +92,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
       <ul
         aria-label="dropdown-list"
         className={`wallet-adapter-dropdown-list ${
-          active && 'wallet-adapter-dropdown-list-active'
+          active && "wallet-adapter-dropdown-list-active"
         }`}
         ref={ref}
         role="menu"
@@ -108,7 +102,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
           className="wallet-adapter-dropdown-list-item"
           role="menuitem"
         >
-          {copied ? 'Copied' : 'Copy address'}
+          {copied ? "Copied" : "Copy address"}
         </li>
         <li
           onClick={openModal}

package/src/index.ts

@@ -1,8 +1,8 @@
-export * from './useWalletModal';
-export * from './WalletConnectButton';
-export * from './WalletModal';
-export * from './WalletModalButton';
-export * from './WalletModalProvider';
-export * from './WalletDisconnectButton';
-export * from './WalletIcon';
-export * from './WalletMultiButton';
+export * from "./useWalletModal";
+export * from "./WalletConnectButton";
+export * from "./WalletModal";
+export * from "./WalletModalButton";
+export * from "./WalletModalProvider";
+export * from "./WalletDisconnectButton";
+export * from "./WalletIcon";
+export * from "./WalletMultiButton";

package/src/useWalletModal.tsx

@@ -1,36 +1,41 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 
 export interface WalletModalContextState {
-    visible: boolean;
-    setVisible: (open: boolean) => void;
+  visible: boolean;
+  setVisible: (open: boolean) => void;
 }
 
 const DEFAULT_CONTEXT = {
-    setVisible(_open: boolean) {
-        console.error(constructMissingProviderErrorMessage('call', 'setVisible'));
-    },
-    visible: false,
+  setVisible(_open: boolean) {
+    console.error(constructMissingProviderErrorMessage("call", "setVisible"));
+  },
+  visible: false,
 };
-Object.defineProperty(DEFAULT_CONTEXT, 'visible', {
-    get() {
-        console.error(constructMissingProviderErrorMessage('read', 'visible'));
-        return false;
-    },
+Object.defineProperty(DEFAULT_CONTEXT, "visible", {
+  get() {
+    console.error(constructMissingProviderErrorMessage("read", "visible"));
+    return false;
+  },
 });
 
-function constructMissingProviderErrorMessage(action: string, valueName: string) {
-    return (
-        'You have tried to ' +
-        `${action} "${valueName}"` +
-        ' on a WalletModalContext without providing one.' +
-        ' Make sure to render a WalletModalProvider' +
-        ' as an ancestor of the component that uses ' +
-        'WalletModalContext'
-    );
+function constructMissingProviderErrorMessage(
+  action: string,
+  valueName: string
+) {
+  return (
+    "You have tried to " +
+    `${action} "${valueName}"` +
+    " on a WalletModalContext without providing one." +
+    " Make sure to render a WalletModalProvider" +
+    " as an ancestor of the component that uses " +
+    "WalletModalContext"
+  );
 }
 
-export const WalletModalContext = createContext<WalletModalContextState>(DEFAULT_CONTEXT as WalletModalContextState);
+export const WalletModalContext = createContext<WalletModalContextState>(
+  DEFAULT_CONTEXT as WalletModalContextState
+);
 
 export function useWalletModal(): WalletModalContextState {
-    return useContext(WalletModalContext);
+  return useContext(WalletModalContext);
 }

package/styles.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 
 .wallet-adapter-button {
   background-color: transparent;
@@ -7,8 +7,8 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
+  font-family:
+    "Inter", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: 600;
   height: 48px;
@@ -18,7 +18,7 @@
 }
 
 .wallet-adapter-button-trigger {
-  background-color: #FF5500;
+  background-color: #ff5500;
 }
 
 .wallet-adapter-button:not([disabled]):focus-visible {
@@ -26,11 +26,11 @@
 }
 
 .wallet-adapter-button:not([disabled]):hover {
-  background-color: #FF5500;
+  background-color: #ff5500;
 }
 
 .wallet-adapter-button[disabled] {
-  background: #F3F3F3;
+  background: #f3f3f3;
   color: black;
   cursor: not-allowed;
 }
@@ -83,12 +83,15 @@
   list-style: none;
   background: white;
   border-radius: 8px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10);
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
-  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease,
+    visibility 200ms;
+  font-family:
+    "Inter", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   width: 100%;
 }
 
@@ -117,7 +120,7 @@
 }
 
 .wallet-adapter-dropdown-list-item:not([disabled]):hover {
-  background-color: #F9F9F9;
+  background-color: #f9f9f9;
 }
 
 .wallet-adapter-modal-collapse-button svg {
@@ -164,7 +167,7 @@
 }
 
 .wallet-adapter-modal-button-close:hover {
-  background-color: #F3F3F3;
+  background-color: #f3f3f3;
 }
 
 .wallet-adapter-modal-overlay {
@@ -202,8 +205,8 @@
   border-radius: 16px;
   background: white;
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
-  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
+  font-family:
+    "Inter", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex: 1;
   color: black;
   overflow: hidden;
@@ -221,11 +224,11 @@
 }
 
 .wallet-adapter-modal-wrapper .wallet-adapter-button:not([disabled]):hover {
-  background-color: #F3F3F3;
+  background-color: #f3f3f3;
 }
 
 .wallet-adapter-modal-wrapper hr {
-  background: #EBEBEB;
+  background: #ebebeb;
   margin-top: 16px;
 }
 
@@ -291,7 +294,7 @@
 }
 
 .wallet-adapter-modal-list .wallet-adapter-button-start-icon {
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e5e5e5;
 }
 
 .wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
@@ -344,7 +347,7 @@
   justify-content: center;
   cursor: pointer;
   width: 100%;
-  background-color: #FF5500;
+  background-color: #ff5500;
   padding: 12px 16px;
   font-size: 16px;
   font-weight: 500;
@@ -354,7 +357,7 @@
 }
 
 .wallet-adapter-modal-middle-button:not([disabled]):hover {
-  background-color: #FF5500;
+  background-color: #ff5500;
 }
 
 .wallet-adapter-modal-middle-button svg {

package/tsconfig.json

@@ -19,14 +19,14 @@
     "downlevelIteration": true,
     "outDir": "dist",
     "declaration": true,
-    "sourceMap": true,
+    "sourceMap": true
   },
   "include": ["src"],
   "typedocOptions": {
     "entryPoints": ["src/index.ts"],
     "out": "docs",
     "compilerOptions": {
-        "ignoreCompilerErrors": true
+      "ignoreCompilerErrors": true
     }
   }
-}
+}