Feature/token indexer flow

src/components/form/AddIndexerBlockchainNetworks/cmp.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import {
+  Icon,
+  TextInput,
+  Button,
+  Dropdown,
+  DropdownOption,
+} from '@aleph-front/aleph-core'
+import {
+  useAddIndexerBlockchainNetworks,
+  useIndexerBlockchainNetworkItem,
+} from '@/hooks/form/useAddIndexerBlockchainNetworks'
+import {
+  IndexerBlockchainNetworkItemProps,
+  AddIndexerBlockchainNetworksProps,
+} from './types'
+import NoisyContainer from '@/components/common/NoisyContainer'
+
+const IndexerBlockchainNetworkItem = React.memo(
+  (props: IndexerBlockchainNetworkItemProps) => {
+    const { idCtrl, blockchainCtrl, rpcUrlCtrl, networks, handleRemove } =
+      useIndexerBlockchainNetworkItem(props)
+
+    return (
+      <>
+        <div tw="mt-4">
+          <TextInput
+            {...idCtrl.field}
+            {...idCtrl.fieldState}
+            label="Id"
+            placeholder="ethereum-mainnet"
+          />
+        </div>
+        <div tw="mt-4">
+          <Dropdown
+            {...blockchainCtrl.field}
+            {...blockchainCtrl.fieldState}
+            label="Blockchain"
+            placeholder="ethereum"
+          >
+            {networks.map((value) => (
+              <DropdownOption key={value} value={value}>
+                {value}
+              </DropdownOption>
+            ))}
+          </Dropdown>
+        </div>
+
+        <div tw="mt-4">
+          <TextInput
+            {...rpcUrlCtrl.field}
+            {...rpcUrlCtrl.fieldState}
+            label="RPC node url"
+            placeholder="https://eth.mainnet.rpc/url"
+          />
+        </div>
+        {/* <div tw="mt-4">
+          <TextInput
+            {...abiUrlCtrl.field}
+            {...abiUrlCtrl.fieldState}
+            label="ABI url"
+            placeholder="https://eth.scan/path-to-abi-address-will-be-replaced/$ADDRESS"
+          />
+        </div> */}
+        <div tw="mt-4 pt-6 text-right">
+          <Button
+            color="main2"
+            variant="secondary"
+            kind="neon"
+            size="regular"
+            type="button"
+            onClick={handleRemove}
+          >
+            <Icon name="trash" tw="mr-4" /> Remove
+          </Button>
+        </div>
+      </>
+    )
+  },
+)
+IndexerBlockchainNetworkItem.displayName = 'IndexerBlockchainNetworkItem'
+
+export const AddIndexerBlockchainNetworks = React.memo(
+  (props: AddIndexerBlockchainNetworksProps) => {
+    const { name, control, fields, handleAdd, handleRemove } =
+      useAddIndexerBlockchainNetworks(props)
+
+    return (
+      <>
+        {fields.length > 0 && (
+          <NoisyContainer>
+            <div tw="flex flex-col gap-x-6 gap-y-4">
+              {fields.map((field, index) => (
+                <IndexerBlockchainNetworkItem
+                  key={field.id}
+                  {...{
+                    name,
+                    index,
+                    control,
+                    defaultValue: field,
+                    onRemove: handleRemove,
+                  }}
+                />
+              ))}
+            </div>
+          </NoisyContainer>
+        )}
+        <div tw="mt-6 mx-6">
+          <Button
+            type="button"
+            onClick={handleAdd}
+            color="main0"
+            variant="secondary"
+            kind="neon"
+            size="regular"
+          >
+            Add network
+          </Button>
+        </div>
+      </>
+    )
+  },
+)
+AddIndexerBlockchainNetworks.displayName = 'AddIndexerBlockchainNetworks'
+
+export default AddIndexerBlockchainNetworks

src/components/form/AddIndexerBlockchainNetworks/index.ts

@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export type { AddIndexerBlockchainNetworksProps } from './types'

src/components/form/AddIndexerBlockchainNetworks/types.ts

@@ -0,0 +1,13 @@
+import { Control } from 'react-hook-form'
+
+export type IndexerBlockchainNetworkItemProps = {
+  name?: string
+  index: number
+  control: Control
+  onRemove: (index?: number) => void
+}
+
+export type AddIndexerBlockchainNetworksProps = {
+  name: string
+  control: Control
+}

src/components/form/AddIndexerTokenAccounts/cmp.tsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import {
+  Icon,
+  TextInput,
+  Button,
+  Dropdown,
+  DropdownOption,
+} from '@aleph-front/aleph-core'
+import {
+  useAddIndexerTokenAccounts,
+  useIndexerTokenAccountItem,
+} from '@/hooks/form/useAddIndexerTokenAccounts'
+import {
+  IndexerTokenAccountItemProps,
+  AddIndexerTokenAccountsProps,
+} from './types'
+import NoisyContainer from '@/components/common/NoisyContainer'
+
+const IndexerTokenAccountItem = React.memo(
+  (props: IndexerTokenAccountItemProps) => {
+    const {
+      networkCtrl,
+      contractCtrl,
+      deployerCtrl,
+      supplyCtrl,
+      decimalsCtrl,
+      decimalsValue,
+      networks,
+      supplyPreview,
+      decimalsHandleChange,
+      handleRemove,
+    } = useIndexerTokenAccountItem(props)
+
+    return (
+      <>
+        <div tw="mt-4">
+          <Dropdown
+            {...networkCtrl.field}
+            {...networkCtrl.fieldState}
+            label="Blockchain"
+            placeholder="ethereum"
+          >
+            {networks.map(({ id }) => (
+              <DropdownOption key={id} value={id}>
+                {id}
+              </DropdownOption>
+            ))}
+          </Dropdown>
+        </div>
+        <div tw="mt-4">
+          <TextInput
+            {...contractCtrl.field}
+            {...contractCtrl.fieldState}
+            label="Contract address"
+            placeholder="0x27702a26126e0B3702af63Ee09aC4d1A084EF628"
+          />
+        </div>
+        <div tw="mt-4">
+          <TextInput
+            {...deployerCtrl.field}
+            {...deployerCtrl.fieldState}
+            label="Deployer address"
+            placeholder="0xb6e45ADfa0C7D70886bBFC990790d64620F1BAE8"
+          />
+        </div>
+        <div tw="mt-4">
+          <TextInput
+            {...supplyCtrl.field}
+            {...supplyCtrl.fieldState}
+            type="number"
+            label="Initial token supply"
+            placeholder="500000000000000000000000000"
+          />
+        </div>
+        <div tw="mt-4">
+          <TextInput
+            {...decimalsCtrl.field}
+            {...decimalsCtrl.fieldState}
+            value={decimalsValue}
+            onChange={decimalsHandleChange}
+            type="number"
+            label="Token decimals"
+            placeholder="18"
+          />
+        </div>
+        {supplyPreview && (
+          <div tw="mt-4 text-ellipsis overflow-hidden opacity-50">
+            Supply: {supplyPreview}
+          </div>
+        )}
+        <div tw="mt-4 pt-6 text-right">
+          <Button
+            color="main2"
+            variant="secondary"
+            kind="neon"
+            size="regular"
+            type="button"
+            onClick={handleRemove}
+          >
+            <Icon name="trash" tw="mr-4" /> Remove
+          </Button>
+        </div>
+      </>
+    )
+  },
+)
+IndexerTokenAccountItem.displayName = 'IndexerTokenAccountItem'
+
+export const AddIndexerTokenAccounts = React.memo(
+  (props: AddIndexerTokenAccountsProps) => {
+    const { name, control, fields, networks, handleAdd, handleRemove } =
+      useAddIndexerTokenAccounts(props)
+
+    return (
+      <>
+        {fields.length > 0 && (
+          <NoisyContainer>
+            <div tw="flex flex-col gap-x-6 gap-y-4">
+              {fields.map((field, index) => (
+                <IndexerTokenAccountItem
+                  key={field.id}
+                  {...{
+                    name,
+                    index,
+                    control,
+                    defaultValue: field,
+                    networks,
+                    onRemove: handleRemove,
+                  }}
+                />
+              ))}
+            </div>
+          </NoisyContainer>
+        )}
+        <div tw="mt-6 mx-6">
+          <Button
+            type="button"
+            onClick={handleAdd}
+            color="main0"
+            variant="secondary"
+            kind="neon"
+            size="regular"
+          >
+            Add network
+          </Button>
+        </div>
+      </>
+    )
+  },
+)
+AddIndexerTokenAccounts.displayName = 'AddIndexerTokenAccounts'
+
+export default AddIndexerTokenAccounts

src/components/form/AddIndexerTokenAccounts/index.ts

@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export type { AddIndexerTokenAccountsProps } from './types'

src/components/form/AddIndexerTokenAccounts/types.ts

@@ -0,0 +1,16 @@
+import { IndexerBlockchainNetworkField } from '@/hooks/form/useAddIndexerBlockchainNetworks'
+import { Control } from 'react-hook-form'
+
+export type IndexerTokenAccountItemProps = {
+  name?: string
+  index: number
+  control: Control
+  networks?: IndexerBlockchainNetworkField[]
+  onRemove: (index?: number) => void
+}
+
+export type AddIndexerTokenAccountsProps = {
+  name: string
+  control: Control
+  networks: IndexerBlockchainNetworkField[]
+}

src/components/form/AddNameAndTags/types.ts

@@ -2,7 +2,7 @@ import { EntityType } from '@/helpers/constants'
 import { Control } from 'react-hook-form'
 
 export type AddNameAndTagsProps = {
-  entityType: EntityType.Instance | EntityType.Program
+  entityType: EntityType.Instance | EntityType.Program | EntityType.Indexer
   name?: string
   control: Control
 }

src/components/pages/HomePage/cmp.tsx

@@ -132,18 +132,29 @@ export default function HomePage() {
                 <strong>decentralized indexers</strong> on{' '}
                 <strong>Aleph.im&apos;s infrastructure</strong>.
               </p>
-              <Button
-                forwardedAs="a"
-                href="https://bit.ly/3GAAjii"
-                target="_blank"
-                kind="neon"
-                variant="primary"
-                size="big"
-                color="main0"
-                tw="!my-0"
-              >
-                Get in touch with us
-              </Button>
+              <div tw="flex gap-6 flex-wrap items-center">
+                <Button
+                  kind="neon"
+                  variant="primary"
+                  size="big"
+                  color="main2"
+                  onClick={navigate.indexer}
+                >
+                  Create Indexer
+                </Button>
+                <Button
+                  forwardedAs="a"
+                  href="https://bit.ly/3GAAjii"
+                  target="_blank"
+                  kind="neon"
+                  variant="primary"
+                  size="big"
+                  color="main0"
+                  tw="!my-0"
+                >
+                  Get in touch with us
+                </Button>
+              </div>
             </Col>
           </Row>
         </Container>