Icon LinkABIs

/* eslint-disable no-console */
import { cssObj } from '@fuel-ui/css';
import { Button, Box, Input } from '@fuel-ui/react';
import type { JsonFlatAbi } from 'fuels';
import { useState } from 'react';
 
import { ExampleBox } from '../src/components/ExampleBox';
import { useFuel } from '../src/hooks/useFuel';
import { useIsConnected } from '../src/hooks/useIsConnected';
import { useLoading } from '../src/hooks/useLoading';
 
import { SWAY_SWAP_CONTRACT_ID } from './data/swayswap/contractId';
 
export function Abi() {
  const [fuel, notDetected] = useFuel();
  const [isConnected] = useIsConnected();
  const [contractId, setContractId] = useState<string>(SWAY_SWAP_CONTRACT_ID);
  const [abi, setAbi] = useState<JsonFlatAbi>();
  const [handleGetAbi, isLoadingAbi, errorGetAbi] = useLoading(
    async (contractId: string | undefined) => {
      if (!contractId) return;
      if (!isConnected) await fuel.connect();
      console.log('Request the current abi of contractId: ', contractId);
      /* example:start */
      const abiInfo = await fuel.getAbi(contractId);
      console.log('Abi ', abiInfo);
      /* example:end */
      setAbi(abiInfo);
    }
  );
 
  const errorMessage = errorGetAbi || notDetected;
 
  return (
    <ExampleBox error={errorMessage}>
      <Box.Stack css={styles.root}>
        <Input isDisabled={!isConnected} css={styles.input}>
          <Input.Field
            defaultValue={contractId}
            onBlur={(e) => setContractId(e.target.value)}
            placeholder="Type your contractId (0x...)"
          />
        </Input>
        <Button
          onPress={() => handleGetAbi(contractId)}
          isLoading={isLoadingAbi}
          isDisabled={isLoadingAbi || !fuel}
        >
          Get ABI
        </Button>
        {abi && (
          <Input isDisabled={!isConnected} css={styles.inputTextArea}>
            <Input.Field
              as="textarea"
              value={JSON.stringify(abi, null, 2)}
              placeholder="Check ABI response"
            />
          </Input>
        )}
      </Box.Stack>
    </ExampleBox>
  );
}
 
const styles = {
  root: cssObj({
    gap: '$2',
    display: 'inline-flex',
    alignItems: 'flex-start',
 
    '.fuel_tag': {
      justifyContent: 'flex-start',
 
      '& > p': {
        fontSize: '$xs',
      },
    },
  }),
  input: cssObj({
    width: '100%',
  }),
  inputTextArea: cssObj({
    width: '100%',
    height: 200,
 
    textarea: {
      width: '100%',
      color: '$whiteA11',
      padding: '$2',
    },
  }),
};

/* eslint-disable no-console */
import { cssObj } from '@fuel-ui/css';
import { Input, Box, Button, Link, Text, Tag } from '@fuel-ui/react';
import { useState } from 'react';
 
import SWAY_SWAP_ABI from './data/swayswap/abi.json';
import { SWAY_SWAP_CONTRACT_ID } from './data/swayswap/contractId';
import { docStyles } from './styles';
 
import type { AbiMap } from '~/../types/src';
import { ExampleBox } from '~/src/components/ExampleBox';
import { useFuel } from '~/src/hooks/useFuel';
import { useIsConnected } from '~/src/hooks/useIsConnected';
import { useLoading } from '~/src/hooks/useLoading';
 
export function AddAbi() {
  const [fuel, notDetected] = useFuel();
  const [isConnected] = useIsConnected();
  const [abiError, setAbiError] = useState(false);
  const [abiSuccess, setAbiSuccess] = useState(false);
  const [contractId, setContractId] = useState<string>(SWAY_SWAP_CONTRACT_ID);
  const [abiString, setAbiString] = useState<string>(
    JSON.stringify(SWAY_SWAP_ABI, null, 2)
  );
 
  const [handleAddAbi, isAddingAbi, errorAddingAbi] = useLoading(
    async (contractId?: string, abiString?: string) => {
      if (!abiString || !contractId) return;
 
      try {
        const abi = JSON.parse(abiString);
        /* example:start */
        const abiMap: AbiMap = {
          [contractId]: abi,
        };
        await fuel.addAbi(abiMap);
        /* example:end */
        setAbiError(false);
        setAbiSuccess(true);
      } catch (e) {
        console.error(e);
        setAbiError(true);
      }
    }
  );
 
  const errorMessage = notDetected || errorAddingAbi;
 
  function handleChangeAbi(value: string) {
    try {
      const abi = JSON.parse(value);
 
      setAbiError(false);
      setAbiString(JSON.stringify(abi, null, 2));
    } catch (e) {
      setAbiString(value);
      console.error(e);
    }
  }
 
  return (
    <ExampleBox error={errorMessage}>
      <Box.Stack gap="$4">
        <Input isDisabled={!isConnected} css={styles.input}>
          <Input.Field
            defaultValue={contractId}
            onBlur={(e) => setContractId(e.target.value)}
            placeholder="Type your contractId (0x...)"
          />
        </Input>
        <Input isDisabled={!isConnected} css={styles.inputTextArea}>
          <Input.Field
            as="textarea"
            value={abiString}
            onChange={(e) => handleChangeAbi(e.target.value)}
            placeholder="Paste your ABI"
          />
        </Input>
        <Box.Stack gap="$4">
          {abiError && (
            <Box>
              <Tag
                size="xs"
                intent="error"
                variant="ghost"
                css={docStyles.feedbackTag}
              >
                Invalid ABI or contractId is already added
              </Tag>
            </Box>
          )}
          <Box.Flex>
            <Text>
              * Input&apos;s initial contractId and ABI are from &nbsp;
            </Text>
            <Link href="https://fuellabs.github.io/swayswap" isExternal>
              SwaySwap
            </Link>
          </Box.Flex>
          <Button
            onPress={() => handleAddAbi(contractId, abiString)}
            isLoading={isAddingAbi}
            isDisabled={isAddingAbi || !isConnected}
          >
            Add ABI
          </Button>
          {abiSuccess && (
            <Box>
              <Tag
                size="xs"
                intent="success"
                variant="ghost"
                css={docStyles.feedbackTag}
              >
                ABI added successfully
              </Tag>
            </Box>
          )}
        </Box.Stack>
      </Box.Stack>
    </ExampleBox>
  );
}
 
const styles = {
  input: cssObj({
    width: '100%',
  }),
  inputTextArea: cssObj({
    width: '100%',
    height: 200,
 
    textarea: {
      width: '100%',
      color: '$whiteA11',
      padding: '$2',
    },
  }),
};