stargaze-studio/pages/tokenfactory/tokenfactory.tsx

/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable tailwindcss/classnames-order */
/* eslint-disable react/button-has-type */

import type { EncodeObject } from '@cosmjs/proto-signing'
import { Registry } from '@cosmjs/proto-signing'
import { GasPrice, SigningStargateClient } from '@cosmjs/stargate'
import { Conditional } from 'components/Conditional'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { DenomUnits } from 'components/forms/DenomUnits'
import { useDenomUnitsState } from 'components/forms/DenomUnits.hooks'
import { AddressInput, NumberInput, TextInput } from 'components/forms/FormInput'
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import { Field, Type } from 'protobufjs'
import { useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import { useWallet } from 'utils/wallet'

export type MessageType = 'MsgCreateDenom' | 'MsgMint' | 'MsgSetDenomMetadata' | 'MsgSend' | 'MsgChangeAdmin'

const MsgSetDenomMetadata = new Type('MsgSetDenomMetadata')
  .add(new Field('sender', 1, 'string', 'required'))
  .add(new Field('metadata', 2, 'Metadata', 'required'))

const MetadataType = new Type('Metadata')
  .add(new Field('description', 1, 'string'))
  .add(new Field('denomUnits', 2, 'DenomUnit', 'repeated'))
  .add(new Field('base', 3, 'string'))
  .add(new Field('display', 4, 'string'))
  .add(new Field('name', 5, 'string'))
  .add(new Field('symbol', 6, 'string'))
// .add(new Field("uri", 7, "string"))
// .add(new Field("uriHash", 8, "string"))

const DenomUnitType = new Type('DenomUnit')
  .add(new Field('denom', 1, 'string'))
  .add(new Field('exponent', 2, 'int32'))
  .add(new Field('aliases', 3, 'string', 'repeated'))

MetadataType.add(DenomUnitType)
MsgSetDenomMetadata.add(MetadataType)

const MsgCreateDenom = new Type('MsgCreateDenom')
  .add(new Field('sender', 1, 'string', 'required'))
  .add(new Field('subdenom', 2, 'string', 'required'))

const MsgMint = new Type('MsgMint')
  .add(new Field('sender', 1, 'string', 'required'))
  .add(new Field('amount', 2, 'Coin', 'required'))
  .add(new Field('mintToAddress', 3, 'string', 'required'))

const CoinType = new Type('Coin').add(new Field('denom', 1, 'string')).add(new Field('amount', 2, 'string'))
MsgMint.add(CoinType)

const MsgSend = new Type('MsgSend')
  .add(new Field('fromAddress', 1, 'string'))
  .add(new Field('toAddress', 2, 'string'))
  .add(new Field('amount', 3, 'Coin', 'repeated'))

MsgSend.add(CoinType)

const MsgChangeAdmin = new Type('MsgChangeAdmin')
  .add(new Field('sender', 1, 'string', 'required'))
  .add(new Field('denom', 2, 'string', 'required'))
  .add(new Field('newAdmin', 3, 'string', 'required'))

const typeUrlMsgSetDenomMetadata = '/osmosis.tokenfactory.v1beta1.MsgSetDenomMetadata'
const typeUrlMsgCreateDenom = '/osmosis.tokenfactory.v1beta1.MsgCreateDenom'
const typeUrlMsgMint = '/osmosis.tokenfactory.v1beta1.MsgMint'
const typeUrlMsgSend = '/cosmos.bank.v1beta1.MsgSend'
const typeUrlMsgChangeAdmin = '/osmosis.tokenfactory.v1beta1.MsgChangeAdmin'

const typeEntries: [string, Type][] = [
  [typeUrlMsgSetDenomMetadata, MsgSetDenomMetadata],
  [typeUrlMsgCreateDenom, MsgCreateDenom],
  [typeUrlMsgMint, MsgMint],
  [typeUrlMsgSend, MsgSend],
  [typeUrlMsgChangeAdmin, MsgChangeAdmin],
]

export const registry = new Registry(typeEntries)

const Tokenfactory: NextPage = () => {
  const wallet = useWallet()

  const [messageType, setMessageType] = useState<MessageType>('MsgCreateDenom')

  const denomState = useInputState({
    id: 'denom',
    name: 'denom',
    title: 'Denom',
    placeholder: `factory/${wallet.isWalletConnected && wallet.address ? wallet.address : 'stars1...'}/utoken`,
    defaultValue: `factory/${wallet.isWalletConnected && wallet.address ? wallet.address : 'stars1...'}/utoken`,
    subtitle: 'The full denom for the token',
  })

  const subdenomState = useInputState({
    id: 'subdenom',
    name: 'subdenom',
    title: 'Subdenom',
    placeholder: 'utoken',
    subtitle: 'The subdenom can be up to 44 alphanumeric characters long',
  })

  const amountState = useNumberInputState({
    id: 'amount',
    name: 'amount',
    title: 'Amount',
    placeholder: '1000000',
    subtitle: `The amount of tokens to ${messageType === 'MsgMint' ? 'mint' : 'send'}`,
  })

  const mintToAddressState = useInputState({
    id: 'mintToAddress',
    name: 'mintToAddress',
    title: 'Mint To Address',
    //placeholder: `${wallet.isWalletConnected && wallet.address ? wallet.address : 'stars1...'}`,
    placeholder: 'The tokens can only be minted to the creator address currently.',
    subtitle: 'The address to mint tokens to',
  })

  const recipientAddressState = useInputState({
    id: 'recipientAddress',
    name: 'recipientAddress',
    title: 'Recipient Address',
    placeholder: 'stars1...',
    subtitle: 'The address to send tokens to',
  })

  const newAdminAddressState = useInputState({
    id: 'newAdminAddress',
    name: 'newAdminAddress',
    title: 'New Admin Address',
    placeholder: 'stars1...',
    subtitle: 'The address to pass admin rights to',
  })

  // Metadata fields
  const descriptionState = useInputState({
    id: 'description',
    name: 'description',
    title: 'Description',
    placeholder: 'Token description',
    subtitle: 'The description of the token',
  })

  const baseState = useInputState({
    id: 'base',
    name: 'base',
    title: 'Base',
    placeholder: `factory/${wallet.isWalletConnected && wallet.address ? wallet.address : 'stars1...'}/utoken`,
    defaultValue: `factory/${wallet.isWalletConnected && wallet.address ? wallet.address : 'stars1...'}/utoken`,
    subtitle: 'The base denom for the token',
  })

  const displayState = useInputState({
    id: 'display',
    name: 'display',
    title: 'Display',
    placeholder: 'token',
    subtitle: 'The display name for the token',
  })

  const nameState = useInputState({
    id: 'name',
    name: 'name',
    title: 'Name',
    placeholder: 'Token',
    subtitle: 'The name of the token',
  })

  const symbolState = useInputState({
    id: 'symbol',
    name: 'symbol',
    title: 'Symbol',
    placeholder: 'TOKEN',
    subtitle: 'The symbol of the token',
  })

  const denomUnitsState = useDenomUnitsState()

  useEffect(() => {
    denomUnitsState.reset()
    denomUnitsState.add({
      denom: '',
      exponent: 0,
      aliases: '',
    })
  }, [])

  const getButtonName = () => {
    if (messageType === 'MsgCreateDenom') {
      return 'Create Denom'
    } else if (messageType === 'MsgMint') {
      return 'Mint Tokens'
    } else if (messageType === 'MsgSetDenomMetadata') {
      return 'Set Denom Metadata'
    } else if (messageType === 'MsgSend') {
      return 'Send Tokens'
    } else if (messageType === 'MsgChangeAdmin') {
      return 'Change Admin'
    }
  }

  const handleSendMessage = async () => {
    try {
      if (!wallet.isWalletConnected) return toast.error('Please connect your wallet.')

      const offlineSigner = wallet.getOfflineSignerDirect()
      const stargateClient = await SigningStargateClient.connectWithSigner(
        'https://rpc.elgafar-1.stargaze-apis.com/',
        offlineSigner,
        {
          gasPrice: GasPrice.fromString('0.025ustars'),
          registry,
        },
      )

      const msgCreateDenom = {
        typeUrl: typeUrlMsgCreateDenom,
        value: {
          sender: wallet.address,
          subdenom: subdenomState.value,
        },
      }

      const msgMint = {
        typeUrl: typeUrlMsgMint,
        value: {
          sender: wallet.address,
          amount: {
            denom: denomState.value,
            amount: amountState.value.toString(),
          },
          mintToAddress: mintToAddressState.value,
        },
      }

      const msgChangeAdmin = {
        typeUrl: typeUrlMsgChangeAdmin,
        value: {
          sender: wallet.address,
          denom: denomState.value,
          newAdmin: newAdminAddressState.value,
        },
      }

      const msgSetDenomMetadata = {
        typeUrl: typeUrlMsgSetDenomMetadata,
        value: {
          sender: wallet.address,
          metadata: {
            description: descriptionState.value,
            denomUnits: denomUnitsState.entries.map((entry) => ({
              denom: entry[1].denom,
              exponent: entry[1].exponent,
              aliases: entry[1].aliases.length > 0 ? entry[1].aliases.split(',') : [],
            })),
            base: baseState.value,
            display: displayState.value,
            name: nameState.value,
            symbol: symbolState.value,
          },
        },
      }

      const msgSend = {
        typeUrl: typeUrlMsgSend,
        value: {
          fromAddress: wallet.address,
          toAddress: recipientAddressState.value,
          amount: [
            {
              denom: denomState.value,
              amount: amountState.value.toString(),
            },
          ],
        },
      }

      const messageToSign = () => {
        if (messageType === 'MsgCreateDenom') {
          return msgCreateDenom
        } else if (messageType === 'MsgMint') {
          return msgMint
        } else if (messageType === 'MsgSetDenomMetadata') {
          return msgSetDenomMetadata
        } else if (messageType === 'MsgSend') {
          return msgSend
        } else if (messageType === 'MsgChangeAdmin') {
          return msgChangeAdmin
        }
      }

      const response = await stargateClient.signAndBroadcast(
        wallet.address as string,
        [messageToSign() as EncodeObject],
        'auto',
      )
      console.log('response: ', response)

      toast.success(`${messageType} success.`, { style: { maxWidth: 'none' } })
    } catch (error: any) {
      toast.error(error.message, { style: { maxWidth: 'none' } })
      console.error('Error: ', error)
    }
  }

  return (
    <section className="px-4 pt-4 pb-16 mx-auto space-y-8 ml-8 w-full">
      <NextSeo title="TokenFactory" />
      <ContractPageHeader
        description="Here you can create, mint and manage tokens."
        link={links.Documentation}
        title="Token Factory"
      />

      <div className="flex flex-col w-1/4">
        <span className="text-xl font-bold text-white">Message Type</span>
        <select
          className="mt-2 pt-2 pb-2 px-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
          onChange={(e) => setMessageType(e.target.value as MessageType)}
          value={messageType}
        >
          <option className="bg-black" value="MsgCreateDenom">
            Create Denom
          </option>
          <option className="bg-black" value="MsgMint">
            Mint
          </option>
          <option className="bg-black" value="MsgSend">
            Send Tokens
          </option>
          <option className="bg-black" value="MsgSetDenomMetadata">
            Set Denom Metadata
          </option>
          <option className="bg-black" value="MsgChangeAdmin">
            Change Admin
          </option>
        </select>
      </div>
      <Conditional test={messageType === 'MsgCreateDenom'}>
        <TextInput className="w-1/2" {...subdenomState} />
      </Conditional>
      <Conditional test={messageType === 'MsgMint'}>
        <TextInput className="w-3/5" {...denomState} />
        <NumberInput className="w-1/4" {...amountState} />
        <AddressInput className="w-3/5" disabled {...mintToAddressState} />
      </Conditional>
      <Conditional test={messageType === 'MsgSend'}>
        <TextInput className="w-3/5" {...denomState} />
        <NumberInput className="w-1/4" {...amountState} />
        <AddressInput className="w-1/2" {...recipientAddressState} />
      </Conditional>
      <Conditional test={messageType === 'MsgSetDenomMetadata'}>
        <TextInput className="w-1/2" {...descriptionState} />
        <TextInput className="w-1/2" {...baseState} />
        <TextInput className="w-1/2" {...displayState} />
        <TextInput className="w-1/2" {...nameState} />
        <TextInput className="w-1/2" {...symbolState} />
        <DenomUnits
          attributes={denomUnitsState.entries}
          onAdd={denomUnitsState.add}
          onChange={denomUnitsState.update}
          onRemove={denomUnitsState.remove}
          subtitle="Enter the denom units for the token"
          title="Denom Units"
        />
      </Conditional>
      <Conditional test={messageType === 'MsgChangeAdmin'}>
        <TextInput className="w-1/2" {...denomState} />
        <AddressInput className="w-1/2" {...newAdminAddressState} />
      </Conditional>
      <button
        className="px-4 py-2 font-bold text-white bg-stargaze rounded-md"
        onClick={() => {
          void handleSendMessage()
        }}
      >
        {' '}
        {getButtonName()}
      </button>
    </section>
  )
}

export default withMetadata(Tokenfactory, { center: false })