Launch a token

Deploys as a native B20 token on Base with a fair-launch bonding curve.

{/* Stepper */}

{steps.map((s, i) => (

{s}

))}

{step === 0 && (

{form.image ? (

{ e.target.style.display = 'none'; }} /> ) : ( )} { const f = e.target.files && e.target.files[0]; if (!f) return; setImgBusy(true); setImgErr(''); try { set('image', await pedbyImageToDataUri(f)); } catch (er) { setImgErr(er.message || 'Could not process image.'); } finally { setImgBusy(false); e.target.value = ''; } }} />

Token image (optional — click the square to upload; it's compressed in your browser and stored fully on-chain)

set('image', e.target.value.trim())} placeholder="…or paste an https:// image URL" style={{ ...inputStyle, width: '100%' }} /> {form.image && ( )} {imgErr &&

{imgErr}

}

Token name set('name', e.target.value)} placeholder="e.g. BasedFrog" style={inputStyle} /> Ticker set('ticker', e.target.value.replace(/[^a-zA-Z]/g, '').slice(0, 8))} placeholder="e.g. FROG" style={inputStyle} /> Description

set('description', e.target.value)} placeholder="What's this token about?" rows={3} style={{ ...inputStyle, height: 'auto', resize: 'vertical', paddingTop: 8 }} />
          </label>

<button onClick={() => setShowSocial(s => !s)} style={{
            display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer',
            padding: 0, fontFamily: 'inherit', fontSize: 12, fontWeight: 600, color: '#D6398A',
          }}>
            <SfIcon name={showSocial ? 'chevDown' : 'chev'} size={13} stroke="#D6398A" />
            Social links & website <span style={{ color: '#9AA39E', fontWeight: 500 }}>(optional)</span>
          </button>

{showSocial && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 14, borderRadius: 12, background: '#FDF3F8', border: '1px solid #FBE7F1' }}>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#3B453F' }}>Website</span>
                <input value={form.website} onChange={e => set('website', e.target.value)} placeholder="https://" style={inputStyle} />
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#3B453F' }}>X / Twitter</span>
                <input value={form.twitter} onChange={e => set('twitter', e.target.value)} placeholder="@yourtoken" style={inputStyle} />
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#3B453F' }}>Telegram</span>
                <input value={form.telegram} onChange={e => set('telegram', e.target.value)} placeholder="t.me/yourtoken" style={inputStyle} />
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#3B453F' }}>Discord</span>
                <input value={form.discord} onChange={e => set('discord', e.target.value)} placeholder="discord.gg/…" style={inputStyle} />
              </label>
            </div>
          )}
        </Card>
      )}

{step === 1 && (
        <Card pad={24}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Fixed curve parameters</div>
          <div style={{ fontSize: 12.5, color: '#6B7570', marginBottom: 18, lineHeight: 1.5 }}>
            Every token launches with the same virtual reserves — no one gets a price advantage by launching, price only moves from real buys and sells.
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 18 }}>
            {[
              ['Starting price', PEDBY_CURVE.fmtUsd(startPrice * PEDBY_CURVE.ETH_USD, false)],
              ['Starting market cap', PEDBY_CURVE.fmtUsd(startMcap)],
              ['Total supply', '1,000,000,000'],
              ['Graduation target', PEDBY_CURVE.fmtEth(PEDBY_CURVE.GRADUATION_ETH) + ' raised'],
            ].map(([l, v]) => (
              <div key={l} style={{ border: '1px solid #E6EAE6', borderRadius: 10, padding: 12 }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, color: '#9AA39E', textTransform: 'uppercase', letterSpacing: 0.5 }}>{l}</div>
                <div className="sf-num" style={{ fontSize: 16, fontWeight: 700, marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 12, color: '#6B7570', lineHeight: 1.5, background: '#F3FAF5', border: '1px solid #E6EAE6', borderRadius: 10, padding: 12 }}>
            Once {PEDBY_CURVE.fmtEth(PEDBY_CURVE.GRADUATION_ETH)} of real ETH accumulates on the curve, this token graduates automatically — liquidity locks into a Base DEX pool.
          </div>
        </Card>
      )}

{step === 2 && (
        <Card pad={24}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 14 }}>Review</div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 18 }}>
            {form.image ? (
              <img src={form.image} alt="" style={{ width: 48, height: 48, borderRadius: 12, objectFit: 'cover', border: '1px solid #E6EAE6' }} />
            ) : (
              <Photo w={48} h={48} label="img" radius={12} />
            )}
            <div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>{form.name || '—'} <span style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#6B7570' }}>${form.ticker || '—'}</span></div>
              <div style={{ fontSize: 12.5, color: '#6B7570', maxWidth: 380 }}>{form.description || 'No description provided.'}</div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#3B453F', padding: '10px 0', borderTop: '1px solid #EFF2EE' }}>
            <span>Network</span><span style={{ fontWeight: 600 }}>Base</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#3B453F', padding: '10px 0', borderTop: '1px solid #EFF2EE' }}>
            <span>Standard</span><span style={{ fontWeight: 600 }}>B20 (native token)</span>
          </div>
          {creationFee != null && creationFee > 0 && (
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#3B453F', padding: '10px 0', borderTop: '1px solid #EFF2EE' }}>
              <span>Platform launch fee</span><span className="sf-num" style={{ fontWeight: 600 }}>{creationFee} ETH</span>
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#3B453F', padding: '10px 0', borderTop: '1px solid #EFF2EE' }}>
            <span>Network gas (estimated)</span><span className="sf-num" style={{ fontWeight: 600 }}>~0.0001 ETH</span>
          </div>
          {window.PEDBY_LIVE && (
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5, color: '#3B453F', padding: '10px 0', borderTop: '1px solid #EFF2EE' }}>
              <span>First buy <span style={{ color: '#9AA39E' }}>(optional, front-runs snipers)</span></span>
              <input type="number" min="0" step="0.01" value={devBuy} onChange={e => setDevBuy(e.target.value)}
                placeholder="0.00 ETH" style={{ ...inputStyle, height: 32, width: 110, textAlign: 'right', fontFamily: 'JetBrains Mono', fontSize: 12 }} />
            </div>
          )}
          {err && (
            <div style={{ marginTop: 12, background: '#FBE3E0', color: '#7A1E15', borderRadius: 10, padding: '10px 12px', fontSize: 12.5, fontWeight: 600 }}>{err}</div>
          )}
          {(form.website || form.twitter || form.telegram || form.discord) && (
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid #EFF2EE' }}>
              <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono', color: '#9A2367', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>Links</div>
              <SocialLinks links={{ website: form.website, twitter: form.twitter, telegram: form.telegram, discord: form.discord }} />
            </div>
          )}
        </Card>
      )}

<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 22 }}>
        <Btn kind="ghost" onClick={() => step === 0 ? onNav('marketplace') : setStep(step - 1)}>{step === 0 ? 'Cancel' : 'Back'}</Btn>
        {step < 2 ? (
          <Btn kind="primary" disabled={step === 0 && !canNext0} style={step === 0 && !canNext0 ? { opacity: 0.4, cursor: 'not-allowed' } : {}} onClick={() => (step === 0 ? canNext0 : true) && setStep(step + 1)}>Continue</Btn>
        ) : (
          <Btn kind="primary" icon={<SfIcon name="bolt" size={15} stroke="#fff" />} onClick={deploy} style={busy ? { opacity: 0.6, cursor: 'wait' } : {}}>
            {busy ? 'Deploying…' : 'Deploy on Base'}
          </Btn>
        )}
      </div>
    </div>
  );
}

// Convert an uploaded image to an on-chain-ready data URI, entirely client-side:
// small GIFs are embedded as-is (keeps animation); everything else is cover-cropped
// to a 256x256 square and compressed until it fits comfortably in calldata.
const PEDBY_IMG_MAX_BYTES = 48 * 1024; // ~48KB data URI ≈ pennies of gas on Base
function pedbyImageToDataUri(file) {
  return new Promise((resolve, reject) => {
    if (!/^image\//.test(file.type)) return reject(new Error('Please choose an image file.'));
    const reader = new FileReader();
    reader.onerror = () => reject(new Error('Could not read the file.'));
    reader.onload = () => {
      const raw = reader.result;
      // animated GIFs lose animation through canvas — embed small ones untouched
      if (file.type === 'image/gif' && raw.length <= PEDBY_IMG_MAX_BYTES) return resolve(raw);
      const img = new Image();
      img.onerror = () => reject(new Error('Could not decode the image.'));
      img.onload = () => {
        const S = 256, c = document.createElement('canvas');
        c.width = S; c.height = S;
        const x = c.getContext('2d');
        // cover-crop to square
        const side = Math.min(img.width, img.height);
        const sx = (img.width - side) / 2, sy = (img.height - side) / 2;
        x.drawImage(img, sx, sy, side, side, 0, 0, S, S);
        let out = c.toDataURL('image/png');
        if (out.length > PEDBY_IMG_MAX_BYTES) {
          for (const q of [0.85, 0.7, 0.55, 0.4]) {
            out = c.toDataURL('image/jpeg', q);
            if (out.length <= PEDBY_IMG_MAX_BYTES) break;
          }
        }
        if (out.length > PEDBY_IMG_MAX_BYTES) return reject(new Error('Image is too detailed to fit on-chain — try a simpler one, or paste a URL instead.'));
        resolve(out);
      };
      img.src = raw;
    };
    reader.readAsDataURL(file);
  });
}

const inputStyle = {
  height: 40, borderRadius: 10, border: '1px solid #E6EAE6', padding: '0 12px',
  fontSize: 13.5, fontFamily: 'inherit', outline: 'none', background: '#fff',
};

window.PedbyCreate = PedbyCreate;