[Settings] Seperate pages and components

src/ui/settings/AssetDisplay.tsx

@@ -0,0 +1,32 @@
+import { Asset } from "@types";
+import { React, ReactNative as RN } from "@metro/common";
+import { showToast } from "@ui/toasts";
+import { getAssetIDByName } from "@ui/assets";
+import { Forms } from "@ui/components";
+import copyText from "@lib/utils/copyText";
+
+interface AssetDisplayProps {
+    asset: Asset;
+}
+
+const { FormRow } = Forms;
+
+const styles = RN.StyleSheet.create({
+    asset: {
+        width: 32,
+        height: 32,
+    }
+});
+
+export default function AssetDisplay({ asset }: AssetDisplayProps) {
+    return (
+        <FormRow
+            label={`${asset.name} - ${asset.id}`}
+            trailing={() => <RN.Image source={asset.id} style={styles.asset} />}
+            onPress={() => {
+                copyText(asset.name);
+                showToast("Copied asset name to clipboard.", getAssetIDByName("toast_copy_link"))
+            }}
+        />
+    )
+}

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,7 +1,7 @@
 import { React, ReactNative as RN } from "@metro/common";
 import { Forms } from "@ui/components";
 import { all } from "@ui/assets";
-import AssetDisplay from "./AssetDisplay";
+import AssetDisplay from "@ui/settings/components/AssetDisplay";
 
 const { FormInput } = Forms
 

src/ui/settings/pages/General.tsx

@@ -3,7 +3,7 @@ import { DISCORD_SERVER, GITHUB } from "@lib/constants";
 import { connectToDebugWS } from "@lib/debug";
 import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
-import Version from "./Version";
+import Version from "@ui/settings/components/Version";
 
 const { FormRow, FormSection, FormInput } = Forms;
 const hermesProps = window.HermesInternal.getRuntimeProperties();