Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: refactor DemoOptions component #1623

Merged
merged 8 commits into from
Nov 19, 2024
+164 −175
Merged

refactor: refactor DemoOptions component #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
24f7a8f
ok
Nov 14, 2024
7bfe903
refactor
Nov 14, 2024
185d018
refactor
Nov 14, 2024
877fdd2
remove as const
Nov 14, 2024
3ebd6f4
Merge branch 'main' into dms/refactor-playground-1
Nov 14, 2024
a6bc6d8
remove unused fn
Nov 14, 2024
06d4403
comments
Nov 15, 2024
388cd15
Merge branch 'main' into dms/refactor-playground-1
Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 64 additions & 62 deletions playground/nextjs-app-router/components/DemoOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,74 +11,76 @@ import { SwapConfig } from './form/swap-config';
import { TransactionOptions } from './form/transaction-options';
import { WalletType } from './form/wallet-type';

const COMMON_OPTIONS = [
ActiveComponent,
ComponentMode,
ComponentTheme,
WalletType,
];

const COMPONENT_CONFIG: Partial<
Record<OnchainKitComponent, (() => React.JSX.Element)[]>
> = {
[OnchainKitComponent.Checkout]: [
Chain,
PaymasterUrl,
IsSponsored,
CheckoutOptions,
],
[OnchainKitComponent.Swap]: [Chain, PaymasterUrl, IsSponsored, SwapConfig],
[OnchainKitComponent.SwapDefault]: [
Chain,
PaymasterUrl,
IsSponsored,
SwapConfig,
],
[OnchainKitComponent.Transaction]: [
Chain,
PaymasterUrl,
IsSponsored,
TransactionOptions,
],
[OnchainKitComponent.TransactionDefault]: [
Chain,
PaymasterUrl,
IsSponsored,
TransactionOptions,
],
[OnchainKitComponent.NFTCard]: [Chain, NFTOptions],
[OnchainKitComponent.NFTCardDefault]: [Chain, NFTOptions],
[OnchainKitComponent.NFTMintCard]: [
Chain,
PaymasterUrl,
IsSponsored,
NFTOptions,
],
[OnchainKitComponent.NFTMintCardDefault]: [
Chain,
PaymasterUrl,
IsSponsored,
NFTOptions,
],
};

export default function DemoOptions({
component,
}: {
component?: OnchainKitComponent;
}) {
const commonOptions = (
const commonElements = COMMON_OPTIONS.map((Component) => (
<Component key={Component.name} />
));

const specificElements = component
? (COMPONENT_CONFIG[component] || []).map((Component) => (
<Component key={Component.name} />
))
: [];

return (
<>
<ActiveComponent />
<ComponentMode />
<ComponentTheme />
<WalletType />
{commonElements}
{specificElements}
</>
);

switch (component) {
case OnchainKitComponent.Checkout:
return (
<>
{commonOptions}
<Chain />
<PaymasterUrl />
<IsSponsored />
<CheckoutOptions />
</>
);
case OnchainKitComponent.Swap:
case OnchainKitComponent.SwapDefault:
return (
<>
{commonOptions}
<Chain />
<PaymasterUrl />
<IsSponsored />
<SwapConfig />
</>
);
case OnchainKitComponent.Transaction:
case OnchainKitComponent.TransactionDefault:
return (
<>
{commonOptions}
<Chain />
<PaymasterUrl />
<IsSponsored />
<TransactionOptions />
</>
);
case OnchainKitComponent.NFTCard:
case OnchainKitComponent.NFTCardDefault:
return (
<>
{commonOptions}
<Chain />
<NFTOptions />
</>
);
case OnchainKitComponent.NFTMintCard:
case OnchainKitComponent.NFTMintCardDefault:
return (
<>
{commonOptions}
<Chain />
<PaymasterUrl />
<IsSponsored />
<NFTOptions />
</>
);
default:
return commonOptions;
}
}
141 changes: 69 additions & 72 deletions playground/nextjs-app-router/components/form/checkout-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { useContext } from 'react';
import { useState } from 'react';
import { AppContext, CheckoutTypes, OnchainKitComponent } from '../AppProvider';
import { AppContext, CheckoutTypes } from '../AppProvider';

export function CheckoutOptions() {
const {
activeComponent,
checkoutTypes,
setCheckoutTypes,
checkoutOptions,
Expand All @@ -24,77 +23,75 @@ export function CheckoutOptions() {
});

return (
activeComponent === OnchainKitComponent.Checkout && (
<div className="grid gap-2">
<Label htmlFor="chain">Checkout Types</Label>
<RadioGroup
id="pay-type"
value={checkoutTypes}
className="flex items-center justify-between"
onValueChange={(value) => setCheckoutTypes?.(value as CheckoutTypes)}
>
<div className="flex items-center gap-2">
<Label
htmlFor="pay-type-product-id"
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
>
<RadioGroupItem
id="pay-type-product-id"
value={CheckoutTypes.ProductID}
/>
Product ID
</Label>
<Label
htmlFor="pay-type-charge-id"
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
>
<RadioGroupItem
id="pay-type-charge-id"
value={CheckoutTypes.ChargeID}
/>
Charge ID
</Label>
</div>
</RadioGroup>

{checkoutTypes === CheckoutTypes.ChargeID && (
<div>
<Label htmlFor="charge-id">Charge ID</Label>
<Input
id="charge-id"
value={productOptions.chargeId}
placeholder="Enter Charge ID"
onChange={(e) => {
setProductOptions({
...productOptions,
chargeId: e.target.value,
});
setCheckoutOptions?.({
...checkoutOptions,
chargeId: e.target.value,
});
}}
<div className="grid gap-2">
<Label htmlFor="chain">Checkout Types</Label>
<RadioGroup
id="pay-type"
value={checkoutTypes}
className="flex items-center justify-between"
onValueChange={(value) => setCheckoutTypes?.(value as CheckoutTypes)}
>
<div className="flex items-center gap-2">
<Label
htmlFor="pay-type-product-id"
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
>
<RadioGroupItem
id="pay-type-product-id"
value={CheckoutTypes.ProductID}
/>
</div>
)}
{checkoutTypes === CheckoutTypes.ProductID && (
<div>
<Label htmlFor="product-id">Product ID</Label>
<Input
id="product-id"
placeholder="Enter Product ID"
value={productId}
onChange={(e) => {
setProductId(e.target.value);
setCheckoutOptions?.({
...checkoutOptions,
productId: e.target.value,
});
}}
Product ID
</Label>
<Label
htmlFor="pay-type-charge-id"
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
>
<RadioGroupItem
id="pay-type-charge-id"
value={CheckoutTypes.ChargeID}
/>
</div>
)}
</div>
)
Charge ID
</Label>
</div>
</RadioGroup>

{checkoutTypes === CheckoutTypes.ChargeID && (
<div>
<Label htmlFor="charge-id">Charge ID</Label>
<Input
id="charge-id"
value={productOptions.chargeId}
placeholder="Enter Charge ID"
onChange={(e) => {
setProductOptions({
...productOptions,
chargeId: e.target.value,
});
setCheckoutOptions?.({
...checkoutOptions,
chargeId: e.target.value,
});
}}
/>
</div>
)}
{checkoutTypes === CheckoutTypes.ProductID && (
<div>
<Label htmlFor="product-id">Product ID</Label>
<Input
id="product-id"
placeholder="Enter Product ID"
value={productId}
onChange={(e) => {
setProductId(e.target.value);
setCheckoutOptions?.({
...checkoutOptions,
productId: e.target.value,
});
}}
/>
</div>
)}
</div>
);
}
72 changes: 31 additions & 41 deletions playground/nextjs-app-router/components/form/transaction-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,50 +7,40 @@ import {
SelectValue,
} from '@/components/ui/select';
import { useContext } from 'react';
import {
AppContext,
OnchainKitComponent,
TransactionTypes,
} from '../AppProvider';
import { AppContext, TransactionTypes } from '../AppProvider';

export function TransactionOptions() {
const { activeComponent, transactionType, setTransactionType } =
useContext(AppContext);
const { transactionType, setTransactionType } = useContext(AppContext);

return (
(activeComponent === OnchainKitComponent.Transaction ||
activeComponent === OnchainKitComponent.TransactionDefault) && (
<div className="grid gap-2">
<Label htmlFor="chain">Transaction Options</Label>
<Select
value={transactionType}
onValueChange={(value) =>
value ? setTransactionType?.(value as TransactionTypes) : value
}
>
<SelectTrigger>
<SelectValue placeholder="Select transaction type" />
</SelectTrigger>
<SelectContent>
<SelectItem value={TransactionTypes.Calls}>Calls</SelectItem>
<SelectItem value={TransactionTypes.Contracts}>
Contracts
</SelectItem>
<SelectItem value={TransactionTypes.CallsPromise}>
Calls Promise
</SelectItem>
<SelectItem value={TransactionTypes.ContractsPromise}>
Contracts Promise
</SelectItem>
<SelectItem value={TransactionTypes.CallsCallback}>
Calls Callback
</SelectItem>
<SelectItem value={TransactionTypes.ContractsCallback}>
Contracts Callback
</SelectItem>
</SelectContent>
</Select>
</div>
)
<div className="grid gap-2">
<Label htmlFor="chain">Transaction Options</Label>
<Select
value={transactionType}
onValueChange={(value) =>
value ? setTransactionType?.(value as TransactionTypes) : value
}
>
<SelectTrigger>
<SelectValue placeholder="Select transaction type" />
</SelectTrigger>
<SelectContent>
<SelectItem value={TransactionTypes.Calls}>Calls</SelectItem>
<SelectItem value={TransactionTypes.Contracts}>Contracts</SelectItem>
<SelectItem value={TransactionTypes.CallsPromise}>
Calls Promise
</SelectItem>
<SelectItem value={TransactionTypes.ContractsPromise}>
Contracts Promise
</SelectItem>
<SelectItem value={TransactionTypes.CallsCallback}>
Calls Callback
</SelectItem>
<SelectItem value={TransactionTypes.ContractsCallback}>
Contracts Callback
</SelectItem>
</SelectContent>
</Select>
</div>
);
}