Add auto-complete to EditTokenScene

Author: peachbits

CHANGELOG.md

@@ -5,6 +5,7 @@
 - added: Add eCash.
 - added: Thorchain TCY stake and unstake
 - added: Add Fantom to Sonic bridge
+- added: Use `getTokenDetails` to auto-complete fields in `EditTokenScene`
 - added: Toast notifications for PIN changes.
 - added: Scam warning to camera access request modal
 - changed: Auto launch QR scanner for multi-out payments if previously used

src/components/scenes/EditTokenScene.tsx

@@ -70,6 +70,10 @@ function EditTokenSceneComponent(props: Props) {
     return out
   })
 
+  // Keep track of whether we auto-completed a token:
+  const [didAutoCompleteToken, setDidAutoCompleteToken] = React.useState<boolean>(false)
+  const isAutoCompleteTokenLoading = React.useRef<boolean>(false)
+
   const handleDelete = useHandler(async () => {
     if (tokenId == null) return
     await Airship.show<'ok' | 'cancel' | undefined>(bridge => (
@@ -187,6 +191,36 @@ function EditTokenSceneComponent(props: Props) {
     }
   })
 
+  const autoCompleteToken = async (searchString: string) => {
+    if (
+      // Ignore autocomplete if it's already loading
+      isAutoCompleteTokenLoading.current ||
+      // and ggnore autocomplete if the scene was initialized with any of the token details prefilled,
+      route.params.currencyCode != null ||
+      route.params.displayName != null ||
+      route.params.multiplier != null ||
+      route.params.networkLocation != null
+    ) {
+      return
+    }
+
+    isAutoCompleteTokenLoading.current = true
+    const [token] = await wallet.currencyConfig.getTokenDetails({ contractAddress: searchString }).catch(() => [])
+    isAutoCompleteTokenLoading.current = false
+
+    if (token != null) {
+      setCurrencyCode(token.currencyCode)
+      setDisplayName(token.displayName)
+      setDecimalPlaces((token.denominations[0].multiplier.length - 1).toString())
+      setDidAutoCompleteToken(true)
+    } else if (token == null && didAutoCompleteToken) {
+      setCurrencyCode('')
+      setDisplayName('')
+      setDecimalPlaces('18')
+      setDidAutoCompleteToken(false)
+    }
+  }
+
   const renderCustomTokenTemplateRows = () => {
     return customTokenTemplate
       .sort((a, b) => (a.key === 'contractAddress' ? -1 : 1))
@@ -202,13 +236,17 @@ function EditTokenSceneComponent(props: Props) {
             placeholder={translateDescription(item.displayName)}
             keyboardType={item.type === 'number' ? 'numeric' : 'default'}
             value={location.get(item.key) ?? ''}
-            onChangeText={value =>
+            onChangeText={value => {
               setLocation(location => {
                 const out = new Map(location)
                 out.set(item.key, value.replace(/\s/g, ''))
                 return out
               })
-            }
+
+              if (item.key === 'contractAddress') {
+                autoCompleteToken(value).catch(() => {})
+              }
+            }}
           />
         )
       })