feat: upgrade to record v2

package.json

@@ -27,8 +27,9 @@
     "@bonfida/name-offers": "0.0.10",
     "@bonfida/name-tokenizer": "0.0.12",
     "@bonfida/sns-emitter": "0.1.7",
-    "@bonfida/sns-react": "2.0.2",
-    "@bonfida/spl-name-service": "2.0.3",
+    "@bonfida/sns-react": "2.0.3",
+    "@bonfida/sns-records": "^0.0.1-alpha.8",
+    "@bonfida/spl-name-service": "2.0.4",
     "@coral-xyz/common-public": "0.2.0-latest.3375",
     "@expo-google-fonts/dev": "*",
     "@expo/html-elements": "0.5.1",

src/App.tsx

@@ -47,6 +47,7 @@ import { NavigatorTabsParamList } from "@src/types";
 import { LanguageHeader } from "@src/components/Header";
 import { SolanaProvider } from "@src/providers/SolanaProvider";
 import ErrorBoundary from "react-native-error-boundary";
+import { RecordV2BadgeExplanationModal } from "./components/RecordV2Badge";
 
 const xnftjson = require("../xnft.json");
 
@@ -65,6 +66,7 @@ const modalConfig = {
   DomainSizeModal: DomainSizeModal,
   LanguageModal: LanguageModal,
   TokenizeModal: TokenizeModal,
+  RecordV2BadgeExplanationModal: RecordV2BadgeExplanationModal,
 };
 
 const stackModal = createModalStack(modalConfig);

src/components/EditPicture.tsx

@@ -5,21 +5,18 @@ import * as ImagePicker from "expo-image-picker";
 import {
   Record,
   getDomainKeySync,
-  NameRegistryState,
-  transferInstruction,
-  NAME_PROGRAM_ID,
-  createNameRegistry,
-  updateInstruction,
-  Numberu32,
   NAME_OFFERS_ID,
+  getRecordV2Key,
+  createRecordV2Instruction,
+  updateRecordV2Instruction,
+  validateRecordV2Content,
 } from "@bonfida/spl-name-service";
 import { registerFavourite } from "@bonfida/name-offers";
 import { isTokenized } from "@bonfida/name-tokenizer";
 import { t } from "@lingui/macro";
 import { PublicKey, TransactionInstruction } from "@solana/web3.js";
 import { useStatusModalContext } from "@src/contexts/StatusModalContext";
 import { useSolanaConnection } from "@src/hooks/xnft-hooks";
-import { removeZeroRight } from "@src/utils/record/zero";
 import { sendTx } from "@src/utils/send-tx";
 import { WrapModal } from "./WrapModal";
 import { unwrap } from "@src/utils/unwrap";
@@ -51,10 +48,7 @@ export const EditPicture = ({
     try {
       setLoading(true);
       const ixs: TransactionInstruction[] = [];
-      const { pubkey, parent } = getDomainKeySync(
-        Record.Pic + "." + domain,
-        true,
-      );
+      const recordKey = getRecordV2Key(domain, Record.Pic);
 
       try {
         new URL(pic);
@@ -81,67 +75,37 @@ export const EditPicture = ({
       }
 
       // Check if exists
-      const info = await connection.getAccountInfo(pubkey);
+      const info = await connection.getAccountInfo(recordKey);
       if (!info?.data) {
-        const space = 2_000;
-        const lamports = await connection.getMinimumBalanceForRentExemption(
-          space + NameRegistryState.HEADER_LEN,
-        );
-        const ix = await createNameRegistry(
-          connection,
-          Buffer.from([1]).toString() + Record.Pic,
-          space, // Hardcode space to 2kB
-          new PublicKey(publicKey),
-          new PublicKey(publicKey),
-          lamports,
-          undefined,
-          parent,
+        const ix = createRecordV2Instruction(
+          domain,
+          Record.Pic,
+          pic,
+          publicKey,
+          publicKey,
         );
         ixs.push(ix);
       } else {
-        // Zero the data stored
-        const { registry } = await NameRegistryState.retrieve(
-          connection,
-          pubkey,
+        const ix = updateRecordV2Instruction(
+          domain,
+          Record.Pic,
+          pic,
+          publicKey,
+          publicKey,
         );
-
-        if (!registry.owner.equals(new PublicKey(publicKey))) {
-          // Record was created before domain was transfered
-          const ix = transferInstruction(
-            NAME_PROGRAM_ID,
-            pubkey,
-            new PublicKey(publicKey),
-            registry.owner,
-            undefined,
-            parent,
-            new PublicKey(publicKey),
-          );
-          ixs.push(ix);
-        }
-
-        if (registry.data) {
-          const trimmed = removeZeroRight(registry.data);
-          const zero = Buffer.alloc(trimmed.length);
-          const ix = updateInstruction(
-            NAME_PROGRAM_ID,
-            pubkey,
-            new Numberu32(0),
-            zero,
-            new PublicKey(publicKey),
-          );
-          ixs.push(ix);
-        }
+        ixs.push(ix);
       }
 
-      const data = Buffer.from(pic, "utf-8");
-      const ix = updateInstruction(
-        NAME_PROGRAM_ID,
-        pubkey,
-        new Numberu32(0),
-        data,
-        new PublicKey(publicKey),
+      ixs.push(
+        validateRecordV2Content(
+          true,
+          domain,
+          Record.Pic,
+          publicKey,
+          publicKey,
+          publicKey,
+        ),
       );
-      ixs.push(ix);
 
       const sig = await sendTx(
         connection,

src/components/ProfileBlock.tsx

@@ -4,19 +4,19 @@ import Clipboard from "@react-native-clipboard/clipboard";
 import { t } from "@lingui/macro";
 import { LinearGradient } from "expo-linear-gradient";
 import { Feather, FontAwesome } from "@expo/vector-icons";
-import { useProfilePic } from "@bonfida/sns-react";
 import { useModal } from "react-native-modalfy";
 import { useStatusModalContext } from "@src/contexts/StatusModalContext";
 import tw from "@src/utils/tailwind";
 import { abbreviate } from "@src/utils/abbreviate";
 import { useWallet } from "@src/hooks/useWallet";
 import { useFavoriteDomain } from "@src/hooks/useFavoriteDomain";
+import { usePicRecord } from "@src/hooks/useRecords";
 
 interface ProfileBlockProps {
   children?: ReactNode;
   owner: string;
   domain: string;
-  picRecord: ReturnType<typeof useProfilePic>;
+  picRecord: ReturnType<typeof usePicRecord>;
 }
 
 export const ProfileBlock = ({
@@ -52,8 +52,10 @@ export const ProfileBlock = ({
       >
         <Image
           source={
-            picRecord.result
-              ? { uri: picRecord.result }
+            picRecord.uri
+              ? {
+                  uri: picRecord.uri,
+                }
               : require("@assets/default-pic.png")
           }
           style={tw`w-full h-full rounded-full`}
@@ -62,9 +64,10 @@ export const ProfileBlock = ({
           <TouchableOpacity
             onPress={() =>
               openModal("EditPicture", {
-                currentPic: picRecord.result,
+                currentPic: picRecord.uri,
                 domain: domain,
                 setAsFav: !favorite.result?.reverse,
+                refresh: picRecord.execute,
               })
             }
             style={tw`h-[24px] w-[24px] rounded-full flex items-center justify-center absolute bottom-0 right-0 bg-brand-accent`}