New engine docs (#6951)

Signed-off-by: samina <57885104+saminacodes@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: Joaquim Verges <joaquim.verges@gmail.com>

Author: 3 people

apps/portal/redirects.mjs

@@ -854,6 +854,7 @@ const infrastructureRedirects = {
   "/guides/engine/relayer": "/engine/features/relayer",
   "/infrastructure/engine/overview": "/engine",
   "/engine/features/permissions": "/engine/features/admins",
+  "/engine": "/engine/v3",
 
   //storage
   "/storage/how-storage-works": "/infrastructure/storage/how-storage-works",

apps/portal/src/app/Header.tsx

@@ -45,6 +45,10 @@ const links = [
 ];
 
 const toolLinks = [
+  {
+    name: "Vault",
+    href: "/vault",
+  },
   {
     name: "Chain List",
     href: "https://thirdweb.com/chainlist",

apps/portal/src/app/connect/account-abstraction/gasless/engine/page.mdx

@@ -10,7 +10,7 @@ This guide assumes you have already installed Connect SDK into your application.
 
 <Step title="Relayer URL">
 
-Obtain the Relayer URL using Engine. For steps on how to obtain the Relayer URL, refer to the [Engine relayer guide](/engine/features/relayers).
+Obtain the Relayer URL using Engine. For steps on how to obtain the Relayer URL, refer to the [Engine relayer guide](/engine/v2/features/relayers).
 
 </Step>
 

apps/portal/src/app/connect/pay/fees/page.mdx

@@ -24,7 +24,6 @@ You can configure who pays the protocol fee for buy or sell transactions by spec
 
 See full reference for [`buy`](https://portal.thirdweb.com/references/typescript/v5/buy/prepare) and [`sell`](https://portal.thirdweb.com/references/typescript/v5/sell/prepare). 
 
-
 #### Setting fees on transfers or purchase mode
 
 You can configure who pays the protocol fee for transfers or purchase mode using the `feePayer` setting. This affects the 

apps/portal/src/app/connect/pay/overview/page.mdx

@@ -1,7 +1,7 @@
 import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
 import PayOverviewImage from "../assets/pay-overview.png";
 import SupportedChains from "../../../_images/supported-chains.png";
-import {Rocket, ArrowLeftRight, Wallet, Pencil, ShieldCheck, PiggyBank, Globe, Component} from "lucide-react";
+import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon} from "lucide-react";
 
 export const metadata = createMetadata({
 	image: {
@@ -27,45 +27,45 @@ Universal Bridge allows you to create both simple and advanced payment flows for
 	<FeatureCard
 		title="Avoid chargeback & liability"
 		description="Automatic screening for sanctioned wallets and regions to ensure application safety."
-		iconUrl={<Rocket />}
+		iconUrl={<RocketIcon />}
 	/>
 
-    <FeatureCard
-    	title="Global Coverage"
-    	description="Bridging support in over 160+ countries to reach a truly global audience."
-    		iconUrl={<Globe/>}
-    />
-    <FeatureCard
-    	title="Earn revenue"
-    	description="Monetize your application and earn swap fees on each transaction."
-    		iconUrl={<PiggyBank />}
-    />
-    		<FeatureCard
-    	title="Transact Securely"
-    	description="Strict one-time approvals ensuring funds are not at risk of exploits."
-    	iconUrl={<ShieldCheck />}
-    />
-    	<FeatureCard
-    	title="Easy-to-integrate Components"
-    	description="Easily integrate components for buying funds, e-commerce checkouts, and more."
-    	iconUrl={<Component />}
-    />
-
-    <FeatureCard
-    	title="Customizable Flows"
-    	description="Create your own customized headless flows using the Universal Bridge SDK or API."
-    		iconUrl={<Pencil/>}
-    />
-        <FeatureCard
-    	title="Flexible Wallet Payments"
-    	description="Enable payments with any wallet that has funds not just the one connected."
-    		iconUrl= {<Wallet />}
-    />
-        <FeatureCard
-    	title="Multi-hop Routing"
-    	description="Handle multiple swaps at once within one session for a seamless swap experience."
-    		iconUrl={<ArrowLeftRight />}
-    />
+	<FeatureCard
+		title="Global Coverage"
+		description="Bridging support in over 160+ countries to reach a truly global audience."
+			iconUrl={<GlobeIcon />}
+	/>
+	<FeatureCard
+		title="Earn revenue"
+		description="Monetize your application and earn swap fees on each transaction."
+			iconUrl={<PiggyBankIcon />}
+	/>
+			<FeatureCard
+		title="Transact Securely"
+		description="Strict one-time approvals ensuring funds are not at risk of exploits."
+		iconUrl={<ShieldCheckIcon />}
+	/>
+		<FeatureCard
+		title="Easy-to-integrate Components"
+		description="Easily integrate components for buying funds, e-commerce checkouts, and more."
+		iconUrl={<ComponentIcon />}
+	/>
+
+	<FeatureCard
+		title="Customizable Flows"
+		description="Create your own customized headless flows using the Universal Bridge SDK or API."
+			iconUrl={<PencilIcon />}
+	/>
+		<FeatureCard
+		title="Flexible Wallet Payments"
+		description="Enable payments with any wallet that has funds not just the one connected."
+			iconUrl={<WalletIcon />}
+	/>
+		<FeatureCard
+		title="Multi-hop Routing"
+		description="Handle multiple swaps at once within one session for a seamless swap experience."
+			iconUrl={<ArrowLeftRightIcon />}
+	/>
 
 </div>
 

apps/portal/src/app/contracts/page.mdx

@@ -1,6 +1,6 @@
 import { GithubTemplateCard, ExpandableGrid, createMetadata, OpenSourceCard, DocImage, ArticleIconCard, Grid } from "@doc";
 import SupportedChains from "../_images/supported-chains.png";
-import { ExternalLink } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 
 export const metadata = createMetadata({
 	title: "thirdweb Contracts",
@@ -16,20 +16,20 @@ Contracts is an end-to-end development suite which provides tools to develop, de
 
 <ArticleIconCard
 	title="Deployment Tool"
-	icon={ExternalLink}
+	icon={ExternalLinkIcon}
 	href="/contracts/deploy/overview"
 	description="Securely deploy any smart contract."
 />
 <ArticleIconCard
 	title="Explore"
-	icon={ExternalLink}
+	icon={ExternalLinkIcon}
 	href="/contracts/explore/overview"
 	description="Audited and expansive library of contracts."
 />
 
 <ArticleIconCard
 	title="Modular Contracts"
-	icon={ExternalLink}
+	icon={ExternalLinkIcon}
 	href="/contracts/explore/overview"
 	description="Build customizable smart contracts."
 />