Add contract interface dropdown to token pool creation

server/src/controllers/tokens.ts

@@ -74,6 +74,9 @@ export class TokensController {
       name: body.name,
       symbol: body.symbol,
       type: body.type,
+      interface: {
+        id: body.contractInterface,
+      },
       config: {
         address: body.address,
         blockNumber: body.blockNumber,
@@ -285,7 +288,10 @@ export class TokensTemplateController {
     return formatTemplate(`
       const pool = await firefly.createTokenPool({
         name: <%= ${q('name')} %>,<% if (symbol) { %>
-        <% print('symbol: ' + ${q('symbol')} + ',') } %>
+        <% print('symbol: ' + ${q('symbol')} + ',') } %><% if (contractInterface) { %>
+        interface: {
+          id: <%= ${q('contractInterface')} %>
+        },<% } %>
         type: <%= ${q('type')} %>,
         config: {<% if (address) { %>
           <% print('address: ' + ${q('address')} + ',') } %>

server/src/interfaces.ts

@@ -146,6 +146,10 @@ export class TokenPoolInput {
   @IsOptional()
   config?: TokenConfig;
 
+  @IsString()
+  @IsOptional()
+  contractInterface?: string;
+
   @IsString()
   @IsOptional()
   address?: string;

server/test/tokens.template.test.ts

@@ -15,6 +15,7 @@ describe('Templates: Tokens', () => {
             name: 'pool1',
             symbol: 'P1',
             type: 'fungible',
+            contractInterface: 'abcd',
             address: undefined,
             blockNumber: '0',
           }),
@@ -23,6 +24,9 @@ describe('Templates: Tokens', () => {
             const pool = await firefly.createTokenPool({
               name: 'pool1',
               symbol: 'P1',
+              interface: {
+                id: 'abcd'
+              },
               type: 'fungible',
               config: {
                 blockNumber: '0',

server/test/tokens.test.ts

@@ -58,6 +58,7 @@ describe('Tokens', () => {
       symbol: 'P1',
       type: 'fungible',
       config: {},
+      interface: {},
     });
   });
 

ui/src/components/Forms/Tokens/PoolForm.tsx

@@ -1,5 +1,6 @@
 import {
   FormControl,
+  FormHelperText,
   Grid,
   InputLabel,
   MenuItem,
@@ -8,10 +9,14 @@ import {
 } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { SDK_PATHS } from '../../../constants/SDK_PATHS';
 import { TUTORIAL_FORMS } from '../../../constants/TutorialSections';
 import { ApplicationContext } from '../../../contexts/ApplicationContext';
 import { FormContext } from '../../../contexts/FormContext';
+import { SnackbarContext } from '../../../contexts/SnackbarContext';
+import { IContractInterface } from '../../../interfaces/api';
 import { DEFAULT_SPACING } from '../../../theme';
+import { fetchCatcher } from '../../../utils/fetches';
 
 export const PoolForm: React.FC = () => {
   const { t } = useTranslation();
@@ -23,6 +28,19 @@ export const PoolForm: React.FC = () => {
   const [address, setAddress] = useState<string | undefined>();
   const [blockNumber, setBlockNumber] = useState('0');
   const [type, setType] = useState<'fungible' | 'nonfungible'>('fungible');
+  const { reportFetchError } = useContext(SnackbarContext);
+  const [contractInterfaces, setContractInterfaces] = useState<
+    IContractInterface[]
+  >([]);
+  const [selectedContractInterface, setSelectedContractInterface] =
+    useState('automatic');
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
 
   useEffect(() => {
     if (formID !== TUTORIAL_FORMS.POOL) {
@@ -36,10 +54,35 @@ export const PoolForm: React.FC = () => {
       name,
       symbol: symbol === '' ? null : symbol,
       type,
+      contractInterface:
+        selectedContractInterface === 'automatic'
+          ? null
+          : selectedContractInterface,
       address,
       blockNumber,
     });
-  }, [name, symbol, type, address, formID, blockNumber]);
+  }, [
+    name,
+    symbol,
+    type,
+    address,
+    formID,
+    blockNumber,
+    selectedContractInterface,
+  ]);
+
+  useEffect(() => {
+    isMounted &&
+      fetchCatcher(`${SDK_PATHS.contractsInterface}`)
+        .then((apiRes: IContractInterface[]) => {
+          if (isMounted) {
+            setContractInterfaces(apiRes);
+          }
+        })
+        .catch((err) => {
+          reportFetchError(err);
+        });
+  }, [formID, isMounted]);
 
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value.indexOf(' ') < 0) {
@@ -103,6 +146,30 @@ export const PoolForm: React.FC = () => {
             </FormControl>
           </Grid>
         </Grid>
+        <Grid container item justifyContent="space-between" spacing={1}>
+          <Grid item xs={12}>
+            <FormControl fullWidth>
+              <InputLabel>{t('contractInterface')}</InputLabel>
+              <Select
+                value={selectedContractInterface}
+                label={t('contractInterface')}
+                onChange={(e) => setSelectedContractInterface(e.target.value)}
+              >
+                <MenuItem value={'automatic'}>{t('Automatic')}</MenuItem>
+                {contractInterfaces.map((contractInterface, i) => {
+                  return (
+                    <MenuItem value={contractInterface.id} key={i}>
+                      {contractInterface.name} - {contractInterface.version}
+                    </MenuItem>
+                  );
+                })}
+              </Select>
+              <FormHelperText>
+                {t('tokenPoolContractInterfaceHelperText')}
+              </FormHelperText>
+            </FormControl>
+          </Grid>
+        </Grid>
         <Grid container item justifyContent="space-between" spacing={1}>
           <Grid item xs={12}>
             <TextField

ui/src/translations/en.json

@@ -174,6 +174,7 @@
   "tokenIndex": "Token Index",
   "tokenIndexes": "Token Indexes",
   "tokenPool": "Token Pool",
+  "tokenPoolContractInterfaceHelperText": "The FireFly Interface for a custom token contract. Use \"Automatic\" for built-in contracts.",
   "tokenPoolAddressHelperText": "The address of an existing token contract, if supported by the token connector.",
   "tokenPoolConfirmed": "Token Pool Confirmed",
   "tokenPoolFailed": "Token Pool Failed",
@@ -200,4 +201,4 @@
   "uploadFile": "Upload File",
   "version": "Version",
   "waitingForTxEventsToFinish": "Waiting for events to finish"
-}
+}