create-intent-widget-v1/intent/src/iframeWidget/Erc20Creator.js

A tool to create intent widget

import React, { useState } from 'react';

import strk from '../assets/strk.png'
import audit from "../assets/auth.svg"
import { WidgetWrapper, SplitLine,Subtitle, InputWrapper, Input, Label, DecimalWrapper, Widget, SubmitButton, Footer, Title } from "intent_ui_widget"


const CreateERC20Token = () => {
  const [decimal, setDecimal] = useState(18);

  const increaseDecimal = () => setDecimal(decimal + 1);
  const decreaseDecimal = () => setDecimal(decimal - 1);

  return (
    <WidgetWrapper>
      <Title>Create ERC20 Token</Title>
      <SplitLine></SplitLine>
      <Subtitle>This tool is offered by zkgamestop team. Everyone can easily use this component to publish tokens with one click in <img style={{ width: '15px', marginRight: '2px', height: 'auto' }} src={strk} />Starknet.</Subtitle>

      <Label>Token Name   <img style={{ width: '15px', marginRight: '2px', height: 'auto' }} src={strk} /></Label>
      <InputWrapper>
        <Input type="text" placeholder="Name" />
      </InputWrapper>

      <Label>Token Symbol <img style={{ width: '15px', marginRight: '2px', height: 'auto' }} src={strk} /></Label>
      <InputWrapper>
        <Input type="text" placeholder="Symbol" />
      </InputWrapper>

      <Label>Amount</Label>
      <InputWrapper>
        <Input type="number" min={0} placeholder="Amount" />
      </InputWrapper>

      <Label>Decimal</Label>
      <DecimalWrapper>
        <Widget onClick={decreaseDecimal}>-</Widget>
        <Input type="text" value={decimal} readOnly style={{ textAlign: 'center' }} />
        <Widget onClick={increaseDecimal}>+</Widget>
      </DecimalWrapper>

      <Label>Server Fee</Label>
      <InputWrapper>
        <Input type="text" value="10 STRK" readOnly style={{ textAlign: 'center' }} />
      </InputWrapper>

      <SubmitButton>Create</SubmitButton>

      <Footer><img src={audit} style={{ width: '15px', marginRight: '2px', height: 'auto' }} />Audit by zkgamestop</Footer>
    </WidgetWrapper>
  );
};

export default CreateERC20Token;