update: new component design

src/Components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom'
 import { UnionToObjectKeys } from 'src/utils/types/utils'
 
@@ -6,7 +6,6 @@ interface Props {
     onClick?: () => void;
     onKeyDown?: (v: any) => void
     href?: string;
-    children: JSX.Element
     className?: string
     size?: "sm" | 'md' | 'lg'
     variant?: 'blank' | 'fill'
@@ -26,7 +25,7 @@ const baseBtnStyles: UnionToObjectKeys<Props, 'variant'> = {
     blank: "bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 active:scale-95 !border-0"
 }
 
-const IconButton = React.forwardRef<any, Props>(({
+const IconButton = React.forwardRef<any, PropsWithChildren<Props>>(({
     href,
     size = "md",
     className = "",

src/features/Auth/pages/LoginPage/LoginPage.tsx

@@ -156,17 +156,18 @@ export default function LoginPage() {
         content = <div className="max-w-[364px] border-2 border-gray-200 rounded-16 p-16 flex flex-col gap-24 items-center" >
 
             <h2 className='text-h5 font-bold text-center'>Login with lightning ⚡</h2>
-            <a href={`lightning:${lnurl}`} className='border-4 border-primary-500 rounded-12 p-8'>
+            <a href={`lightning:${lnurl}`} >
                 <QRCodeSVG
-                    width={160}
-                    height={160}
+                    width={240}
+                    height={240}
                     value={lnurl}
                     bgColor='transparent'
                     imageSettings={{
-                        src: '/assets/icons/nut.svg',
-                        width: 24,
-                        height: 24,
-                        excavate: true
+                        src: '/assets/images/nut_3d.png',
+                        width: 32,
+                        height: 32,
+                        excavate: true,
+
                     }}
                 />
             </a>

src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx

@@ -3,16 +3,14 @@ import { useAppDispatch } from 'src/utils/hooks';
 import { openModal } from 'src/redux/features/modals.slice';
 import Card from 'src/Components/Card/Card';
 import { MyProfile } from 'src/graphql';
-import Skeleton from 'react-loading-skeleton';
-import { useReducer, useRef } from 'react';
-import { Nullable } from 'remirror';
+import WalletKey from './WalletKey';
 
 
-type Value = MyProfile['walletsKeys']
+export type WalletKeyType = MyProfile['walletsKeys'][number]
 
 interface Props {
-    value: Value,
-    onChange: (newValue: Value) => void
+    value: WalletKeyType[],
+    onChange: (newValue: WalletKeyType[]) => void
 }
 
 
@@ -20,7 +18,6 @@ interface Props {
 export default function LinkedAccountsCard({ value, onChange }: Props) {
 
     const dispatch = useAppDispatch();
-    const inputsRefs = useRef<Nullable<HTMLInputElement>[]>([]);
 
     const connectNewWallet = () => {
         dispatch(openModal({ Modal: "LinkingAccountModal" }))
@@ -46,27 +43,18 @@ export default function LinkedAccountsCard({ value, onChange }: Props) {
         <Card>
             <p className="text-body2 font-bold">🔐 Linked Wallets</p>
             <p className="text-body4 text-gray-600 mt-8">
-                These are the wallets that you can login to this account from. You can add a new wallet below.
+                These are the wallets that you can login to this account from. You can add up to 3 wallets.
             </p>
             <div className='mt-24 flex flex-col gap-16'>
                 <ul className="mt-8 relative flex flex-col gap-8">
                     {value.map((item, idx) =>
-                        <li key={item.key} className="flex flex-wrap gap-16 justify-between items-center text-body4 border-b py-12 px-16 border border-gray-200 rounded-16 focus-within:ring-1 ring-primary-200">
-                            <input
-                                ref={el => inputsRefs.current[idx] = el}
-                                type="text"
-                                value={item.name}
-                                onChange={e => {
-                                    updateKeyName(idx, e.target.value)
-                                }}
-                                className='p-0 border-0 focus:border-0 focus:outline-none grow
-                                                focus:ring-0 placeholder:!text-gray-400' />
-
-                            <div className='flex gap-8 ml-auto'>
-                                <Button size='sm' color='none' className='text-blue-400 !p-0' onClick={() => inputsRefs.current[idx]?.focus()}>Rename</Button>
-                                {value.length > 1 && <Button size='sm' color='none' className='text-red-500 !p-0' onClick={() => deleteKey(idx)}>Delete key</Button>}
-                            </div>
-                        </li>
+                        <WalletKey
+                            key={idx}
+                            walletKey={item}
+                            canDelete={value.length > 1}
+                            onRename={v => updateKeyName(idx, v)}
+                            onDelete={() => deleteKey(idx)}
+                        />
                     )}
                 </ul>
                 {/* <div className="flex justify-end gap-8">
@@ -88,12 +76,11 @@ export default function LinkedAccountsCard({ value, onChange }: Props) {
                         Save Changes
                     </Button>
                 </div> */}
-                {value.length < 3 &&
-                    <Button color='white' className='mt-16' onClick={connectNewWallet}>
-                        Connect new wallet ⚡
-                    </Button>}
-
             </div>
+            {value.length < 3 &&
+                <Button color='none' size='sm' className='mt-16 text-gray-600 hover:bg-gray-50' onClick={connectNewWallet}>
+                    + Add another wallet
+                </Button>}
         </Card>
     )
 }

src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx

@@ -0,0 +1,94 @@
+import { useToggle } from '@react-hookz/web';
+import { createAction } from '@reduxjs/toolkit';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { FiTrash2 } from 'react-icons/fi';
+import Button from 'src/Components/Button/Button';
+import IconButton from 'src/Components/IconButton/IconButton';
+import { useReduxEffect } from 'src/utils/hooks/useReduxEffect';
+import { WalletKeyType } from './LinkedAccountsCard'
+import { useAppDispatch } from "src/utils/hooks";
+import { openModal } from "src/redux/features/modals.slice";
+
+interface Props {
+    walletKey: WalletKeyType,
+    canDelete: boolean;
+    onRename: (newName: string) => void
+    onDelete: () => void
+}
+
+
+
+export default function WalletKey({ walletKey, canDelete, onRename, onDelete }: Props) {
+
+    const ref = useRef<HTMLInputElement>(null!);
+    const [name, setName] = useState(walletKey.name);
+    const [editMode, toggleEditMode] = useToggle(false);
+    const dispatch = useAppDispatch();
+
+
+    const CONFIRM_DELETE_WALLET = useMemo(() => createAction<{ confirmed?: boolean }>(`CONFIRM_DELETE_WALLET_${walletKey.key.slice(0, 10)}`)({}), [walletKey.key])
+
+    const saveNameChanges = () => {
+        toggleEditMode();
+        onRename(name);
+    }
+
+    const onConfirmDelete = useCallback(({ payload: { confirmed } }: typeof CONFIRM_DELETE_WALLET) => {
+        if (confirmed)
+            onDelete()
+    }, [onDelete])
+
+    useReduxEffect(onConfirmDelete, CONFIRM_DELETE_WALLET.type);
+
+    useEffect(() => {
+        if (editMode)
+            ref.current.focus()
+    }, [editMode])
+
+    const handleDelete = () => {
+        dispatch(openModal({
+            Modal: "ConfirmModal",
+            props: {
+                callbackAction: {
+                    type: CONFIRM_DELETE_WALLET.type,
+                    payload: {}
+                },
+                actionName: "Remove",
+                title: "Remove key",
+                message: "Are you sure you want to remove this key from your account? Once deleted, you won’t be able to recover it.",
+                color: "red"
+            }
+        }))
+    }
+
+    return (
+        <li key={walletKey.key} className="flex gap-16 items-center">
+            <div className="input-wrapper relative min-w-0">
+                <span className="input-icon !pr-0">🔑</span>
+                <input
+                    ref={ref}
+                    disabled={!editMode}
+                    type='text'
+                    value={name}
+                    className="input-text overflow-hidden text-ellipsis"
+                    placeholder='e.g My Alby Key'
+                    onChange={e => setName(e.target.value)}
+                />
+                {!editMode && <Button size='sm' color='none' className='text-blue-400 shrink-0' onClick={() => toggleEditMode()}>Rename</Button>}
+                {editMode &&
+                    <Button
+                        size='sm'
+                        color='none'
+                        className='text-blue-400 shrink-0'
+                        disabled={name.length === 0}
+                        onClick={saveNameChanges}
+                    >Save</Button>}
+            </div>
+            {canDelete && <IconButton
+                size='sm'
+                className='text-red-500 shrink-0'
+                onClick={() => handleDelete()}
+            ><FiTrash2 /> </IconButton>}
+        </li>
+    )
+}

src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx

@@ -99,29 +99,24 @@ export default function LinkingAccountModal({ onClose, direction, ...props }: Mo
     else
         content =
             <div className='flex flex-col gap-24 items-center mt-32 '>
-                <a href={`lightning:${lnurl}`} className='border-4 border-primary-500 rounded-12 p-8'>
+                <a href={`lightning:${lnurl}`} >
                     <QRCodeSVG
-                        width={160}
-                        height={160}
+                        width={240}
+                        height={240}
                         value={lnurl}
                         bgColor='transparent'
                         imageSettings={{
-                            src: '/assets/icons/nut.svg',
-                            width: 24,
-                            height: 24,
+                            src: '/assets/images/nut_3d.png',
+                            width: 32,
+                            height: 32,
                             excavate: true
                         }}
                     />
                 </a>
                 <p className="text-gray-600 text-body4 text-center">
-                    Scan this QR code with your other lightning wallet & you will be able to use it to login to this account.
-                    <br />
-                    When done, click the button below to close this modal.
+                    Scan this code or copy + paste it to your lightning wallet to connect another account to your maker profile. You can also click the QR code to open your WebLN wallet. When done, click the button below to close this modal.
                 </p>
                 <div className="flex flex-col w-full gap-16">
-                    {/* <a href={lnurl}
-                        className='grow block text-body4 text-center text-white font-bolder bg-primary-500 hover:bg-primary-600 rounded-10 px-16 py-12 active:scale-90 transition-transform'
-                    >Click to connect <IoRocketOutline /></a> */}
                     <Button
                         color='gray'
                         className='grow'
@@ -133,7 +128,7 @@ export default function LinkingAccountModal({ onClose, direction, ...props }: Mo
                         onClick={done}
                         fullWidth
                     >
-                        Done?
+                        Done
                     </Button>
                 </div>
             </div>
@@ -147,10 +142,10 @@ export default function LinkingAccountModal({ onClose, direction, ...props }: Mo
             initial='initial'
             animate="animate"
             exit='exit'
-            className="modal-card max-w-[364px] p-24 rounded-xl relative"
+            className="modal-card max-w-[442px] p-24 rounded-xl relative"
         >
             <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
-            <h2 className='text-h5 font-bold text-center'>Link new ⚡ wallet</h2>
+            <h2 className='text-h5 font-bold text-center'>Connect another ⚡️ wallet</h2>
             {content}
         </motion.div>
     )

src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx

@@ -33,7 +33,6 @@ export default function PreferencesTab() {
             walletsKeys: []
         },
         resolver: yupResolver(schema),
-        mode: 'onBlur',
     });
 
     const query = useMyProfilePreferencesQuery({
@@ -86,7 +85,10 @@ export default function PreferencesTab() {
                     control={control}
                     name="walletsKeys"
                     render={({ field: { onChange, value } }) => (
-                        <LinkedAccountsCard value={value as any} onChange={onChange} />
+                        <LinkedAccountsCard value={value as any} onChange={v => {
+                            onChange(v);
+                            handleSubmit(onSubmit)();
+                        }} />
                     )}
                 />
                 <CommentsSettingsCard nostr_prv_key={query.data.me.nostr_prv_key} nostr_pub_key={query.data.me.nostr_pub_key} />