Change to real user twitter information from dummy

pages/api/twitter-auth-info.ts

@@ -63,16 +63,31 @@ export default withIronSessionApiRoute(async function handler(
     req.session.refresh_token = refresh_token;
     await req.session.save();
     const {
-      data: { id, username },
+      data: {
-    } = await request<TwitterUsersMeResponse>(`${twitterApiBaseUrl}/users/me`, {
+        id,
-      headers: {
+        username,
-        Authorization: `Bearer ${accessToken}`,
+        name,
+        profile_image_url,
+        description,
+        public_metrics,
       },
-    });
+    } = await request<TwitterUsersMeResponse>(
+      `${twitterApiBaseUrl}/users/me?user.fields=profile_image_url,public_metrics,description`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+
     res.status(200).json({
       accessToken,
       id,
       username,
+      name,
+      profile_image_url: profile_image_url.replace("normal.jpg", "400x400.jpg"),
+      description,
+      public_metrics,
     });
   } catch (error) {
     console.error(error);
@@ -94,5 +109,15 @@ interface TwitterUsersMeResponse {
     id: string;
     username: string;
     name: string;
+    profile_image_url: string;
+    description: string;
+    public_metrics: TwitterPublicMetrics;
   };
 }
+
+export interface TwitterPublicMetrics {
+  followers_count: number;
+  following_count: number;
+  listed_count: number;
+  tweet_count: number;
+}

pages/verification/index.tsx

@@ -34,10 +34,6 @@ export default function VerificationPage() {
 
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    setTimeout(() => setIsLoading(false), 1500);
-  }, []);
-
   useEffect(() => {
     const handleVerification = async () => {
       if (window.location.search) {
@@ -50,9 +46,8 @@ export default function VerificationPage() {
           `/api/twitter-auth-info?state=${state}&code=${code}`,
         );
 
-        console.log(newTwitterAuthInfo);
-
         setTwitterAuthInfo(newTwitterAuthInfo);
+
         const verifierMsg: VerifierMsg = {
           unique_twitter_id: newTwitterAuthInfo.id,
           name: newTwitterAuthInfo.username,
@@ -60,20 +55,19 @@ export default function VerificationPage() {
           contract_address: "osmo1y5mm5nj5m8ttddt5ccspek6xgyyavehrkak7gq",
           chain_id: "osmosis-1",
         };
-        const icnsVerification = await request<IcnsVerificationResponse>(
+
-          "/api/icns-verification",
+        await request<IcnsVerificationResponse>("/api/icns-verification", {
-          {
+          method: "post",
-            method: "post",
+          headers: {
-            headers: {
+            "Content-Type": "application/json",
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              msg: JSON.stringify(verifierMsg),
-              authToken: newTwitterAuthInfo.accessToken,
-            }),
           },
-        );
+          body: JSON.stringify({
-        console.log(icnsVerification);
+            msg: JSON.stringify(verifierMsg),
+            authToken: newTwitterAuthInfo.accessToken,
+          }),
+        });
+
+        setIsLoading(false);
       }
     };
 
@@ -182,30 +176,38 @@ export default function VerificationPage() {
             <ProfileContainer color={color.grey["700"]}>
               <ProfileImageContainer>
                 <Image
-                  src="https://pbs.twimg.com/profile_images/1503375455532974084/KWG1XmEc_400x400.jpg"
+                  src={twitterAuthInfo?.profile_image_url ?? ""}
                   alt="profile image"
                   fill={true}
                 />
               </ProfileImageContainer>
 
               <ProfileContentContainer>
-                <ProfileNameContainer>BaeHeesung</ProfileNameContainer>
+                <ProfileNameContainer>
+                  {twitterAuthInfo?.name}
+                </ProfileNameContainer>
                 <ProfileUserNameContainer>
-                  @BaeHeesung25
+                  {twitterAuthInfo?.username}
                 </ProfileUserNameContainer>
 
                 <ProfileFollowContainer>
                   <ProfileFollowerContainer>
-                    <ProfileFollowBold>42</ProfileFollowBold> Following
+                    <ProfileFollowBold>
+                      {twitterAuthInfo?.public_metrics?.following_count}
+                    </ProfileFollowBold>{" "}
+                    Following
                   </ProfileFollowerContainer>
 
                   <ProfileFollowerContainer>
-                    <ProfileFollowBold>42</ProfileFollowBold> Following
+                    <ProfileFollowBold>
+                      {twitterAuthInfo?.public_metrics?.followers_count}
+                    </ProfileFollowBold>{" "}
+                    Followers
                   </ProfileFollowerContainer>
                 </ProfileFollowContainer>
 
                 <ProfileDescriptionContainer>
-                  Product UIUX designer @Keplrwallet and I like @regen_network🌿
+                  {twitterAuthInfo?.description}
                 </ProfileDescriptionContainer>
               </ProfileContentContainer>
             </ProfileContainer>

types/api-response.ts

@@ -1,3 +1,5 @@
+import { TwitterPublicMetrics } from "../pages/api/twitter-auth-info";
+
 export interface TwitterAuthUrlResponse {
   authUrl: string;
 }
@@ -5,7 +7,11 @@ export interface TwitterAuthUrlResponse {
 export interface TwitterAuthInfoResponse {
   accessToken: string;
   id: string;
+  name: string;
   username: string;
+  profile_image_url: string;
+  description: string;
+  public_metrics: TwitterPublicMetrics;
 }
 
 export interface IcnsVerificationResponse {