From 6aa6d582a52b13c6e2bc0000e4086bc014de0301 Mon Sep 17 00:00:00 2001 From: Dominik Zborowski Date: Thu, 2 Nov 2023 11:38:43 +0100 Subject: [PATCH] chore: rework into Pinia ORM (#120) --- app.vue | 88 +- components/AppAvatar.vue | 15 +- components/AppButtonConnectOrInstall.vue | 4 +- components/AppNavbar.vue | 37 +- components/AppNavbarProfileDropdown.vue | 8 +- components/AssetBalance.vue | 4 +- components/AssetCreator.vue | 25 +- components/AssetImages.vue | 6 +- components/AssetLinks.vue | 2 +- components/AssetOwnInfo.vue | 15 +- components/ModalTemplateSelectAssets.vue | 37 +- components/NftList.vue | 10 +- components/NftListCard.vue | 37 +- components/{profile.vue => ProfileCard.vue} | 24 +- components/ProfileDetails.vue | 23 +- components/SendCardAmount.vue | 8 +- components/SendCardDraft.vue | 21 +- components/SendCardHeader.vue | 13 +- components/SendCardProfileSearch.vue | 29 +- components/TokenList.vue | 11 +- components/TokenListCard.vue | 49 +- components/TokenListLyxCard.vue | 23 +- composables/useAsset.ts | 52 + composables/useBrowserExtension.ts | 59 +- composables/useConnectedProfile.ts | 23 + composables/useErc725.ts | 136 --- composables/useProfile.ts | 20 + composables/useProfileBase.ts | 31 - composables/useViewedProfile.ts | 21 + composables/useWeb3.ts | 3 + models/asset.ts | 62 + models/base.ts | 16 + models/creator.ts | 40 + models/image.ts | 36 + models/profile.ts | 71 ++ nuxt.config.ts | 3 +- package.json | 9 +- pages/[profileAddress]/index.vue | 65 +- pages/[profileAddress]/lyx-details.vue | 32 +- .../nft/[nftAddress]/tokenId/[tokenId].vue | 117 -- pages/[profileAddress]/send.vue | 65 +- .../[profileAddress]/token/[tokenAddress].vue | 111 -- .../asset/[nftAddress]/tokenId/[tokenId].vue | 114 ++ pages/asset/[tokenAddress].vue | 102 ++ pages/index.vue | 20 +- repositories/asset.ts | 190 +++ repositories/creator.ts | 26 + repositories/image.ts | 35 + repositories/profile.ts | 49 + shared/config.ts | 22 +- shared/enums.ts | 12 +- shared/errors.ts | 4 +- shared/routes.ts | 10 +- stores/app.ts | 90 +- stores/currency.ts | 1 - stores/profileConnected.ts | 30 - stores/profileViewed.ts | 140 --- stores/send.ts | 6 +- .../e2e/404.spec.ts-snapshots/404-chrome.png | Bin 102800 -> 101751 bytes .../landing-no-extension-chrome.png | Bin 197504 -> 196298 bytes translations/en_US.json | 1 + types/assets.ts | 30 +- types/network.ts | 7 +- types/profile.ts | 38 - types/provider.d.ts | 30 + utils/assetChecks.ts | 6 +- utils/fetchAsset.ts | 21 + utils/fetchAssets.ts | 21 + utils/fetchLSP7Assets.ts | 39 +- utils/fetchLSP8Assets.ts | 48 +- utils/fetchLsp3Profile.ts | 43 + utils/fetchLsp4Creators.ts | 62 +- utils/fetchLsp4Metadata.ts | 6 +- utils/fetchLsp7Balance.ts | 16 + utils/fetchLsp8Metadata.ts | 69 ++ utils/fetchProfile.ts | 64 +- utils/fromWeiWithDecimals.ts | 4 +- utils/getCurrentProfileAddress.ts | 10 + utils/getErrorMessage.ts | 2 + utils/getImages.ts | 43 +- utils/loadViewedAssets.ts | 17 - utils/loadViewedProfile.ts | 21 - utils/validateLSP4Metadata.ts | 6 +- utils/validateLsp3Metadata.ts | 14 +- yarn.lock | 1073 ++--------------- 85 files changed, 1849 insertions(+), 2154 deletions(-) rename components/{profile.vue => ProfileCard.vue} (61%) create mode 100644 composables/useAsset.ts create mode 100644 composables/useConnectedProfile.ts create mode 100644 composables/useProfile.ts delete mode 100644 composables/useProfileBase.ts create mode 100644 composables/useViewedProfile.ts create mode 100644 models/asset.ts create mode 100644 models/base.ts create mode 100644 models/creator.ts create mode 100644 models/image.ts create mode 100644 models/profile.ts delete mode 100644 pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue delete mode 100644 pages/[profileAddress]/token/[tokenAddress].vue create mode 100644 pages/asset/[nftAddress]/tokenId/[tokenId].vue create mode 100644 pages/asset/[tokenAddress].vue create mode 100644 repositories/asset.ts create mode 100644 repositories/creator.ts create mode 100644 repositories/image.ts create mode 100644 repositories/profile.ts delete mode 100644 stores/profileConnected.ts delete mode 100644 stores/profileViewed.ts delete mode 100644 types/profile.ts create mode 100644 types/provider.d.ts create mode 100644 utils/fetchAsset.ts create mode 100644 utils/fetchAssets.ts create mode 100644 utils/fetchLsp3Profile.ts create mode 100644 utils/fetchLsp7Balance.ts create mode 100644 utils/fetchLsp8Metadata.ts create mode 100644 utils/getCurrentProfileAddress.ts delete mode 100644 utils/loadViewedAssets.ts delete mode 100644 utils/loadViewedProfile.ts diff --git a/app.vue b/app.vue index a0b60c0c..d8376e93 100644 --- a/app.vue +++ b/app.vue @@ -2,7 +2,6 @@ import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router' import { isAddress } from 'web3-utils' -import { fetchProfile } from '@/utils/fetchProfile' import { assertString } from '@/utils/validators' if (typeof window !== 'undefined') { @@ -10,27 +9,23 @@ if (typeof window !== 'undefined') { } const web3Store = useWeb3Store() -const { getNetwork, selectedNetwork, modal } = useAppStore() +const { getNetwork } = useAppStore() +const { isLoadedApp, selectedChainId, modal } = storeToRefs(useAppStore()) const { addProviderEvents, removeProviderEvents, disconnect } = useBrowserExtension() -const { - setProfile: setConnectedProfile, - setStatus, - profile: connectedProfile, -} = useConnectedProfileStore() const router = useRouter() const setupTranslations = () => { useIntl().setupIntl(defaultConfig) } -const setupWeb3Instances = () => { +const setupWeb3Instances = async () => { const provider = INJECTED_PROVIDER if (provider) { // for chain interactions through wallet web3Store.addWeb3(PROVIDERS.INJECTED, provider) - addProviderEvents(provider) + await addProviderEvents(provider) // expose web3 instance to global scope for console access window.web3 = web3Store.getWeb3(PROVIDERS.INJECTED) } else { @@ -38,26 +33,7 @@ const setupWeb3Instances = () => { } // for chain interactions through RPC endpoint - web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedNetwork).rpcHttp) -} - -const setupConnectedProfile = async () => { - try { - const connectedAddress = getItem(STORAGE_KEY.CONNECTED_ADDRESS) - - if (connectedAddress) { - assertAddress(connectedAddress, 'profile') - setStatus('isConnected', true) - setStatus('isProfileLoading', true) - const profile = await fetchProfile(connectedAddress) - connectedProfile.address = connectedAddress - setConnectedProfile(profile) - } - } catch (error) { - console.error(error) - } finally { - setStatus('isProfileLoading', false) - } + web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedChainId.value).rpcHttp) } const routerBackProfileLoad = async () => { @@ -70,20 +46,17 @@ const routerBackProfileLoad = async () => { const fromProfileAddress = from.params?.profileAddress const toProfileAddress = to.params?.profileAddress - if (!fromProfileAddress || !toProfileAddress) { - return next() - } - - try { - assertString(toProfileAddress) - assertAddress(toProfileAddress, 'profile') - - if (toProfileAddress !== fromProfileAddress) { - await loadViewedProfile(toProfileAddress) - await loadViewedAssets(toProfileAddress) + if (toProfileAddress) { + try { + assertString(toProfileAddress) + assertAddress(toProfileAddress, 'profile') + if (toProfileAddress !== fromProfileAddress) { + await fetchProfile(toProfileAddress) + await fetchAssets(toProfileAddress) + } + } catch (error) { + console.error(error) } - } catch (error) { - console.error(error) } next() } @@ -100,9 +73,6 @@ const checkConnectionExpiry = () => { if (expiryDateParsed < Date.now()) { disconnect() - // we store address as this is "soft" disconnect that won't trigger request account on connection - connectedProfile.address && - setItem(STORAGE_KEY.RECONNECT_ADDRESS, connectedProfile.address) } } catch (error) {} } @@ -124,26 +94,38 @@ const setupViewedProfile = async () => { if (profileAddress) { if (isAddress(profileAddress)) { - await loadViewedProfile(profileAddress) - await loadViewedAssets(profileAddress) + await fetchProfile(profileAddress) + await fetchAssets(profileAddress) } else { navigateTo(notFoundRoute()) } } - } catch (error) { + } catch (error: unknown) { console.error(error) + + if (error instanceof EoAError) { + navigateTo(notFoundRoute()) // TODO we might want to inform user about EoA instead showing 404 + } } } +const setupNetwork = async () => { + const chainId = (await INJECTED_PROVIDER?.request({ + method: 'eth_chainId', + })) as string + + selectedChainId.value = chainId +} + onMounted(async () => { setupTranslations() - setupWeb3Instances() + await setupNetwork() + await setupWeb3Instances() checkConnectionExpiry() - await setupConnectedProfile() - await setupViewedProfile() await routerBackProfileLoad() + await setupViewedProfile() - setStatus('isProfileLoaded', true) + isLoadedApp.value = true await setupCurrencies() }) @@ -156,7 +138,7 @@ onUnmounted(() => { useHead({ bodyAttrs: { class: computed(() => { - if (modal?.isOpen) { + if (modal.value?.isOpen) { return 'overflow-hidden' } diff --git a/components/AppAvatar.vue b/components/AppAvatar.vue index 54f7660b..a2ed2cc9 100644 --- a/components/AppAvatar.vue +++ b/components/AppAvatar.vue @@ -1,12 +1,13 @@