From 11bf9dd483590446e2764e071c4e4a5d12af7bf2 Mon Sep 17 00:00:00 2001
From: 0xMasayoshi <0xMasayoshi@protonmail.com>
Date: Mon, 12 Aug 2024 22:32:54 +0700
Subject: [PATCH] feat: add links to portfolio

---
 .../components/user-portfolio/PortfolioInfoRow.tsx  | 13 +++++++++++--
 .../PortfolioFarmClaimables.tsx                     |  9 ++++++++-
 .../PortfolioFuroClaimables.tsx                     |  3 +++
 .../portfolio-positions/PortfolioALMPositions.tsx   |  6 +++++-
 .../portfolio-positions/PortfolioV2Positions.tsx    |  5 ++++-
 .../portfolio-positions/PortfolioV3Positions.tsx    |  5 ++++-
 6 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx
index ac7cfcb178..be9d2ec618 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx
+++ b/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
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFarmClaimables.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFarmClaimables.tsx
index aa573bae70..ef0fcd6253 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFarmClaimables.tsx
+++ b/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"
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx
index d11877f3bc..4b51abd824 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx
+++ b/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"
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx
index 6016b98409..f3b754c666 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx
+++ b/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
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx
index 510e30fa98..ab0fbc4b5d 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx
+++ b/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
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx
index a79e7ee991..257e14a952 100644
--- a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx
+++ b/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