Added Unreal Boilerplates, CollapsibleDetails component, added docs o…

…n parameter + return types for unreal indexer (#469)

* added CollapsibleDetails component, added docs on parameter + return types for unreal indexer

* added borderless options for tabbed content, used in unreal docs

* fixed unreal typo

* removed redundant line from unreal's write-to-blockchain

* added unreal bootstrap-your-game section

* unreal docs tweaks

docs/components/CollapsibleDetails.tsx

@@ -0,0 +1,25 @@
+interface CollapsibleDetailsProps {
+    title: string;
+    items: {
+        key: string;
+        value: string;
+    }[]
+}
+
+export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
+    return (
+        <details>
+            <summary style={{fontWeight: 600}}>{props.title}</summary>
+            <div style={{padding: 15, display: 'flex', flexDirection: 'column', gap: 15}}>
+                {props.items.map((item, index) => {
+                    return (
+                        <div key={index}>
+                            <p style={{fontWeight: 600}}>{item.key}</p>
+                            <p>{item.value}</p>
+                        </div>
+                    )
+                })}
+            </div>
+        </details>
+    )
+}

docs/components/TabbedContent/style.css

@@ -33,4 +33,9 @@
   border-radius: 0.4rem;
   border: 1px solid rgba(0, 158, 255, 0.165);
   background-color: rgba(0, 143, 245, 0.098);
+}
+
+.tabbed-content__content.borderless {
+  padding: 0;
+  border: unset;
 }

docs/pages/sdk/unreal/authentication.mdx

@@ -16,7 +16,7 @@ Sign in users with any email, and they will receive a one-time password in their
 Listen for the Email Requires Code event.
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/email_otp.png'}/>
     </div>
 </TabbedContent>
@@ -32,15 +32,15 @@ On mobile platforms, listen for the `Id Token Received` event.
 ### Get Google Id Token
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/google_idtoken.png'}/>
     </div>
 </TabbedContent>
 
 ### Get Apple Id Token
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/apple_idtoken.png'}/>
     </div>
 </TabbedContent>
@@ -50,7 +50,7 @@ On mobile platforms, listen for the `Id Token Received` event.
 Use this method to start a session using a valid Id token from Google or Apple.
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/token_session.png'}/>
     </div>
 </TabbedContent>
@@ -63,15 +63,15 @@ during [Configuration](/sdk/unreal/configuration) and [configure PlayFab in the
 ### Register a new PlayFab user
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/playfab_registration.png'}/>
     </div>
 </TabbedContent>
 
 ### Login with existing PlayFab user
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/playfab_login.png'}/>
     </div>
 </TabbedContent>
@@ -85,7 +85,7 @@ If you have your own PlayFab integration, you are welcome to use it. Once you've
 You can sign in users as guests. However, note that they will lose access to their wallet if they uninstall the app or sign out.
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/guest_session.png'}/>
     </div>
 </TabbedContent>
@@ -98,7 +98,7 @@ account in order to have persistent credentials with which they can access their
 While a user is authenticated with the Sequence API, you can add an additional login method by using the appropriate federate account call.
 
 <TabbedContent labels={["Blueprint"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/email_federation.png'}/>
     </div>
 </TabbedContent>
@@ -108,11 +108,11 @@ While a user is authenticated with the Sequence API, you can add an additional l
 Clear the credentials cache and sign out the current user.
 
 <TabbedContent labels={["Blueprint", "C++"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/sign_out.png'}/>
     </div>
 
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         ```cpp
         const TOptional<USequenceWallet*> WalletOptional = USequenceWallet::Get();
         if (WalletOptional.IsSet() && WalletOptional.GetValue())
@@ -129,11 +129,11 @@ Clear the credentials cache and sign out the current user.
 List the active sessions.
 
 <TabbedContent labels={["Blueprint", "C++"]}>
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         <img alt={'img'} src={'/img/unreal/list_sessions.png'}/>
     </div>
 
-    <div className="tabbed-content__content">
+    <div className="tabbed-content__content borderless">
         ```cpp
         const TSuccessCallback<TArray<FSession>> OnSuccess = [=](TArray<FSession> Response)
         {

docs/pages/sdk/unreal/bootstrap_game.mdx

@@ -0,0 +1,88 @@
+---
+title: Sequence - Web3 Gaming Platform - Unreal SDK Sequence API
+description: Documentation for Unreal SDK API for reading from the blockchain with the Sequence infrastructure stack for web3 gaming.
+---
+
+import {CollapsibleDetails} from "../../../components/CollapsibleDetails.tsx";
+import TabbedContent from "../../../components/TabbedContent";
+
+# Bootstrap your Game
+
+Sequence's Unreal SDK includes a range of features to help you bootstrap your game.
+You can create them as shown below or duplicate the `.uasset` files from the `Plugins/SequencePlugin Content/Samples/`
+folder and customize them to fit your needs.
+
+## Inventory
+
+Create the `Sequence Inventory` widget to display a QR code to receive funds or send funds to other wallets.
+
+<img alt={'img'} src={'/img/unreal/feature_inventory_demo.gif'} style={{borderRadius: 15, width: '100%'}}/>
+<img alt={'img'} src={'/img/unreal/feature_inventory.png'} style={{borderRadius: 15}}/>
+
+<CollapsibleDetails title={'Parameters'} items={[{
+        key: 'Chain (ENetwork Enum)',
+        value: "The chain type (Ethereum, Sepolia, ..) on which the specified contract is deployed."
+    },
+    {
+        key: 'Wallet Address (FString)',
+        value: "The wallet address of the user for whom you want to list the inventory items."
+    },
+    {
+        key: 'Contract (FString)',
+        value: "The address of an ERC1155 or ERC721 contract where the specified wallet address owns items."
+    }]
+}/>
+
+## Primary Sale
+
+Create the `Sequence Primary Sale` widget to display a QR code to receive funds or send funds to other wallets.
+
+<img alt={'img'} src={'/img/unreal/feature_sale_demo.gif'} style={{borderRadius: 15, width: '100%'}}/>
+<img alt={'img'} src={'/img/unreal/feature_sale.png'} style={{borderRadius: 15}}/>
+
+<CollapsibleDetails title={'Parameters'} items={[{
+        key: 'Chain (ENetwork Enum)',
+        value: "The chain type (Ethereum, Sepolia, ..) on which the specified contracts are deployed."
+    },
+    {
+        key: 'Token Contract Address (FString)',
+        value: "The address of the ERC1155 or ERC721 token contract you deployed using Sequence's Builder."
+    },
+    {
+        key: 'Sale Contract Address (FString)',
+        value: "The address of the sale contract you deployed using Sequence's Builder."
+    },
+    {
+        key: 'Payment Token (FString)',
+        value: "The ERC20 token address you specified on the 'Mint Access' section of your Sale contract."
+    },
+    {
+        key: 'Price (Integer)',
+        value: "The price for each token you specified on the 'Mint Access' section of your Sale contract."
+    },
+    {
+        key: 'Tokens for Sale (Integer Array)',
+        value: "A list of token IDs (e.g. [0, 1, 2]) that you display in your user interface."
+    }]
+}/>
+
+## My Wallet View
+
+Create the `Sequence Profile` widget to display a QR code to receive funds or send funds to other wallets.
+
+<img alt={'img'} src={'/img/unreal/feature_wallet_demo.gif'} style={{borderRadius: 15, width: '100%'}}/>
+<img alt={'img'} src={'/img/unreal/feature_wallet.png'} style={{borderRadius: 15}}/>
+
+<CollapsibleDetails title={'Parameters'} items={[{
+    key: 'Chain (ENetwork Enum)',
+    value: "The chain type (Ethereum, Sepolia, ..) where you want to run your game."
+},
+    {
+        key: 'Wallet Address (FString)',
+        value: "The wallet address of the user for whom you want to display this view."
+    },
+    {
+        key: 'Enable Send (Boolean)',
+        value: "Indicates whether to enable the button to open a send view. Set this to false if you want to display the profile of another user."
+    }]
+}/>

docs/pages/sdk/unreal/configuration.mdx

@@ -16,13 +16,7 @@ In your Project's Build.cs file ([where to find](https://forums.unrealengine.com
     {
         PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
 		PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" });
-        //The line below is what you want
 		PrivateDependencyModuleNames.AddRange(new string[] { "SequencePlugin" });
-		// Uncomment if you are using Slate UI
-		// PrivateDependencyModuleNames.AddRange(new string[] { "Slate", "SlateCore" });
-		// Uncomment if you are using online features
-		// PrivateDependencyModuleNames.Add("OnlineSubsystem");
-		// To include OnlineSubsystemSteam, add it to the plugins section in your uproject file with the Enabled attribute set to true
 	}
 ```
 

docs/pages/sdk/unreal/introduction.mdx

@@ -23,7 +23,7 @@ Please view our [Platform Requirements](/sdk/unreal/platforms)
 
 ## Supported Authentication Methods
 
-Start the integration in any of [your Blueprints](/sdk/unreal/platforms)
+Start the integration using our [Subsystems for Blueprints](/sdk/unreal/subsystems)
 
 - Email with One-Time-Password
 - Google- & Apple Single Sign On