Skip to content

Commit 7c377fa

Browse files
pinkhoodiepinkhoodie
committed
setup network selector
1 parent c0b8868 commit 7c377fa

File tree

3 files changed

+81
-20
lines changed

3 files changed

+81
-20
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create-nft/page.tsx‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import { FileInput } from "components/shared/FileInput";
3131
import { BasisPointsInput } from "components/inputs/BasisPointsInput";
3232
import { SolidityInput } from "contract-ui/components/solidity-inputs";
3333
import { Form } from "@/components/ui/form";
34+
import { useAllChainsData } from "hooks/chains/allChains";
35+
import type { StoredChain } from "stores/chainStores";
3436

3537
// Form schemas
3638
const collectionInfoSchema = z.object({
@@ -104,6 +106,9 @@ export default function CreateNFTPage() {
104106
});
105107
const [showRoyaltySettings, setShowRoyaltySettings] = useState(false);
106108

109+
// Get chain data
110+
const { allChains } = useAllChainsData();
111+
107112
// Forms
108113
const collectionInfoForm = useForm<CollectionInfoValues>({
109114
resolver: zodResolver(collectionInfoSchema),
@@ -151,8 +156,27 @@ export default function CreateNFTPage() {
151156
const renderStepIndicators = () => (
152157
<div className="flex justify-center mb-8 pt-6">
153158
<div className="relative flex w-full max-w-md justify-between">
154-
{/* Connect line between circles */}
155-
<div className="absolute top-5 left-0 right-0 h-0.5 -translate-y-1/2 bg-muted" />
159+
{/* Segmented lines between circles instead of a single line */}
160+
<div className="absolute top-5 left-0 right-0 flex justify-between">
161+
{/* First segment: between step 1 and 2 */}
162+
<div className="w-1/2 flex items-center">
163+
<div
164+
className={`h-0.5 w-full ${
165+
step > 1 ? "bg-primary/20" : "bg-muted"
166+
}`}
167+
style={{ marginLeft: "25px", marginRight: "25px" }}
168+
/>
169+
</div>
170+
{/* Second segment: between step 2 and 3 */}
171+
<div className="w-1/2 flex items-center">
172+
<div
173+
className={`h-0.5 w-full ${
174+
step > 2 ? "bg-primary/20" : "bg-muted"
175+
}`}
176+
style={{ marginLeft: "25px", marginRight: "25px" }}
177+
/>
178+
</div>
179+
</div>
156180

157181
<StepIndicator step={1} currentStep={step} label="Basic Info" />
158182
<StepIndicator step={2} currentStep={step} label="Options" />
@@ -263,12 +287,21 @@ export default function CreateNFTPage() {
263287
<SelectTrigger id="chain">
264288
<SelectValue placeholder="Select chain" />
265289
</SelectTrigger>
266-
<SelectContent>
267-
<SelectItem value="Ethereum">Ethereum</SelectItem>
268-
<SelectItem value="Base">Base</SelectItem>
269-
<SelectItem value="Polygon">Polygon</SelectItem>
270-
<SelectItem value="Arbitrum">Arbitrum</SelectItem>
271-
<SelectItem value="Optimism">Optimism</SelectItem>
290+
<SelectContent className="max-h-[300px]">
291+
{allChains.map((chain: StoredChain) => (
292+
<SelectItem key={chain.chainId} value={chain.name}>
293+
<div className="flex items-center gap-2">
294+
{chain.icon?.url && (
295+
<img
296+
src={chain.icon.url}
297+
alt={chain.name}
298+
className="w-4 h-4 rounded-full"
299+
/>
300+
)}
301+
{chain.name}
302+
</div>
303+
</SelectItem>
304+
))}
272305
</SelectContent>
273306
</Select>
274307
</FormFieldSetup>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create-token/page.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import { FileInput } from "components/shared/FileInput";
3030
import { BasisPointsInput } from "components/inputs/BasisPointsInput";
3131
import { SolidityInput } from "contract-ui/components/solidity-inputs";
3232
import { Form } from "@/components/ui/form";
33+
import { useAllChainsData } from "hooks/chains/allChains";
34+
import type { StoredChain } from "stores/chainStores";
3335

3436
// Form schemas
3537
const tokenInfoSchema = z.object({
@@ -105,6 +107,9 @@ export default function CreateTokenPage() {
105107
);
106108
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
107109

110+
// Get chain data
111+
const { allChains } = useAllChainsData();
112+
108113
// Forms
109114
const tokenInfoForm = useForm<TokenInfoValues>({
110115
resolver: zodResolver(tokenInfoSchema),
@@ -275,12 +280,21 @@ export default function CreateTokenPage() {
275280
<SelectTrigger id="chain">
276281
<SelectValue placeholder="Select chain" />
277282
</SelectTrigger>
278-
<SelectContent>
279-
<SelectItem value="Ethereum">Ethereum</SelectItem>
280-
<SelectItem value="Base">Base</SelectItem>
281-
<SelectItem value="Polygon">Polygon</SelectItem>
282-
<SelectItem value="Arbitrum">Arbitrum</SelectItem>
283-
<SelectItem value="Optimism">Optimism</SelectItem>
283+
<SelectContent className="max-h-[300px]">
284+
{allChains.map((chain: StoredChain) => (
285+
<SelectItem key={chain.chainId} value={chain.name}>
286+
<div className="flex items-center gap-2">
287+
{chain.icon?.url && (
288+
<img
289+
src={chain.icon.url}
290+
alt={chain.name}
291+
className="w-4 h-4 rounded-full"
292+
/>
293+
)}
294+
{chain.name}
295+
</div>
296+
</SelectItem>
297+
))}
284298
</SelectContent>
285299
</Select>
286300
</FormFieldSetup>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/import/page.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import * as z from "zod";
1919
import { Fieldset } from "components/contract-components/contract-deploy-form/common";
2020
import { SolidityInput } from "contract-ui/components/solidity-inputs";
2121
import { Form } from "@/components/ui/form";
22+
import { useAllChainsData } from "hooks/chains/allChains";
23+
import type { StoredChain } from "stores/chainStores";
2224

2325
// Form schema
2426
const contractDetailsSchema = z.object({
@@ -64,6 +66,9 @@ export default function ImportAssetPage() {
6466
const [contractDetails, setContractDetails] =
6567
useState<ContractDetailsValues>();
6668

69+
// Get chain data
70+
const { allChains } = useAllChainsData();
71+
6772
// Form
6873
const contractDetailsForm = useForm<ContractDetailsValues>({
6974
resolver: zodResolver(contractDetailsSchema),
@@ -160,12 +165,21 @@ export default function ImportAssetPage() {
160165
<SelectTrigger id="network">
161166
<SelectValue placeholder="Select network" />
162167
</SelectTrigger>
163-
<SelectContent>
164-
<SelectItem value="Ethereum">Ethereum</SelectItem>
165-
<SelectItem value="Base">Base</SelectItem>
166-
<SelectItem value="Polygon">Polygon</SelectItem>
167-
<SelectItem value="Arbitrum">Arbitrum</SelectItem>
168-
<SelectItem value="Optimism">Optimism</SelectItem>
168+
<SelectContent className="max-h-[300px]">
169+
{allChains.map((chain: StoredChain) => (
170+
<SelectItem key={chain.chainId} value={chain.name}>
171+
<div className="flex items-center gap-2">
172+
{chain.icon?.url && (
173+
<img
174+
src={chain.icon.url}
175+
alt={chain.name}
176+
className="w-4 h-4 rounded-full"
177+
/>
178+
)}
179+
{chain.name}
180+
</div>
181+
</SelectItem>
182+
))}
169183
</SelectContent>
170184
</Select>
171185
</FormFieldSetup>

0 commit comments

Comments
 (0)