From eb7eeb538226c3d9f86d9b797eaea87298db418f Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Thu, 18 Aug 2022 18:55:24 +0300 Subject: [PATCH] update: new component design --- public/assets/images/nut_3d.png | Bin 0 -> 9125 bytes src/Components/IconButton/IconButton.tsx | 5 +- .../Auth/pages/LoginPage/LoginPage.tsx | 15 +-- .../LinkedAccountsCard/LinkedAccountsCard.tsx | 45 +++------ .../LinkedAccountsCard/WalletKey.tsx | 94 ++++++++++++++++++ .../LinkingAccountModal.tsx | 25 ++--- .../PreferencesTab/PreferencesTab.tsx | 6 +- 7 files changed, 134 insertions(+), 56 deletions(-) create mode 100644 public/assets/images/nut_3d.png create mode 100644 src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx diff --git a/public/assets/images/nut_3d.png b/public/assets/images/nut_3d.png new file mode 100644 index 0000000000000000000000000000000000000000..955694b66794ede819d84eaacf9c88f5f3e5f9ba GIT binary patch literal 9125 zcmV;WBU;>vP)%$f54`|q+K-taxo?97~h%9-yyUp-|-4$&bx zM2F}Q9isY?CI1g;=FFMR_U_%=v9hxAD4aGaFE6*Ns;cZ7P(?)rcQrUKFDolshr`b& zPo7*R2MK+v0r~jjk6Y~AxwAKzI~-eg0B|I>jyNvBUaG1prLwXL`zm$JJtJf6bLMBEK%n>}#gz{M!D ziRaz>lJP@=*7?Kg#pt>S^ZUBYg zECetw4;?ymR!&aNN3tL3pacZWw*bWXVBYySF2%linDJpiJgG1M(ExCx1XP7VFr>l+ zfycIu<7#ZSjWYgb%b-Dn>@&_d+Wag#JNq@+4|GrgvS!Viyo!pl8!IcT$AU4P zH8Xw2SBO?m8j!Gh(l(>Inp;g!B6#dF+yle~K`|ZI^PFJt-XJK>d3JV=oOar20z32D zf`Wp{`T6;qr2*-n0A%&*)g3A-s{RMQ&(-+we68Pu(%^%kkAqdxP24VWz9vI>(wURpJoq zGIi?I7TdRPpSo+;t}B{0Z8}@_kq$T@OP4Oa0v|XDOe#`LaG7UsEfzyA8`k+3W8%0AEm1LT7b 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 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)(); + }} /> )} />