frontend-greeting-next: Refactored the frontend-greeting-next package…

… to have all app-specific logic inside one folder - /dapp which means app domain.

packages/frontend-greeting-next/src/app/components/NetworkSupportChecker.tsx

@@ -2,7 +2,7 @@
 
 import { useCurrentAccount } from '@mysten/dapp-kit'
 import useNetworkType from '@suiware/kit/useNetworkType'
-import { isNetworkSupported, supportedNetworks } from '../helpers/networks'
+import { isNetworkSupported, supportedNetworks } from '../helpers/network'
 
 const NetworkSupportChecker = () => {
   const { networkType } = useNetworkType()

packages/frontend-greeting-next/src/app/components/layout/Footer.tsx

@@ -7,8 +7,8 @@ import { HeartIcon, SearchIcon } from 'lucide-react'
 import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   EXPLORER_URL_VARIABLE_NAME,
-} from '../../config/networks'
-import { packageUrl } from '../../helpers/networks'
+} from '../../config/network'
+import { packageUrl } from '../../helpers/network'
 import { notification } from '../../helpers/notification'
 import useNetworkConfig from '../../hooks/useNetworkConfig'
 import ThemeSwitcher from '../ThemeSwitcher'

packages/frontend-greeting-next/src/app/config/networks.ts → packages/frontend-greeting-next/src/app/config/network.ts

@@ -19,7 +19,6 @@ export const TESTNET_EXPLORER_URL = 'https://testnet.suivision.xyz'
 export const MAINNET_EXPLORER_URL = 'https://suivision.xyz'
 
 export const CONTRACT_PACKAGE_VARIABLE_NAME = 'contractPackageId'
-export const CONTRACT_MODULE_NAME = 'greeting'
 
 export const EXPLORER_URL_VARIABLE_NAME = 'explorerUrl'
 

packages/frontend-greeting-next/src/app/components/Emoji.tsx → packages/frontend-greeting-next/src/app/dapp/components/Emoji.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { numToAnimalEmoji } from '../helpers/greeting/misc'
+import { numToAnimalEmoji } from '~~/dapp/helpers/misc'
 
 // Animal emojis are represented by the range [1F400-1F43F] https://apps.timwhitlock.info/unicode/inspect/hex/1F400-1F43F
 // The corresponding demo Move package chooses a number from the range [1,64] randomly,

packages/frontend-greeting-next/src/app/components/GreetingForm.tsx → packages/frontend-greeting-next/src/app/dapp/components/GreetingForm.tsx

@@ -6,27 +6,27 @@ import { Button, TextField } from '@radix-ui/themes'
 import useTransact from '@suiware/kit/useTransact'
 import Image from 'next/image'
 import { ChangeEvent, FC, MouseEvent, PropsWithChildren, useState } from 'react'
-import CustomConnectButton from '../components/CustomConnectButton'
-import AnimalEmoji from '../components/Emoji'
-import Loading from '../components/Loading'
+import CustomConnectButton from '~~/components/CustomConnectButton'
+import Loading from '~~/components/Loading'
 import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   EXPLORER_URL_VARIABLE_NAME,
-} from '../config/networks'
-import {
-  getResponseContentField,
-  getResponseDisplayField,
-  getResponseObjectId,
-} from '../helpers/greeting/misc'
+} from '~~/config/network'
+import AnimalEmoji from '~~/dapp/components/Emoji'
 import {
   prepareCreateGreetingTransaction,
   prepareResetGreetingTransaction,
   prepareSetGreetingTransaction,
-} from '../helpers/greeting/transactions'
-import { transactionUrl } from '../helpers/networks'
-import { notification } from '../helpers/notification'
-import useNetworkConfig from '../hooks/useNetworkConfig'
-import useOwnGreeting from '../hooks/useOwnGreeting'
+} from '~~/dapp/helpers/transactions'
+import useOwnGreeting from '~~/dapp/hooks/useOwnGreeting'
+import {
+  getResponseContentField,
+  getResponseDisplayField,
+  getResponseObjectId,
+  transactionUrl,
+} from '~~/helpers/network'
+import { notification } from '~~/helpers/notification'
+import useNetworkConfig from '~~/hooks/useNetworkConfig'
 
 const GreetingForm = () => {
   const [name, setName] = useState<string>('')

packages/frontend-greeting-next/src/app/dapp/config/network.ts

@@ -0,0 +1 @@
+export const CONTRACT_MODULE_NAME = 'greeting'

packages/frontend-greeting-next/src/app/dapp/helpers/misc.ts

@@ -0,0 +1,15 @@
+/**
+ * Convert the numeric emoji index to the unicode representation of the corresponding animal emoji.
+ *
+ * Animal emojis are represented by the range [1F400-1F43F] https://apps.timwhitlock.info/unicode/inspect/hex/1F400-1F43F
+ * The corresponding demo Move package chooses a number from the range [1,64] randomly,
+ * and we convert it to the corresponding animal emoji.
+ *
+ * @param index
+ * @returns
+ */
+export const numToAnimalEmoji = (index: number) => {
+  const lowestRangeCode = Number('0x1F400')
+  const codePoint = lowestRangeCode + (index - 1)
+  return String.fromCodePoint(codePoint)
+}

packages/frontend-greeting-next/src/app/helpers/greeting/transactions.ts → packages/frontend-greeting-next/src/app/dapp/helpers/transactions.ts

@@ -1,5 +1,5 @@
 import { Transaction } from '@mysten/sui/transactions'
-import { fullFunctionName } from './misc'
+import { fullFunctionName } from '~~/helpers/network'
 
 export const prepareCreateGreetingTransaction = (
   packageId: string

packages/frontend-greeting-next/src/app/hooks/useOwnGreeting.tsx → packages/frontend-greeting-next/src/app/dapp/hooks/useOwnGreeting.tsx

@@ -1,7 +1,7 @@
 import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit'
-import { CONTRACT_PACKAGE_VARIABLE_NAME } from '../config/networks'
-import { fullStructName } from '../helpers/greeting/misc'
-import useNetworkConfig from './useNetworkConfig'
+import { CONTRACT_PACKAGE_VARIABLE_NAME } from '~~/config/network'
+import { fullStructName } from '~~/helpers/network'
+import useNetworkConfig from '~~/hooks/useNetworkConfig'
 
 const useOwnGreeting = () => {
   const currentAccount = useCurrentAccount()

packages/frontend-greeting-next/src/app/helpers/greeting/misc.ts → packages/frontend-greeting-next/src/app/helpers/network.ts

@@ -1,6 +1,48 @@
 import { SuiObjectResponse } from '@mysten/sui/client'
 import { isValidSuiObjectId } from '@mysten/sui/utils'
-import { CONTRACT_MODULE_NAME } from '../../config/networks'
+import { CONTRACT_PACKAGE_ID_NOT_DEFINED } from '~~/config/network'
+import { CONTRACT_MODULE_NAME } from '~~/dapp/config/network'
+import { ENetwork } from '~~/types/ENetwork'
+
+export const transactionUrl = (baseExplorerUrl: string, txDigest: string) => {
+  return `${baseExplorerUrl}/txblock/${txDigest}`
+}
+export const packageUrl = (baseExplorerUrl: string, packageId: string) => {
+  // Local explorer doesn't have a package view, so we stick with object view instead.
+  const subpath =
+    baseExplorerUrl.search('localhost') === -1 ? 'package' : 'object'
+
+  return `${baseExplorerUrl}/${subpath}/${packageId}`
+}
+
+export const formatNetworkType = (machineName: string) => {
+  if (machineName.startsWith('sui:')) {
+    return machineName.substring(4)
+  }
+  return machineName
+}
+
+export const supportedNetworks = () => {
+  const keys = Object.keys(ENetwork)
+
+  return (
+    keys
+      .filter(
+        (key: string) =>
+          process.env[`NEXT_PUBLIC_${key.toUpperCase()}_CONTRACT_PACKAGE_ID`] !=
+            null &&
+          process.env[
+            `NEXT_PUBLIC_${key.toUpperCase()}_CONTRACT_PACKAGE_ID`
+          ] !== CONTRACT_PACKAGE_ID_NOT_DEFINED
+      )
+      // @ts-expect-error Hard to type cast string->ENetwork here.
+      .map((key: string) => ENetwork[key as ENetwork])
+  )
+}
+
+export const isNetworkSupported = (network: ENetwork | undefined) => {
+  return supportedNetworks().includes(network)
+}
 
 export const fullFunctionName = (
   packageId: string,
@@ -89,22 +131,6 @@ export const getResponseObjectId = (
   return objectId
 }
 
-/**
- * Convert the numeric emoji index to the unicode representation of the corresponding animal emoji.
- *
- * Animal emojis are represented by the range [1F400-1F43F] https://apps.timwhitlock.info/unicode/inspect/hex/1F400-1F43F
- * The corresponding demo Move package chooses a number from the range [1,64] randomly,
- * and we convert it to the corresponding animal emoji.
- *
- * @param index
- * @returns
- */
-export const numToAnimalEmoji = (index: number) => {
-  const lowestRangeCode = Number('0x1F400')
-  const codePoint = lowestRangeCode + (index - 1)
-  return String.fromCodePoint(codePoint)
-}
-
 const fullModuleName = (packageId: string): `${string}::${string}` => {
   return `${packageId}::${CONTRACT_MODULE_NAME}`
 }

packages/frontend-greeting-next/src/app/hooks/useNetworkConfig.tsx

@@ -11,7 +11,7 @@ import {
   MAINNET_EXPLORER_URL,
   TESTNET_CONTRACT_PACKAGE_ID,
   TESTNET_EXPLORER_URL,
-} from '../config/networks'
+} from '../config/network'
 import { ENetwork } from '../types/ENetwork'
 
 const useNetworkConfig = () => {

packages/frontend-greeting-next/src/app/page.tsx

@@ -1,4 +1,4 @@
-import GreetingForm from './components/GreetingForm'
+import GreetingForm from '~~/dapp/components/GreetingForm'
 import NetworkSupportChecker from './components/NetworkSupportChecker'
 
 export default function Home() {

packages/frontend/src/components/layout/Footer.tsx

@@ -6,7 +6,7 @@ import ThemeSwitcher from '~~/components/ThemeSwitcher'
 import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   EXPLORER_URL_VARIABLE_NAME,
-} from '~~/config/networks'
+} from '~~/config/network'
 import { packageUrl } from '~~/helpers/network'
 import { notification } from '~~/helpers/notification'
 import useNetworkConfig from '~~/hooks/useNetworkConfig'

packages/frontend/src/dapp/components/GreetingForm.tsx

@@ -8,7 +8,7 @@ import Loading from '~~/components/Loading'
 import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   EXPLORER_URL_VARIABLE_NAME,
-} from '~~/config/networks'
+} from '~~/config/network'
 import AnimalEmoji from '~~/dapp/components/Emoji'
 import {
   prepareCreateGreetingTransaction,

packages/frontend/src/dapp/hooks/useOwnGreeting.tsx

@@ -1,5 +1,5 @@
 import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit'
-import { CONTRACT_PACKAGE_VARIABLE_NAME } from '~~/config/networks'
+import { CONTRACT_PACKAGE_VARIABLE_NAME } from '~~/config/network'
 import { fullStructName } from '~~/helpers/network'
 import useNetworkConfig from '~~/hooks/useNetworkConfig'
 

packages/frontend/src/helpers/network.ts

@@ -1,6 +1,6 @@
 import { SuiObjectResponse } from '@mysten/sui/client'
 import { isValidSuiObjectId } from '@mysten/sui/utils'
-import { CONTRACT_PACKAGE_ID_NOT_DEFINED } from '~~/config/networks'
+import { CONTRACT_PACKAGE_ID_NOT_DEFINED } from '~~/config/network'
 import { CONTRACT_MODULE_NAME } from '~~/dapp/config/network'
 import { ENetwork } from '~~/types/ENetwork'
 

packages/frontend/src/hooks/useNetworkConfig.tsx

@@ -11,7 +11,7 @@ import {
   MAINNET_EXPLORER_URL,
   TESTNET_CONTRACT_PACKAGE_ID,
   TESTNET_EXPLORER_URL,
-} from '~~/config/networks'
+} from '~~/config/network'
 import { ENetwork } from '~~/types/ENetwork'
 
 const useNetworkConfig = () => {