add terms of service checkbox and link to wallet connect modal

packages/ui/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadaoproject/wallet-adapter-react-ui",
-  "version": "0.9.35",
+  "version": "0.9.37-alpha.4",
   "author": "Solana Maintainers <[email protected]>",
   "repository": {
     "type": "git",

packages/ui/react-ui/src/WalletInfoModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { WalletIllustration } from './WalletIllustration.js';
+import { WalletIllustration } from './Walletillustration';
 
 const steps = [
     {

packages/ui/react-ui/src/WalletListItem.tsx

@@ -10,16 +10,18 @@ export interface WalletListItemProps {
     tabIndex?: number;
     wallet: Wallet;
     className?: string;
+    disabled?: boolean;
 }
 
-export const WalletListItem: FC<WalletListItemProps> = ({ handleClick, tabIndex, wallet, className }) => {
+export const WalletListItem: FC<WalletListItemProps> = ({ handleClick, tabIndex, wallet, className, disabled }) => {
     return (
         <li>
             <Button
                 onClick={handleClick}
                 startIcon={<WalletIcon wallet={wallet} />}
                 tabIndex={tabIndex}
-                className={`wallet-adapter-button ${className || ''}`}
+                className={`wallet-adapter-button ${className || ''} ${disabled ? 'disabled' : ''}`}
+                disabled={disabled}
             >
                 {wallet.adapter.name}
                 {wallet.readyState === WalletReadyState.Installed && <span>Detected</span>}

packages/ui/react-ui/src/WalletModal.tsx

@@ -11,7 +11,6 @@ import { WalletSVG } from './WalletSVG.js';
 import { useWalletModal } from './useWalletModal.js';
 import { motion, AnimatePresence } from 'framer-motion';
 
-
 export interface WalletModalProps {
     className?: string;
     container?: string;
@@ -20,11 +19,11 @@ export interface WalletModalProps {
 export const WalletModal: FC<WalletModalProps> = ({ className = '', container = 'body' }) => {
     const ref = useRef<HTMLDivElement>(null);
     const { wallets, select } = useWallet();
-    const { setVisible } = useWalletModal();
+    const { setVisible, termsUrl } = useWalletModal();
     const [expanded, setExpanded] = useState(false);
     const [fadeIn, setFadeIn] = useState(false);
     const [portal, setPortal] = useState<Element | null>(null);
-
+    const [areTermsAccepted, setAreTermsAccepted] = useState(false);
     const [listedWallets, collapsedWallets] = useMemo(() => {
         const installed: Wallet[] = [];
         const notInstalled: Wallet[] = [];
@@ -63,6 +62,10 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
 
     const handleCollapseClick = useCallback(() => setExpanded(!expanded), [expanded]);
 
+    const handleTermsAcceptanceChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setAreTermsAccepted(event.target.checked);
+    }, []);
+
     const handleTabKey = useCallback(
         (event: KeyboardEvent) => {
             const node = ref.current;
@@ -139,9 +142,24 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
                         {listedWallets.length ? (
                             <>
                                 <h1 className="wallet-adapter-modal-title">Connect a wallet on Solana to continue</h1>
+                                <div className="wallet-adapter-terms-of-service">
+                                    <input
+                                        type="checkbox"
+                                        id="terms-of-service"
+                                        checked={areTermsAccepted}
+                                        onChange={handleTermsAcceptanceChange}
+                                    />
+                                    <label htmlFor="terms-of-service">
+                                        I agree to the{' '}
+                                        <a href={termsUrl} target="_blank">
+                                            Terms of Service
+                                        </a>
+                                    </label>
+                                </div>
                                 <ul className="wallet-adapter-modal-list">
                                     {listedWallets.map((wallet) => (
                                         <WalletListItem
+                                            disabled={!areTermsAccepted}
                                             key={wallet.adapter.name}
                                             handleClick={(event) => handleWalletClick(event, wallet.adapter.name)}
                                             wallet={wallet}
@@ -151,6 +169,7 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
                                         <Collapse expanded={expanded} id="wallet-adapter-modal-collapse">
                                             {collapsedWallets.map((wallet) => (
                                                 <WalletListItem
+                                                    disabled={!areTermsAccepted}
                                                     key={wallet.adapter.name}
                                                     handleClick={(event) =>
                                                         handleWalletClick(event, wallet.adapter.name)

packages/ui/react-ui/src/WalletModalProvider.tsx

@@ -5,6 +5,7 @@ import type { WalletModalProps } from './WalletModal.js';
 import { WalletModal } from './WalletModal.js';
 
 export interface WalletModalProviderProps extends WalletModalProps {
+    termsUrl: string;
     children: ReactNode;
 }
 
@@ -16,6 +17,7 @@ export const WalletModalProvider: FC<WalletModalProviderProps> = ({ children, ..
             value={{
                 visible,
                 setVisible,
+                termsUrl: props.termsUrl,
             }}
         >
             {children}

packages/ui/react-ui/src/useWalletModal.tsx

@@ -3,13 +3,15 @@ import { createContext, useContext } from 'react';
 export interface WalletModalContextState {
     visible: boolean;
     setVisible: (open: boolean) => void;
+    termsUrl: string | undefined;
 }
 
 const DEFAULT_CONTEXT = {
     setVisible(_open: boolean) {
         console.error(constructMissingProviderErrorMessage('call', 'setVisible'));
     },
     visible: false,
+    termsUrl: undefined,
 };
 Object.defineProperty(DEFAULT_CONTEXT, 'visible', {
     get() {
@@ -32,5 +34,11 @@ function constructMissingProviderErrorMessage(action: string, valueName: string)
 export const WalletModalContext = createContext<WalletModalContextState>(DEFAULT_CONTEXT as WalletModalContextState);
 
 export function useWalletModal(): WalletModalContextState {
-    return useContext(WalletModalContext);
+    const context = useContext(WalletModalContext);
+
+    if (!context.termsUrl || !context.termsUrl.length) {
+        throw new Error('You must provide a `termsUrl` prop to the `WalletModalProvider`.');
+    }
+
+    return context;
 }

packages/ui/react-ui/styles.css

@@ -745,4 +745,21 @@
     position: absolute;
     top: 48px;
     left: 62%;
-}
+}
+
+.wallet-adapter-terms-of-service {
+  display: flex;
+  gap: 8px;
+  padding-bottom: 16px;
+}
+
+.wallet-adapter-terms-of-service a {
+  color: #ff4848;
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+.wallet-adapter-button.disabled {
+  opacity: 60%;
+  cursor: not-allowed;
+}