Merge branch 'dev' into feature/tournament-pages

2026-02-09 16:44:26 +01:00 · 2022-09-04 09:45:30 +03:00
parent c9df0a96a6 5745869e82
commit ad5e5ac948
21 changed files with 198 additions and 101 deletions
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -305,6 +305,7 @@ export interface NexusGenObjects {
    payment_request: string; // String!
  }
  WalletKey: { // root type
+    is_current: boolean; // Boolean!
    key: string; // String!
    name: string; // String!
  }
@@ -611,6 +612,7 @@ export interface NexusGenFieldTypes {
    payment_request: string; // String!
  }
  WalletKey: { // field return type
+    is_current: boolean; // Boolean!
    key: string; // String!
    name: string; // String!
  }
@@ -935,6 +937,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
@@ -425,6 +425,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/api/functions/upload-image-url/upload-image-url.js
+++ b/api/functions/upload-image-url/upload-image-url.js
@@ -7,6 +7,9 @@ const { getDirectUploadUrl } = require('../../services/imageUpload.service')
 const { prisma } = require('../../prisma')

 const postUploadImageUrl = async (req, res) => {
+
+    return res.status(404).send("This api is in progress");
+
    const userPubKey = await extractKeyFromCookie(req.headers.cookie ?? req.headers.Cookie)
    const user = await getUserByPubKey(userPubKey)

--- a/package-lock.json
+++ b/package-lock.json
@@ -79,6 +79,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",
@@ -2147,9 +2148,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"
      },
@@ -10146,6 +10147,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",
@@ -62367,31 +62383,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": {
@@ -72194,9 +72210,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"
      }
@@ -78277,6 +78293,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"
+          }
        }
      }
    },
@@ -118480,23 +118507,22 @@
      "requires": {}
    },
    "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
@@ -74,6 +74,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/Components/InfoCard/InfoCard.tsx
+++ b/src/Components/InfoCard/InfoCard.tsx
@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from 'react'
+
+interface Props {
+
+}
+
+export default function InfoCard(props: PropsWithChildren<Props>) {
+    return (
+        <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
+            <p className="text-body5 text-gray-600">
+                {props.children}
+            </p>
+        </div>
+    )
+}
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -1,7 +1,7 @@
 import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
 import { useAppSelector, usePressHolder, useResizeListener, useVote } from 'src/utils/hooks'
-import { ComponentProps, SyntheticEvent, useRef, useState } from 'react'
+import { ComponentProps, SyntheticEvent, useRef, useState, useEffect } from 'react'
 import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
 import { useDebouncedCallback, useMountEffect, useThrottledCallback } from '@react-hookz/web'
@@ -179,28 +179,44 @@ export default function VoteButton({
        onHold();
    }

-    useMountEffect(() => {
-        const bodyRect = document.body.getBoundingClientRect();
-        const btnRect = btnContainerRef.current.getBoundingClientRect()
-        setBtnPosition({
-            top: btnRect.top - bodyRect.top,
-            left: btnRect.left - bodyRect.left,
-            width: btnRect.width,
-            height: btnRect.height
-        });
+    const updateParticlesContainerPos = useDebouncedCallback(
+        () => {
+            const bodyRect = document.body.getBoundingClientRect();
+            const btnRect = btnContainerRef.current.getBoundingClientRect()
+            setBtnPosition({
+                top: btnRect.top - bodyRect.top,
+                left: btnRect.left - bodyRect.left,
+                width: btnRect.width,
+                height: btnRect.height
+            });
+        },
+        [],
+        300
+    )

-    })

-    useResizeListener(() => {
-        const bodyRect = document.body.getBoundingClientRect();
-        const btnRect = btnContainerRef.current.getBoundingClientRect()
-        setBtnPosition({
-            top: btnRect.top - bodyRect.top,
-            left: btnRect.left - bodyRect.left,
-            width: btnRect.width,
-            height: btnRect.height
-        });
-    }, { debounce: 300 })
+    useEffect(() => {
+        updateParticlesContainerPos();
+        document.addEventListener('scroll', updateParticlesContainerPos)
+        document.addEventListener('resize', updateParticlesContainerPos)
+
+        return () => {
+
+            document.removeEventListener('scroll', updateParticlesContainerPos)
+            document.removeEventListener('resize', updateParticlesContainerPos)
+        }
+    }, [updateParticlesContainerPos])
+
+    // useResizeListener(() => {
+    //     const bodyRect = document.body.getBoundingClientRect();
+    //     const btnRect = btnContainerRef.current.getBoundingClientRect()
+    //     setBtnPosition({
+    //         top: btnRect.top - bodyRect.top,
+    //         left: btnRect.left - bodyRect.left,
+    //         width: btnRect.width,
+    //         height: btnRect.height
+    //     });
+    // }, { debounce: 300 })

    return (
        <button
--- 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
@@ -4,6 +4,7 @@ import { openModal } from 'src/redux/features/modals.slice';
 import Card from 'src/Components/Card/Card';
 import { MyProfile } from 'src/graphql';
 import WalletKey from './WalletKey';
+import InfoCard from 'src/Components/InfoCard/InfoCard';


 export type WalletKeyType = MyProfile['walletsKeys'][number]
@@ -38,6 +39,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,38 +52,21 @@ 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}>
                    + Add another wallet
                </Button>}
-            <p className="text-body5 text-gray-400 mt-24"><span className="font-bold">Note</span>: if you link a wallet that was used to create another account previously, you won't be able to login to that account until you remove it from here.</p>
+            <InfoCard>
+                <span className="font-bold">💡 Note:</span> if you link a wallet that was used to create another account previously, you won't be able to login to that account until you remove it from here.
+            </InfoCard>
        </Card>
    )
 }
--- 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
-                size='sm'
-                className='text-red-500 shrink-0'
-                onClick={() => handleDelete()}
-            ><FiTrash2 /> </IconButton>}
+            {hasMultiWallets && <div className="min-w-[60px] flex justify-center">
+                {!walletKey.is_current ?
+                    <IconButton
+                        size='sm'
+                        className='text-red-500 shrink-0 mx-auto'
+                        onClick={() => handleDelete()}
+                    ><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 className='p-0 border-0 focus:border-0 focus:outline-none grow
+                                <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>
+                                            <Skeleton width='20ch'></Skeleton>
+                                        </div>
+                                    </li>
+                                    <div className="min-w-[60px]"></div>
+                                </div>
                            )}
                        </ul>

--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx
@@ -80,7 +80,7 @@ export default function PreferencesTab() {

    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <div className="col-span-2 flex flex-col gap-24">
+            <div className="md:col-span-2 flex flex-col gap-24">
                <Controller
                    control={control}
                    name="walletsKeys"
--- 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/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -105,7 +105,7 @@ export default function PreferencesTab() {

    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <div className="col-span-2 flex flex-col gap-24">
+            <div className="md:col-span-2 flex flex-col gap-24">
                <Controller
                    control={control}
                    name="roles"
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { GrClose } from 'react-icons/gr'
 import Card from 'src/Components/Card/Card'
+import InfoCard from 'src/Components/InfoCard/InfoCard'
 import { MakerSkill } from 'src/graphql'
 import SkillsInput from './SkillsInput'

@@ -44,6 +45,10 @@ export default function UpdateSkillsCard(props: Props) {
                    {idToValue.get(skill.id)?.title} <button className='ml-8' onClick={() => remove(skill.id)}><GrClose /></button>
                </li>)}
            </ul>}
+
+            <InfoCard>
+                <span className="font-bold">ℹ️ Can't find a specific skill?</span> You can suggest it to be added <a href="https://github.com/peakshift/makers.bolt.fun/discussions/143" target='_blank' rel="noreferrer" className='font-bold underline'>here</a>
+            </InfoCard>
        </Card>
    )
 }
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -12,8 +12,6 @@ import SkillsCard from "./SkillsCard/SkillsCard"
 import TournamentsCard from "./TournamentsCard/TournamentsCard"
 import { MEDIA_QUERIES } from "src/utils/theme"
 import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
-import { useEffect } from "react"
-import { gql, useApolloClient } from "@apollo/client"

 export default function ProfilePage() {

@@ -65,7 +63,7 @@ export default function ProfilePage() {
                            <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
                            <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                        </main>
-                        <aside>
+                        <aside className="min-w-0">
                            <SimilarMakersCard makers={profileQuery.data.profile.similar_makers} />
                        </aside>
                    </>
--- a/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
@@ -25,8 +25,8 @@ export default function SimilarMakersCard({ makers }: Props) {
                    return <Link key={maker.id} to={createRoute({ type: "profile", id: maker.id, username: maker.name })} className="border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
                        <li className="flex items-start gap-8">
                            <Avatar width={40} src={maker.avatar} />
-                            <div>
-                                <p className="text-body4 text-gray-800 font-medium">{maker.name}</p>
+                            <div className='overflow-hidden'>
+                                <p className="text-body4 text-gray-800 font-medium overflow-hidden text-ellipsis">{maker.name}</p>
                                <p className="text-body5 text-gray-500 font-medium">{maker.jobTitle}</p>
                            </div>
                        </li>
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -601,6 +601,7 @@ export type Vote = {

 export type WalletKey = {
  __typename?: 'WalletKey';
+  is_current: Scalars['Boolean'];
  key: Scalars['String'];
  name: Scalars['String'];
 };
@@ -725,7 +726,7 @@ export type UpdateProfileAboutMutation = { __typename?: 'Mutation', updateProfil
 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 };
+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>;
@@ -1650,6 +1651,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;
+}