Merge branch 'mochi-web-preview'

.changeset/cuddly-bears-push.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/theme": minor
+---
+
+Fix table header style

.changeset/silver-dryers-bathe.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/theme": minor
+---
+
+Fix ContentEditable style

.github/workflows/deploy-mochi-web-beta.yml

@@ -0,0 +1,19 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  release:
+    types: [prereleased]
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Merge to Preview
+        uses: devmasx/merge-branch@master
+        with:
+          type: now
+          from_branch: mochi-web-preview
+          target_branch: mochi-web-preview-release
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-mochi-web-prod.yml

@@ -0,0 +1,20 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  workflow_dispatch:
+  release:
+    types: [released]
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Merge to Prod
+        uses: devmasx/merge-branch@master
+        with:
+          type: now
+          from_branch: main
+          target_branch: mochi-web-prod
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-web.yaml

@@ -0,0 +1,40 @@
+name: Release web
+
+on:
+  push:
+    branches:
+      - cicd
+      - main
+      - mochi-web-preview
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  release-web:
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    name: release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3 # v3
+        with:
+          fetch-depth: 0 # to be able to checkout any commit
+          persist-credentials: false # <--- this
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 6.32.9
+      - uses: actions/setup-node@v3 # v3
+        with:
+          cache: pnpm
+          node-version: 18
+      - name: Install dependencies
+        run: pnpm install
+      # pinned version updated automatically by Renovate.
+      # details at https://semantic-release.gitbook.io/semantic-release/usage/installation#global-installation
+      - run: pnpm dlx semantic-release@21.0.2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_PAT }}

.releaserc

@@ -0,0 +1,32 @@
+{
+  "branches": [
+    "main",
+    {
+      "name": "mochi-web-preview",
+      "prerelease": "rc"
+    },
+    {
+      "name": "cicd",
+      "prerelease": "ci"
+    }
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false,
+        "pkgRoot": "apps/mochi-web"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "successComment": false
+      }
+    ],
+    ["@semantic-release/git", {
+      "assets": ["apps/mochi-web/package.json"]
+    }]
+  ]
+}

Makefile

@@ -0,0 +1,25 @@
+RELEASE_BRANCH=main
+BETA_BRANCH=mochi-web-preview
+DEVELOP_BRANCH=develop
+
+.PHONY: release
+release: 
+	git checkout $(BETA_BRANCH) && git pull origin $(BETA_BRANCH) && \
+		git checkout $(RELEASE_BRANCH) && git pull origin $(RELEASE_BRANCH) && \
+		git merge $(BETA_BRANCH) --no-edit --no-ff && \
+		git push origin $(RELEASE_BRANCH) && \
+		git checkout $(DEVELOP_BRANCH)
+
+.PHONY: release-preview
+release-preview: sync-release
+	git checkout $(DEVELOP_BRANCH) && git pull origin $(DEVELOP_BRANCH) && \
+		git checkout $(BETA_BRANCH) && git pull origin $(BETA_BRANCH) && \
+		git merge $(DEVELOP_BRANCH) --no-edit --no-ff && \
+		git push origin $(BETA_BRANCH) && \
+		git checkout $(DEVELOP_BRANCH) && git push origin $(DEVELOP_BRANCH)
+
+.PHONY: sync-release
+sync-release:
+	git checkout $(RELEASE_BRANCH) && git pull origin $(RELEASE_BRANCH) && \
+		git checkout $(BETA_BRANCH) && git pull origin $(BETA_BRANCH) && \
+		git merge $(RELEASE_BRANCH) --no-edit --no-ff

apps/mochi-web/components/DashboardLayout.tsx

@@ -19,7 +19,7 @@ import { ROUTES } from '~constants/routes'
 import clsx from 'clsx'
 import { LoginWidget, useLoginWidget } from '@mochi-web3/login-widget'
 import { appVersion } from '~constants/common'
-import { useTheme } from '~context/theme'
+import { useTheme } from '~hooks/useTheme'
 import { useSidebarContext } from '../context/app/sidebar'
 import { matchUrl } from '../utils/url'
 import { DashboardSkeleton } from './DashboardSkeleton'
@@ -50,7 +50,7 @@ export default function DashboardLayout({
   className,
 }: DashboardLayoutProps) {
   const { pathname, query } = useRouter()
-  const { theme } = useTheme()
+  const { activeTheme } = useTheme()
   const { isLoggedIn, isLoggingIn, isLoadingProfile } = useLoginWidget()
 
   const { variant } = useSidebarContext()
@@ -65,20 +65,23 @@ export default function DashboardLayout({
           type: 'link',
           as: Link,
           href: ROUTES.MY_PROFILE,
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
         {
           title: 'Servers',
           Icon: Discord,
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
         {
           title: 'Settings',
           type: 'link',
           Icon: GearSolid,
           as: Link,
           href: ROUTES.SETTINGS(),
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
         {
           title: 'Developer',
@@ -87,12 +90,14 @@ export default function DashboardLayout({
           as: Link,
           href: ROUTES.APPLICATON_LIST,
           badge: getSidebarBadge['NEW'],
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
         {
           title: 'Invite Friends',
           Icon: AddUserSolid,
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
       ],
       footerItems: [
@@ -125,15 +130,17 @@ export default function DashboardLayout({
           type: 'link',
           as: Link,
           href: ROUTES.APPLICATION_DETAIL.getPath(query?.id as string),
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
         {
           title: 'Revenue',
           Icon: SafeBoxSolid,
           type: 'link',
           as: Link,
           href: ROUTES.APPLICATION_DETAIL_REVENUE.getPath(query?.id as string),
-          selectedIconClassName: theme === 'dark' ? '!text-primary-500' : '',
+          selectedIconClassName:
+            activeTheme === 'dark' ? '!text-primary-500' : '',
         },
       ],
       footerItems: [],

apps/mochi-web/components/Header/DashboardMobileSidebar.tsx

@@ -31,7 +31,7 @@ import { useFetchChangelogLatest } from '~hooks/app/useFetchChangelogLatest'
 import { useSidebarContext } from '../../context/app/sidebar'
 import { ROUTES } from '../../constants/routes'
 import { MainSidebarHeader } from '../MainSidebarHeader'
-import { getSidebarBadge } from '../DashboardLayout'
+/* import { getSidebarBadge } from '../DashboardLayout' */
 import { DISCORD_LINK, TWITTER_LINK } from '../../envs'
 import { ApplicationDetailSidebarHeader } from '../ApplicationDetailSidebarHeader'
 import { matchUrl } from '../../utils/url'
@@ -74,10 +74,11 @@ export const DashboardMobileSidebar = (
           title: 'Developer',
           Icon: CodingSolid,
           type: 'link',
-          as: Link,
-          href: ROUTES.APPLICATON_LIST,
-          badge: getSidebarBadge['NEW'],
-          onClick: () => setIsSidebarOpen(false),
+          /* as: Link, */
+          /* href: ROUTES.APPLICATON_LIST, */
+          /* badge: getSidebarBadge['NEW'], */
+          /* onClick: () => setIsSidebarOpen(false), */
+          disabled: true,
         },
         {
           title: 'Invite Friends',

apps/mochi-web/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { isMobile } from '~utils/isMobile'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ROUTES } from '~constants/routes'
@@ -46,7 +45,6 @@ import {
   MoonLine,
   SunLine,
 } from '@mochi-ui/icons'
-import { useTheme } from '~context/theme'
 import NotificationList from '~cpn/NotificationList'
 import clsx from 'clsx'
 import { DISCORD_LINK, GITHUB_LINK, TELEGRAM_LINK } from '~envs'
@@ -56,6 +54,7 @@ import { LoginWidget, useLoginWidget } from '@mochi-web3/login-widget'
 import ProfileDropdown from '~cpn/ProfileDropdown'
 import NotificationModal from '~cpn/NotificationList/NotificationModal'
 import { useFetchChangelogLatest } from '~hooks/app/useFetchChangelogLatest'
+import { useTheme } from '~hooks/useTheme'
 import { MobileNavAccordionItem } from './MobileNavAccordionItem'
 import { DashboardMobileSidebar } from './DashboardMobileSidebar'
 import { useIsNavOpenStore } from './util'
@@ -390,11 +389,7 @@ export const Header = () => {
                 </Typography>
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="bg-white-pure"
-              sideOffset={20}
-              align="center"
-            >
+            <DropdownMenuContent sideOffset={20} align="center">
               <DropdownMenuItem
                 leftIcon={<CodingSolid />}
                 onClick={() => window.open(ROUTES.DOCS, '_blank')}
@@ -427,11 +422,7 @@ export const Header = () => {
                 </Typography>
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="bg-white-pure"
-              sideOffset={20}
-              align="center"
-            >
+            <DropdownMenuContent sideOffset={20} align="center">
               <DropdownMenuItem
                 leftIcon={<DiscordColored />}
                 onClick={() => window.open(DISCORD_LINK, '_blank')}
@@ -469,7 +460,7 @@ export const Header = () => {
             className="flex items-center -ml-4 w-px h-full"
             key="desktop-nav-divider"
           >
-            <div className="w-full h-6 bg-[#eeedec]" />
+            <div className="w-full h-6 bg-neutral-soft-active" />
           </div>,
           <IconButton
             label="dark/light mode toggle button"
@@ -551,9 +542,7 @@ export const Header = () => {
           <DesktopNav
             navItems={desktopNavItems}
             className={
-              isLoggedIn && profile && isMobile() && window.innerWidth <= 1024
-                ? '!flex'
-                : ''
+              isLoggedIn && profile && window.innerWidth <= 1024 ? '!flex' : ''
             }
           />
         </>

apps/mochi-web/components/MochiWidget/Recipient/Recipient.tsx

@@ -24,7 +24,7 @@ import {
 import { useDebounce } from '@dwarvesf/react-hooks'
 import { BottomSheet, useBottomSheetContext } from '~cpn/BottomSheet'
 import { useLoginWidget } from '@mochi-web3/login-widget'
-import { useTheme } from '~context/theme'
+import { useTheme } from '~hooks/useTheme'
 import { ChainPicker } from '../ChainPicker'
 import { Platform } from '../PlatformPicker/type'
 import { RecipientList } from './RecipientList'
@@ -63,7 +63,7 @@ export const Recipient: React.FC<RecipientProps> = ({
   onRemoveRecipient,
 }) => {
   const { isLoggedIn: authorized } = useLoginWidget()
-  const { theme } = useTheme()
+  const { activeTheme } = useTheme()
   const { openSheets, setOpenSheets } = useBottomSheetContext()
   const [searchTerm, setSearchTerm] = useState('')
   const [searchContactTerm, setSearchContactTerm] = useState('')
@@ -395,7 +395,7 @@ export const Recipient: React.FC<RecipientProps> = ({
           className="flex flex-col gap-y-2 justify-center items-center text-text-disabled"
           style={{ height: 84 }}
         >
-          {theme === 'dark' ? (
+          {activeTheme === 'dark' ? (
             <ProfileGuardSuccessDarkColoredLine className="w-10 h-10" />
           ) : (
             <ProfileGuardSuccessColoredLine className="w-10 h-10" />