Search ens (#954)

* ENS Searching

* Revert "ENS Searching"

This reverts commit 710e262.

* search by ens

* copy fix on address input

* add EOA address and ENS

* fix EOA calc from kwenta and poly, show ENS on top

* Resolve ens optionally

* Renames

* Fix deps

* Simplify useEnsName

* Lint harder

---------

Co-authored-by: Steve Rogers <[email protected]>

v2/perps-v2/ui/package.json

@@ -22,6 +22,7 @@
     "@graphql-typed-document-node/core": "^3.1.2",
     "@pythnetwork/pyth-evm-js": "^1.1.0",
     "@snx-v2/formatters": "workspace:*",
+    "@snx-v2/useGlobalProvidersWithFallback": "workspace:*",
     "@snx-v2/v3Theme": "workspace:*",
     "@synthetixio/contracts": "workspace:*",
     "@synthetixio/wei": "^2.74.4",

v2/perps-v2/ui/src/components/AddressInput/AddressInput.tsx

@@ -1,25 +1,38 @@
+import { ethers } from 'ethers';
 import { SearchIcon } from '@chakra-ui/icons';
 import { Button, Flex, Input } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import { useGlobalProvidersWithFallback } from '@snx-v2/useGlobalProvidersWithFallback';
 
 export const AddressInput = () => {
+  const { globalProviders } = useGlobalProvidersWithFallback();
+  const L1DefaultProvider = globalProviders.mainnet;
   const navigate = useNavigate();
 
   const { register, getValues } = useForm({
     defaultValues: { address: '' },
   });
 
-  const onSubmit = () => {
-    if (getValues('address')) {
-      navigate(`/${getValues('address')}`);
+  const onSubmit = async () => {
+    const address = getValues('address');
+    if (address) {
+      // Try to resolve ENS
+      if (!ethers.utils.isAddress(address)) {
+        const ens: string | null = await L1DefaultProvider.resolveName(address);
+        if (ens) {
+          navigate(`/${ens}`);
+          return;
+        }
+      }
+      navigate(`/${address}`);
     }
   };
 
   return (
     <Flex alignSelf="end" width="50%" justifyContent="flex-end" alignItems="center" mb="3px">
       <Input
-        placeholder="Search by address"
+        placeholder="Search by ENS / address"
         w="38%"
         minW={{ base: '180px', md: '250px' }}
         {...register('address')}

v2/perps-v2/ui/src/hooks/useEnsName.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { useGlobalProvidersWithFallback } from '@snx-v2/useGlobalProvidersWithFallback';
+
+export const useEnsName = (address?: string | null) => {
+  const { globalProviders } = useGlobalProvidersWithFallback();
+
+  const [addressEnsName, setAddressEnsName] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function resolve() {
+      if (!address || !globalProviders.mainnet) {
+        setAddressEnsName(null);
+        return;
+      }
+      const name = await globalProviders.mainnet.lookupAddress(address);
+      setAddressEnsName(name);
+    }
+    resolve();
+  }, [address, globalProviders]);
+
+  return { addressEnsName };
+};

v2/perps-v2/ui/src/hooks/useOwnerBySmartId.ts

@@ -0,0 +1,81 @@
+import { z } from 'zod';
+import { KWENTA_SUBGRAPH_URL, POLYNOMIAL_SUBGRAPH_URL } from '../utils';
+import { ApolloClient, gql, InMemoryCache, useQuery } from '@apollo/client';
+
+const kwentaClient = new ApolloClient({
+  uri: KWENTA_SUBGRAPH_URL,
+  cache: new InMemoryCache(),
+});
+
+const polyClient = new ApolloClient({
+  uri: POLYNOMIAL_SUBGRAPH_URL,
+  cache: new InMemoryCache(),
+});
+
+const AccountBySmartIdQuery = gql`
+  query Account($id: String!) {
+    smartMarginAccount(id: $id) {
+      owner
+    }
+  }
+`;
+
+const AccountQuery = gql`
+  query SmAccounts($account: String) {
+    logAccountCreateds(where: { account: $account }) {
+      owner
+      account
+    }
+  }
+`;
+
+const SmartMarginAccountSchema = z.object({
+  owner: z.string(),
+});
+
+const ResponseSchema = z
+  .object({
+    smartMarginAccount: SmartMarginAccountSchema,
+  })
+  .optional();
+
+const OwnerByPolyAccountSchema = z.array(
+  z.object({
+    owner: z.string(),
+    account: z.string(),
+  })
+);
+
+const ResponseSchemaOwnerByPoly = z
+  .object({
+    logAccountCreateds: OwnerByPolyAccountSchema,
+  })
+  .optional();
+
+export const useOwnerKwenta = (smartAccountId?: string) => {
+  const { data, ...rest } = useQuery(AccountBySmartIdQuery, {
+    client: kwentaClient,
+    variables: { id: smartAccountId },
+    skip: !smartAccountId,
+  });
+
+  const parsedResult = ResponseSchema.safeParse(data);
+  const kwentaOwner = parsedResult.success ? parsedResult.data?.smartMarginAccount?.owner : null;
+
+  return { ...rest, kwentaOwner };
+};
+
+export const useOwnerPolynomial = (polynomialAccount?: string) => {
+  const { data, ...rest } = useQuery(AccountQuery, {
+    client: polyClient,
+    variables: { account: polynomialAccount },
+    skip: !polynomialAccount,
+  });
+
+  const parsedResult = ResponseSchemaOwnerByPoly.safeParse(data);
+  const polynomialOwner = parsedResult.success
+    ? parsedResult.data?.logAccountCreateds?.[0]?.owner
+    : null;
+
+  return { ...rest, polynomialOwner };
+};

v2/perps-v2/ui/src/pages/Account.tsx

@@ -7,14 +7,24 @@ import { PositionsTable } from '../components/Positions';
 import { AccountActionsTable } from '../components/Actions';
 import { useKwentaAccount } from '../hooks/useKwentaAccount';
 import { usePolynomialAccount } from '../hooks/usePolynomialAccount';
+import { useOwnerKwenta, useOwnerPolynomial } from '../hooks/useOwnerBySmartId';
+import { useEnsName } from '../hooks/useEnsName';
 import { SmartWallet } from '../components/Shared';
 
 export const Account: FC = () => {
   const params = useParams();
   const navigate = useNavigate();
+
   const { data: kwentaAccount } = useKwentaAccount(params?.walletAddress);
   const { data: polynomialAccount } = usePolynomialAccount(params?.walletAddress);
 
+  const { kwentaOwner } = useOwnerKwenta(params?.walletAddress);
+  const { polynomialOwner } = useOwnerPolynomial(params?.walletAddress);
+
+  const { addressEnsName: addressEnsName } = useEnsName(params?.walletAddress);
+  const { addressEnsName: kwentaEnsName } = useEnsName(kwentaOwner);
+  const { addressEnsName: polynomialEnsName } = useEnsName(polynomialOwner);
+
   return (
     <Flex flexDir="column" px={{ base: '16px', md: '40px' }} py={2}>
       <Box mt={12}>
@@ -36,14 +46,26 @@ export const Account: FC = () => {
         flexWrap={{ base: 'wrap', md: 'nowrap' }}
       >
         <Heading fontSize={{ base: '14px', md: '24px' }} p={0} mr={2}>
-          Account: {params?.walletAddress}
+          Account: {addressEnsName ? addressEnsName : params?.walletAddress}
         </Heading>
         <ExternalLinkIcon color="cyan.500" />
       </Link>
       <Flex mt={8} wrap="wrap">
         {kwentaAccount && (
           <SmartWallet label="Kwenta Smart Account" account={kwentaAccount.account} />
         )}
+        {kwentaOwner && (
+          <SmartWallet
+            label={kwentaEnsName ? kwentaEnsName : 'EOA Account'}
+            account={kwentaOwner}
+          />
+        )}
+        {polynomialOwner && (
+          <SmartWallet
+            label={polynomialEnsName ? polynomialEnsName : 'EOA Account'}
+            account={polynomialOwner}
+          />
+        )}
         {polynomialAccount && (
           <SmartWallet
             ml="30px"

yarn.lock

@@ -8974,6 +8974,7 @@ __metadata:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
     "@pythnetwork/pyth-evm-js": ^1.1.0
     "@snx-v2/formatters": "workspace:*"
+    "@snx-v2/useGlobalProvidersWithFallback": "workspace:*"
     "@snx-v2/v3Theme": "workspace:*"
     "@synthetixio/contracts": "workspace:*"
     "@synthetixio/wei": ^2.74.4