finish swap gas

rooch-network · Dec 17, 2024 · e66977d · e66977d
1 parent 9434460
commit e66977d
Show file tree

Hide file tree

Showing 26 changed files with 1,012 additions and 181 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sdk/typescript/rooch-sdk-kit/package.json b/sdk/typescript/rooch-sdk-kit/package.json
@@ -80,7 +80,8 @@
 		"size-limit": "^11.1.5",
 		"typescript": "^5.6.2",
 		"vite": "^5.4.4",
-		"vitest": "^2.1.0"
+		"vitest": "^2.1.0",
+		"decimal.js": "10.4.3"
 	},
 	"dependencies": {
 		"@roochnetwork/rooch-sdk": "workspace:*",

diff --git a/sdk/typescript/rooch-sdk-kit/src/components/addressDropdownMenu.tsx b/sdk/typescript/rooch-sdk-kit/src/components/addressDropdownMenu.tsx
@@ -1,29 +1,32 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
-
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import clsx from 'clsx'
+import { useCallback, useEffect, useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import * as styles from './addressDropdownMenu.css.js'
+
+import { Text } from './ui/Text.js'
+import { Button } from './ui/Button.js'
 import { ChevronIcon } from './icons/ChevronIcon.js'
 import { StyleMarker } from './styling/StyleMarker.js'
-import { Button } from './ui/Button.js'
-import { Text } from './ui/Text.js'
-import { useCurrentAddress, useRoochClient } from '../hooks/index.js'
 import { SessionModal } from './session-modal/SessionModal.js'
-import { useCallback, useEffect, useState } from 'react'
-import { useSubscribeOnRequest } from '../provider/globalProvider.js'
 import { FaucetModal } from './fauct-modal/FaucetModal.js'
+import { SwapGasModal } from './swap-gas-modal/SwapGasModal.js'
+
+import { useCurrentAddress, useRoochClient } from '../hooks/index.js'
+import { useSubscribeOnRequest } from '../provider/globalProvider.js'
 
 export function AddressDropdownMenu() {
   const address = useCurrentAddress()
   const [sessionOpen, setSessionOpen] = useState(false)
   const [faucetOpen, setFaucetOpen] = useState(false)
+  const [swapGasOpen, setSwapGasOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [progress, setProgress] = useState(0)
   const subscribeOnRequestSuccess = useSubscribeOnRequest()
   const client = useRoochClient()
-  const [rgasBalance, setRgasBalance] = useState(0)
+  const [rGasBalance, setRGasBalance] = useState(0)
 
   const getBalance = useCallback(() => {
     if (!address) {
@@ -35,7 +38,7 @@ export function AddressDropdownMenu() {
         coinType: '0x3::gas_coin::RGas',
       })
       .then((result) => {
-        setRgasBalance(result.fixedBalance)
+        setRGasBalance(result.fixedBalance)
       })
   }, [address, client])
 
@@ -45,12 +48,17 @@ export function AddressDropdownMenu() {
 
   useEffect(() => {
     const unsubscribe = subscribeOnRequestSuccess((status) => {
-      console.log(status)
-      if (status === 'requesting') {
-        startProgress()
-      } else {
-        getBalance()
-        setIsLoading(false)
+      switch (status) {
+        case 'requesting':
+          startProgress()
+          break
+        case 'error':
+          setIsLoading(false)
+          break
+        case 'success':
+          getBalance()
+          setIsLoading(false)
+          break
       }
     })
 
@@ -76,14 +84,15 @@ export function AddressDropdownMenu() {
     <>
       <SessionModal trigger={<></>} open={sessionOpen} onOpenChange={(v) => setSessionOpen(v)} />
       <FaucetModal trigger={<></>} open={faucetOpen} onOpenChange={(v) => setFaucetOpen(v)} />
+      <SwapGasModal trigger={<></>} open={swapGasOpen} onOpenChange={(v) => setSwapGasOpen(v)} />
       <DropdownMenu.Root modal={false}>
         <StyleMarker>
           <DropdownMenu.Trigger asChild>
             <div style={{ position: 'relative', display: 'inline-block' }}>
               <Button variant={'outline'} className={styles.connectedAddress}>
                 <div className={styles.addressContainer}>
                   <Text mono>{address?.toShortStr() || ''}</Text>
-                  <Text className={styles.rgasBalance}>{`RGAS: ${rgasBalance.toFixed(4)}`}</Text>
+                  <Text className={styles.rgasBalance}>{`RGAS: ${rGasBalance.toFixed(4)}`}</Text>
                 </div>
                 <ChevronIcon />
                 {isLoading && (
@@ -99,18 +108,26 @@ export function AddressDropdownMenu() {
               <DropdownMenu.Item
                 className={clsx(styles.menuItem, styles.switchMenuItem)}
                 onSelect={() => {
-                  setSessionOpen(true)
+                  setFaucetOpen(true)
                 }}
               >
-                <Text mono>Sessions Manager</Text>
+                <Text mono>Faucet</Text>
               </DropdownMenu.Item>
               <DropdownMenu.Item
                 className={clsx(styles.menuItem, styles.switchMenuItem)}
                 onSelect={() => {
-                  setFaucetOpen(true)
+                  setSwapGasOpen(true)
                 }}
               >
-                <Text mono>Faucet</Text>
+                <Text mono>Swap RGas</Text>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                className={clsx(styles.menuItem, styles.switchMenuItem)}
+                onSelect={() => {
+                  setSessionOpen(true)
+                }}
+              >
+                <Text mono>Sessions Manager</Text>
               </DropdownMenu.Item>
             </DropdownMenu.Content>
           </StyleMarker>

diff --git a/sdk/typescript/rooch-sdk-kit/src/components/fauct-modal/FaucetModal.tsx b/sdk/typescript/rooch-sdk-kit/src/components/fauct-modal/FaucetModal.tsx
@@ -31,7 +31,7 @@ type UncontrolledModalProps = {
   defaultOpen?: boolean
 }
 
-type ConnectModalProps = {
+type FaucetModalProps = {
   /** The trigger button that opens the dialog. */
   trigger: NonNullable<ReactNode>
   inviter?: string
@@ -43,7 +43,7 @@ export function FaucetModal({
   open,
   defaultOpen,
   onOpenChange,
-}: ConnectModalProps) {
+}: FaucetModalProps) {
   const [isModalOpen, setModalOpen] = useState(open ?? defaultOpen)
 
   const handleOpenChange = (open: boolean) => {

diff --git a/sdk/typescript/rooch-sdk-kit/src/components/fauct-modal/env.ts b/sdk/typescript/rooch-sdk-kit/src/components/fauct-modal/env.ts
@@ -28,5 +28,3 @@ export const ENVS = {
     },
   },
 }
-
-
diff --git a/sdk/typescript/rooch-sdk-kit/src/components/icons/BitcoinIcon.tsx b/sdk/typescript/rooch-sdk-kit/src/components/icons/BitcoinIcon.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+
+import { ComponentProps } from 'react'
+
+export function BitcoinIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      width="24"
+      height="24"
+      version="1.1"
+      shapeRendering="geometricPrecision"
+      textRendering="geometricPrecision"
+      imageRendering="optimizeQuality"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      viewBox="0 0 4091.27 4091.73"
+      {...props}
+    >
+      <g id="Layer_x0020_1">
+        <metadata id="CorelCorpID_0Corel-Layer" />
+        <g id="_1421344023328">
+          <path
+            fill="#F7931A"
+            fillRule="nonzero"
+            d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"
+          />
+          <path
+            fill="white"
+            fillRule="nonzero"
+            d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
diff --git a/sdk/typescript/rooch-sdk-kit/src/components/icons/RGasIcon.tsx b/sdk/typescript/rooch-sdk-kit/src/components/icons/RGasIcon.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+
+import { ComponentProps } from 'react'
+
+export function RGasIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={24} // Set default width
+      height={24} // Set default height
+      {...props}
+    >
+      <circle
+        cx="250"
+        cy="250"
+        r="250"
+        fill="#b2ff04" // Inline styling for circle fill
+      />
+      <path
+        fill="#006840" // Inline styling for path fill
+        d="M346.39,403.15c-26.17-23.18-51.58-45.69-77.73-68.86-.13,2.58-.28,4.18-.29,5.77-.19,30.24-.36,60.48-.54,90.73q-.04,6.48-6.74,6.45c-8.78-.05-17.57-.27-26.35-.07-3.46,.08-4.36-.83-4.32-4.3,.33-31.62,.46-63.23,.64-94.85,0-1.05,.01-2.09,.02-4.12-26.46,22.99-52.29,45.44-78.06,67.84-1.6-.72-.96-1.95-.96-2.88,.04-14.97,.2-29.94,.17-44.9,0-2.36,.75-3.86,2.52-5.42,28.99-25.57,57.91-51.22,86.85-76.84,.67-.59,1.45-1.07,2.4-1.76-1.89-1.66-3.64-1.09-5.18-1.1-27.12-.2-54.24-.43-81.36-.41-3.91,0-4.88-1.05-4.74-4.83,.34-9.46,.42-18.94,.16-28.4-.11-3.83,1.29-4.39,4.68-4.35,26.96,.28,53.93,.38,80.9,.54,1.68,0,3.37,.02,5.83,.03-2.08-3.59-5.06-5.5-7.53-7.74-27-24.56-54.06-49.05-81.17-73.49-1.49-1.35-2.15-2.64-2.13-4.66,.17-16.03,.23-32.07,.33-49.24,26.24,23.34,51.86,46.12,78.27,69.61,.01-2.46,.02-4.06,.03-5.65,.18-31.01,.43-62.01,.45-93.02,0-3.71,1.1-4.55,4.65-4.44,9.39,.29,18.8,.42,28.19,.14,4.06-.12,4.69,1.28,4.65,4.93-.33,30.7-.44,61.4-.62,92.1,0,1.63-.02,3.27-.04,6.19,26.52-23.13,52.16-45.5,77.98-68.01,1.04,1.6,.64,2.99,.64,4.27-.05,13.9-.29,27.8-.13,41.7,.05,3.86-1.14,6.41-4.05,8.97-28.31,24.95-56.48,50.05-84.69,75.1-.78,.69-1.52,1.41-2.45,2.27,1.66,1.71,3.6,1.03,5.27,1.04,26.96,.21,53.93,.41,80.9,.44,3.42,0,4.77,.6,4.62,4.41-.37,9.61-.37,19.24-.19,28.86,.06,3.38-.77,4.35-4.31,4.31-27.12-.32-54.24-.4-81.36-.56-1.64,0-3.28-.02-6.14-.04,8.77,7.94,16.64,15.09,24.54,22.22,21.63,19.52,43.26,39.04,64.91,58.53,1.08,.97,1.81,1.89,1.8,3.46-.14,16.32-.22,32.64-.32,50.05Z"
+      />
+    </svg>
+  )
+}
diff --git a/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/SwapGasModal.css.ts b/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/SwapGasModal.css.ts
@@ -0,0 +1,124 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css'
+
+import { themeVars } from '../../themes/themeContract.js'
+
+export const overlay = style({
+  backgroundColor: themeVars.backgroundColors.modalOverlay,
+  backdropFilter: themeVars.blurs.modalOverlay,
+  position: 'fixed',
+  inset: 0,
+  zIndex: 999999999,
+})
+
+export const title = style({
+  paddingLeft: 8,
+})
+
+export const content = style({
+  backgroundColor: themeVars.backgroundColors.modalPrimary,
+  borderRadius: themeVars.radii.xlarge,
+  color: themeVars.colors.body,
+  position: 'fixed',
+  bottom: 16,
+  left: 16,
+  right: 16,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  overflow: 'hidden',
+  minHeight: '50vh',
+  maxHeight: '85vh',
+  maxWidth: 700,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      flexDirection: 'row',
+      width: '100%',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+    },
+  },
+})
+
+export const whatIsASessionButton = style({
+  backgroundColor: themeVars.backgroundColors.modalSecondary,
+  padding: 16,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      display: 'none',
+    },
+  },
+})
+
+export const viewContainer = style({
+  display: 'none',
+  padding: 20,
+  flexGrow: 1,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      display: 'flex',
+    },
+  },
+})
+
+export const selectedViewContainer = style({
+  display: 'flex',
+})
+
+export const backButtonContainer = style({
+  position: 'absolute',
+  top: 20,
+  left: 20,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      display: 'none',
+    },
+  },
+})
+
+export const closeButtonContainer = style({
+  position: 'absolute',
+  top: 16,
+  right: 16,
+})
+
+export const sessionListContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  gap: 24,
+  padding: 20,
+  backgroundColor: themeVars.backgroundColors.modalPrimary,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      backgroundColor: themeVars.backgroundColors.modalSecondary,
+    },
+  },
+})
+
+export const sessionListContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flexGrow: 1,
+  '@media': {
+    'screen and (min-width: 768px)': {
+      flexDirection: 'row',
+      flexBasis: 240,
+      flexGrow: 0,
+      flexShrink: 0,
+    },
+  },
+})
+
+export const sessionListContainerWithViewSelected = style({
+  display: 'none',
+  '@media': {
+    'screen and (min-width: 768px)': {
+      display: 'flex',
+    },
+  },
+})
diff --git a/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/SwapGasModal.tsx b/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/SwapGasModal.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+
+import { ReactNode } from 'react'
+import { SwapGasView } from './views/SwapGasView.js'
+import { ControlledModalAProps, Modal } from '../ui/Modal.js'
+
+export type SwapGasModalProps = {
+  /** The trigger button that opens the dialog. */
+  trigger: NonNullable<ReactNode>
+} & ControlledModalAProps
+
+export function SwapGasModal({ trigger, open, defaultOpen, onOpenChange }: SwapGasModalProps) {
+  return (
+    <Modal trigger={trigger} open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      <SwapGasView />
+    </Modal>
+  )
+}
diff --git a/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/env.ts b/sdk/typescript/rooch-sdk-kit/src/components/swap-gas-modal/env.ts
@@ -0,0 +1,12 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+export const MarketEev = {
+  main: {
+    marketCA: '0x701c21bf1c8cd5af8c42983890d8ca55e7a820171b8e744c13f2d9998bf76cc3',
+    btcGasAddress: 'bc1prcajaj9n7e29u4dfp33x3hcf52yqeegspdpcd79pqu4fpr6llx4sugkfjt',
+  },
+  test: {
+    marketCA: '0x701c21bf1c8cd5af8c42983890d8ca55e7a820171b8e744c13f2d9998bf76cc3',
+    btcGasAddress: 'tb1prcajaj9n7e29u4dfp33x3hcf52yqeegspdpcd79pqu4fpr6llx4stqqxgy',
+  },
+}