From 070d48c2144621760a3d539a243aed4e48f22720 Mon Sep 17 00:00:00 2001 From: Vishal Rakholiya Date: Mon, 19 Feb 2024 18:17:31 +0530 Subject: [PATCH 1/5] feat: change input of name TNS register --- .../TNSNameFinderModal.tsx | 67 ++++++++++++++++++- .../components/CreateDAOSection.tsx | 5 +- 2 files changed, 67 insertions(+), 5 deletions(-) diff --git a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx index b4ee13a381..0d539fac67 100644 --- a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx +++ b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx @@ -6,6 +6,8 @@ import { additionalRed, neutral33, neutral77, + primaryColor, + redDefault, } from "../../../utils/style/colors"; import { fontSemibold14 } from "../../../utils/style/fonts"; import { NameFinderFormType } from "../../../utils/types/tns"; @@ -14,6 +16,13 @@ import { PrimaryButton } from "../../buttons/PrimaryButton"; import { TextInputCustom } from "../../inputs/TextInputCustom"; import ModalBase from "../ModalBase"; +import { useNSMintAvailability } from "@/hooks/useNSMintAvailability"; +import { useNSMintPrice } from "@/hooks/useNSMintPrice"; +import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork"; +import useSelectedWallet from "@/hooks/useSelectedWallet"; +import { NetworkKind, getCosmosNetwork, parseUserId } from "@/networks"; +import { prettyPrice } from "@/utils/coins"; + const AVAILABLE_DOMAINS = [".tori"]; const COMING_SOON_DOMAINS = [".rioter"]; @@ -105,6 +114,20 @@ export const TNSNameFinderModal: React.FC<{ }> = ({ visible, onClose, onEnter }) => { const { name, setName } = useTNS(); + const selectedWallet = useSelectedWallet(); + const [network] = parseUserId(selectedWallet?.userId); + const networkId = network?.id; + const cosmosNetwork = getCosmosNetwork(networkId); + const normalizedTokenId = ( + name + cosmosNetwork?.nameServiceTLD || "" + ).toLowerCase(); + + const tokenId = name + cosmosNetwork?.nameServiceTLD || ""; + const selectedNetwork = useSelectedNetworkInfo(); + + const { nsMintPrice: price } = useNSMintPrice(networkId, normalizedTokenId); + const { nameAvailable, loading } = useNSMintAvailability(networkId, tokenId); + const onPressEnter = () => { if (name) { onEnter(); @@ -116,6 +139,31 @@ export const TNSNameFinderModal: React.FC<{ if (visible) setName(""); }, [setName, visible]); + let availabilityInfo = <>; + if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { + if (price?.invalid) { + availabilityInfo = ( + + Invalid + + ); + } else if (nameAvailable) { + availabilityInfo = ( + + + {prettyPrice(networkId, price?.amount, price?.denom)} + + + ); + } else if (!nameAvailable) { + availabilityInfo = ( + + Taken + + ); + } + } + return ( + noBrokenCorners + isLoading={loading} + variant="labelOutside" + label={`NAME${name ? `: ${name + cosmosNetwork?.nameServiceTLD}` : ""}`} + placeHolder="Type name here" + name="name" + rules={{ required: true }} + onPressEnter={onPressEnter} + onChangeText={setName} + regexp={new RegExp(/^[a-zA-Z]+$/)} + style={{ marginBottom: 20, width: "100%" }} + value={name} + > + {availabilityInfo} + + + {/* name="name" label="NAME" placeHolder="Type name here" @@ -133,7 +198,7 @@ export const TNSNameFinderModal: React.FC<{ value={name} regexp={new RegExp(/^[a-zA-Z]+$/)} style={{ marginBottom: 20, width: "100%" }} - /> + /> */} = ({ // functions const onErrorImageLoading = () => - setError("imageUrl", { - type: "pattern", - message: "This image is invalid", - }); + setError("imageUrl", { type: "pattern", message: "This image is invalid" }); return ( From eb611d3ab366b4c3d4149c1bf8848cd294128136 Mon Sep 17 00:00:00 2001 From: Vishal Rakholiya Date: Wed, 21 Feb 2024 18:00:47 +0530 Subject: [PATCH 2/5] feat: create common component for TNS and DAOSection --- .../components/inputs/AvailableNamesInput.tsx | 114 ++++++++++++++ .../TNSNameFinderModal.tsx | 77 ++++++---- .../components/CreateDAOSection.tsx | 143 ++++++++++++------ packages/utils/types/tns.ts | 1 + 4 files changed, 254 insertions(+), 81 deletions(-) create mode 100644 packages/components/inputs/AvailableNamesInput.tsx diff --git a/packages/components/inputs/AvailableNamesInput.tsx b/packages/components/inputs/AvailableNamesInput.tsx new file mode 100644 index 0000000000..dd86df1548 --- /dev/null +++ b/packages/components/inputs/AvailableNamesInput.tsx @@ -0,0 +1,114 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps, View, ViewStyle } from "react-native"; + +import { TextInputCustom } from "./TextInputCustom"; +import { fontSemibold14 } from "../../utils/style/fonts"; +import { BrandText } from "../BrandText"; + +import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork"; +import { NetworkKind } from "@/networks"; +import { + neutral33, + neutral77, + primaryColor, + redDefault, +} from "@/utils/style/colors"; +import { NameFinderFormType } from "@/utils/types/tns"; + +export interface TextInputCustomProps + extends Omit { + name: Path; + loading: boolean; + nameValue: string; + label: string; + placeHolder: string; + value?: string; + onChangeText?: (value: string) => void; + onPressEnter?: () => void; + isInvalid: boolean; + isNameAvailabel: boolean; + isTaken: boolean; + price: string; + usdPrice?: number | undefined; + control?: Control; + style?: ViewStyle; +} + +export const AvailableNamesInput = ({ + loading, + nameValue, + label, + name, + placeHolder, + value, + onChangeText = () => {}, + onPressEnter = () => {}, + isInvalid, + isNameAvailabel, + isTaken, + price, + usdPrice, + control, + style, +}: TextInputCustomProps) => { + const selectedNetwork = useSelectedNetworkInfo(); + let availabilityInfo = <>; + if (nameValue && selectedNetwork?.kind === NetworkKind.Cosmos) { + if (isInvalid) { + availabilityInfo = ( + + Invalid + + ); + } else if (isNameAvailabel) { + availabilityInfo = ( + + {!!usdPrice && ( + <> + + ${usdPrice?.toFixed(2)} + + + {" - "} + + + )} + + {price} + + + ); + } else if (isTaken) { + availabilityInfo = ( + + Taken + + ); + } + } + + return ( + + noBrokenCorners + isLoading={loading} + variant="labelOutside" + label={label} + placeHolder={placeHolder} + name={name as "name" | "associatedHandle"} + onChangeText={(val: string) => onChangeText(val)} + onPressEnter={onPressEnter} + value={value} + rules={{ required: true }} + regexp={new RegExp(/^[a-zA-Z]+$/)} + style={style} + control={ + control + ? (control as unknown as Control) + : undefined + } + > + {availabilityInfo} + + ); +}; diff --git a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx index 0d539fac67..bfbdf5945c 100644 --- a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx +++ b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx @@ -6,21 +6,17 @@ import { additionalRed, neutral33, neutral77, - primaryColor, - redDefault, } from "../../../utils/style/colors"; import { fontSemibold14 } from "../../../utils/style/fonts"; -import { NameFinderFormType } from "../../../utils/types/tns"; import { BrandText } from "../../BrandText"; import { PrimaryButton } from "../../buttons/PrimaryButton"; -import { TextInputCustom } from "../../inputs/TextInputCustom"; import ModalBase from "../ModalBase"; +import { AvailableNamesInput } from "@/components/inputs/AvailableNamesInput"; import { useNSMintAvailability } from "@/hooks/useNSMintAvailability"; import { useNSMintPrice } from "@/hooks/useNSMintPrice"; -import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork"; import useSelectedWallet from "@/hooks/useSelectedWallet"; -import { NetworkKind, getCosmosNetwork, parseUserId } from "@/networks"; +import { getCosmosNetwork, parseUserId } from "@/networks"; import { prettyPrice } from "@/utils/coins"; const AVAILABLE_DOMAINS = [".tori"]; @@ -123,7 +119,6 @@ export const TNSNameFinderModal: React.FC<{ ).toLowerCase(); const tokenId = name + cosmosNetwork?.nameServiceTLD || ""; - const selectedNetwork = useSelectedNetworkInfo(); const { nsMintPrice: price } = useNSMintPrice(networkId, normalizedTokenId); const { nameAvailable, loading } = useNSMintAvailability(networkId, tokenId); @@ -139,30 +134,30 @@ export const TNSNameFinderModal: React.FC<{ if (visible) setName(""); }, [setName, visible]); - let availabilityInfo = <>; - if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { - if (price?.invalid) { - availabilityInfo = ( - - Invalid - - ); - } else if (nameAvailable) { - availabilityInfo = ( - - - {prettyPrice(networkId, price?.amount, price?.denom)} - - - ); - } else if (!nameAvailable) { - availabilityInfo = ( - - Taken - - ); - } - } + // let availabilityInfo = <>; + // if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { + // if (price?.invalid) { + // availabilityInfo = ( + // + // Invalid + // + // ); + // } else if (nameAvailable) { + // availabilityInfo = ( + // + // + // {prettyPrice(networkId, price?.amount, price?.denom)} + // + // + // ); + // } else if (!nameAvailable) { + // availabilityInfo = ( + // + // Taken + // + // ); + // } + // } return ( } width={372} > - + setName(value)} + isInvalid={!!price?.invalid} + isNameAvailabel={nameAvailable} + isTaken={!nameAvailable} + price={prettyPrice(networkId, price?.amount, price?.denom)} + style={{ marginBottom: 20, width: "100%" }} + /> + + {/* noBrokenCorners isLoading={loading} variant="labelOutside" @@ -187,7 +198,7 @@ export const TNSNameFinderModal: React.FC<{ value={name} > {availabilityInfo} - + */} {/* name="name" diff --git a/packages/screens/Organizations/components/CreateDAOSection.tsx b/packages/screens/Organizations/components/CreateDAOSection.tsx index 6a6faaf565..fbeb5bc1b2 100644 --- a/packages/screens/Organizations/components/CreateDAOSection.tsx +++ b/packages/screens/Organizations/components/CreateDAOSection.tsx @@ -7,6 +7,7 @@ import { RadioDescriptionSelector } from "./RadioDescriptionSelector"; import { BrandText } from "@/components/BrandText"; import { PrimaryButton } from "@/components/buttons/PrimaryButton"; +import { AvailableNamesInput } from "@/components/inputs/AvailableNamesInput"; import { TextInputCustom } from "@/components/inputs/TextInputCustom"; import { SpacerColumn, SpacerRow } from "@/components/spacer"; import { useNSAvailability } from "@/hooks/useNSAvailability"; @@ -15,11 +16,11 @@ import { getCosmosNetwork, NetworkKind } from "@/networks"; import { neutral33, neutral77, - primaryColor, - redDefault, + // primaryColor, + // redDefault, } from "@/utils/style/colors"; import { - fontSemibold14, + // fontSemibold14, fontSemibold20, fontSemibold28, } from "@/utils/style/fonts"; @@ -58,55 +59,56 @@ export const CreateDAOSection: React.FC = ({ const selectedRadioStructure = watch("structure"); const uri = watch("imageUrl"); const name = watch("associatedHandle"); + const nameAvailability = useNSAvailability(selectedNetwork?.id, name); useEffect(() => { setValue("nameAvailability", nameAvailability); }, [setValue, nameAvailability]); - let availabilityInfo = <>; - if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { - switch (nameAvailability.availability) { - case "invalid": { - availabilityInfo = ( - - Invalid - - ); - break; - } - case "mint": { - availabilityInfo = ( - - {!!nameAvailability?.usdPrice && ( - <> - - ${nameAvailability.usdPrice?.toFixed(2)} - - - {" - "} - - - )} - - {nameAvailability.prettyPrice} - - - ); - break; - } - case "none": - case "market": { - // TODO: handle market case - availabilityInfo = ( - - Taken - - ); - break; - } - } - } + // let availabilityInfo = <>; + // if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { + // switch (nameAvailability.availability) { + // case "invalid": { + // availabilityInfo = ( + // + // Invalid + // + // ); + // break; + // } + // case "mint": { + // availabilityInfo = ( + // + // {!!nameAvailability?.usdPrice && ( + // <> + // + // ${nameAvailability.usdPrice?.toFixed(2)} + // + // + // {" - "} + // + // + // )} + // + // {nameAvailability.prettyPrice} + // + // + // ); + // break; + // } + // case "none": + // case "market": { + // // TODO: handle market case + // availabilityInfo = ( + // + // Taken + // + // ); + // break; + // } + // } + // } // functions const onErrorImageLoading = () => @@ -139,7 +141,52 @@ export const CreateDAOSection: React.FC = ({ - + { + setValue("associatedHandle", val, { + shouldDirty: true, + shouldTouch: true, + shouldValidate: true, + }); + }} + label={`Associated Handle${ + name + ? `: ${ + selectedNetwork?.kind === NetworkKind.Gno + ? "gno.land/r/demo/" + name + : name + cosmosNetwork?.nameServiceTLD + }` + : "" + }`} + name="associatedHandle" + control={control} + placeHolder={ + selectedNetwork?.kind === NetworkKind.Gno + ? "your_organization" + : "your-organization" + } + value={name} + isInvalid={nameAvailability.availability === "invalid"} + isNameAvailabel={nameAvailability.availability === "mint"} + isTaken={ + nameAvailability.availability === "market" || + nameAvailability.availability === "none" + } + price={ + nameAvailability.availability === "mint" + ? nameAvailability.prettyPrice + : "" + } + usdPrice={ + nameAvailability.availability === "mint" + ? nameAvailability?.usdPrice + : 0 + } + /> + + {/* noBrokenCorners isLoading={nameAvailability.availability === "loading"} variant="labelOutside" @@ -162,7 +209,7 @@ export const CreateDAOSection: React.FC = ({ rules={{ required: true }} > {availabilityInfo} - + */} diff --git a/packages/utils/types/tns.ts b/packages/utils/types/tns.ts index fdf0bc9139..3b4d94c1a4 100644 --- a/packages/utils/types/tns.ts +++ b/packages/utils/types/tns.ts @@ -27,6 +27,7 @@ export type TNSSendFundsFormType = { export type NameFinderFormType = { name: string; + associatedHandle: string; }; export type NSAvailability = From f96d3a12c24bae0c7db2be40c63b7e8732c0a446 Mon Sep 17 00:00:00 2001 From: Vishal Rakholiya Date: Thu, 22 Feb 2024 16:43:53 +0530 Subject: [PATCH 3/5] feat: common component for TNS and DAOSection --- .../components/inputs/AvailableNamesInput.tsx | 41 ++++---- .../TNSNameFinderModal.tsx | 78 +-------------- .../components/CreateDAOSection.tsx | 94 +------------------ 3 files changed, 28 insertions(+), 185 deletions(-) diff --git a/packages/components/inputs/AvailableNamesInput.tsx b/packages/components/inputs/AvailableNamesInput.tsx index dd86df1548..b78625b254 100644 --- a/packages/components/inputs/AvailableNamesInput.tsx +++ b/packages/components/inputs/AvailableNamesInput.tsx @@ -6,8 +6,9 @@ import { TextInputCustom } from "./TextInputCustom"; import { fontSemibold14 } from "../../utils/style/fonts"; import { BrandText } from "../BrandText"; +import { useNSAvailability } from "@/hooks/useNSAvailability"; import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork"; -import { NetworkKind } from "@/networks"; +import { NetworkKind, getCosmosNetwork } from "@/networks"; import { neutral33, neutral77, @@ -19,24 +20,18 @@ import { NameFinderFormType } from "@/utils/types/tns"; export interface TextInputCustomProps extends Omit { name: Path; - loading: boolean; nameValue: string; label: string; placeHolder: string; value?: string; onChangeText?: (value: string) => void; onPressEnter?: () => void; - isInvalid: boolean; - isNameAvailabel: boolean; - isTaken: boolean; - price: string; usdPrice?: number | undefined; control?: Control; style?: ViewStyle; } export const AvailableNamesInput = ({ - loading, nameValue, label, name, @@ -44,24 +39,27 @@ export const AvailableNamesInput = ({ value, onChangeText = () => {}, onPressEnter = () => {}, - isInvalid, - isNameAvailabel, - isTaken, - price, usdPrice, control, style, }: TextInputCustomProps) => { const selectedNetwork = useSelectedNetworkInfo(); + const cosmosNetwork = getCosmosNetwork(selectedNetwork?.id); + const nameAvailability = useNSAvailability(selectedNetwork?.id, nameValue); + const price = + nameAvailability.availability === "mint" + ? nameAvailability.prettyPrice + : ""; + let availabilityInfo = <>; if (nameValue && selectedNetwork?.kind === NetworkKind.Cosmos) { - if (isInvalid) { + if (nameAvailability.availability === "invalid") { availabilityInfo = ( Invalid ); - } else if (isNameAvailabel) { + } else if (nameAvailability.availability === "mint") { availabilityInfo = ( {!!usdPrice && ( @@ -79,7 +77,10 @@ export const AvailableNamesInput = ({ ); - } else if (isTaken) { + } else if ( + nameAvailability.availability === "market" || + nameAvailability.availability === "none" + ) { availabilityInfo = ( Taken @@ -91,9 +92,17 @@ export const AvailableNamesInput = ({ return ( noBrokenCorners - isLoading={loading} + isLoading={nameAvailability.availability === "loading"} variant="labelOutside" - label={label} + label={`${label}${ + nameValue + ? `: ${ + selectedNetwork?.kind === NetworkKind.Gno + ? "gno.land/r/demo/" + name + : nameValue + cosmosNetwork?.nameServiceTLD + }` + : "" + }`} placeHolder={placeHolder} name={name as "name" | "associatedHandle"} onChangeText={(val: string) => onChangeText(val)} diff --git a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx index bfbdf5945c..6a3237ff78 100644 --- a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx +++ b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx @@ -13,11 +13,6 @@ import { PrimaryButton } from "../../buttons/PrimaryButton"; import ModalBase from "../ModalBase"; import { AvailableNamesInput } from "@/components/inputs/AvailableNamesInput"; -import { useNSMintAvailability } from "@/hooks/useNSMintAvailability"; -import { useNSMintPrice } from "@/hooks/useNSMintPrice"; -import useSelectedWallet from "@/hooks/useSelectedWallet"; -import { getCosmosNetwork, parseUserId } from "@/networks"; -import { prettyPrice } from "@/utils/coins"; const AVAILABLE_DOMAINS = [".tori"]; const COMING_SOON_DOMAINS = [".rioter"]; @@ -110,19 +105,6 @@ export const TNSNameFinderModal: React.FC<{ }> = ({ visible, onClose, onEnter }) => { const { name, setName } = useTNS(); - const selectedWallet = useSelectedWallet(); - const [network] = parseUserId(selectedWallet?.userId); - const networkId = network?.id; - const cosmosNetwork = getCosmosNetwork(networkId); - const normalizedTokenId = ( - name + cosmosNetwork?.nameServiceTLD || "" - ).toLowerCase(); - - const tokenId = name + cosmosNetwork?.nameServiceTLD || ""; - - const { nsMintPrice: price } = useNSMintPrice(networkId, normalizedTokenId); - const { nameAvailable, loading } = useNSMintAvailability(networkId, tokenId); - const onPressEnter = () => { if (name) { onEnter(); @@ -134,31 +116,6 @@ export const TNSNameFinderModal: React.FC<{ if (visible) setName(""); }, [setName, visible]); - // let availabilityInfo = <>; - // if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { - // if (price?.invalid) { - // availabilityInfo = ( - // - // Invalid - // - // ); - // } else if (nameAvailable) { - // availabilityInfo = ( - // - // - // {prettyPrice(networkId, price?.amount, price?.denom)} - // - // - // ); - // } else if (!nameAvailable) { - // availabilityInfo = ( - // - // Taken - // - // ); - // } - // } - return ( setName(value)} - isInvalid={!!price?.invalid} - isNameAvailabel={nameAvailable} - isTaken={!nameAvailable} - price={prettyPrice(networkId, price?.amount, price?.denom)} style={{ marginBottom: 20, width: "100%" }} /> - - {/* - noBrokenCorners - isLoading={loading} - variant="labelOutside" - label={`NAME${name ? `: ${name + cosmosNetwork?.nameServiceTLD}` : ""}`} - placeHolder="Type name here" - name="name" - rules={{ required: true }} - onPressEnter={onPressEnter} - onChangeText={setName} - regexp={new RegExp(/^[a-zA-Z]+$/)} - style={{ marginBottom: 20, width: "100%" }} - value={name} - > - {availabilityInfo} - */} - - {/* - name="name" - label="NAME" - placeHolder="Type name here" - onPressEnter={onPressEnter} - onChangeText={setName} - value={name} - regexp={new RegExp(/^[a-zA-Z]+$/)} - style={{ marginBottom: 20, width: "100%" }} - /> */} = ({ }); const selectedNetwork = useSelectedNetworkInfo(); - const cosmosNetwork = getCosmosNetwork(selectedNetwork?.id); const selectedRadioStructure = watch("structure"); const uri = watch("imageUrl"); const name = watch("associatedHandle"); @@ -66,50 +65,6 @@ export const CreateDAOSection: React.FC = ({ setValue("nameAvailability", nameAvailability); }, [setValue, nameAvailability]); - // let availabilityInfo = <>; - // if (name && selectedNetwork?.kind === NetworkKind.Cosmos) { - // switch (nameAvailability.availability) { - // case "invalid": { - // availabilityInfo = ( - // - // Invalid - // - // ); - // break; - // } - // case "mint": { - // availabilityInfo = ( - // - // {!!nameAvailability?.usdPrice && ( - // <> - // - // ${nameAvailability.usdPrice?.toFixed(2)} - // - // - // {" - "} - // - // - // )} - // - // {nameAvailability.prettyPrice} - // - // - // ); - // break; - // } - // case "none": - // case "market": { - // // TODO: handle market case - // availabilityInfo = ( - // - // Taken - // - // ); - // break; - // } - // } - // } - // functions const onErrorImageLoading = () => setError("imageUrl", { type: "pattern", message: "This image is invalid" }); @@ -142,7 +97,6 @@ export const CreateDAOSection: React.FC = ({ { setValue("associatedHandle", val, { @@ -151,15 +105,7 @@ export const CreateDAOSection: React.FC = ({ shouldValidate: true, }); }} - label={`Associated Handle${ - name - ? `: ${ - selectedNetwork?.kind === NetworkKind.Gno - ? "gno.land/r/demo/" + name - : name + cosmosNetwork?.nameServiceTLD - }` - : "" - }`} + label="Associated Handle" name="associatedHandle" control={control} placeHolder={ @@ -168,48 +114,12 @@ export const CreateDAOSection: React.FC = ({ : "your-organization" } value={name} - isInvalid={nameAvailability.availability === "invalid"} - isNameAvailabel={nameAvailability.availability === "mint"} - isTaken={ - nameAvailability.availability === "market" || - nameAvailability.availability === "none" - } - price={ - nameAvailability.availability === "mint" - ? nameAvailability.prettyPrice - : "" - } usdPrice={ nameAvailability.availability === "mint" ? nameAvailability?.usdPrice : 0 } /> - - {/* - noBrokenCorners - isLoading={nameAvailability.availability === "loading"} - variant="labelOutside" - control={control} - label={`Associated Handle${ - name - ? `: ${ - selectedNetwork?.kind === NetworkKind.Gno - ? "gno.land/r/demo/" + name - : name + cosmosNetwork?.nameServiceTLD - }` - : "" - }`} - placeHolder={ - selectedNetwork?.kind === NetworkKind.Gno - ? "your_organization" - : "your-organization" - } - name="associatedHandle" - rules={{ required: true }} - > - {availabilityInfo} - */} From 3038204b54d311d7fb082660f765dcf515b866ea Mon Sep 17 00:00:00 2001 From: Vishal Rakholiya Date: Thu, 22 Feb 2024 17:54:14 +0530 Subject: [PATCH 4/5] fix:remove comment --- .../Organizations/components/CreateDAOSection.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/screens/Organizations/components/CreateDAOSection.tsx b/packages/screens/Organizations/components/CreateDAOSection.tsx index 59815aa52e..1c7a7cb032 100644 --- a/packages/screens/Organizations/components/CreateDAOSection.tsx +++ b/packages/screens/Organizations/components/CreateDAOSection.tsx @@ -13,17 +13,8 @@ import { SpacerColumn, SpacerRow } from "@/components/spacer"; import { useNSAvailability } from "@/hooks/useNSAvailability"; import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork"; import { NetworkKind } from "@/networks"; -import { - neutral33, - neutral77, - // primaryColor, - // redDefault, -} from "@/utils/style/colors"; -import { - // fontSemibold14, - fontSemibold20, - fontSemibold28, -} from "@/utils/style/fonts"; +import { neutral33, neutral77 } from "@/utils/style/colors"; +import { fontSemibold20, fontSemibold28 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; import { CreateDaoFormType, From 83b483cd6bafc8cb668a11770e67f522c4ac1ca2 Mon Sep 17 00:00:00 2001 From: Vishal Rakholiya Date: Thu, 22 Feb 2024 18:03:31 +0530 Subject: [PATCH 5/5] fix: common component UI --- packages/components/inputs/AvailableNamesInput.tsx | 6 +++--- .../screens/Organizations/components/CreateDAOSection.tsx | 5 ----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/components/inputs/AvailableNamesInput.tsx b/packages/components/inputs/AvailableNamesInput.tsx index b78625b254..98244051bd 100644 --- a/packages/components/inputs/AvailableNamesInput.tsx +++ b/packages/components/inputs/AvailableNamesInput.tsx @@ -17,7 +17,7 @@ import { } from "@/utils/style/colors"; import { NameFinderFormType } from "@/utils/types/tns"; -export interface TextInputCustomProps +interface TextInputCustomProps extends Omit { name: Path; nameValue: string; @@ -26,7 +26,6 @@ export interface TextInputCustomProps value?: string; onChangeText?: (value: string) => void; onPressEnter?: () => void; - usdPrice?: number | undefined; control?: Control; style?: ViewStyle; } @@ -39,7 +38,6 @@ export const AvailableNamesInput = ({ value, onChangeText = () => {}, onPressEnter = () => {}, - usdPrice, control, style, }: TextInputCustomProps) => { @@ -50,6 +48,8 @@ export const AvailableNamesInput = ({ nameAvailability.availability === "mint" ? nameAvailability.prettyPrice : ""; + const usdPrice = + nameAvailability.availability === "mint" ? nameAvailability?.usdPrice : 0; let availabilityInfo = <>; if (nameValue && selectedNetwork?.kind === NetworkKind.Cosmos) { diff --git a/packages/screens/Organizations/components/CreateDAOSection.tsx b/packages/screens/Organizations/components/CreateDAOSection.tsx index 1c7a7cb032..29ef7ca0ca 100644 --- a/packages/screens/Organizations/components/CreateDAOSection.tsx +++ b/packages/screens/Organizations/components/CreateDAOSection.tsx @@ -105,11 +105,6 @@ export const CreateDAOSection: React.FC = ({ : "your-organization" } value={name} - usdPrice={ - nameAvailability.availability === "mint" - ? nameAvailability?.usdPrice - : 0 - } />