feat: Github PR creation

eslint.config.mjs

@@ -56,7 +56,7 @@ export default [
     },
 
     rules: {
-      'camelcase': ['error'],
+      camelcase: ['error'],
       'guard-for-in': ['error'],
       'import/no-cycle': ['error'],
       'import/no-self-import': ['error'],

next.config.js

@@ -1,17 +1,21 @@
 /** @type {import('next').NextConfig} */
 
-const { version } = require('./package.json')
-const { withSentryConfig } = require("@sentry/nextjs");
+const { version } = require('./package.json');
+const { withSentryConfig } = require('@sentry/nextjs');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
-})
+});
 
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production';
 
 // Sometimes useful to disable this during development
 const ENABLE_CSP_HEADER = true;
-const FRAME_SRC_HOSTS = ['https://*.walletconnect.com', 'https://*.walletconnect.org','https://*.solflare.com'];
-const STYLE_SRC_HOSTS = []
+const FRAME_SRC_HOSTS = [
+  'https://*.walletconnect.com',
+  'https://*.walletconnect.org',
+  'https://*.solflare.com',
+];
+const STYLE_SRC_HOSTS = [];
 const IMG_SRC_HOSTS = ['https://*.walletconnect.com', 'https://*.githubusercontent.com'];
 const cspHeader = `
   default-src 'self';
@@ -27,7 +31,9 @@ const cspHeader = `
   frame-ancestors 'none';
   ${!isDev ? 'block-all-mixed-content;' : ''}
   ${!isDev ? 'upgrade-insecure-requests;' : ''}
-`.replace(/\s{2,}/g, ' ').trim();
+`
+  .replace(/\s{2,}/g, ' ')
+  .trim();
 
 const securityHeaders = [
   {
@@ -54,8 +60,8 @@ const securityHeaders = [
           value: cspHeader,
         },
       ]
-    : [])
-]
+    : []),
+];
 
 const nextConfig = {
   webpack(config) {
@@ -72,27 +78,38 @@ const nextConfig = {
         source: '/(.*)',
         headers: securityHeaders,
       },
-    ]
+    ];
   },
 
   env: {
     NEXT_PUBLIC_VERSION: version,
   },
 
   reactStrictMode: true,
-}
+
+  experimental: {
+    optimizePackageImports: [
+      '@hyperlane-xyz/registry',
+      '@hyperlane-xyz/sdk',
+      '@hyperlane-xyz/utils',
+      '@hyperlane-xyz/widgets',
+      '@rainbow-me/rainbowkit',
+      '@solana/spl-token',
+    ],
+  },
+};
 
 const sentryOptions = {
-  org: "hyperlane",
-  project: "warp-ui",
+  org: 'hyperlane',
+  project: 'warp-ui',
   authToken: process.env.SENTRY_AUTH_TOKEN,
   hideSourceMaps: true,
-  tunnelRoute: "/monitoring-tunnel",
+  tunnelRoute: '/monitoring-tunnel',
   bundleSizeOptimizations: {
     excludeDebugStatements: true,
     excludeReplayIframe: true,
     excludeReplayShadowDom: true,
   },
 };
 
-module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));
+module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));

package.json

@@ -24,6 +24,7 @@
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
+    "@octokit/rest": "^22.0.0",
     "@rainbow-me/rainbowkit": "^2.2.0",
     "@sentry/nextjs": "^8.38.0",
     "@solana/spl-token": "^0.4.9",
@@ -44,6 +45,7 @@
     "ethers": "^5.8.0",
     "formik": "^2.4.6",
     "framer-motion": "^11.13.1",
+    "human-id": "^4.1.1",
     "next": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/toast/useToastError.tsx

@@ -7,7 +7,7 @@ export function useToastError(error: any, context: string, errorLength = 120) {
   useEffect(() => {
     if (!error) return;
     logger.error(context, error);
-    const errorMsg = errorToString(error, errorLength);
+    const errorMsg = error?.error?.message || errorToString(error, errorLength);
     toast.error(`${context}: ${errorMsg}`);
   }, [error, context, errorLength]);
 }

src/consts/config.server.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod';
+
+export const ServerConfigSchema = z.object({
+  githubForkOwner: z
+    .string()
+    .min(1, 'GITHUB_FORK_OWNER is required')
+    .describe('Username of the forked repository owner'),
+  githubRepoName: z
+    .string()
+    .min(1, 'GITHUB_REPO is required')
+    .describe('Name of the repository (should match both upstream and fork)'),
+  githubUpstreamOwner: z
+    .string()
+    .min(1, 'GITHUB_UPSTREAM_OWNER is required')
+    .describe('Username of the base (upstream) repository owner'),
+  githubBaseBranch: z
+    .string()
+    .min(1, 'GITHUB_BASE_BRANCH is required')
+    .describe('Branch of the repositories (e.g., main or master)'),
+  githubToken: z
+    .string()
+    .min(1, 'GITHUB_TOKEN is required')
+    .describe('GitHub token of the fork owner with repo/pull access'),
+  serverEnvironment: z
+    .string()
+    .optional()
+    .describe('The environment currently running on the server'),
+});
+
+export type ServerConfig = z.infer<typeof ServerConfigSchema>;
+
+const githubForkOwner = process.env.GITHUB_FORK_OWNER || '';
+const githubRepoName = process.env.GITHUB_REPO || '';
+const githubUpstreamOwner = process.env.GITHUB_UPSTREAM_OWNER || '';
+const githubBaseBranch = 'main';
+const githubToken = process.env.GITHUB_TOKEN || '';
+const serverEnvironment = process.env.SERVER_ENVIRONMENT || 'production';
+
+export const serverConfig: ServerConfig = Object.freeze({
+  githubForkOwner,
+  githubRepoName,
+  githubUpstreamOwner,
+  githubBaseBranch,
+  githubToken,
+  serverEnvironment,
+});

src/features/deployment/CoinGeckoConfirmationModal.tsx

@@ -15,10 +15,12 @@ export function CoinGeckoConfirmationModal({
   isOpen,
   onCancel,
   onSubmit,
+  close,
 }: {
   isOpen: boolean;
   onCancel: () => void;
   onSubmit: (values: CoinGeckoFormValues) => void;
+  close: () => void;
 }) {
   const { result } = useLatestDeployment();
   const initialCoinGeckoId = getInitialCoinGeckoId(result);

src/features/deployment/CreateRegistryPrModal.tsx

@@ -0,0 +1,163 @@
+import { ErrorIcon, Modal } from '@hyperlane-xyz/widgets';
+import { Form, Formik, useFormikContext } from 'formik';
+import { SolidButton } from '../../components/buttons/SolidButton';
+import { TextInput } from '../../components/input/TextField';
+import { A } from '../../components/text/A';
+import { H2 } from '../../components/text/Headers';
+import { links } from '../../consts/links';
+import { Color } from '../../styles/Color';
+import { CreatePrResponse, GithubIdentity, GitHubIdentitySchema } from '../../types/createPr';
+import { normalizeEmptyStrings } from '../../utils/string';
+import { zodErrorToFormikErrors } from '../../utils/zod';
+
+export function CreateRegistryPrModal({
+  isOpen,
+  onCancel,
+  onConfirm,
+  confirmDisabled,
+  disabled,
+  response,
+}: {
+  isOpen: boolean;
+  disabled: boolean;
+  confirmDisabled: boolean;
+  onCancel: () => void;
+  onConfirm: (values: GithubIdentity) => void;
+  response: CreatePrResponse | null | undefined;
+}) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      close={onCancel}
+      panelClassname="p-4 flex flex-col items-center gap-4 max-w-xl"
+    >
+      <H2>Add this deployment to the Hyperlane Registry</H2>
+      <p className={styles.text}>
+        Would you like to create a Pull Request on Github to include this deployment to the{' '}
+        <A className={styles.link} href={links.registry}>
+          Hyperlane Registry
+        </A>
+        ? Once your PR is merged, your artifacts will become available for the community to use!
+      </p>
+
+      <p className={styles.text}>
+        Optionally, you can include your Github username and organization!
+      </p>
+
+      <Formik<GithubIdentity>
+        onSubmit={onConfirm}
+        validate={validateForm}
+        validateOnChange={false}
+        validateOnBlur={false}
+        initialValues={{ organization: undefined, username: undefined }}
+      >
+        {() => (
+          <Form className="w-full">
+            {response && response.success ? (
+              <div className={`${styles.text} w-full`}>
+                <p>This is the link to your PR:</p>
+                <div className="w-full space-y-2 rounded-lg bg-blue-500/5 px-3 py-4">
+                  <A className={styles.link} href={response.data.prUrl}>
+                    {response.data.prUrl}
+                  </A>
+                </div>
+              </div>
+            ) : (
+              <InputSection />
+            )}
+
+            <ButtonsSection
+              onCancel={onCancel}
+              confirmDisabled={confirmDisabled}
+              disabled={disabled}
+            />
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+}
+
+function InputSection() {
+  const { setFieldValue, values, errors } = useFormikContext<GithubIdentity>();
+
+  return (
+    <div className="flex gap-4">
+      <div className="w-full">
+        <TextInput
+          className="w-full"
+          value={values.username ?? ''}
+          onChange={(v) => setFieldValue('username', v)}
+          placeholder="Github Username"
+        />
+        {errors.username && (
+          <div className="flex items-center gap-2 px-3 py-1.5">
+            <ErrorIcon width={14} height={14} color={Color.red['600']} className="shrink-0" />
+            <span className="text-xs text-red-600">{errors.username}</span>
+          </div>
+        )}
+      </div>
+      <div className="w-full">
+        <TextInput
+          className="w-full"
+          value={values.organization ?? ''}
+          onChange={(v) => setFieldValue('organization', v)}
+          placeholder="Organization"
+        />
+        {errors.organization && (
+          <div className="flex items-center gap-2 px-3 py-1.5">
+            <ErrorIcon width={14} height={14} color={Color.red['600']} className="shrink-0" />
+            <span className="text-xs text-red-600">{errors.organization}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ButtonsSection({
+  onCancel,
+  confirmDisabled,
+  disabled,
+}: {
+  onCancel: () => void;
+  confirmDisabled: boolean;
+  disabled: boolean;
+}) {
+  return (
+    <div className="mt-4 flex w-full items-center justify-center gap-12">
+      <SolidButton
+        onClick={onCancel}
+        color="gray"
+        className="min-w-24 px-4 py-2"
+        disabled={disabled}
+      >
+        Close
+      </SolidButton>
+      <SolidButton
+        color="primary"
+        className="min-w-24 px-4 py-2"
+        disabled={disabled || confirmDisabled}
+        type="submit"
+      >
+        Confirm
+      </SolidButton>
+    </div>
+  );
+}
+
+const styles = {
+  text: 'text-center text-sm text-gray-700',
+  link: 'underline underline-offset-2 hover:opacity-80 active:opacity-70',
+};
+
+function validateForm(values: GithubIdentity) {
+  const normalizedValues = normalizeEmptyStrings(values);
+  const parsedResult = GitHubIdentitySchema.safeParse(normalizedValues);
+
+  if (!parsedResult.success) {
+    return zodErrorToFormikErrors(parsedResult.error);
+  }
+
+  return undefined;
+}

src/features/deployment/DeploymentDetailsModal.tsx

@@ -7,6 +7,7 @@ import { useMultiProvider } from '../chains/hooks';
 import { getChainDisplayName } from '../chains/utils';
 import { DeploymentStatusIcon } from './DeploymentStatusIcon';
 import { DeploymentContext } from './types';
+import { sortWarpCoreConfig } from './utils';
 
 export function DeploymentsDetailsModal({
   isOpen,
@@ -23,6 +24,8 @@ export function DeploymentsDetailsModal({
   const multiProvider = useMultiProvider();
   const chainNames = chains.map((c) => getChainDisplayName(multiProvider, c)).join(', ');
 
+  const warpCoreResult = sortWarpCoreConfig(result?.result);
+
   return (
     <Modal isOpen={isOpen} close={onClose} panelClassname="p-4 md:p-5 max-w-[30rem] space-y-3">
       <div className="flex items-center justify-between">
@@ -37,7 +40,7 @@ export function DeploymentsDetailsModal({
         <DeploymentProperty name="Chains" value={chainNames} />
       </div>
       <CollapsibleData data={config.config} label="Deployment Config" />
-      {result && <CollapsibleData data={result.result} label="Deployment Result" />}
+      {result && <CollapsibleData data={warpCoreResult} label="Deployment Result" />}
     </Modal>
   );
 }