Add tip content to bridged tokens

src/pages/ERC1155List/ERC1155Table.tsx

@@ -146,7 +146,7 @@ function getColumns(props: any) {
       render: (data: Erc20) => <Box direction={'row'} style={{ display: 'flex', alignItems: 'center' }}>
         <Text size={'small'}>{data.name}</Text>
         {data.isBridged && <div style={{ marginLeft: "4px", height: '14px', cursor: 'pointer' }}>
-          <Tip content={'Token is available on Harmony Bridge'}>
+          <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Token is available on Harmony Bridge'} />}>
             <StatusGood size={'14px'} color={'successText'} />
           </Tip>
         </div>}

src/pages/ERC20List/ERC20Table.tsx

@@ -131,7 +131,7 @@ function getColumns(props: any) {
       render: (data: Erc20) => <Box direction={'row'} style={{ display: 'flex', alignItems: 'center' }}>
         <Text size={'small'}>{data.name}</Text>
         {data.isBridged && <div style={{ marginLeft: "4px", height: '14px', cursor: 'pointer' }}>
-           <Tip content={'Token is available on Harmony Bridge'}>
+           <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Token is available on Harmony Bridge'} />}>
              <StatusGood size={'14px'} color={'successText'} />
            </Tip>
         </div>}

src/pages/ERC721List/ERC721Table.tsx

@@ -131,7 +131,7 @@ function getColumns(props: any) {
       render: (data: Erc20) => <Box direction={'row'} style={{ display: 'flex', alignItems: 'center' }}>
         <Text size={'small'}>{data.name}</Text>
         {data.isBridged && <div style={{ marginLeft: "4px", height: '14px', cursor: 'pointer' }}>
-          <Tip content={'Token is available on Harmony Bridge'}>
+          <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Token is available on Harmony Bridge'} />}>
             <StatusGood size={'14px'} color={'successText'} />
           </Tip>
         </div>}