WIP - feat: add module preamble

api/blmod/v1/blmod.proto

@@ -16,6 +16,7 @@ message ModuleInfo {
     IconKind icon_kind = 3;
     bytes icon_data = 4;
     string short_description = 5;
+    string preamble = 6;
 }
 
 service LabsModulesService {

rn/html-mods/ipfs-upload-file/info.json

@@ -2,5 +2,6 @@
     "displayName": "IPFS File Upload",
     "shortDescription": "Upload a file to IPFS",
     "iconKind": 1,
-    "iconData": "4qyG77iP"
+    "iconData": "4qyG77iP",
+    "preamble": "Author: Harlan T Wood <[email protected]>\n\nhttps://github.com/ipfs-examples/js-ipfs-http-client-upload-file"
 }

rn/html-mods/ipns-publish/info.json

@@ -2,5 +2,6 @@
     "displayName": "IPNS Publish",
     "shortDescription": "Publish to IPNS using JS and Go",
     "iconKind": 1,
-    "iconData": "8J+TsA=="
+    "iconData": "8J+TsA==",
+    "preamble": "Author: Doug Anderson\n\nhttps://github.com/ipfs-examples/js-ipfs-browser-ipns-publish"
 }

rn/package.json

@@ -24,6 +24,7 @@
     "google-protobuf": "^3.19.4",
     "react": "17.0.2",
     "react-native": "0.67.2",
+    "react-native-hyperlink": "^0.0.19",
     "react-native-labs-bridge": "./react-native-labs-bridge",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.11.1",

rn/src/api/blmod/v1/blmod_pb.d.ts

@@ -21,6 +21,9 @@ export class ModuleInfo extends jspb.Message {
 	getShortDescription(): string
 	setShortDescription(value: string): void
 
+	getPreamble(): string
+	setPreamble(value: string): void
+
 	serializeBinary(): Uint8Array
 	toObject(includeInstance?: boolean): ModuleInfo.AsObject
 	static toObject(includeInstance: boolean, msg: ModuleInfo): ModuleInfo.AsObject
@@ -38,6 +41,7 @@ export namespace ModuleInfo {
 		iconKind: ModuleInfo.IconKindMap[keyof ModuleInfo.IconKindMap]
 		iconData: Uint8Array | string
 		shortDescription: string
+		preamble: string
 	}
 
 	export interface IconKindMap {

rn/src/api/blmod/v1/blmod_pb.js

@@ -169,7 +169,8 @@ proto.blmod.v1.ModuleInfo.toObject = function(includeInstance, msg) {
     displayName: jspb.Message.getFieldWithDefault(msg, 2, ""),
     iconKind: jspb.Message.getFieldWithDefault(msg, 3, 0),
     iconData: msg.getIconData_asB64(),
-    shortDescription: jspb.Message.getFieldWithDefault(msg, 5, "")
+    shortDescription: jspb.Message.getFieldWithDefault(msg, 5, ""),
+    preamble: jspb.Message.getFieldWithDefault(msg, 6, "")
   };
 
   if (includeInstance) {
@@ -226,6 +227,10 @@ proto.blmod.v1.ModuleInfo.deserializeBinaryFromReader = function(msg, reader) {
       var value = /** @type {string} */ (reader.readString());
       msg.setShortDescription(value);
       break;
+    case 6:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setPreamble(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -290,6 +295,13 @@ proto.blmod.v1.ModuleInfo.serializeBinaryToWriter = function(message, writer) {
       f
     );
   }
+  f = message.getPreamble();
+  if (f.length > 0) {
+    writer.writeString(
+      6,
+      f
+    );
+  }
 };
 
 
@@ -417,6 +429,24 @@ proto.blmod.v1.ModuleInfo.prototype.setShortDescription = function(value) {
 };
 
 
+/**
+ * optional string preamble = 6;
+ * @return {string}
+ */
+proto.blmod.v1.ModuleInfo.prototype.getPreamble = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 6, ""));
+};
+
+
+/**
+ * @param {string} value
+ * @return {!proto.blmod.v1.ModuleInfo} returns this
+ */
+proto.blmod.v1.ModuleInfo.prototype.setPreamble = function(value) {
+  return jspb.Message.setProto3StringField(this, 6, value);
+};
+
+
 
 
 

rn/src/navigation/types.ts

@@ -11,10 +11,11 @@ export type ScreensParams = {
 	ArtCollection: undefined
 	NodeManager: undefined
 	NodeConfig: { name: string }
-	GoModule: { name: string; displayName: string }
+	GoModule: { name: string; displayName?: string; preamble?: string }
 	HTMLModule: {
 		name: string
 		displayName?: string
+		preamble?: string
 	}
 	IPFSLogs: undefined
 	Browser: undefined

rn/src/screens/GoModule.tsx

@@ -31,8 +31,8 @@ export const GoModule: ScreenFC<'GoModule'> = ({
 }) => {
 	const { setOptions } = useAppNavigation()
 	React.useEffect(() => {
-		setOptions({ title: displayName })
-	}, [setOptions, displayName])
+		setOptions({ title: displayName || name })
+	}, [setOptions, displayName, name])
 	const { state, text, error, args } = useAppSelector(state => selectModuleState(state, name))
 	const running = state === 'running'
 	const dispatch = useAppDispatch()

rn/src/screens/HTMLModule.tsx

@@ -1,27 +1,27 @@
 import React from 'react'
 import { Text } from 'react-native'
 import { WebView } from 'react-native-webview'
+import Hyperlink from 'react-native-hyperlink'
 
 import { ScreenFC, useAppNavigation } from '@berty-labs/navigation'
 import { defaultColors } from '@berty-labs/styles'
-import { AppScreenContainer, LoaderScreen } from '@berty-labs/components'
+import { AppScreenContainer, Card, LoaderScreen } from '@berty-labs/components'
 import { useGomobileIPFS } from '@berty-labs/react-redux'
 
+const space = 15
+
 export const HTMLModule: ScreenFC<'HTMLModule'> = ({
 	route: {
-		params: { name, displayName },
+		params: { name, displayName, preamble },
 	},
 }) => {
 	const nav = useAppNavigation()
 	const mobileIPFS = useGomobileIPFS()
 	const [localError, setLocalError] = React.useState<string>()
 
 	React.useEffect(() => {
-		if (!displayName) {
-			return
-		}
-		nav.setOptions({ title: displayName })
-	}, [nav, displayName])
+		nav.setOptions({ title: displayName || name })
+	}, [nav, displayName, name])
 
 	if (mobileIPFS.status !== 'up') {
 		return <LoaderScreen text='Waiting for IPFS node...' />
@@ -35,6 +35,15 @@ export const HTMLModule: ScreenFC<'HTMLModule'> = ({
 	}
 	return (
 		<AppScreenContainer>
+			{!!preamble && (
+				<Card style={{ marginBottom: space }}>
+					<Hyperlink linkDefault={true}>
+						<Text style={{ color: defaultColors.text }} selectable={true}>
+							{preamble.trim()}
+						</Text>
+					</Hyperlink>
+				</Card>
+			)}
 			<WebView
 				style={{ backgroundColor: defaultColors.background }}
 				source={{

rn/src/screens/home/ToolsList.tsx

@@ -83,6 +83,7 @@ type HTMLModule = {
 	iconKind?: 'UTF'
 	iconUTF?: string
 	infoError?: unknown
+	preamble?: string
 }
 
 const maxOpacity = 1
@@ -160,6 +161,7 @@ export const ToolsList: React.FC<{ searchText: string }> = React.memo(({ searchT
 					shortDescription: pbInfo.shortDescription,
 					iconKind: 'UTF',
 					iconUTF,
+					preamble: pbInfo.preamble,
 				}
 				return info
 			} catch (err) {

rn/yarn.lock

@@ -6594,6 +6594,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6809,6 +6816,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 merge-options@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
@@ -8103,6 +8115,14 @@ react-native-codegen@^0.0.8:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
+react-native-hyperlink@^0.0.19:
+  version "0.0.19"
+  resolved "https://registry.yarnpkg.com/react-native-hyperlink/-/react-native-hyperlink-0.0.19.tgz#ca375cde1d244bb94c551736852ee0d688c8bb1f"
+  integrity sha512-x4wuRGDMnnpWcRr5MCK1D2UcEuzD9IHK8lfjEhO/+QqXNaX31HdeD3ss3BXXZgHxpRYtLbTB0TuFcl1HHANp3w==
+  dependencies:
+    linkify-it "^2.2.0"
+    mdurl "^1.0.0"
+
 react-native-labs-bridge@./react-native-labs-bridge:
   version "0.1.0"
 
@@ -9473,6 +9493,11 @@ ua-parser-js@^0.7.30:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
   integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
+uc.micro@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"