Remove op-app from dapp-console (#436)

* move over address utils to dapp-console to help remove op-app

* remove op-app from dapp-console

apps/dapp-console/app/components/Badges/HexBadge.tsx

@@ -1,5 +1,5 @@
 import { LONG_DURATION } from '@/app/constants/toast'
-import { shortenHex } from '@eth-optimism/op-app'
+import { shortenHex } from '@/app/utils/address'
 import { Badge, toast } from '@eth-optimism/ui-components'
 import { useCallback } from 'react'
 import { Hex } from 'viem'

apps/dapp-console/app/settings/components/ClaimRebateDialog.tsx

@@ -11,7 +11,7 @@ import { Text } from '@eth-optimism/ui-components/src/components/ui/text/text'
 import { Hash } from 'viem'
 import { useCallback, useMemo, useState } from 'react'
 import { MAX_CLAIMABLE_AMOUNT } from '@/app/constants/rebate'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import Link from 'next/link'
 import { ApiError, Contract } from '@/app/types/api'
 import { Network } from '@/app/components/Network'

apps/dapp-console/app/settings/components/ClaimedRebates.tsx

@@ -7,7 +7,7 @@ import {
 } from '@eth-optimism/ui-components'
 
 import { Text } from '@eth-optimism/ui-components/src/components/ui/text/text'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import { RiArrowRightSLine } from '@remixicon/react'
 import Link from 'next/link'
 import { apiClient } from '@/app/helpers/apiClient'

apps/dapp-console/app/settings/components/LinkedWallet.tsx

@@ -1,4 +1,4 @@
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import {
   Dialog,
   DialogContent,

apps/dapp-console/app/settings/contracts/DeleteContractDialog/DeleteContractContent.tsx

@@ -1,5 +1,5 @@
 import { Contract } from '@/app/types/api'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import { Button, DialogHeader, Text } from '@eth-optimism/ui-components'
 import { RiLoader4Line } from '@remixicon/react'
 

apps/dapp-console/app/settings/contracts/DeleteContractDialog/index.tsx

@@ -1,7 +1,7 @@
 import { apiClient } from '@/app/helpers/apiClient'
 import { captureError } from '@/app/helpers/errorReporting'
 import { Contract } from '@/app/types/api'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import { Dialog, DialogContent, toast } from '@eth-optimism/ui-components'
 import { useCallback, useState } from 'react'
 import { DialogContractContent } from '@/app/settings/contracts/DeleteContractDialog/DeleteContractContent'

apps/dapp-console/app/settings/contracts/DeployedAppContract.tsx

@@ -12,7 +12,7 @@ import { useCallback, useMemo } from 'react'
 import { LONG_DURATION } from '@/app/constants/toast'
 import { EligibleForRebateBadge } from '@/app/settings/components/EligibleForRebateBadge'
 import { NotEligibleForRebateBadge } from '@/app/settings/components/NotEligibleForRebateBadge'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import { usePrivy } from '@privy-io/react-auth'
 import { NeedsVerificationBadge } from '@/app/settings/components/NeedsVerificationBadge'
 import { apiClient } from '@/app/helpers/apiClient'

apps/dapp-console/app/settings/contracts/StartVerificationDialog/BeginContent.tsx

@@ -13,7 +13,7 @@ import {
   ToastAction,
   toast,
 } from '@eth-optimism/ui-components'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 import { apiClient } from '@/app/helpers/apiClient'
 import { captureError } from '@/app/helpers/errorReporting'
 import { RiLoader4Line } from '@remixicon/react'

apps/dapp-console/app/settings/contracts/StartVerificationDialog/VerifiedContent.tsx

@@ -8,7 +8,7 @@ import {
 } from '@eth-optimism/ui-components'
 import { useContractVerification } from '@/app/settings/contracts/StartVerificationDialog/ContractVerificationProvider'
 import { RiCheckboxCircleFill } from '@remixicon/react'
-import { shortenAddress } from '@eth-optimism/op-app'
+import { shortenAddress } from '@/app/utils/address'
 
 export const VerifiedContent = () => {
   const { contract } = useContractVerification()

apps/dapp-console/app/utils/address.ts

@@ -0,0 +1,27 @@
+export const shortenENSName = (
+  str: string,
+  maxLength: number | undefined = 13,
+) => {
+  if (str.length <= maxLength) {
+    return str
+  }
+
+  const lastDot = str.lastIndexOf('.')
+
+  if (lastDot < 0) {
+    throw new TypeError('Invalid input, not a valid domain')
+  }
+
+  const nonTld = str.slice(0, lastDot)
+  const tld = str.slice(lastDot + 1)
+
+  return `${nonTld.slice(0, 3)}...${nonTld.slice(-3)}.${tld}`
+}
+
+export function shortenHex(str: string) {
+  return str.substring(0, 6) + '...' + str.substring(str.length - 4)
+}
+
+export const shortenAddress = (address: string) => {
+  return address.includes('.') ? shortenENSName(address) : shortenHex(address)
+}

apps/dapp-console/package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@eth-optimism/dapp-console-api": "workspace:^",
-    "@eth-optimism/op-app": "workspace:*",
     "@eth-optimism/ui-components": "workspace:*",
     "@growthbook/growthbook-react": "^0.24.0",
     "@hookform/resolvers": "^3.3.4",