git.stevedylan.dev

80

+

81

+

/* Markdown UI React Widgets - Optional Styling */

82

+

/* Users can import this CSS file to apply consistent styling to all widget components */

83

+

84

+

/* Base widget container */

85

+

.widget {

86

+

  margin: 1rem 0;

87

+

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

88

+

  line-height: 1.5;

89

+

90

+

91

+

/* Form container */

92

+

.widget-form {

93

+

  display: flex;

94

+

  flex-direction: column;

95

+

  gap: 1rem;

96

+

  padding: 1.5rem;

97

+

  border: 1px solid #e2e8f0;

98

+

  border-radius: 8px;

99

+

  background-color: #ffffff;

100

+

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

101

+

102

+

103

+

.widget-form > button[type="button"]:last-child {

104

+

  align-self: flex-start;

105

+

  margin-top: 0.5rem;

106

+

  padding: 0.75rem 1.5rem;

107

+

  background-color: #3b82f6;

108

+

  color: #ffffff;

109

+

  border: none;

110

+

  border-radius: 6px;

111

+

  font-size: 0.875rem;

112

+

  font-weight: 500;

113

+

  cursor: pointer;

114

+

  transition: background-color 0.2s ease;

115

+

116

+

117

+

/* Button Group */

118

+

.widget-button-group {

119

+

  display: flex;

120

+

  flex-direction: column;

121

+

  gap: 0.5rem;

122

+

123

+

124

+

.widget-button-group label {

125

+

  font-weight: 500;

126

+

  color: #374151;

127

+

  margin-bottom: 0.25rem;

128

+

129

+

130

+

.widget-button-group div[role="group"] {

131

+

  display: flex;

132

+

  gap: 0.25rem;

133

+

  flex-wrap: wrap;

134

+

135

+

136

+

.widget-form .widget-button-group button,

137

+

.widget-button-group button {

138

+

  padding: 0.5rem 1rem;

139

+

  border: 1px solid #d1d5db;

140

+

  background-color: #ffffff;

141

+

  color: #374151;

142

+

  border-radius: 6px;

143

+

  cursor: pointer;

144

+

  transition: all 0.2s ease;

145

+

  font-size: 0.875rem;

146

+

  font-weight: 500;

147

+

148

+

149

+

.widget-form .widget-button-group button:hover,

150

+

.widget-button-group button:hover {

151

+

  background-color: #f9fafb;

152

+

  border-color: #9ca3af;

153

+

154

+

155

+

.widget-form .widget-button-group button[aria-pressed="true"],

156

+

.widget-button-group button[aria-pressed="true"] {

157

+

  background-color: #3b82f6;

158

+

  color: #ffffff;

159

+

  border-color: #3b82f6;

160

+

161

+

162

+

.widget-form .widget-button-group button:focus,

163

+

.widget-button-group button:focus {

164

+

  outline: none;

165

+

  box-shadow: 0 0 0 2px #3b82f6;

166

+

167

+

168

+

/* Text Input */

169

+

.widget-button {

170

+

  display: flex;

171

+

  flex-direction: column;

172

+

  gap: 0.5rem;

173

+

174

+

175

+

.widget-button label {

176

+

  font-weight: 500;

177

+

  color: #374151;

178

+

179

+

180

+

.widget-button input[type="text"] {

181

+

  padding: 0.75rem;

182

+

  border: 1px solid #d1d5db;

183

+

  border-radius: 6px;

184

+

  font-size: 0.875rem;

185

+

  background-color: #ffffff;

186

+

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

187

+

188

+

189

+

.widget-button input[type="text"]:focus {

190

+

  outline: none;

191

+

  border-color: #3b82f6;

192

+

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

193

+

194

+

195

+

.widget-button input[type="text"]::placeholder {

196

+

  color: #9ca3af;

197

+

198

+

199

+

/* Select and Select Multi */

200

+

.selector,

201

+

.selector-multi {

202

+

  display: flex;

203

+

  flex-direction: column;

204

+

  gap: 0.5rem;

205

+

206

+

207

+

.selector label,

208

+

.selector-multi-label {

209

+

  font-weight: 500;

210

+

  color: #374151;

211

+

212

+

213

+

.selector select {

214

+

  padding: 0.75rem;

215

+

  border: 1px solid #d1d5db;

216

+

  border-radius: 6px;

217

+

  font-size: 0.875rem;

218

+

  background-color: #ffffff;

219

+

  cursor: pointer;

220

+

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

221

+

222

+

223

+

.selector select:focus {

224

+

  outline: none;

225

+

  border-color: #3b82f6;

226

+

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

227

+

228

+

229

+

.selector option {

230

+

  padding: 0.5rem;

231

+

232

+

233

+

/* Checkbox-based Multi Select */

234

+

.checkbox-group {

235

+

  display: flex;

236

+

  flex-direction: column;

237

+

  gap: 0.5rem;

238

+

  padding: 0.75rem;

239

+

  border: 1px solid #d1d5db;

240

+

  border-radius: 6px;

241

+

  background-color: #ffffff;

242

+

  max-height: 200px;

243

+

  overflow-y: auto;

244

+

245

+

246

+

.checkbox-item {

247

+

  display: flex;

248

+

  align-items: center;

249

+

  gap: 0.5rem;

250

+

  cursor: pointer;

251

+

  padding: 0.25rem 0;

252

+

  font-weight: normal;

253

+

254

+

255

+

.checkbox-item input[type="checkbox"] {

256

+

  margin: 0;

257

+

  cursor: pointer;

258

+

259

+

260

+

.checkbox-item span {

261

+

  font-size: 0.875rem;

262

+

  color: #374151;

263

+

264

+

265

+

.checkbox-item:hover {

266

+

  background-color: #f9fafb;

267

+

  border-radius: 4px;

268

+

  margin: -0.25rem 0;

269

+

  padding: 0.5rem 0.25rem;

270

+

271

+

272

+

/* Slider */

273

+

.widget-slider {

274

+

  display: flex;

275

+

  flex-direction: column;

276

+

  gap: 0.5rem;

277

+

278

+

279

+

.widget-slider label {

280

+

  font-weight: 500;

281

+

  color: #374151;

282

+

283

+

284

+

.slider-container {

285

+

  display: flex;

286

+

  flex-direction: column;

287

+

  gap: 0.25rem;

288

+

289

+

290

+

.slider-values {

291

+

  display: flex;

292

+

  justify-content: space-between;

293

+

  align-items: center;

294

+

  font-size: 0.75rem;

295

+

  color: #6b7280;

296

+

  margin-bottom: 0.25rem;

297

+

298

+

299

+

.current-value {

300

+

  font-weight: 600;

301

+

  color: #3b82f6;

302

+

  background: #eff6ff;

303

+

  padding: 0.25rem 0.5rem;

304

+

  border-radius: 4px;

305

+

  min-width: 2rem;

306

+

  text-align: center;

307

+

308

+

309

+

.min-value, .max-value {

310

+

  font-weight: 500;

311

+

312

+

313

+

.widget-slider input[type="range"] {

314

+

  width: 100%;

315

+

  height: 6px;

316

+

  border-radius: 3px;

317

+

  background: #e2e8f0;

318

+

  outline: none;

319

+

  cursor: pointer;

320

+

321

+

322

+

.widget-slider input[type="range"]::-webkit-slider-thumb {

323

+

  appearance: none;

324

+

  width: 20px;

325

+

  height: 20px;

326

+

  border-radius: 50%;

327

+

  background: #3b82f6;

328

+

  cursor: pointer;

329

+

  transition: background-color 0.2s ease;

330

+

331

+

332

+

.widget-slider input[type="range"]::-webkit-slider-thumb:hover {

333

+

  background: #2563eb;

334

+

335

+

336

+

.widget-slider input[type="range"]::-moz-range-thumb {

337

+

  width: 20px;

338

+

  height: 20px;

339

+

  border-radius: 50%;

340

+

  background: #3b82f6;

341

+

  cursor: pointer;

342

+

  border: none;

343

+

  transition: background-color 0.2s ease;

344

+

345

+

346

+

.widget-slider input[type="range"]::-moz-range-thumb:hover {

347

+

  background: #2563eb;

348

+

349

+

350

+

/* Form submit button styling - hover and focus states */

351

+

.widget-form > button[type="button"]:last-child:hover {

352

+

  background-color: #2563eb;

353

+

354

+

355

+

.widget-form > button[type="button"]:last-child:focus {

356

+

  outline: none;

357

+

  box-shadow: 0 0 0 2px #3b82f6;

358

+

359

+

360

+

/* Error styling for unknown widgets */

361

+

.widget span[style*="color:red"] {

362

+

  color: #ef4444 !important;

363

+

  font-weight: 500;

364

+

  padding: 0.75rem;

365

+

  background-color: #fef2f2;

366

+

  border: 1px solid #fecaca;

367

+

  border-radius: 6px;

368

+

  display: inline-block;

369

+

370

+

371

+

/* Responsive design */

372

+

@media (max-width: 640px) {

373

+

  .widget-button-group div[role="group"] {

374

+

    flex-direction: column;

375

+

376

+

377

+

  .widget-button-group button {

378

+

    width: 100%;

379

+

380

+

381

+

  .widget-form {

382

+

    padding: 1rem;

383

+

384

+

5	5		import { createPublicClient, createWalletClient, custom, http } from "viem";
6	6		import { sepolia } from "viem/chains";
7	7		import { parseContractToMarkdown, type ContractResponse } from './utils/contractParser';
8		-	import '@markdown-ui/react/widgets.css';
	8	+	import './App.css';
9	9
10	10
11	11		const marked = new Marked().use(markedUiExtension);

1	+	/// <reference types="vite/client" />
2	+
3	+	declare module "*.css" {
4	+	const content: any;
5	+	export default content;
6	+	}

2	2		max-width: 1280px;
3	3		margin: 0 auto;
4	4		padding: 2rem;
5		-	text-align: center;
6	5		}
7	6
8	7		.logo {

78	77		.docs-link:focus-visible {
79	78		outline: 4px auto -webkit-focus-ring-color;
80	79		}
	80	+
	81	+	/* Markdown UI React Widgets - Optional Styling */
	82	+	/* Users can import this CSS file to apply consistent styling to all widget components */
	83	+
	84	+	/* Base widget container */
	85	+	.widget {
	86	+	margin: 1rem 0;
	87	+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	88	+	line-height: 1.5;
	89	+	}
	90	+
	91	+	/* Form container */
	92	+	.widget-form {
	93	+	display: flex;
	94	+	flex-direction: column;
	95	+	gap: 1rem;
	96	+	padding: 1.5rem;
	97	+	border: 1px solid #e2e8f0;
	98	+	border-radius: 8px;
	99	+	background-color: #ffffff;
	100	+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	101	+	}
	102	+
	103	+	.widget-form > button[type="button"]:last-child {
	104	+	align-self: flex-start;
	105	+	margin-top: 0.5rem;
	106	+	padding: 0.75rem 1.5rem;
	107	+	background-color: #3b82f6;
	108	+	color: #ffffff;
	109	+	border: none;
	110	+	border-radius: 6px;
	111	+	font-size: 0.875rem;
	112	+	font-weight: 500;
	113	+	cursor: pointer;
	114	+	transition: background-color 0.2s ease;
	115	+	}
	116	+
	117	+	/* Button Group */
	118	+	.widget-button-group {
	119	+	display: flex;
	120	+	flex-direction: column;
	121	+	gap: 0.5rem;
	122	+	}
	123	+
	124	+	.widget-button-group label {
	125	+	font-weight: 500;
	126	+	color: #374151;
	127	+	margin-bottom: 0.25rem;
	128	+	}
	129	+
	130	+	.widget-button-group div[role="group"] {
	131	+	display: flex;
	132	+	gap: 0.25rem;
	133	+	flex-wrap: wrap;
	134	+	}
	135	+
	136	+	.widget-form .widget-button-group button,
	137	+	.widget-button-group button {
	138	+	padding: 0.5rem 1rem;
	139	+	border: 1px solid #d1d5db;
	140	+	background-color: #ffffff;
	141	+	color: #374151;
	142	+	border-radius: 6px;
	143	+	cursor: pointer;
	144	+	transition: all 0.2s ease;
	145	+	font-size: 0.875rem;
	146	+	font-weight: 500;
	147	+	}
	148	+
	149	+	.widget-form .widget-button-group button:hover,
	150	+	.widget-button-group button:hover {
	151	+	background-color: #f9fafb;
	152	+	border-color: #9ca3af;
	153	+	}
	154	+
	155	+	.widget-form .widget-button-group button[aria-pressed="true"],
	156	+	.widget-button-group button[aria-pressed="true"] {
	157	+	background-color: #3b82f6;
	158	+	color: #ffffff;
	159	+	border-color: #3b82f6;
	160	+	}
	161	+
	162	+	.widget-form .widget-button-group button:focus,
	163	+	.widget-button-group button:focus {
	164	+	outline: none;
	165	+	box-shadow: 0 0 0 2px #3b82f6;
	166	+	}
	167	+
	168	+	/* Text Input */
	169	+	.widget-button {
	170	+	display: flex;
	171	+	flex-direction: column;
	172	+	gap: 0.5rem;
	173	+	}
	174	+
	175	+	.widget-button label {
	176	+	font-weight: 500;
	177	+	color: #374151;
	178	+	}
	179	+
	180	+	.widget-button input[type="text"] {
	181	+	padding: 0.75rem;
	182	+	border: 1px solid #d1d5db;
	183	+	border-radius: 6px;
	184	+	font-size: 0.875rem;
	185	+	background-color: #ffffff;
	186	+	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	187	+	}
	188	+
	189	+	.widget-button input[type="text"]:focus {
	190	+	outline: none;
	191	+	border-color: #3b82f6;
	192	+	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	193	+	}
	194	+
	195	+	.widget-button input[type="text"]::placeholder {
	196	+	color: #9ca3af;
	197	+	}
	198	+
	199	+	/* Select and Select Multi */
	200	+	.selector,
	201	+	.selector-multi {
	202	+	display: flex;
	203	+	flex-direction: column;
	204	+	gap: 0.5rem;
	205	+	}
	206	+
	207	+	.selector label,
	208	+	.selector-multi-label {
	209	+	font-weight: 500;
	210	+	color: #374151;
	211	+	}
	212	+
	213	+	.selector select {
	214	+	padding: 0.75rem;
	215	+	border: 1px solid #d1d5db;
	216	+	border-radius: 6px;
	217	+	font-size: 0.875rem;
	218	+	background-color: #ffffff;
	219	+	cursor: pointer;
	220	+	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	221	+	}
	222	+
	223	+	.selector select:focus {
	224	+	outline: none;
	225	+	border-color: #3b82f6;
	226	+	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	227	+	}
	228	+
	229	+	.selector option {
	230	+	padding: 0.5rem;
	231	+	}
	232	+
	233	+	/* Checkbox-based Multi Select */
	234	+	.checkbox-group {
	235	+	display: flex;
	236	+	flex-direction: column;
	237	+	gap: 0.5rem;
	238	+	padding: 0.75rem;
	239	+	border: 1px solid #d1d5db;
	240	+	border-radius: 6px;
	241	+	background-color: #ffffff;
	242	+	max-height: 200px;
	243	+	overflow-y: auto;
	244	+	}
	245	+
	246	+	.checkbox-item {
	247	+	display: flex;
	248	+	align-items: center;
	249	+	gap: 0.5rem;
	250	+	cursor: pointer;
	251	+	padding: 0.25rem 0;
	252	+	font-weight: normal;
	253	+	}
	254	+
	255	+	.checkbox-item input[type="checkbox"] {
	256	+	margin: 0;
	257	+	cursor: pointer;
	258	+	}
	259	+
	260	+	.checkbox-item span {
	261	+	font-size: 0.875rem;
	262	+	color: #374151;
	263	+	}
	264	+
	265	+	.checkbox-item:hover {
	266	+	background-color: #f9fafb;
	267	+	border-radius: 4px;
	268	+	margin: -0.25rem 0;
	269	+	padding: 0.5rem 0.25rem;
	270	+	}
	271	+
	272	+	/* Slider */
	273	+	.widget-slider {
	274	+	display: flex;
	275	+	flex-direction: column;
	276	+	gap: 0.5rem;
	277	+	}
	278	+
	279	+	.widget-slider label {
	280	+	font-weight: 500;
	281	+	color: #374151;
	282	+	}
	283	+
	284	+	.slider-container {
	285	+	display: flex;
	286	+	flex-direction: column;
	287	+	gap: 0.25rem;
	288	+	}
	289	+
	290	+	.slider-values {
	291	+	display: flex;
	292	+	justify-content: space-between;
	293	+	align-items: center;
	294	+	font-size: 0.75rem;
	295	+	color: #6b7280;
	296	+	margin-bottom: 0.25rem;
	297	+	}
	298	+
	299	+	.current-value {
	300	+	font-weight: 600;
	301	+	color: #3b82f6;
	302	+	background: #eff6ff;
	303	+	padding: 0.25rem 0.5rem;
	304	+	border-radius: 4px;
	305	+	min-width: 2rem;
	306	+	text-align: center;
	307	+	}
	308	+
	309	+	.min-value, .max-value {
	310	+	font-weight: 500;
	311	+	}
	312	+
	313	+	.widget-slider input[type="range"] {
	314	+	width: 100%;
	315	+	height: 6px;
	316	+	border-radius: 3px;
	317	+	background: #e2e8f0;
	318	+	outline: none;
	319	+	cursor: pointer;
	320	+	}
	321	+
	322	+	.widget-slider input[type="range"]::-webkit-slider-thumb {
	323	+	appearance: none;
	324	+	width: 20px;
	325	+	height: 20px;
	326	+	border-radius: 50%;
	327	+	background: #3b82f6;
	328	+	cursor: pointer;
	329	+	transition: background-color 0.2s ease;
	330	+	}
	331	+
	332	+	.widget-slider input[type="range"]::-webkit-slider-thumb:hover {
	333	+	background: #2563eb;
	334	+	}
	335	+
	336	+	.widget-slider input[type="range"]::-moz-range-thumb {
	337	+	width: 20px;
	338	+	height: 20px;
	339	+	border-radius: 50%;
	340	+	background: #3b82f6;
	341	+	cursor: pointer;
	342	+	border: none;
	343	+	transition: background-color 0.2s ease;
	344	+	}
	345	+
	346	+	.widget-slider input[type="range"]::-moz-range-thumb:hover {
	347	+	background: #2563eb;
	348	+	}
	349	+
	350	+	/* Form submit button styling - hover and focus states */
	351	+	.widget-form > button[type="button"]:last-child:hover {
	352	+	background-color: #2563eb;
	353	+	}
	354	+
	355	+	.widget-form > button[type="button"]:last-child:focus {
	356	+	outline: none;
	357	+	box-shadow: 0 0 0 2px #3b82f6;
	358	+	}
	359	+
	360	+	/* Error styling for unknown widgets */
	361	+	.widget span[style*="color:red"] {
	362	+	color: #ef4444 !important;
	363	+	font-weight: 500;
	364	+	padding: 0.75rem;
	365	+	background-color: #fef2f2;
	366	+	border: 1px solid #fecaca;
	367	+	border-radius: 6px;
	368	+	display: inline-block;
	369	+	}
	370	+
	371	+	/* Responsive design */
	372	+	@media (max-width: 640px) {
	373	+	.widget-button-group div[role="group"] {
	374	+	flex-direction: column;
	375	+	}
	376	+
	377	+	.widget-button-group button {
	378	+	width: 100%;
	379	+	}
	380	+
	381	+	.widget-form {
	382	+	padding: 1rem;
	383	+	}
	384	+	}