Merge pull request #15 from decentraland/feat/improve-tp-site

feat: Improve third party site

package.json

@@ -16,7 +16,7 @@
     "npm-force-resolutions": "0.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.27.0",
+    "react-hook-form": "^7.52.0",
     "react-redux": "^7.2.9",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",

src/components/ContractsField/ContractsField.module.css

@@ -0,0 +1,6 @@
+.contractsField {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 30px;
+}

src/components/ContractsField/ContractsField.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { Button, DropdownProps, Field, InputOnChangeData, SelectField } from 'decentraland-ui'
+import { Props } from './ContractsField.types'
+import styles from './ContractsField.module.css'
+import { ContractNetwork, LinkedContract, TEST_NETWORKS } from '../../modules/thirdParty/types'
+import { isAddress } from '../../modules/thirdParty/utils'
+import { isDevelopment } from '../../lib/environment'
+
+export const ContractsField = (props: Props) => {
+  const { onChange, disabled } = props
+  const [address, setAddress] = useState<string>()
+  const [network, setNetwork] = useState(ContractNetwork.ETHEREUM_MAINNET)
+  const [contractError, setContractError] = useState<string>()
+
+  const networkOptions = useMemo(
+    () =>
+      Object.values(ContractNetwork)
+        .filter(network => isDevelopment || !TEST_NETWORKS.includes(network))
+        .map(value => ({ value, text: t(`contract_network.${value}`) })),
+    []
+  )
+
+  const handleAdd = useCallback(() => {
+    console.log('Adding contract', address, network)
+    onChange({ address, network } as LinkedContract)
+    console.log('Contract added')
+    setAddress('')
+    setNetwork(ContractNetwork.ETHEREUM_MAINNET)
+  }, [onChange, address, network])
+
+  const handleChangeNetwork = useCallback(
+    (_e: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => {
+      setNetwork(data.value as ContractNetwork)
+    },
+    [setNetwork]
+  )
+
+  const handleChangeContract = useCallback(
+    (_e: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+      setContractError(undefined)
+      setAddress(data.value)
+      if (!isAddress(data.value)) {
+        setContractError(t('linked_contracts.required_address'))
+      }
+    },
+    [setAddress]
+  )
+
+  return (
+    <div className={styles.contractsField}>
+      <SelectField options={networkOptions} disabled={disabled} value={network} onChange={handleChangeNetwork} />
+      <Field value={address} disabled={disabled} onChange={handleChangeContract} maxLength={42} type="address" />
+      <Button disabled={!!contractError || !address || disabled} onClick={handleAdd}>
+        {t('linked_contracts.add_contract')}
+      </Button>
+    </div>
+  )
+}

src/components/ContractsField/ContractsField.types.ts

@@ -0,0 +1,6 @@
+import { LinkedContract } from '../../modules/thirdParty/types'
+
+export type Props = {
+  onChange: (value: LinkedContract) => void
+  disabled?: boolean
+}

src/components/ContractsField/index.ts

@@ -0,0 +1,2 @@
+export * from './ContractsField.types'
+export * from './ContractsField'

src/components/ContractsTable/ContractsTable.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Table } from 'decentraland-ui'
+import { Props } from './ContractsTable.types'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+
+export const ContractsTable = ({ contracts }: Props) => {
+  return (
+    <Table basic="very">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell></Table.HeaderCell>
+          <Table.HeaderCell>{t('linked_contracts.network')}</Table.HeaderCell>
+          <Table.HeaderCell>{t('linked_contracts.address')}</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {contracts.length === 0 ? (
+          <Table.Row>
+            <Table.Cell>{t('linked_contracts.no_contracts')}</Table.Cell>
+          </Table.Row>
+        ) : (
+          contracts.map(({ network, address }, index) => (
+            <Table.Row key={index}>
+              <Table.Cell>{index}</Table.Cell>
+              <Table.Cell>{network}</Table.Cell>
+              <Table.Cell>{address}</Table.Cell>
+            </Table.Row>
+          ))
+        )}
+      </Table.Body>
+    </Table>
+  )
+}

src/components/ContractsTable/ContractsTable.types.ts

@@ -0,0 +1,5 @@
+import { LinkedContract } from '../../modules/thirdParty/types'
+
+export type Props = {
+  contracts: LinkedContract[]
+}

src/components/ContractsTable/index.ts

@@ -0,0 +1,2 @@
+export * from './ContractsTable.types'
+export * from './ContractsTable'

src/components/ManagersField/ManagersField.tsx

@@ -1,36 +1,37 @@
-import React, { useState } from "react";
-import { TagField } from "decentraland-ui";
-import { t } from "decentraland-dapps/dist/modules/translation/utils";
-import { Props } from "./ManagersField.types";
-import "./ManagersField.css";
+import React, { useState } from 'react'
+import { TagField } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { isAddress } from '../../modules/thirdParty/utils'
+import { Props } from './ManagersField.types'
+import './ManagersField.css'
 
 const ManagersField = ({ managers, error: providedError, onChange }: Props) => {
-  const [error, setError] = useState("");
+  const [error, setError] = useState('')
 
   return (
     <div className="ManagersField">
       <TagField
-        label={t("managers_field.label")}
+        label={t('managers_field.label')}
         value={managers}
         onChange={(_, props) => {
-          const values = props.value as string[];
+          const values = props.value as string[]
           if (values.length > 0) {
-            const last = values[values.length - 1];
-            if (!/^0x[a-fA-F0-9]{40}$/.test(last)) {
-              setError(t("managers_field.required_valid_address"));
+            const last = values[values.length - 1]
+            if (!isAddress(last)) {
+              setError(t('managers_field.required_valid_address'))
             } else {
-              onChange(values);
-              setError("");
+              onChange(values)
+              setError('')
             }
           } else {
-            onChange(values);
+            onChange(values)
           }
         }}
-        message={[providedError, error].filter((e) => !!e).join(" - ")}
+        message={[providedError, error].filter(e => !!e).join(' - ')}
         error={!!providedError}
       />
     </div>
-  );
-};
+  )
+}
 
-export default React.memo(ManagersField);
+export default React.memo(ManagersField)

src/components/Routes/Routes.tsx

@@ -19,7 +19,7 @@ const Routes = ({ isConnected }: Props) => (
         <>
           <Route exact path={locations.thirdParties()} component={ThirdParties} />
           <Route exact path={locations.createThirdParty()} component={CreateThirdParty} />
-          <Route exact path={locations.updateThirdParty()} component={UpdateThirdParty} />
+          <Route exact path={locations.thirdPartyDetails()} component={UpdateThirdParty} />
           <Redirect to={locations.thirdParties()} />
         </>
       )}

src/components/ThirdParties/ThirdParties.container.ts

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import { RootState } from '../../modules/reducer'
+import { FETCH_THIRD_PARTIES_REQUEST } from '../../modules/thirdParty/action'
+import ThirdParties from './ThirdParties'
+import { MapStateProps } from './ThirdParties.types'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { getAggregatorAddress, getLoading, getThirdParties } from '../../modules/thirdParty/selectors'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet'
+
+const mapState = (state: RootState): MapStateProps => {
+  const userAddress = getAddress(state)
+  return {
+    isLoading: isLoadingType(getLoading(state), FETCH_THIRD_PARTIES_REQUEST),
+    isAggregator: getAggregatorAddress(state) === userAddress,
+    userAddress,
+    thirdParties: getThirdParties(state)
+  }
+}
+
+export default connect(mapState, undefined)(ThirdParties)

src/components/ThirdParties/ThirdParties.css

@@ -5,7 +5,12 @@
   margin-bottom: 48px;
 }
 
-
 .ThirdParties .page-title .header {
   margin: 0px;
 }
+
+.ThirdParties .contentHeader {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}