[portal]: ui improvements (rooch-network#1659)

* chore: comment the session guard

* refactor: get assets using SDK

* feat: add pagination component on BTC page

* feat: add pagination component on Ordi page

* feat: add pagination component on NFT page

* feat: add some comments

* chore: uncomment the SDK functionalities

* chore: uncomment the SDK functionalities on indexed-assets-ordi.tsx

* refactor: add transfer modal and pagination on assets-coin.tsx

* refactor: add pagination on indexed-assets-btc.tsx

* refactor: add pagination on indexed-assets-ordi.tsx

* feat: update next page logic on the custom-pagination.tsx

* feat: update next page logic on the assets-nft.tsx

* feat: add loading component for assets page

* feat: add loading component for assets-nft.tsx

* feat: update gitignore

* chore: change the sdk usage on package.json

* chore: update .gitignore

* chore: update the pnpm-lock.yaml

* chore: fix the type bugs on Session modal

* chore: fix some import bugs on asset-coin.tsx

rooch-portal-v1/.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 script/nohup.out
+
+# script logs
+.script/nohup.out

rooch-portal-v1/src/components/custom-pagination.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination.tsx'
+
+interface PaginationComponentProps {
+  currentPage: number
+  hasNextPage: boolean
+  onPageChange: (page: number) => void
+}
+
+const PaginationComponent: React.FC<PaginationComponentProps> = ({
+  currentPage,
+  hasNextPage,
+  onPageChange,
+}) => {
+  return (
+    <Pagination className="mt-6 justify-end">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            onClick={() => currentPage > 0 && onPageChange(currentPage - 1)}
+            className={`cursor-pointer border-none hover:bg-inherit ${
+              currentPage <= 0 ? 'text-gray-500 cursor-not-allowed hover:text-gray-500' : ''
+            }`}
+            isActive={currentPage <= 0}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink
+            href="#"
+            onClick={() => onPageChange(currentPage)}
+            isActive={true}
+            className="cursor-pointer"
+          >
+            {currentPage + 1}
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            onClick={() => currentPage > 0 && onPageChange(currentPage + 1)}
+            className={`cursor-pointer border-none hover:bg-inherit ${
+              !hasNextPage ? 'text-gray-500 cursor-not-allowed hover:text-gray-500' : ''
+            }`}
+            isActive={hasNextPage}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+export default PaginationComponent

rooch-portal-v1/src/components/session-key-modal.tsx

@@ -3,12 +3,12 @@
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { useState } from 'react'
-import { RoochSessionAccount } from '@roochnetwork/rooch-sdk'
 
 interface SessionKeyModalProps {
   isOpen: boolean
   scopes: string[]
-  onAuthorize: () => Promise<RoochSessionAccount | null>
+  // onAuthorize: () => Promise<RoochSessionAccount | null>
+  onAuthorize: () => void
 }
 
 export const SessionKeyModal: React.FC<SessionKeyModalProps> = ({
@@ -20,7 +20,7 @@ export const SessionKeyModal: React.FC<SessionKeyModalProps> = ({
 
   const onAuthorizeWrapper = async () => {
     setLoading(true)
-    await onAuthorize()
+    onAuthorize()
     setLoading(false)
   }
 

rooch-portal-v1/src/components/ui/textarea.tsx

@@ -1,24 +1,25 @@
-import * as React from "react"
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         ref={ref}
         {...props}
       />
     )
-  }
+  },
 )
-Textarea.displayName = "Textarea"
+Textarea.displayName = 'Textarea'
 
 export { Textarea }

rooch-portal-v1/src/guard/session.tsx

@@ -43,7 +43,7 @@ export const SessionGuard = (props: SessionGuardProps) => {
   }, [isConnected, s, sessionKey])
 
   const handleAuth = async () => {
-    return createSessionKey({
+    await createSessionKey({
       appName: 'rooch-protal',
       appUrl: 'protal.rooch.network',
       scopes: defaultScope,