TIP 2 – Integration of IDriss into Tally Ho! Wallet - Feature 1

background/accounts.ts

@@ -41,6 +41,7 @@ export type AccountBalance = {
 export type AddressOnNetwork = {
   address: HexString
   network: EVMNetwork
+  alternative?: { name: string; address: string }[]
 }
 
 /**

background/lib/utils/index.ts

@@ -12,10 +12,12 @@ export function normalizeEVMAddress(address: string | Buffer): HexString {
 export function normalizeAddressOnNetwork({
   address,
   network,
+  alternative,
 }: AddressOnNetwork): AddressOnNetwork {
   return {
     address: normalizeEVMAddress(address),
     network,
+    alternative,
   }
 }
 

background/services/name/index.ts

@@ -17,7 +17,7 @@ import {
   addressBookResolverFor,
   ensResolverFor,
   unsResolver,
-  rnsResolver,
+  rnsResolver, idrissResolver,
 } from "./resolvers"
 import PreferenceService from "../preferences"
 import { isFulfilledPromise } from "../../lib/utils/type-guards"
@@ -126,6 +126,7 @@ export default class NameService extends BaseService<Events> {
       // for the given resource.
       ensResolverFor(chainService),
       unsResolver(),
+      idrissResolver(),
       ...(RESOLVE_RNS_NAMES ? [rnsResolver()] : []),
     ]
 

background/services/name/resolvers/idriss.ts

@@ -0,0 +1,47 @@
+import { IdrissCrypto } from "idriss-crypto/lib/browser"
+import { NameResolver } from "../name-resolver"
+import { AddressOnNetwork, NameOnNetwork } from "../../../accounts"
+import { normalizeEVMAddress } from "../../../lib/utils"
+
+export default function idrissResolver(): NameResolver<"idriss"> {
+  return {
+    type: "idriss",
+    canAttemptNameResolution(): boolean {
+      return true
+    },
+    canAttemptAvatarResolution(): boolean {
+      return false
+    },
+    canAttemptAddressResolution({ name }: NameOnNetwork): boolean {
+      return IdrissCrypto.matchInput(name) !== null
+    },
+    async lookUpAddressForName({
+      name,
+      network,
+    }: NameOnNetwork): Promise<AddressOnNetwork | undefined> {
+      const resolver = new IdrissCrypto()
+      const result = await resolver.resolve(name, { network: "evm" })
+      const address = result["Public ETH"] ?? Object.values(result)[0]
+      if (address) {
+        const normalizedAddress = normalizeEVMAddress(address)
+        const alternative = Object.entries(result).map(x=>({name:x[0], address:normalizeEVMAddress(x[1])}));
+        return { address: normalizedAddress, network, alternative }
+      }
+      return undefined
+    },
+    async lookUpAvatar() {
+      return undefined
+    },
+    async lookUpNameForAddress({
+      address,
+      network,
+    }: AddressOnNetwork): Promise<NameOnNetwork | undefined> {
+      const resolver = new IdrissCrypto()
+      const result = await resolver.reverseResolve(address)
+      if (result) {
+        return { name: result, network }
+      }
+      return undefined
+    },
+  }
+}

background/services/name/resolvers/index.ts

@@ -3,13 +3,15 @@ import addressBookResolverFor from "./address-book"
 import knownContractResolverFor from "./known-contracts"
 import unsResolver from "./uns"
 import rnsResolver from "./rns"
+import idrissResolver from "./idriss"
 
 const resolvers = {
   ensResolverFor,
   addressBookResolverFor,
   knownContractResolverFor,
   unsResolver,
   rnsResolver,
+  idrissResolver,
 }
 
 type ResolverConstructors = ReturnType<typeof resolvers[keyof typeof resolvers]>
@@ -22,4 +24,5 @@ export {
   knownContractResolverFor,
   unsResolver,
   rnsResolver,
+  idrissResolver,
 }

package.json

@@ -54,7 +54,8 @@
     "react": "^17.0.2",
     "webext-options-sync": "^2.0.1",
     "webext-redux": "^2.1.7",
-    "webextension-polyfill": "^0.7.0"
+    "webextension-polyfill": "^0.7.0",
+    "idriss-crypto": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

ui/hooks/validation-hooks.ts

@@ -136,7 +136,7 @@ export const useParsedValidation = <T>(
  * strings are resolved asynchronously.
  */
 export const useAddressOrNameValidation: AsyncValidationHook<
-  { address: HexString; name?: string } | undefined
+  { address: HexString; name?: string, alternative?: { name: string; address: string }[] } | undefined
 > = (onValidChange) => {
   const [errorMessage, setErrorMessage] = useState<string | undefined>()
   const [rawValue, setRawValue] = useState<string>("")
@@ -173,7 +173,8 @@ export const useAddressOrNameValidation: AsyncValidationHook<
             onValidChange(undefined)
             setErrorMessage("Address could not be found")
           } else {
-            onValidChange({ name: trimmed, address: resolved.address })
+            console.log('resolved',resolved)
+            onValidChange({ name: trimmed, address: resolved.address, alternative: resolved.alternative })
           }
 
           setIsValidating(false)

ui/pages/Send.tsx

@@ -48,7 +48,10 @@ export default function Send(): ReactElement {
   )
   const [destinationAddress, setDestinationAddress] = useState<
     string | undefined
-  >(undefined)
+    >(undefined)
+  const [alternativeAddresses, setAlternativeAddresses] = useState<
+  { name: string; address: string }[]
+    >([])
   const [amount, setAmount] = useState("")
   const [gasLimit, setGasLimit] = useState<bigint | undefined>(undefined)
   const [isSendingTransactionRequest, setIsSendingTransactionRequest] =
@@ -145,8 +148,10 @@ export default function Send(): ReactElement {
     errorMessage: addressErrorMessage,
     isValidating: addressIsValidating,
     handleInputChange: handleAddressChange,
-  } = useAddressOrNameValidation((value) =>
-    setDestinationAddress(value?.address)
+  } = useAddressOrNameValidation((value) => {
+      setDestinationAddress(value?.address)
+      setAlternativeAddresses(value?.alternative || [])
+    }
   )
 
   return (
@@ -205,6 +210,22 @@ export default function Send(): ReactElement {
               <></>
             )}
           </div>
+          {alternativeAddresses.length>=2 ?alternativeAddresses.map(x => {
+                let className = `addressSelection ${
+                  x.address == destinationAddress ? "isActive" : ""
+                }`
+                return (
+                  <button
+                    className={className}
+                    onClick={(event) => setDestinationAddress(x.address)}
+                  >
+                    <strong>IDriss: {x.name}</strong>{" "}
+                    <span>
+                      {x.address.substr(0, 6)}...{x.address.substr(-4)}
+                    </span>
+                  </button>
+                )
+          }):''}
           <SharedSlideUpMenu
             size="custom"
             isOpen={networkSettingsModalOpen}
@@ -347,6 +368,31 @@ export default function Send(): ReactElement {
             justify-content: space-between;
             align-items: center;
           }
+          .addressSelection {
+            height: 72px;
+            width: 100%;
+            border-radius: 16px;
+            background-color: var(--green-95);
+            display: flex;
+            flex-direction: column;
+            padding: 11px 19px 8px 8px;
+            box-sizing: border-box;
+            margin-bottom: 16px;
+            justify-content: space-between;
+            align-items: center;
+          }
+          .addressSelection:hover,
+          .addressSelection.isActive {
+            background-color: var(--green-80);
+          }
+          .addressSelection span {
+            line-height: 27px;
+            margin: -27px 4px 0 0;
+            color: var(--green-40);
+            text-align: right;
+            position: relative;
+            font-size: 14px;
+          }
         `}
       </style>
     </>