From 39438162d0a2a19676458e74a6e25439aa5902f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladan=20Tomi=C4=87?= Date: Fri, 8 Dec 2023 13:49:39 +0100 Subject: [PATCH 01/14] fix: list view (#565) --- .../Views/DriveListView/DriveListView.tsx | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/Views/DriveListView/DriveListView.tsx b/src/components/Views/DriveListView/DriveListView.tsx index 0e8ee5cf..4194ae43 100644 --- a/src/components/Views/DriveListView/DriveListView.tsx +++ b/src/components/Views/DriveListView/DriveListView.tsx @@ -24,18 +24,39 @@ const DriveListView: FC = ({ }) => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); - const startIndex = page * rowsPerPage; - const endIndex = startIndex + rowsPerPage; + + const folderLength = directories.length; + const folderStartIndex = + page * rowsPerPage > folderLength ? folderLength : page * rowsPerPage; + const folderEndIndex = + folderStartIndex + rowsPerPage > folderLength + ? folderLength + : folderStartIndex + rowsPerPage; + + const someFoldersAreDisplayed = folderEndIndex - folderStartIndex > 0; + const fileStartIndex = someFoldersAreDisplayed + ? 0 + : page * rowsPerPage - folderLength; + const fileEndIndex = someFoldersAreDisplayed + ? rowsPerPage - (folderEndIndex - folderStartIndex) + : fileStartIndex + rowsPerPage; const { pageDirectories, pageFiles } = useMemo( () => ({ - pageDirectories: (directories || []).slice(startIndex, endIndex), - pageFiles: (files || []).slice( - startIndex - directories.length, - endIndex - directories.length + pageDirectories: (directories || []).slice( + folderStartIndex, + folderEndIndex ), + pageFiles: (files || []).slice(fileStartIndex, fileEndIndex), }), - [directories, files, startIndex, endIndex] + [ + directories, + files, + folderStartIndex, + folderEndIndex, + fileStartIndex, + fileEndIndex, + ] ); const handlePageUp = () => { From b7366554d78c087f6f20725170420f0d7b8f608c Mon Sep 17 00:00:00 2001 From: Vladan Date: Wed, 13 Dec 2023 14:07:29 +0100 Subject: [PATCH 02/14] fix: metamask migration dialog --- .../MetamaskCreateAccount.tsx | 2 +- .../MetamaskMigrationDialog.tsx | 4 +++- src/context/FdpStorageContext.tsx | 21 ++++++++++++------- src/styles/globals.scss | 8 +++---- 4 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/Dialogs/MetamaskMigrationDialog/MetamaskCreateAccount.tsx b/src/components/Dialogs/MetamaskMigrationDialog/MetamaskCreateAccount.tsx index 444301d1..5baf0125 100644 --- a/src/components/Dialogs/MetamaskMigrationDialog/MetamaskCreateAccount.tsx +++ b/src/components/Dialogs/MetamaskMigrationDialog/MetamaskCreateAccount.tsx @@ -97,7 +97,7 @@ export default function MetamaskCreateAccount({ await fdpClientRef.current.account.register(request); setWallet(fdpClientRef.current.account.wallet); - setFdpStorageType('native'); + setFdpStorageType('native', undefined, false); setIsLoggedIn(true); setLoginType('username'); setUser(username); diff --git a/src/components/Dialogs/MetamaskMigrationDialog/MetamaskMigrationDialog.tsx b/src/components/Dialogs/MetamaskMigrationDialog/MetamaskMigrationDialog.tsx index 997c187d..b0791063 100644 --- a/src/components/Dialogs/MetamaskMigrationDialog/MetamaskMigrationDialog.tsx +++ b/src/components/Dialogs/MetamaskMigrationDialog/MetamaskMigrationDialog.tsx @@ -55,7 +55,9 @@ const MetamaskMigrationDialog = ({ if (clickOutside) { return; } - setMetamaskMigrationNotification('closed'); + setMetamaskMigrationNotification( + step === Step.COMPLETE ? 'completed' : 'closed' + ); onClose(); }; diff --git a/src/context/FdpStorageContext.tsx b/src/context/FdpStorageContext.tsx index 59d8ab16..db12b716 100644 --- a/src/context/FdpStorageContext.tsx +++ b/src/context/FdpStorageContext.tsx @@ -70,7 +70,8 @@ interface FdpStorageContext { setWallet: (wallet: Wallet) => void; setFdpStorageType: ( type: FDP_STORAGE_TYPE, - config?: FdpContracts.EnsEnvironment + config?: FdpContracts.EnsEnvironment, + create?: boolean ) => void; setFdpStorageConfig: (config: FdpContracts.EnsEnvironment) => void; setUsername: (username: string) => void; @@ -153,15 +154,19 @@ function FdpStorageProvider(props: FdpStorageContextProps) { */ const setFdpStorageType = ( type: FDP_STORAGE_TYPE, - config?: FdpContracts.EnsEnvironment + config?: FdpContracts.EnsEnvironment, + create = true ) => { - if (type === 'native') { - fdpClientRef.current = createFdpStorage(config); - } else if (type === 'blossom') { - fdpClientRef.current = blossom.fdpStorage; - } else { - throw new Error('Unknown FDP storage type'); + if (create) { + if (type === 'native') { + fdpClientRef.current = createFdpStorage(config); + } else if (type === 'blossom') { + fdpClientRef.current = blossom.fdpStorage; + } else { + throw new Error('Unknown FDP storage type'); + } } + setIsLoggedIn(false); setStorageType(type); }; diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 9ec3f679..17330da6 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -305,11 +305,9 @@ scrollbar-width: none; /* Firefox */ } -.light { - .blurred-text { - color: transparent; - text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - } +.blurred-text { + color: transparent; + text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .dark { From 6b14e4a53ee9aba4e00d9bd114ee90db08a60e8a Mon Sep 17 00:00:00 2001 From: Vladan Date: Wed, 13 Dec 2023 15:12:32 +0100 Subject: [PATCH 03/14] feat: hidden functionalities --- package-lock.json | 27 ++-- package.json | 2 +- .../Connect/Metamask/MetamaskConnect.tsx | 2 +- src/components/Forms/LoginForm/LoginForm.tsx | 147 ++++++++++-------- .../Layouts/MainLayout/MainLayout.tsx | 3 +- .../AuthenticationNavbar.tsx | 11 +- .../MainNavigationBar/MainNavigationBar.tsx | 4 +- .../MainSideBar/MainSideBar.tsx | 4 +- 8 files changed, 110 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73874493..b9d5d7c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@fairdatasociety/blossom": "^0.5.0", - "@fairdatasociety/fdp-storage": "^0.13.0", + "@fairdatasociety/fdp-storage": "^0.16.0", "@headlessui/react": "^1.7.14", "@metamask/sdk": "^0.5.6", "@types/react-blockies": "^1.4.1", @@ -3080,13 +3080,13 @@ } }, "node_modules/@fairdatasociety/fdp-storage": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/@fairdatasociety/fdp-storage/-/fdp-storage-0.13.0.tgz", - "integrity": "sha512-7AWAC/enq1SQCisMuD3wT5cKSOxe8KdC5f3nolWcruCUpdWcwe65YtjDeL88m/E/kcituQGAl2IgWGkqoysB/g==", + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/@fairdatasociety/fdp-storage/-/fdp-storage-0.16.0.tgz", + "integrity": "sha512-UM8NBAHyN9yTUi0S8ddyr/lo2cg9oia1xDarS/K8pLCW8CAcvDx4rLC1qUsSmN80fbkOnJpiU0/DY4T7EN6iwQ==", "dependencies": { "@ethersphere/bee-js": "^6.2.0", "@fairdatasociety/fdp-contracts-js": "^3.8.0", - "crypto-js": "^4.1.1", + "crypto-js": "^4.2.0", "ethers": "^5.5.2", "js-sha3": "^0.8.0" }, @@ -9819,8 +9819,9 @@ } }, "node_modules/crypto-js": { - "version": "4.1.1", - "license": "MIT" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" }, "node_modules/crypto-random-string": { "version": "2.0.0", @@ -25008,13 +25009,13 @@ "requires": {} }, "@fairdatasociety/fdp-storage": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/@fairdatasociety/fdp-storage/-/fdp-storage-0.13.0.tgz", - "integrity": "sha512-7AWAC/enq1SQCisMuD3wT5cKSOxe8KdC5f3nolWcruCUpdWcwe65YtjDeL88m/E/kcituQGAl2IgWGkqoysB/g==", + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/@fairdatasociety/fdp-storage/-/fdp-storage-0.16.0.tgz", + "integrity": "sha512-UM8NBAHyN9yTUi0S8ddyr/lo2cg9oia1xDarS/K8pLCW8CAcvDx4rLC1qUsSmN80fbkOnJpiU0/DY4T7EN6iwQ==", "requires": { "@ethersphere/bee-js": "^6.2.0", "@fairdatasociety/fdp-contracts-js": "^3.8.0", - "crypto-js": "^4.1.1", + "crypto-js": "^4.2.0", "ethers": "^5.5.2", "js-sha3": "^0.8.0" } @@ -29926,7 +29927,9 @@ } }, "crypto-js": { - "version": "4.1.1" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" }, "crypto-random-string": { "version": "2.0.0" diff --git a/package.json b/package.json index f1cd9020..186b57df 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@fairdatasociety/blossom": "^0.5.0", - "@fairdatasociety/fdp-storage": "^0.13.0", + "@fairdatasociety/fdp-storage": "^0.16.0", "@headlessui/react": "^1.7.14", "@metamask/sdk": "^0.5.6", "@types/react-blockies": "^1.4.1", diff --git a/src/components/Connect/Metamask/MetamaskConnect.tsx b/src/components/Connect/Metamask/MetamaskConnect.tsx index 9917e233..6a1c4ccf 100644 --- a/src/components/Connect/Metamask/MetamaskConnect.tsx +++ b/src/components/Connect/Metamask/MetamaskConnect.tsx @@ -74,7 +74,7 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => { setAddress(wallet.address); setMnemonic(mnemonic); - router.push('/overview'); + router.push('/drive'); } catch (error) { console.error(error); setErrorMessage(String(error.message || error)); diff --git a/src/components/Forms/LoginForm/LoginForm.tsx b/src/components/Forms/LoginForm/LoginForm.tsx index 3443a668..ff06b46d 100644 --- a/src/components/Forms/LoginForm/LoginForm.tsx +++ b/src/components/Forms/LoginForm/LoginForm.tsx @@ -19,6 +19,7 @@ import { setDefaultNetwork } from '@utils/localStorage'; import { useLocales } from '@context/LocalesContext'; import CustomCheckbox from '@components/Inputs/CustomCheckbox/CustomCheckbox'; import { useMatomoContext } from '@context/Matomo'; +import MetamaskConnect from '@components/Connect/Metamask/MetamaskConnect'; const ALLOW_TRACKING_KEY = 'allow-matomo'; @@ -51,6 +52,7 @@ const LoginForm: FC = () => { } = useFdpStorage(); const router = useRouter(); const { intl } = useLocales(); + const fdsLoginEnabled = router?.query['fdsLogin'] === 'true'; const onSubmit = async (data: { user_name: string; password: string }) => { try { @@ -131,78 +133,87 @@ const LoginForm: FC = () => { -
- - - - - - - - - {intl.get('ALLOW_TRACKING')} - - -
-
-
- - {intl.get('REGISTER_NEW_ACCOUNT')} - + {intl.get('ALLOW_TRACKING')} + + +
+
+ + + + ) : ( +
+ + {/* eslint-disable-next-line @typescript-eslint/no-empty-function */} + {}} onError={() => {}} /> +
- + )}
); diff --git a/src/components/Layouts/MainLayout/MainLayout.tsx b/src/components/Layouts/MainLayout/MainLayout.tsx index 54a802f2..6f5e1a86 100644 --- a/src/components/Layouts/MainLayout/MainLayout.tsx +++ b/src/components/Layouts/MainLayout/MainLayout.tsx @@ -49,7 +49,8 @@ const MainLayout: FC = ({
-
+ {/* sm:w-28 */} +
{ const { intl } = useLocales(); + const router = useRouter(); + const fdsLoginEnabled = router?.query['fdsLogin'] === 'true'; return (
{
- - - + {fdsLoginEnabled && ( + + + + )} diff --git a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx index 0678c37c..8ddc77d1 100644 --- a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx +++ b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx @@ -31,7 +31,7 @@ const MainNavigationBar: FC> = () => {