feat: add links to portfolio

apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx

@@ -1,11 +1,13 @@
-import { Badge } from '@sushiswap/ui'
+import { Badge, classNames } from '@sushiswap/ui'
 import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
+import { useRouter } from 'next/navigation'
 import { FC, ReactElement } from 'react'
 import { ChainId } from 'sushi/chain'
 
 interface PortfolioInfoRow {
   id: string
   chainId: ChainId
+  href?: string
   icon: ReactElement
   leftContent: ReactElement
   rightContent: ReactElement | null
@@ -15,13 +17,20 @@ export const PortfolioInfoRow: FC<PortfolioInfoRow> = ({
   id,
   chainId,
   icon,
+  href,
   leftContent,
   rightContent,
 }) => {
+  const { push } = useRouter()
   return (
     <div
       id={id}
-      className="flex w-full items-center hover:bg-muted px-5 py-3 gap-x-6 whitespace-nowrap"
+      className={classNames(
+        'flex w-full items-center hover:bg-muted px-5 py-3 gap-x-6 whitespace-nowrap',
+        href && 'cursor-pointer',
+      )}
+      onClick={() => href && push(href)}
+      onKeyDown={() => href && push(href)}
     >
       <div className="shrink-0">
         <Badge

apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFarmClaimables.tsx

@@ -7,7 +7,7 @@ import {
 } from '@sushiswap/ui'
 import { FC } from 'react'
 import React from 'react'
-import { ChainId } from 'sushi/chain'
+import { ChainId, ChainKey } from 'sushi/chain'
 import { formatUSD } from 'sushi/format'
 import { PortfolioInfoRow } from '../PortfolioInfoRow'
 
@@ -27,6 +27,13 @@ export const PortfolioFarmClaimables: FC<PortfolioFarmClaimablesProps> = ({
         <PortfolioInfoRow
           id={`${position.chainId}:${position.id}`}
           chainId={token.chainId as ChainId}
+          href={
+            position.protocol === 'SUSHISWAP_V2'
+              ? `/${ChainKey[position.chainId as ChainId]}/pool/v2/${
+                  position.address
+                }/add`
+              : `/${ChainKey[position.chainId as ChainId]}/positions/rewards`
+          }
           icon={
             <img
               className="rounded-full"

apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx

@@ -27,6 +27,9 @@ export const PortfolioFuroClaimables: FC<PortfolioFuroClaimablesProps> = ({
         <PortfolioInfoRow
           id={`${position.chainId}:${position.id}`}
           chainId={token.chainId as ChainId}
+          href={`https://pay.sushi.com/${
+            position.name.startsWith('Vesting') ? 'vesting' : 'stream'
+          }/${position.chainId}:${position.positionId}`}
           icon={
             <img
               className="rounded-full"

apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx

@@ -6,12 +6,13 @@ import {
   Currency,
 } from '@sushiswap/ui'
 import React, { FC } from 'react'
-import { ChainId } from 'sushi/chain'
+import { ChainId, ChainKey } from 'sushi/chain'
 import { formatUSD } from 'sushi/format'
 import { PortfolioInfoRow } from '../PortfolioInfoRow'
 
 interface PortfolioALMPositionsProps {
   positions: PortfolioSmartPosition[]
+  href?: string
 }
 
 export const PortfolioALMPositions: FC<PortfolioALMPositionsProps> = ({
@@ -26,6 +27,9 @@ export const PortfolioALMPositions: FC<PortfolioALMPositionsProps> = ({
         <PortfolioInfoRow
           id={`${position.chainId}:${position.id}`}
           chainId={position.chainId as ChainId}
+          href={`/${ChainKey[position.chainId as ChainId]}/pool/v3/${
+            position.address
+          }/smart/${position.vaultAddress}`}
           icon={
             <Currency.IconList iconWidth={24} iconHeight={24}>
               <img

apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx

@@ -6,7 +6,7 @@ import {
   Currency,
 } from '@sushiswap/ui'
 import React, { FC } from 'react'
-import { ChainId } from 'sushi/chain'
+import { ChainId, ChainKey } from 'sushi/chain'
 import { formatUSD } from 'sushi/format'
 import { PortfolioInfoRow } from '../PortfolioInfoRow'
 
@@ -26,6 +26,9 @@ export const PortfolioV2Positions: FC<PortfolioV2PositionssProps> = ({
         <PortfolioInfoRow
           id={`${position.chainId}:${position.id}`}
           chainId={position.chainId as ChainId}
+          href={`/${ChainKey[position.chainId as ChainId]}/pool/v2/${
+            position.address
+          }/add`}
           icon={
             <Currency.IconList iconWidth={24} iconHeight={24}>
               <img

apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx

@@ -8,7 +8,7 @@ import {
 } from '@sushiswap/ui'
 import { BagIcon } from '@sushiswap/ui/icons/BagIcon'
 import React, { FC } from 'react'
-import { ChainId } from 'sushi/chain'
+import { ChainId, ChainKey } from 'sushi/chain'
 import { formatUSD } from 'sushi/format'
 import { PortfolioInfoRow } from '../PortfolioInfoRow'
 
@@ -28,6 +28,9 @@ export const PortfolioV3Positions: FC<PortfolioV3PositionsProps> = ({
         <PortfolioInfoRow
           id={`${position.chainId}:${position.id}`}
           chainId={position.chainId as ChainId}
+          href={`/${ChainKey[position.chainId as ChainId]}/pool/v3/${
+            position.address
+          }/positions/${position.positionId}`}
           icon={
             <Currency.IconList iconWidth={24} iconHeight={24}>
               <img