diff --git a/apps/portal/app/components/create-identity/create-identity-form.tsx b/apps/portal/app/components/create-identity/create-identity-form.tsx index 4ee5b8465..9f91a3515 100644 --- a/apps/portal/app/components/create-identity/create-identity-form.tsx +++ b/apps/portal/app/components/create-identity/create-identity-form.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect, useState } from 'react' import { Badge, @@ -28,6 +28,7 @@ import { import { getZodConstraint, parseWithZod } from '@conform-to/zod' import { multivaultAbi } from '@lib/abis/multivault' import { useCreateAtom } from '@lib/hooks/useCreateAtom' +import { useCreateConfig } from '@lib/hooks/useCreateConfig' import { useGetWalletBalance } from '@lib/hooks/useGetWalletBalance' import { useImageUploadFetcher } from '@lib/hooks/useImageUploadFetcher' import { @@ -119,17 +120,7 @@ export function IdentityForm({ } }, [state.status, transactionResponseData]) - const loaderFetcher = useFetcher() - const loaderFetcherUrl = '/resources/create' - const loaderFetcherRef = useRef(loaderFetcher.load) - - useEffect(() => { - loaderFetcherRef.current = loaderFetcher.load - }) - - useEffect(() => { - loaderFetcherRef.current(loaderFetcherUrl) - }, [loaderFetcherUrl]) + const { data: configData, isLoading: isLoadingConfig } = useCreateConfig() useEffect(() => { logger('file changed', identityImageFile) @@ -170,7 +161,7 @@ export function IdentityForm({ } }, [imageUploadFetcher.data]) - const fees = loaderFetcher.data as CreateLoaderData + const fees = configData as CreateLoaderData const { data: walletClient } = useWalletClient() const publicClient = usePublicClient() @@ -750,6 +741,7 @@ export function IdentityForm({ disabled={ !address || loading || + isLoadingConfig || !formTouched || ['confirm', 'transaction-pending', 'awaiting'].includes( state.status, diff --git a/apps/portal/app/components/create-identity/create-identity-review.tsx b/apps/portal/app/components/create-identity/create-identity-review.tsx index a58cb244e..9800a1c61 100644 --- a/apps/portal/app/components/create-identity/create-identity-review.tsx +++ b/apps/portal/app/components/create-identity/create-identity-review.tsx @@ -118,7 +118,7 @@ const CreateIdentityReview: React.FC = ({ weight="normal" className="text-neutral-50/50 flex items-center gap-1" > - Estimated Fees: {totalFees.toFixed(4)} ETH + Estimated Cost: {totalFees.toFixed(4)} ETH diff --git a/apps/portal/app/lib/hooks/useCreateConfig.tsx b/apps/portal/app/lib/hooks/useCreateConfig.tsx new file mode 100644 index 000000000..8f707c4a3 --- /dev/null +++ b/apps/portal/app/lib/hooks/useCreateConfig.tsx @@ -0,0 +1,25 @@ +import { useQuery } from '@tanstack/react-query' + +export type CreateConfigData = { + vaultId: string + atomCost: string + atomCreationFee: string + tripleCost: string + protocolFee: string + entryFee: string + feeDenominator: string + minDeposit: string +} + +export function useCreateConfig() { + return useQuery({ + queryKey: ['create-config'], + queryFn: async () => { + const response = await fetch('/resources/create') + if (!response.ok) { + throw new Error('Failed to fetch create config') + } + return response.json() + }, + }) +} diff --git a/packages/1ui/src/components/ProfileCard/ProfileCard.tsx b/packages/1ui/src/components/ProfileCard/ProfileCard.tsx index c7ca17f1d..817dd7bdc 100644 --- a/packages/1ui/src/components/ProfileCard/ProfileCard.tsx +++ b/packages/1ui/src/components/ProfileCard/ProfileCard.tsx @@ -107,7 +107,12 @@ const ProfileCard = ({ weight="medium" className="text-primary-300 pt-2.5 whitespace-pre-wrap" > - + )} diff --git a/packages/1ui/src/components/Trunctacular/Trunctacular.tsx b/packages/1ui/src/components/Trunctacular/Trunctacular.tsx index 2e153d07f..5f55303b2 100644 --- a/packages/1ui/src/components/Trunctacular/Trunctacular.tsx +++ b/packages/1ui/src/components/Trunctacular/Trunctacular.tsx @@ -53,7 +53,9 @@ const Trunctacular = ({ {content} - {value} + + {value} + ) diff --git a/packages/graphql/package.json b/packages/graphql/package.json index 192242e6b..4e7875d9f 100644 --- a/packages/graphql/package.json +++ b/packages/graphql/package.json @@ -33,6 +33,7 @@ }, "devDependencies": { "@0no-co/graphqlsp": "^1.12.16", + "dotenv-cli": "^7.4.1", "@graphql-codegen/cli": "^5.0.3", "@graphql-codegen/client-preset": "^4.4.0", "@graphql-codegen/introspection": "^4.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7caae5724..f4f5313c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1046,6 +1046,9 @@ importers: '@parcel/watcher': specifier: ^2.4.1 version: 2.4.1 + dotenv-cli: + specifier: ^7.4.1 + version: 7.4.2 typescript: specifier: ^5.4.5 version: 5.4.5 @@ -8559,6 +8562,10 @@ packages: dot-case@3.0.4: resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} + dotenv-cli@7.4.2: + resolution: {integrity: sha512-SbUj8l61zIbzyhIbg0FwPJq6+wjbzdn9oEtozQpZ6kW2ihCcapKVZj49oCT3oPM+mgQm+itgvUQcG5szxVrZTA==} + hasBin: true + dotenv-expand@10.0.0: resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==} engines: {node: '>=12'} @@ -23781,7 +23788,7 @@ snapshots: pathe: 1.1.2 picocolors: 1.0.1 sirv: 2.0.4 - vitest: 1.6.0(@types/node@20.14.2)(@vitest/ui@1.6.0)(jsdom@22.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1) + vitest: 1.6.0(@types/node@18.16.9)(@vitest/ui@1.6.0)(jsdom@22.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1) '@vitest/utils@1.3.1': dependencies: @@ -26290,6 +26297,13 @@ snapshots: no-case: 3.0.4 tslib: 2.7.0 + dotenv-cli@7.4.2: + dependencies: + cross-spawn: 7.0.3 + dotenv: 16.4.5 + dotenv-expand: 10.0.0 + minimist: 1.2.8 + dotenv-expand@10.0.0: {} dotenv-expand@11.0.6: