Merge branch 'master' into dev

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'
   }

api/functions/graphql/schema.graphql

@@ -382,6 +382,7 @@ type Vote {
 }
 
 type WalletKey {
+  is_current: Boolean!
   key: String!
   name: String!
 }

api/functions/graphql/types/users.js

@@ -171,9 +171,9 @@ const MyProfile = objectType({
 
         t.nonNull.list.nonNull.field('walletsKeys', {
             type: "WalletKey",
-            resolve: (parent) => {
+            resolve: async (parent, _, context) => {
-                return prisma.user.findUnique({ where: { id: parent.id } }).userKeys();
+                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')
     }
 })
 

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",
+      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "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",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "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",
+      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
-      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
+      "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
-      "dev": true,
       "dependencies": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.18.3",
-        "@popperjs/core": "^2.5.4",
+        "@popperjs/core": "^2.11.5",
-        "react-popper": "^2.2.4"
+        "react-popper": "^2.3.0"
       },
       "peerDependencies": {
-        "react": "^16.6.0 || ^17.0.0",
+        "react": ">=16.6.0",
-        "react-dom": "^16.6.0 || ^17.0.0"
+        "react-dom": ">=16.6.0"
       }
     },
     "node_modules/react-query": {
@@ -72168,9 +72184,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.9",
+      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "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",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
       "requires": {
         "react-fast-compare": "^3.0.1",
         "warning": "^4.0.2"
       }
     },
     "react-popper-tooltip": {
-      "version": "3.1.1",
+      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
-      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
+      "integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
-      "dev": true,
       "requires": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.18.3",
-        "@popperjs/core": "^2.5.4",
+        "@popperjs/core": "^2.11.5",
-        "react-popper": "^2.2.4"
+        "react-popper": "^2.3.0"
       }
     },
     "react-query": {

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",

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}
+                    width={280}
-                    height={240}
+                    height={280}
                     value={lnurl}
                     bgColor='transparent'
                     imageSettings={{
                         src: '/assets/images/nut_3d.png',
-                        width: 32,
+                        width: 16,
-                        height: 32,
+                        height: 16,
                         excavate: true,
 
                     }}

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

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>
     )
 }

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>
 

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

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

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),

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;
+}