Skip to content

[SE-326] Update add chain form to request #1686

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

Open
wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

[SE-326] Update add chain form to request #1686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce0fce2
add more info requests to add chain form
Totalspud Oct 9, 2025
8cc0a27
request chain info update form
Totalspud Oct 9, 2025
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,4 @@ packages/widget/test-results*
.workbench
.claude/settings.local.json
CLAUDE.md
nul
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove Windows artifact

Suggested change
nul

177 changes: 177 additions & 0 deletions docs/snippets/SkipAPIChainForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export default function SkipGoChainForm() {
const [slackInfo, setSlackInfo] = React.useState('');
const [useTelegram, setUseTelegram] = React.useState(false);
const [telegramHandle, setTelegramHandle] = React.useState('');
const [generalInfo, setGeneralInfo] = React.useState('');
const [launchDate, setLaunchDate] = React.useState('');
const [coingeckoUrl, setCoingeckoUrl] = React.useState('');
const [onboardingStrategy, setOnboardingStrategy] = React.useState('');
const [isValidating, setIsValidating] = React.useState(false);
const [chainData, setChainData] = React.useState(null);
const [validationErrors, setValidationErrors] = React.useState({});
Expand Down Expand Up @@ -108,6 +112,9 @@ export default function SkipGoChainForm() {
// Pre-launch validation - only require basic info
if (!projectName.trim()) errors.projectName = 'Project name is required';
if (!developmentStage) errors.developmentStage = 'Please select a development stage';
if (!generalInfo.trim()) errors.generalInfo = 'General information is required';
if (!launchDate.trim()) errors.launchDate = 'Launch date is required';
if (!onboardingStrategy.trim()) errors.onboardingStrategy = 'Onboarding/Interop strategy is required';
if (!contactEmail.trim()) errors.contactEmail = 'Contact email is required';
// Validate communication preferences if checked
if (useSlack && !slackInfo.trim()) errors.slackInfo = 'Please provide Slack workspace or channel';
Expand All @@ -119,6 +126,9 @@ export default function SkipGoChainForm() {
if (!validateEndpoint(restEndpoint)) errors.rest = true;
if (evmEndpoint && !validateEndpoint(evmEndpoint)) errors.evm = true;
if (!chainData) errors.chainRegistry = 'Please provide a valid chain registry URL';
if (!generalInfo.trim()) errors.generalInfo = 'General information is required';
if (!launchDate.trim()) errors.launchDate = 'Launch date is required';
if (!onboardingStrategy.trim()) errors.onboardingStrategy = 'Onboarding/Interop strategy is required';
if (!contactEmail.trim()) errors.contactEmail = 'Contact email is required';
// Validate communication preferences if checked
if (useSlack && !slackInfo.trim()) errors.slackInfo = 'Please provide Slack workspace or channel';
Expand All @@ -144,6 +154,11 @@ Development Stage: ${developmentStage}
Description: ${projectDescription || 'Not provided'}
Website: ${projectWebsite || 'Not provided'}

General Info: ${generalInfo || 'Not provided'}
Launch Date: ${launchDate || 'Not provided'}
CoinGecko: ${coingeckoUrl || 'Not provided'}
Onboarding/Interop Strategy: ${onboardingStrategy || 'Not provided'}

Contact: ${contactEmail}
Communication Preferences:
${useSlack && slackInfo ? `- Slack: ${slackInfo}` : ''}
Expand All @@ -157,6 +172,11 @@ Chain Registry: ${chainRegistryUrl}
Chain Name: ${chainData.pretty_name}
Chain ID: ${chainData.chain_id}

General Info: ${generalInfo || 'Not provided'}
Launch Date: ${launchDate || 'Not provided'}
CoinGecko: ${coingeckoUrl || 'Not provided'}
Onboarding/Interop Strategy: ${onboardingStrategy || 'Not provided'}

Required Endpoints:
- RPC: ${rpcEndpoint}
- gRPC: ${grpcEndpoint}
Expand Down Expand Up @@ -206,6 +226,10 @@ ${useTelegram && telegramHandle ? `- Telegram: ${telegramHandle}` : ''}
setSlackInfo('');
setUseTelegram(false);
setTelegramHandle('');
setGeneralInfo('');
setLaunchDate('');
setCoingeckoUrl('');
setOnboardingStrategy('');
setChainData(null);
setIsSubmitting(false);
setSubmitMessage('Thank you! Your integration request has been submitted. Our Customer Success Engineering team will review it shortly.');
Expand Down Expand Up @@ -446,6 +470,44 @@ ${useTelegram && telegramHandle ? `- Telegram: ${telegramHandle}` : ''}
/>
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
General Information About the Project *
</label>
<textarea
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add character limit

Suggested change
<textarea
<textarea
value={generalInfo}
onChange={(e) => setGeneralInfo(e.target.value)}
placeholder="Tell us about your project, its goals, and what makes it unique..."
rows={4}
maxLength={2000}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>

value={generalInfo}
onChange={(e) => setGeneralInfo(e.target.value)}
placeholder="Tell us about your project, its goals, and what makes it unique..."
rows={4}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>
{validationErrors.generalInfo && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.generalInfo}
</div>
)}
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Comment on lines +492 to +493
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use date picker for validation

Suggested change
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Estimated Launch Date *
</label>
<input
type="date"
value={launchDate}
onChange={(e) => setLaunchDate(e.target.value)}
required
style={inputStyle}
/>

When Was/Will the Chain Be Launched? *
</label>
<input
type="text"
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add character limit

Suggested change
type="text"
<textarea
value={onboardingStrategy}
onChange={(e) => setOnboardingStrategy(e.target.value)}
placeholder="Describe your strategy for onboarding users, cross-chain interoperability plans, IBC connections, etc..."
rows={4}
maxLength={2000}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>

value={launchDate}
onChange={(e) => setLaunchDate(e.target.value)}
placeholder="e.g., Q2 2024, March 2024, or 'Expected Q3 2025'"
required
style={inputStyle}
/>
{validationErrors.launchDate && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.launchDate}
</div>
)}
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Project Website
Expand All @@ -458,6 +520,38 @@ ${useTelegram && telegramHandle ? `- Telegram: ${telegramHandle}` : ''}
style={inputStyle}
/>
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
CoinGecko Link (if you have a token)
</label>
<input
type="url"
value={coingeckoUrl}
onChange={(e) => setCoingeckoUrl(e.target.value)}
placeholder="https://www.coingecko.com/en/coins/your-token"
style={inputStyle}
/>
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Onboarding Strategy / Interoperability Strategy *
</label>
<textarea
value={onboardingStrategy}
onChange={(e) => setOnboardingStrategy(e.target.value)}
placeholder="Describe your strategy for onboarding users, cross-chain interoperability plans, IBC connections, etc..."
rows={4}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>
{validationErrors.onboardingStrategy && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.onboardingStrategy}
</div>
)}
</div>
</>
) : (
<>
Expand Down Expand Up @@ -508,6 +602,89 @@ ${useTelegram && telegramHandle ? `- Telegram: ${telegramHandle}` : ''}
</div>
)}
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
General Information About the Project *
</label>
<textarea
value={generalInfo}
onChange={(e) => setGeneralInfo(e.target.value)}
placeholder="Tell us about your project, its goals, and what makes it unique..."
rows={4}
required
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add character limit

Suggested change
required
<textarea
value={generalInfo}
onChange={(e) => setGeneralInfo(e.target.value)}
placeholder="Tell us about your project, its goals, and what makes it unique..."
rows={4}
maxLength={2000}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>

style={{ ...inputStyle, resize: 'vertical' }}
/>
{validationErrors.generalInfo && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.generalInfo}
</div>
)}
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Chain Launch Date *
</label>
Comment on lines +627 to +628
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use date picker for validation

Suggested change
Chain Launch Date *
</label>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Chain Launch Date *
</label>
<input
type="date"
value={launchDate}
onChange={(e) => setLaunchDate(e.target.value)}
required
style={inputStyle}
/>

<input
type="text"
value={launchDate}
onChange={(e) => setLaunchDate(e.target.value)}
placeholder="e.g., Q2 2024, March 2024"
required
style={inputStyle}
/>
{validationErrors.launchDate && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.launchDate}
</div>
)}
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Project Website
</label>
<input
type="url"
value={projectWebsite}
onChange={(e) => setProjectWebsite(e.target.value)}
placeholder="https://yourproject.com"
style={inputStyle}
/>
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
CoinGecko Link (if you have a token)
</label>
<input
type="url"
value={coingeckoUrl}
onChange={(e) => setCoingeckoUrl(e.target.value)}
placeholder="https://www.coingecko.com/en/coins/your-token"
style={inputStyle}
/>
</div>

<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
Onboarding Strategy / Interoperability Strategy *
</label>
<textarea
value={onboardingStrategy}
onChange={(e) => setOnboardingStrategy(e.target.value)}
Copy link
Contributor

@Cordtus Cordtus Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add character limit

Suggested change
onChange={(e) => setOnboardingStrategy(e.target.value)}
<textarea
value={onboardingStrategy}
onChange={(e) => setOnboardingStrategy(e.target.value)}
placeholder="Describe your strategy for onboarding users, cross-chain interoperability plans, IBC connections, etc..."
rows={4}
maxLength={2000}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>

placeholder="Describe your strategy for onboarding users, cross-chain interoperability plans, IBC connections, etc..."
rows={4}
required
style={{ ...inputStyle, resize: 'vertical' }}
/>
{validationErrors.onboardingStrategy && (
<div style={{ marginTop: '6px', color: '#ef4444', fontSize: '13px' }}>
{validationErrors.onboardingStrategy}
</div>
)}
</div>
</>
)}

Expand Down
Loading