allow unstake using dex

Phala-Network · Jan 20, 2025 · 6ee18c7 · 6ee18c7
1 parent c48f346
commit 6ee18c7
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 45 deletions.
diff --git a/apps/app/components/Staking/Stake.tsx b/apps/app/components/Staking/Stake.tsx
@@ -23,6 +23,8 @@ import {
   Stack,
   Tab,
   Tabs,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
 } from '@mui/material'
 import {getDecimalPattern, toCurrency, trimAddress} from '@phala/lib'
@@ -42,6 +44,7 @@ const Stake = () => {
   const [tab, setTab] = useState(0)
   const isStake = tab === 0
   const isUnstake = tab === 1
+  const [useDex, setUseDex] = useState(false)
   const tokenContractAddress = useMemo(() => {
     if (isStake) {
       return PHA_CONTRACT_ADDRESS
@@ -242,7 +245,7 @@ const Stake = () => {
         component="form"
         alignItems="center"
         onSubmit={submit}
-        spacing={2}
+        gap={2}
         p={{xs: 2, md: 3}}
       >
         <Stack
@@ -251,7 +254,7 @@ const Stake = () => {
           width={1}
           alignItems="center"
           justifyContent="space-between"
-          height={79}
+          height={isStake ? 79 : 32}
         >
           <Stack direction="row" alignItems="center" spacing={2} py={2}>
             <Image
@@ -352,6 +355,23 @@ const Stake = () => {
           />
         </Box>
 
+        {isUnstake && (
+          <ToggleButtonGroup
+            fullWidth
+            size="small"
+            color="primary"
+            value={useDex ? 'dex' : 'unstake'}
+            exclusive
+            onChange={(_, value) => {
+              setUseDex(value === 'dex')
+            }}
+            sx={{marginTop: -1}}
+          >
+            <ToggleButton value="unstake">Unstake</ToggleButton>
+            <ToggleButton value="dex">Swap on DEX</ToggleButton>
+          </ToggleButtonGroup>
+        )}
+
         <Paper
           sx={(theme) => ({
             p: 2,
@@ -371,9 +391,11 @@ const Stake = () => {
             )}
             {isUnstake && (
               <Property size="small" fullWidth label="You will receive">
-                {assets != null
-                  ? `${toCurrency(formatUnits(assets, 18))} PHA`
-                  : '-'}
+                {useDex
+                  ? 'View on DEX'
+                  : assets != null
+                    ? `${toCurrency(formatUnits(assets, 18))} PHA`
+                    : '-'}
               </Property>
             )}
 
@@ -387,14 +409,18 @@ const Stake = () => {
 
             {isUnstake && (
               <Property size="small" fullWidth label="Exchange rate">
-                {shareRate != null
-                  ? `1 vPHA = ${toCurrency(formatUnits(shareRate, 18), 4)} PHA`
-                  : '-'}
+                {useDex
+                  ? 'View on DEX'
+                  : shareRate != null
+                    ? `1 vPHA = ${toCurrency(formatUnits(shareRate, 18), 4)} PHA`
+                    : '-'}
               </Property>
             )}
 
             <Property size="small" fullWidth label="Unstake period">
-              {unlockPeriod != null ? (
+              {isUnstake && useDex ? (
+                'Instant'
+              ) : unlockPeriod != null ? (
                 <Box component="span" sx={{textDecoration: 'underline dotted'}}>
                   {formatDuration(
                     intervalToDuration({start: 0, end: unlockPeriod}),
@@ -411,8 +437,6 @@ const Stake = () => {
           <Button
             size="large"
             fullWidth
-            sx={{mt: 2}}
-            type="submit"
             disabled={
               amount == null ||
               balance == null ||
@@ -422,11 +446,28 @@ const Stake = () => {
             }
             loading={isLoading}
             variant="contained"
+            {...(isUnstake && useDex
+              ? {
+                  href: `https://app.uniswap.org/swap?chain=mainnet&inputCurrency=${VAULT_CONTRACT_ADDRESS}&outputCurrency=${PHA_CONTRACT_ADDRESS}&value=${amountString}&field=input`,
+                  target: '_blank',
+                }
+              : {
+                  type: 'submit',
+                })}
           >
             {buttonErrorMessage == null &&
               isStake &&
               (needApprove ? 'Approve and stake' : 'Stake')}
-            {buttonErrorMessage == null && isUnstake && 'Request unstake'}
+            {buttonErrorMessage == null &&
+              isUnstake &&
+              (useDex ? (
+                <>
+                  Swap on DEX
+                  <OpenInNew sx={{width: 16, ml: 1}} />
+                </>
+              ) : (
+                'Request unstake'
+              ))}
             {buttonErrorMessage != null && buttonErrorMessage}
           </Button>
         </SwitchChainButton>

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -22,7 +22,7 @@
     "@mui/lab": "latest",
     "@mui/material": "^6.4.0",
     "@mui/material-nextjs": "^6.3.1",
-    "@mui/x-data-grid": "^7.23.6",
+    "@mui/x-data-grid": "^7.24.0",
     "@phala/lib": "workspace:*",
     "@phala/store": "workspace:*",
     "@polkadot/api": "^15.3.1",
@@ -33,8 +33,8 @@
     "@polkadot/util": "^13.3.1",
     "@rainbow-me/rainbowkit": "^2.2.2",
     "@talismn/connect-wallets": "^1.2.8",
-    "@tanstack/react-query": "^5.64.1",
-    "@tanstack/react-query-devtools": "^5.64.1",
+    "@tanstack/react-query": "^5.64.2",
+    "@tanstack/react-query-devtools": "^5.64.2",
     "ajv": "^8.17.1",
     "date-fns": "^4.1.0",
     "decimal.js": "^10.4.3",
@@ -44,8 +44,8 @@
     "jotai": "^2.11.0",
     "jotai-devtools": "^0.10.1",
     "mutative": "^1.1.0",
-    "next": "^15.1.4",
-    "notistack": "^3.0.1",
+    "next": "^15.1.5",
+    "notistack": "^3.0.2",
     "radash": "^12.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -55,12 +55,12 @@
     "recharts": "2.15.0",
     "sharp": "^0.33.5",
     "swr": "^2.3.0",
-    "viem": "^2.22.9",
+    "viem": "^2.22.10",
     "wagmi": "^2.14.8",
     "wretch": "^2.11.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^15.1.4",
+    "@next/bundle-analyzer": "^15.1.5",
     "@svgr/webpack": "^8.1.0",
     "@swc-jotai/debug-label": "^0.2.0",
     "@swc-jotai/react-refresh": "^0.3.0",