initial nebula docs (#5720)

Co-authored-by: greg <gregfromstl@gmail.com>

Author: saminacodes

apps/portal/src/app/Header.tsx

@@ -32,6 +32,10 @@ const links = [
     name: "Insight",
     href: "/insight",
   },
+  {
+    name: "Nebula",
+    href: "/nebula",
+  },
 ];
 
 const toolLinks = [

apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx

@@ -0,0 +1,51 @@
+
+
+# ERC-20 Paymaster
+
+In traditional Ethereum transactions, users pay gas fees in the native cryptocurrency of the network, such as ETH. This requirement can create friction, especially for applications where users interact with smart contracts without holding native tokens. ERC-20 Paymaster enables users pay gas fees using ERC-20 tokens. [Learn more about ERC-20 Paymasters.](https://blog.thirdweb.com/account-abstraction-paymaster-pay-evm-gas-fees-with-usdt-usdc-or-any-other-erc-20-token/)
+
+### Get Started
+
+
+1. Install Connect SDK
+
+```bash
+npm install thirdweb
+```
+
+2. Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees. 
+
+Currently you may use Lisk LSK, Base USDC or Celo CUSD.
+
+
+```tsx
+import { base, lisk, celo } from "thirdweb/chains";
+import { TokenPaymaster, smartWallet } from "thirdweb/wallets";
+
+// Have users pay for gas in Base USDC
+const usdcWallet = smartWallet({
+  chain: base,
+  sponsorGas: true,
+  overrides: {
+    tokenPaymaster: TokenPaymaster.BASE_USDC,
+  },
+});
+
+// Have users pay for gas in Lisk LSK
+const lskWallet = smartWallet({
+  chain: lisk,
+  sponsorGas: true,
+  overrides: {
+    tokenPaymaster: TokenPaymaster.LISK_LSK,
+  },
+});
+
+// Have users pay for gas in Celo CUSD
+const cusdWallet = smartWallet({
+  chain: celo,
+  sponsorGas: true,
+  overrides: {
+    tokenPaymaster: TokenPaymaster.CELO_CUSD,
+  },
+});
+```

apps/portal/src/app/connect/sidebar.tsx

@@ -172,6 +172,10 @@ export const sidebar: SideBar = {
                 },
               ],
             },
+            {
+              name: "ERC-20 Paymaster",
+              href: `${aAslug}/erc-20-paymaster`,
+            },
             {
               name: "Account Factories",
               href: `${aAslug}/factories`,

apps/portal/src/app/layout.tsx

@@ -66,9 +66,9 @@ export default function RootLayout({
           <StickyTopContainer>
             {/* Note: Please change id as well when changing text or href so that new banner is shown to user even if user dismissed the older one  */}
             <Banner
-              id="modular-contracts"
-              text="Modular Contracts Beta: Secure, Customizable, and Easy to Integrate contracts"
-              href="https://thirdweb.com/explore/modular-contracts"
+              id="nebula-alpha"
+              text="Introducing Nebula - the most powerful AI to interact with the blockchain. Join the waitlist."
+              href="https://thirdweb.com/nebula"
             />
             <Header />
           </StickyTopContainer>