Skip to content

Commit

Permalink
Merge branch 'main' into add-unit-tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@douglance
douglance committed Sep 15, 2023
2 parents ecc7599 + f665472 commit fa61d12
Show file tree
Hide file tree
Showing 33 changed files with 424 additions and 327 deletions.
12 changes: 10 additions & 2 deletions app/deployment/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';
import { useState, useEffect } from 'react';
import { Steps } from 'primereact/steps';
import { useAccount } from 'wagmi';
import { useAccount, useNetwork } from 'wagmi';
import { BackButton } from '@/components/BackButton';
import {
useDeploymentPageContext,
Expand All @@ -12,6 +12,8 @@ import { NextButton } from '@/components/NextButton';
import { ResetButton } from '@/components/ResetButton';
import { useStep } from '@/hooks/useStep';
import { spaceGrotesk } from '@/fonts';
import { ChainId } from '@/types/ChainId';
import { WrongChainAlert } from '@/components/WrongChainAlert';

const stepsStyleProps = {
pt: {
Expand Down Expand Up @@ -55,7 +57,7 @@ function DeploymentLayout({ children }: any) {
<br />
</p>
<p className="text-left text-sm">
Please ensure you have at least 1.5 Goerli ETH before getting started.
Please ensure you have at least 1.5 testnet ETH before getting started.
</p>
<div className="flex w-full items-baseline justify-between">
<ExternalLink
Expand Down Expand Up @@ -100,6 +102,10 @@ export default function DeploymentPageWithContext({ children }: { children: any
const { address } = useAccount();
const { isConnected } = useAccount();
const isMounted = useIsMounted();
const { chain } = useNetwork();

const isWrongChain =
chain?.id !== ChainId.ArbitrumGoerli && chain?.id !== ChainId.ArbitrumSepolia;

if (!isMounted || !isConnected || !address) {
return (
Expand All @@ -113,6 +119,8 @@ export default function DeploymentPageWithContext({ children }: { children: any
);
}

if (isWrongChain) return <WrongChainAlert />;

return (
<DeploymentPageContextProvider>
<DeploymentLayout children={children} />
Expand Down
93 changes: 37 additions & 56 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,8 @@
'use client';

import { spaceGrotesk, unica77 } from '@/fonts';
import { appInfo, chains, wagmiConfig } from '../src/setupWagmi';
import { ConnectButton, RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';
import { WagmiConfig } from 'wagmi';
import { arbitrumGoerli } from 'wagmi/chains';
import { PostHogProvider } from 'posthog-js/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { Metadata } from 'next';
import posthog from 'posthog-js';

import '@rainbow-me/rainbowkit/styles.css';
import 'primeflex/primeflex.css';
import 'primeicons/primeicons.css'; // icons
import 'primereact/resources/primereact.css'; // core css
import 'primereact/resources/themes/lara-light-indigo/theme.css'; // theme
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
import { unica77 } from '@/fonts';

if (typeof window !== 'undefined' && typeof process.env.NEXT_PUBLIC_POSTHOG_KEY === 'string') {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
Expand All @@ -31,49 +20,41 @@ if (typeof window !== 'undefined' && typeof process.env.NEXT_PUBLIC_POSTHOG_KEY
});
}

const metadataInfo = {
title: 'Arbitrum Orbit Deployment UI',
description: `Utilize the Orbit chain deployment portal to launch your own devnet Arbitrum Orbit chain. By following these steps, you will have a local devnet chain that hosts EVM-compatible contracts (you will not have a mainnet L2 chain)
We are building the tech and docs that will help you move your project from "local devnet chain that settles to Arbitrum Goerli" to "public production-ready chain that settles to Arbitrum One or Arbitrum Nova". Stay tuned!`,
};

export const metadata: Metadata = {
...metadataInfo,
twitter: {
card: 'summary_large_image',
...metadataInfo,
},
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
<title>Arbitrum Orbit Deployment UI</title>
<meta
name="description"
content="Utilize the Orbit chain deployment portal to launch your own Arbitrum Orbit chain. By following these steps, you will have a local devnet chain that hosts EVM-compatible contracts."
/>
</head>
<body style={unica77.style}>
<PostHogProvider client={posthog}>
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider
chains={chains}
appInfo={appInfo}
initialChain={arbitrumGoerli}
theme={{
...lightTheme({
accentColor: '#243145',
}),
fonts: {
body: spaceGrotesk.style.fontFamily,
},
}}
>
<header className="flex w-full justify-center">
<div className="flex w-[1024px] flex-col gap-2 py-4">
<div className="flex w-full items-center justify-between">
<h1 className="text-2xl font-normal">Arbitrum Orbit</h1>
<ConnectButton />
</div>
<div>
<span className="rounded-lg bg-[#FFEED3] px-3 py-2 text-sm text-[#60461F]">
This interface is currently intended for local devnet deployment.
</span>
</div>
</div>
</header>
<main className="flex w-full flex-col items-center">{children}</main>
</RainbowKitProvider>
</WagmiConfig>
</PostHogProvider>
<html lang="en">
<body style={unica77.style} className="mx-3 md:mx-0">
<Providers>
<header className="flex w-full justify-center">
<div className="flex w-[1024px] flex-col gap-2 py-4">
<div className="flex w-full flex-wrap items-center justify-between">
<h1 className="text-2xl font-normal">Arbitrum Orbit</h1>
<ConnectButton />
</div>
<div className="w-full rounded-lg bg-[#FFEED3] px-2 md:w-fit">
<span className="block p-1 text-sm text-[#60461F]">
This interface is currently intended for local devnet deployment.
</span>
</div>
</div>
</header>
<main className="flex w-full flex-col items-center">{children}</main>
</Providers>
</body>
</html>
);
Expand Down
42 changes: 25 additions & 17 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,56 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { FC, ReactNode } from 'react';
import { twJoin, twMerge } from 'tailwind-merge';

interface ExternalLinkTileProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
href: string;
title: string;
children: ReactNode;
}

const cardClassNames = [
'block [&>button]:text-left min-h-[120px] justify-start w-full h-full rounded-lg border border-gray-300 bg-black/5 px-4 py-5 text-left transition-colors',
'lg:border-transparent lg:bg-transparent lg:min-h-[auto] lg:px-3 lg:py-4',
'lg:hover:border-gray-300 lg:hover:bg-black/5 dark:lg:hover:border-neutral-700 dark:lg:hover:bg-neutral-800/30',
];

export default function Home() {
const router = useRouter();
const ExternalLinkTile: FC<ExternalLinkTileProps> = ({ href, title, children, ...rest }) => (
<a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
<button className="w-full rounded-lg border border-transparent px-2 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
<h2 className={`font-regular mb-2 text-2xl`}>{title}</h2>
<a
target="_blank"
rel="noopener noreferrer"
href={href}
{...rest}
className={twMerge(twJoin(cardClassNames))}
>
<button>
<p className={`font-regular mb-2 text-2xl`}>{title}</p>
<p className={`font-regular m-0 max-w-[28ch] text-sm`}>{children}</p>
</button>
</a>
);

return (
<main className="flex h-[calc(100vh-120px)] w-full justify-center">
<div className="mt-16 flex w-[1024px] flex-col items-start gap-16 pl-10 sm:pl-0">
<main className="flex w-full justify-center">
<div className="flex w-[1024px] flex-col items-start gap-16 pb-16 pl-4 pt-4 lg:mt-16 lg:pl-0">
<Image src="/logo.svg" alt="Logo" width={192} height={192} />
<div className="-ml-2 flex flex-wrap items-start justify-start gap-16">
<div className="-ml-2 grid grid-flow-row gap-8 lg:max-w-[580px] lg:grid-cols-2 lg:grid-rows-[auto_1px_auto] lg:gap-16">
<ExternalLinkTile
href={`${process.env.NEXT_PUBLIC_ARBITRUM_DOCS_BASE_URL}/launch-orbit-chain/orbit-gentle-introduction`}
title="Learn about Orbit"
>
Dig into the details of how this works
</ExternalLinkTile>
<div className="rounded-lg border border-transparent px-2 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
<Link href="/deployment/step/1">
<h2 className={`font-regular mb-2 text-2xl`}>Deploy Orbit Chain</h2>
<Link href="/deployment/step/1" className={twMerge(twJoin(cardClassNames))}>
<button>
<p className={`font-regular mb-2 text-2xl`}>Deploy Orbit Chain</p>
<p className={`font-regular m-0 max-w-[28ch] text-sm`}>
Configure your Orbit chain here
</p>
</Link>
</div>
</div>
<div className="w-1/2 border border-zinc-300" />
<div className="-ml-2 flex items-start justify-start gap-16">
</button>
</Link>
<div className="col-span-2 hidden h-[1px] w-full border border-zinc-300 lg:block" />
<ExternalLinkTile
href="https://docs.google.com/forms/d/e/1FAIpQLSe5YWxFbJ8DgWcDNbIW2YYuTRmegtx2FHObym00_sOt0kq4wA/viewform"
title="Get in Touch"
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@rainbow-me/rainbowkit": "^1.0.8",
"encoding": "^0.1.13",
"lokijs": "^1.5.12",
"next": "^13.4.13",
"next": "^13.4.19",
"pino-pretty": "^10.2.0",
"posthog-js": "^1.67.1",
"primeflex": "^3.3.1",
Expand Down Expand Up @@ -52,8 +52,9 @@
"postcss": "8.4.23",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "3.3.2",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3",
"ts-jest": "^29.1.1",
"typescript": "5.0.4"
}
}
}
7 changes: 4 additions & 3 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-import': {},
'tailwindcss': {},
'autoprefixer': {},
},
}
};
9 changes: 5 additions & 4 deletions src/components/ChainTypePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ChainType } from '@/types/ChainType';
import { twJoin } from 'tailwind-merge';

type ChainTypePickerProps = {
selectedChainType?: string;
Expand All @@ -17,10 +18,10 @@ export const ChainTypePicker: React.FC<ChainTypePickerProps> = ({
}) => {
return (
<div
className={
' grid cursor-pointer grid-cols-9 items-center justify-center rounded border border-[#243145] py-6 pr-6 accent-[#243145] hover:bg-[#f2f7ff] ' +
(selectedChainType === chainType ? ' bg-[#f2f7ff]' : '')
}
className={twJoin(
'm-0 grid cursor-pointer grid-cols-9 items-center justify-center rounded border border-[#243145] py-6 pr-6 accent-[#243145] hover:bg-[#f2f7ff]',
selectedChainType === chainType && 'bg-[#f2f7ff]',
)}
onClick={() => {
if (!chainType) return;
onClick(chainType);
Expand Down
11 changes: 10 additions & 1 deletion src/components/DeployLocally.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import { useMemo } from 'react';
import { useNetwork } from 'wagmi';

import { useConfigDownloads } from '@/hooks/useConfigDownloads';
import { ExternalLink } from './ExternalLink';
import { StepTitle } from './StepTitle';

export const DeployLocallyComponent = () => {
const { chain } = useNetwork();
const { downloadRollupConfig, downloadL3Config } = useConfigDownloads();

const parentChainRpcUrl = useMemo(
() => chain?.rpcUrls?.default?.http[0] ?? 'https://goerli-rollup.arbitrum.io/rpc',
[chain],
);

return (
<div>
<StepTitle>Deploy Locally</StepTitle>
Expand Down Expand Up @@ -68,7 +77,7 @@ export const DeployLocallyComponent = () => {
in the following command, and run it: <br />
<br />
<pre className="overflow-auto rounded-lg bg-gray-100 p-4 text-sm">
PRIVATE_KEY="0xYourPrivateKey" L2_RPC_URL="https://goerli-rollup.arbitrum.io/rpc"
PRIVATE_KEY="0xYourPrivateKey" L2_RPC_URL="{parentChainRpcUrl}"
L3_RPC_URL="http://localhost:8449" yarn run setup
</pre>
</li>
Expand Down
8 changes: 4 additions & 4 deletions src/components/DeploymentPageContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ type DeploymentPageContextState = {
isLoading: boolean;
};

const defaultRollupConfig: RollupConfig = {
const generateDefaultRollupConfig: () => RollupConfig = () => ({
confirmPeriodBlocks: 150,
stakeToken: '0x0000000000000000000000000000000000000000',
baseStake: 0.1,
Expand All @@ -44,14 +44,14 @@ const defaultRollupConfig: RollupConfig = {
delaySeconds: 86400,
futureSeconds: 3600,
},
};
});

function getDefaultRollupConfig(owner: string = '') {
return { ...defaultRollupConfig, owner };
return { ...generateDefaultRollupConfig(), owner };
}

const deploymentPageContextStateDefaultValue: DeploymentPageContextState = {
rollupConfig: defaultRollupConfig,
rollupConfig: generateDefaultRollupConfig(),
rollupContracts: undefined,
validators: undefined,
batchPoster: undefined,
Expand Down
Loading

0 comments on commit fa61d12

Please sign in to comment.