Token info redirection to defiscan token detail screen (#978)

* Added link for defiscan for token details * Updated e2e for defiscan redirection for tokens * Redirect UTXO token to dfi token detail screen on defiscan * Updated e2e for token redirection
BirthdayResearch · Sep 30, 2021 · dacfae2 · dacfae2
1 parent 8cb2896
commit dacfae2
Show file tree

Hide file tree

Showing 5 changed files with 319 additions and 58 deletions.
diff --git a/mobile-app/app/contexts/DeFiScanContext.tsx b/mobile-app/app/contexts/DeFiScanContext.tsx
@@ -5,9 +5,11 @@ import { useNetworkContext } from './NetworkContext'
 interface DeFiScanContextI {
   getTransactionUrl: (txid: string, rawtx?: string) => string
   getBlocksUrl: (blockCount: number) => string
+  getTokenUrl: (tokenId: number | string) => string
 }
 
 const DeFiScanContext = createContext<DeFiScanContextI>(undefined as any)
+const baseDefiScanUrl = 'https://defiscan.live'
 
 export function useDeFiScanContext (): DeFiScanContextI {
   return useContext(DeFiScanContext)
@@ -23,6 +25,9 @@ export function DeFiScanProvider (props: React.PropsWithChildren<any>): JSX.Elem
       },
       getBlocksUrl: (blockCount: number) => {
         return getBlocksURLByNetwork(network, blockCount)
+      },
+      getTokenUrl: (tokenId: number | string) => {
+        return getTokenURLByNetwork(network, tokenId)
       }
     }
   }, [network])
@@ -51,7 +56,7 @@ function getNetworkParams (network: EnvironmentNetwork): string {
 }
 
 function getTxURLByNetwork (network: EnvironmentNetwork, txid: string, rawtx?: string): string {
-  let baseUrl = `https://defiscan.live/transactions/${txid}`
+  let baseUrl = `${baseDefiScanUrl}/transactions/${txid}`
 
   baseUrl += getNetworkParams(network)
 
@@ -67,6 +72,11 @@ function getTxURLByNetwork (network: EnvironmentNetwork, txid: string, rawtx?: s
 }
 
 function getBlocksURLByNetwork (network: EnvironmentNetwork, blockCount: number): string {
-  const baseUrl = `https://defiscan.live/blocks/${blockCount}${getNetworkParams(network)}`
+  const baseUrl = `${baseDefiScanUrl}/blocks/${blockCount}${getNetworkParams(network)}`
+  return baseUrl
+}
+
+function getTokenURLByNetwork (network: EnvironmentNetwork, tokenId: number | string): string {
+  const baseUrl = `${baseDefiScanUrl}/tokens/${tokenId}${getNetworkParams(network)}`
   return baseUrl
 }
diff --git a/mobile-app/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx
@@ -7,6 +7,11 @@ import { wallet } from '@store/wallet'
 import { TokenDetailScreen } from './TokenDetailScreen'
 
 jest.mock('../../../../../contexts/ThemeProvider')
+jest.mock('../../../../../contexts/DeFiScanContext', () => ({
+  useDeFiScanContext: () => ({
+    getTokenUrl: jest.fn
+  })
+}))
 jest.mock('../../../../../hooks/wallet/TokensAPI', () => ({
   useTokensAPI: () => [
     {

diff --git a/mobile-app/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx
@@ -19,6 +19,8 @@ import NumberFormat from 'react-number-format'
 import { BalanceParamList } from '../BalancesNavigator'
 import { ConversionMode } from './ConvertScreen'
 import { MaterialIcons } from '@expo/vector-icons'
+import { Linking, TouchableOpacity } from 'react-native'
+import { useDeFiScanContext } from '@contexts/DeFiScanContext'
 
 interface TokenActionItems {
   title: string
@@ -94,6 +96,13 @@ export function TokenDetailScreen ({ route, navigation }: Props): JSX.Element {
 
 function TokenSummary (props: { token: WalletToken}): JSX.Element {
   const Icon = getNativeIcon(props.token.avatarSymbol)
+  const { getTokenUrl } = useDeFiScanContext()
+
+  const onTokenUrlPressed = async (): Promise<void> => {
+    const id = props.token.id === '0_utxo' ? 0 : props.token.id
+    const url = getTokenUrl(id)
+    await Linking.openURL(url)
+  }
 
   return (
     <ThemedView
@@ -103,12 +112,28 @@ function TokenSummary (props: { token: WalletToken}): JSX.Element {
     >
       <View style={tailwind('flex-row items-center mb-1')}>
         <Icon height={24} width={24} style={tailwind('mr-2')} />
-        <ThemedText
-          light={tailwind('text-gray-500')}
-          dark={tailwind('text-gray-400')}
+        <TouchableOpacity
+          onPress={onTokenUrlPressed}
+          testID='token_detail_explorer_url'
         >
-          {props.token.name}
-        </ThemedText>
+          <View style={tailwind('flex-row items-center')}>
+            <ThemedText
+              dark={tailwind('text-darkprimary-500')}
+              light={tailwind('text-primary-500')}
+            >
+              {props.token.name}
+            </ThemedText>
+            <View style={tailwind('ml-2 flex-grow-0 justify-center')}>
+              <ThemedIcon
+                dark={tailwind('text-darkprimary-500')}
+                iconType='MaterialIcons'
+                light={tailwind('text-primary-500')}
+                name='open-in-new'
+                size={16}
+              />
+            </View>
+          </View>
+        </TouchableOpacity>
       </View>
 
       <View style={tailwind('flex-row items-center mb-4')}>