Merge branch 'master' into dev

2025-12-18 23:04:20 +01:00 · 2022-09-01 15:51:36 +03:00
parent 21ab8cbed2 03130129aa
commit 88f22b59d9
13 changed files with 307 additions and 218 deletions
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -271,6 +271,7 @@ export interface NexusGenObjects {
    payment_request: string; // String!
  }
  WalletKey: { // root type
+    is_current: boolean; // Boolean!
    key: string; // String!
    name: string; // String!
  }
@@ -544,6 +545,7 @@ export interface NexusGenFieldTypes {
    payment_request: string; // String!
  }
  WalletKey: { // field return type
+    is_current: boolean; // Boolean!
    key: string; // String!
    name: string; // String!
  }
@@ -835,6 +837,7 @@ export interface NexusGenFieldTypeNames {
    payment_request: 'String'
  }
  WalletKey: { // field return type name
+    is_current: 'Boolean'
    key: 'String'
    name: 'String'
  }
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -382,6 +382,7 @@ type Vote {
 }

 type WalletKey {
+  is_current: Boolean!
  key: String!
  name: String!
 }
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -171,9 +171,9 @@ const MyProfile = objectType({

        t.nonNull.list.nonNull.field('walletsKeys', {
            type: "WalletKey",
-            resolve: (parent) => {
-                return prisma.user.findUnique({ where: { id: parent.id } }).userKeys();
-
+            resolve: async (parent, _, context) => {
+                const userKeys = await prisma.user.findUnique({ where: { id: parent.id } }).userKeys();
+                return userKeys.map(k => ({ ...k, is_current: k.key === context.userPubKey }))
            }
        });
    }
@@ -283,6 +283,7 @@ const WalletKey = objectType({
    definition(t) {
        t.nonNull.string('key');
        t.nonNull.string('name');
+        t.nonNull.boolean('is_current')
    }
 })

--- a/package-lock.json
+++ b/package-lock.json
@@ -78,6 +78,7 @@
        "react-loader-spinner": "^6.0.0-0",
        "react-loading-skeleton": "^3.1.0",
        "react-modal": "^3.15.1",
+        "react-popper-tooltip": "^4.4.2",
        "react-query": "^3.35.0",
        "react-redux": "^8.0.0",
        "react-router-dom": "^6.3.0",
@@ -2146,9 +2147,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
      "dependencies": {
        "regenerator-runtime": "^0.13.4"
      },
@@ -10145,6 +10146,21 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "dev": true
    },
+    "node_modules/@storybook/components/node_modules/react-popper-tooltip": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
+      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.5.4",
+        "react-popper": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0",
+        "react-dom": "^16.6.0 || ^17.0.0"
+      }
+    },
    "node_modules/@storybook/core": {
      "version": "6.4.22",
      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.4.22.tgz",
@@ -62342,31 +62358,31 @@
      }
    },
    "node_modules/react-popper": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
      "dependencies": {
        "react-fast-compare": "^3.0.1",
        "warning": "^4.0.2"
      },
      "peerDependencies": {
        "@popperjs/core": "^2.0.0",
-        "react": "^16.8.0 || ^17"
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
      }
    },
    "node_modules/react-popper-tooltip": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
-      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
-      "dev": true,
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
+      "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@popperjs/core": "^2.5.4",
-        "react-popper": "^2.2.4"
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "react-popper": "^2.3.0"
      },
      "peerDependencies": {
-        "react": "^16.6.0 || ^17.0.0",
-        "react-dom": "^16.6.0 || ^17.0.0"
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
      }
    },
    "node_modules/react-query": {
@@ -72168,9 +72184,9 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@@ -78241,6 +78257,17 @@
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true
+        },
+        "react-popper-tooltip": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
+          "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "@popperjs/core": "^2.5.4",
+            "react-popper": "^2.2.4"
+          }
        }
      }
    },
@@ -118366,23 +118393,22 @@
      "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q=="
    },
    "react-popper": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
      "requires": {
        "react-fast-compare": "^3.0.1",
        "warning": "^4.0.2"
      }
    },
    "react-popper-tooltip": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
-      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
-      "dev": true,
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
+      "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
      "requires": {
-        "@babel/runtime": "^7.12.5",
-        "@popperjs/core": "^2.5.4",
-        "react-popper": "^2.2.4"
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "react-popper": "^2.3.0"
      }
    },
    "react-query": {
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
    "react-loader-spinner": "^6.0.0-0",
    "react-loading-skeleton": "^3.1.0",
    "react-modal": "^3.15.1",
+    "react-popper-tooltip": "^4.4.2",
    "react-query": "^3.35.0",
    "react-redux": "^8.0.0",
    "react-router-dom": "^6.3.0",
--- a/src/features/Auth/pages/LoginPage/LoginPage.tsx
+++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx
@@ -158,14 +158,14 @@ export default function LoginPage() {
            <h2 className='text-h5 font-bold text-center'>Login with lightning ⚡</h2>
            <a href={`lightning:${lnurl}`} >
                <QRCodeSVG
-                    width={240}
-                    height={240}
+                    width={280}
+                    height={280}
                    value={lnurl}
                    bgColor='transparent'
                    imageSettings={{
                        src: '/assets/images/nut_3d.png',
-                        width: 32,
-                        height: 32,
+                        width: 16,
+                        height: 16,
                        excavate: true,

                    }}
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx
@@ -38,6 +38,7 @@ export default function LinkedAccountsCard({ value, onChange }: Props) {
        onChange([...value.slice(0, idx), ...value.slice(idx + 1)])
    }

+    const hasMultiWallets = value.length > 1;

    return (
        <Card>
@@ -50,32 +51,13 @@ export default function LinkedAccountsCard({ value, onChange }: Props) {
                    {value.map((item, idx) =>
                        <WalletKey
                            key={idx}
+                            hasMultiWallets={hasMultiWallets}
                            walletKey={item}
-                            canDelete={value.length > 1}
                            onRename={v => updateKeyName(idx, v)}
                            onDelete={() => deleteKey(idx)}
                        />
                    )}
                </ul>
-                {/* <div className="flex justify-end gap-8">
-                    <Button
-                        color='gray'
-                        className=''
-                        disabled={!keysState.hasNewChanges || updatingKeysStatus.loading}
-                        onClick={cancelChanges}
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        color='black'
-                        className=''
-                        disabled={!keysState.hasNewChanges}
-                        isLoading={updatingKeysStatus.loading}
-                        onClick={saveChanges}
-                    >
-                        Save Changes
-                    </Button>
-                </div> */}
            </div>
            {value.length < 3 &&
                <Button color='none' size='sm' className='mt-16 text-gray-600 hover:bg-gray-50' onClick={connectNewWallet}>
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx
@@ -1,24 +1,26 @@
 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 { FiTrash2, FiLock } 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";
+import 'react-popper-tooltip/dist/styles.css';
+import { usePopperTooltip } from 'react-popper-tooltip';

 interface Props {
    walletKey: WalletKeyType,
-    canDelete: boolean;
+    hasMultiWallets?: boolean;
    onRename: (newName: string) => void
    onDelete: () => void
 }



-export default function WalletKey({ walletKey, canDelete, onRename, onDelete }: Props) {
+export default function WalletKey({ walletKey, hasMultiWallets, onRename, onDelete }: Props) {

    const ref = useRef<HTMLInputElement>(null!);
    const [name, setName] = useState(walletKey.name);
@@ -26,6 +28,15 @@ export default function WalletKey({ walletKey, canDelete, onRename, onDelete }:
    const dispatch = useAppDispatch();


+
+    const {
+        getArrowProps,
+        getTooltipProps,
+        setTooltipRef,
+        setTriggerRef,
+        visible,
+    } = usePopperTooltip();
+
    const CONFIRM_DELETE_WALLET = useMemo(() => createAction<{ confirmed?: boolean }>(`CONFIRM_DELETE_WALLET_${walletKey.key.slice(0, 10)}`)({}), [walletKey.key])

    const saveNameChanges = () => {
@@ -80,11 +91,31 @@ export default function WalletKey({ walletKey, canDelete, onRename, onDelete }:
                        onClick={saveNameChanges}
                    >Save</Button>}
            </div>
-            {canDelete && <IconButton
+            {hasMultiWallets && <div className="min-w-[60px] flex justify-center">
+                {!walletKey.is_current ?
+                    <IconButton
                        size='sm'
-                className='text-red-500 shrink-0'
+                        className='text-red-500 shrink-0 mx-auto'
                        onClick={() => handleDelete()}
-            ><FiTrash2 /> </IconButton>}
+                    ><FiTrash2 /> </IconButton>
+                    : <>
+                        <span ref={setTriggerRef} >
+                            <FiLock className="text-body4 text-gray-400" />
+                        </span>
+                        {visible && (
+                            <div
+                                ref={setTooltipRef}
+                                {...getTooltipProps({ className: 'tooltip-container !bg-gray-900 !text-white text-body5 !rounded-12 !p-12' })}
+                            >
+                                <div {...getArrowProps({ className: 'tooltip-arrow' })} />
+                                You're now logged-in with this wallet. <br /> To remove it, login to your account with a different wallet.
+                            </div>
+                        )}
+                    </>
+
+                }
+
+            </div>}
        </li>
    )
 }
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx
@@ -16,12 +16,15 @@ export default function PreferencesTabSkeleton() {
                    <div className='mt-24 flex flex-col gap-16'>
                        <ul className="mt-8 relative flex flex-col gap-8">
                            {Array(3).fill(0).map((_, idx) =>
-                                <li key={idx} 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">
+                                <div key={idx} className='flex gap-16'>
+                                    <li className="grow 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">
                                        <div className='p-0 border-0 focus:border-0 focus:outline-none grow
                                                focus:ring-0 placeholder:!text-gray-400' >
                                            <Skeleton width='20ch'></Skeleton>
                                        </div>
                                    </li>
+                                    <div className="min-w-[60px]"></div>
+                                </div>
                            )}
                        </ul>

--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql
@@ -4,6 +4,7 @@ query MyProfilePreferences {
    walletsKeys {
      key
      name
+      is_current
    }
    nostr_prv_key
    nostr_pub_key
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -549,6 +549,7 @@ export type Vote = {

 export type WalletKey = {
  __typename?: 'WalletKey';
+  is_current: Scalars['Boolean'];
  key: Scalars['String'];
  name: Scalars['String'];
 };
@@ -672,6 +673,38 @@ export type UpdateProfileAboutMutation = { __typename?: 'Mutation', updateProfil

 export type MyProfilePreferencesQueryVariables = Exact<{ [key: string]: never; }>;

+type UserBasicInfo_User_Fragment = { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null };
+
+export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string, is_current: boolean }> } | null };
+
+export type UpdateUserPreferencesMutationVariables = Exact<{
+  walletsKeys: InputMaybe<Array<UserKeyInputType> | UserKeyInputType>;
+}>;
+
+
+export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', id: number, nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } };
+>>>>>>> master
+
+type UserRolesSkills_MyProfile_Fragment = { __typename?: 'MyProfile', skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> };
+
+type UserRolesSkills_User_Fragment = { __typename?: 'User', skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> };
+
+export type UserRolesSkillsFragment = UserRolesSkills_MyProfile_Fragment | UserRolesSkills_User_Fragment;
+
+export type MyProfileRolesSkillsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MyProfileRolesSkillsQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null, getAllMakersRoles: Array<{ __typename?: 'GenericMakerRole', id: number, title: string, icon: string }>, getAllMakersSkills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> };
+
+export type UpdateUserRolesSkillsMutationVariables = Exact<{
+  data: InputMaybe<ProfileRolesInput>;
+}>;
+
+
+export type UpdateUserRolesSkillsMutation = { __typename?: 'Mutation', updateProfileRoles: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
+
+export type MyProfilePreferencesQueryVariables = Exact<{ [key: string]: never; }>;
+

 export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } | null };

@@ -1591,6 +1624,7 @@ export const MyProfilePreferencesDocument = gql`
    walletsKeys {
      key
      name
+      is_current
    }
    nostr_prv_key
    nostr_pub_key
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -118,11 +118,13 @@ export const user: User & MyProfile = {
    walletsKeys: [
        {
            key: "1645h234j2421zxvertw",
-            name: "My Alby wallet key"
+            name: "My Alby wallet key",
+            is_current: true
        },
        {
            key: "66345134234235",
-            name: "My Phoenix wallet key"
+            name: "My Phoenix wallet key",
+            is_current: false
        },],
    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
    skills: randomItems(7, ...allMakersSkills),
--- a/src/styles/vendors.scss
+++ b/src/styles/vendors.scss
@@ -39,3 +39,7 @@
  transition-timing-function: ease-in;
  transition-duration: 400ms;
 }
+
+.tooltip-arrow::after {
+  border-color: var(--arrowColor, #101828) transparent !important;
+}