diff --git a/public/assets/images/nut_3d.png b/public/assets/images/nut_3d.png new file mode 100644 index 0000000..955694b Binary files /dev/null and b/public/assets/images/nut_3d.png differ diff --git a/src/Components/IconButton/IconButton.tsx b/src/Components/IconButton/IconButton.tsx index 7356efc..407052e 100644 --- a/src/Components/IconButton/IconButton.tsx +++ b/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 = { blank: "bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 active:scale-95 !border-0" } -const IconButton = React.forwardRef(({ +const IconButton = React.forwardRef>(({ href, size = "md", className = "", diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx index 8e92475..3407622 100644 --- a/src/features/Auth/pages/LoginPage/LoginPage.tsx +++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx @@ -156,17 +156,18 @@ export default function LoginPage() { content =

Login with lightning ⚡

- + diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx index b05d1e3..6f38f33 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx +++ b/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[]>([]); const connectNewWallet = () => { dispatch(openModal({ Modal: "LinkingAccountModal" })) @@ -46,27 +43,18 @@ export default function LinkedAccountsCard({ value, onChange }: Props) {

🔐 Linked Wallets

- 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.

    {value.map((item, idx) => -
  • - 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' /> - -
    - - {value.length > 1 && } -
    -
    • + 1} + onRename={v => updateKeyName(idx, v)} + onDelete={() => deleteKey(idx)} + /> )}
{/*
@@ -88,12 +76,11 @@ export default function LinkedAccountsCard({ value, onChange }: Props) { Save Changes
*/} - {value.length < 3 && - } -
+ {value.length < 3 && + } ) } diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx new file mode 100644 index 0000000..63990a5 --- /dev/null +++ b/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(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 ( +
  • +
    + 🔑 + setName(e.target.value)} + /> + {!editMode && } + {editMode && + } +
    + {canDelete && handleDelete()} + > } +
    • + ) +} diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx index 483eb6f..bfeb522 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx @@ -99,29 +99,24 @@ export default function LinkingAccountModal({ onClose, direction, ...props }: Mo else content =
    - +

    - Scan this QR code with your other lightning wallet & you will be able to use it to login to this account. -
    - 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.

    - {/* Click to connect */}
    @@ -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" > -

    Link new ⚡ wallet

    +

    Connect another ⚡️ wallet

    {content} ) diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx index 87967b4..1261e7f 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx +++ b/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 } }) => ( - + { + onChange(v); + handleSubmit(onSubmit)(); + }} /> )} />