[FEAT] Migration page

package.json

@@ -220,6 +220,7 @@
     "query-string": "^9.0.0",
     "rc-slider": "^10.0.1",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-ga4": "^1.4.1",

src/abis/rollex-contract.json

@@ -0,0 +1,140 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "rex",
+        "type": "address"
+      },
+      {
+        "internalType": "contract IERC20",
+        "name": "psys",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "psysRexRatio",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "sender",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "PsysMigrated",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "PSYS",
+    "outputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "PSYS_REX_RATIO",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "REVISION",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "REX",
+    "outputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "_totalPsysMigrated",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "initialize",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "migrateFromPSYS",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "migrationStarted",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/components/AccountDetails/TransactionSummary.tsx

@@ -24,6 +24,7 @@ import {
   QueueTransactionInfo,
   RemoveLiquidityGammaTransactionInfo,
   RemoveLiquidityV3TransactionInfo,
+  RollexMigrationTransactionInfo,
   TransactionInfo,
   TransactionType,
   VoteTransactionInfo,
@@ -197,6 +198,11 @@ function RemoveLiquidityGammaSummary({ info }: { info: RemoveLiquidityGammaTrans
   return <div>{Text}</div>
 }
 
+function RollexMigrationSummary({ info }: { info: RollexMigrationTransactionInfo }) {
+  const Text = `Migrate ${info.amount} PSYS`
+  return <div>{Text}</div>
+}
+
 function DepositFarmSummary({ info }: { info: DepositFarmTransactionInfo }) {
   // not worth rendering the tokens since you can should no longer deposit liquidity in the staking contracts
   // todo: deprecate and delete the code paths that allow this, show user more information
@@ -404,6 +410,9 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
     case TransactionType.REMOVE_LIQUIDITY_GAMMA:
       return <RemoveLiquidityGammaSummary info={info} />
 
+    case TransactionType.ROLLEX_MIGRATION:
+      return <RollexMigrationSummary info={info} />
+
     default:
       return <div>Unknown Transaction Type</div>
   }

src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts

@@ -204,6 +204,11 @@ export function parseLocalActivity(
       additionalFields = parseCollectFees(info, chainId, tokens)
     } else if (info.type === TransactionType.MIGRATE_LIQUIDITY_V3 || info.type === TransactionType.CREATE_V3_POOL) {
       additionalFields = parseMigrateCreateV3(info, chainId, tokens)
+    } else if (info.type === TransactionType.ROLLEX_MIGRATION) {
+      additionalFields = {
+        descriptor: `${info.amount} PSYS`,
+        logos: ['/icons/logo_pegasys.svg'],
+      }
     }
 
     return { ...defaultFields, ...additionalFields }

src/components/AccountDrawer/MiniPortfolio/constants.ts

@@ -161,6 +161,11 @@ const TransactionTitleTable: { [key in TransactionType]: { [state in Transaction
     [TransactionStatus.Confirmed]: t`Removed`,
     [TransactionStatus.Failed]: t`Remove Gamma`,
   },
+  [TransactionType.ROLLEX_MIGRATION]: {
+    [TransactionStatus.Pending]: t`Migrating`,
+    [TransactionStatus.Confirmed]: t`Migrated`,
+    [TransactionStatus.Failed]: t`Migrate failed`,
+  },
 }
 const AlternateTransactionTitleTable: { [key in TransactionType]?: { [state in TransactionStatus]: string } } = {
   [TransactionType.WRAP]: {

src/components/Confetti/index.tsx

@@ -0,0 +1,32 @@
+import Confetti from 'react-confetti';
+
+import { useWindowSize } from '../../hooks/useWindowSize';
+
+// eslint-disable-next-line react/prop-types
+export default function Confettis({ start, variant }: { start: boolean; variant?: string }) {
+  const { width, height } = useWindowSize()
+
+  const _variant = variant ? variant : height && width && height > 1.5 * width ? 'bottom' : variant
+
+  return start && width && height ? (
+    <Confetti
+      style={{ zIndex: 9999 }}
+      numberOfPieces={400}
+      recycle={false}
+      run={true}
+      width={width}
+      height={height}
+      confettiSource={{
+        h: height,
+        w: width,
+        x: 0,
+        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5,
+      }}
+      initialVelocityX={20}
+      initialVelocityY={40}
+      gravity={0.45}
+      tweenDuration={100}
+      wind={0.05}
+    />
+  ) : null
+}

src/components/NavBar/index.tsx

@@ -10,10 +10,13 @@ import { Row } from 'nft/components/Flex'
 import { PegasysIcon } from 'nft/components/icons'
 import { useProfilePageState } from 'nft/hooks'
 import { ProfilePageStateType } from 'nft/types'
+import { rgb } from 'polished'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import styled, { useTheme } from 'styled-components/macro'
+import { colors } from 'theme/colors'
+import { opacify } from 'theme/utils'
 
 import { Bag } from './Bag'
 import Blur from './Blur'
@@ -36,6 +39,21 @@ const NavBody = styled.div`
   gap: 5px;
 `
 
+const MigrationButton = styled.a`
+  text-decoration: none;
+  width: 100%;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  height: 40px;
+  background: linear-gradient(197deg, rgba(218, 225, 123, 0.8) 25%, rgba(189, 62, 120, 0.8) 89%);
+  color: ${({ theme }) => theme.white};
+  font-weight: 700;
+  font-size: 18px;
+  box-shadow: ${`0px 10px 24px ${opacify(24, rgb(218, 225, 123))}, 10px 0px 24px ${opacify(24, colors.magenta300)}`};
+`
+
 interface MenuItemProps {
   href: string
   id?: NavLinkProps['id']
@@ -162,6 +180,9 @@ const Navbar = ({ blur }: { blur: boolean }) => {
                 <SearchBar />
               </Box>
               {isNftPage && sellPageState !== ProfilePageStateType.LISTING && <Bag />}
+              <NavLink to="/migration" style={{ textDecoration: 'none' }}>
+                <MigrationButton>Migration</MigrationButton>
+              </NavLink>
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />

src/constants/addresses.ts

@@ -83,6 +83,9 @@ export const GAMMA_MASTERCHEF_ADDRESSES: AddressMap = {
   ...constructSameAddressMap('0x70e0461e476de1211d789e9ea4ec2d3bb126d16a'),
 }
 
+// Rollex address
+export const ROLLEX_MIGRATOR_ADDRESS = '0x8433cf2b4F36A92BeC0523a261589B5e1099C7d3'
+
 export const GAMMA_UNIPROXY_ADDRESSES: AddressMap = {
   ...constructSameAddressMap('0xFc13Ebe7FEB9595D70195E9168aA7F3acE153621'),
 }