code review

.env.example

@@ -1 +1 @@
-REACT_APP_GIPHY_API_KEY=YOUR_API_KEY
+VITE_REACT_GIPHY_API_KEY=YOUR_API_KEY

src/components/ShareStory.tsx

@@ -37,7 +37,7 @@ const ShareStory: React.FC<ShareStoryProps> = ({
   };
   return (
     <>
-      <IonFab slot="fixed" vertical="top" horizontal="end">
+      <IonFab className="mr-2 mt-2" slot="fixed" vertical="top" horizontal="end">
         <IonFabButton id={`present-${shareAlertId}`}>
           <IonIcon icon={shareSocial} />
         </IonFabButton>

src/components/Story.tsx

@@ -51,7 +51,7 @@ const Story: React.FC<StoryProps> = ({ stickers, photo }) => {
         width={CANVAS_WIDTH}
         height={CANVAS_HEIGHT}
         onMount={initializeApp}
-        className="aspect-video object-contain transform-gpu"
+        className="flex-1 aspect-video object-contain transform-gpu"
       >
         {!!photo && (
           <Sprite

src/pages/HomePage/HomePage.tsx

@@ -31,7 +31,7 @@ const HomePage: React.FC = () => {
     <IonPage>
       <IonContent fullscreen>
         <Story photo={photoImage} stickers={stickers} />
-        <div className="absolute bottom-10 left-0 w-full flex items-center justify-around">
+        <div className="absolute bottom-5 left-0 w-full flex items-center justify-around">
           <IonFabButton className="circle small" onClick={() => setShowStickerModal(true)}>
             <IonIcon
               className="text-3xl text-black"

src/stories/share.ts

@@ -1,9 +1,6 @@
 import { base64StringToBlob } from "blob-util";
 import { Application, Matrix, RenderTexture } from "pixi.js";
 
-export const SHARE_EXTENSION = "png";
-export const SHARE_FORMAT = `image/${SHARE_EXTENSION}`;
-
 const downloadImage = (filename: string, imageBlob: Blob) => {
   const anchorElement = document.createElement("a");
   const fileUrl = URL.createObjectURL(imageBlob);
@@ -35,43 +32,32 @@ export const shareOrDownloadImage = async (
   downloadImage(filename, imageBlob);
 };
 
-const createTextureWithResolution = (width: number, height: number) =>
-  RenderTexture.create({
-    width,
-    height,
-    resolution: window.devicePixelRatio || 1,
-  });
-
-const createTranslationMatrix = (centerX: number, centerY: number) => {
-  const matrix = new Matrix();
-  matrix.translate(-centerX, -centerY);
-  return matrix;
-};
-
 export const renderAndShareCanvasImage = async (
   app: Application,
   filename: string,
   imageWidth: number,
   imageHeight: number,
   centerX: number,
-  centerY: number
+  centerY: number,
+  format = "image/png",
+  extension = "png"
 ) => {
-  const renderTexture = createTextureWithResolution(imageWidth, imageHeight);
-  const transformMatrix = createTranslationMatrix(centerX, centerY);
+  const renderTexture = RenderTexture.create({
+    width: imageWidth,
+    height: imageHeight,
+    resolution: window.devicePixelRatio || 1,
+  });
+  const transformMatrix = new Matrix().translate(-centerX, -centerY);
 
   app.renderer.render(app.stage, {
     renderTexture,
     transform: transformMatrix,
   });
 
-  const base64 = await app.renderer.extract.base64(
-    renderTexture,
-    SHARE_FORMAT,
-    1
-  );
+  const base64 = await app.renderer.extract.base64(renderTexture, format, 1);
   const blob = base64StringToBlob(
-    base64.replace(`data:${SHARE_FORMAT};base64,`, ""),
-    SHARE_FORMAT
+    base64.replace(`data:${format};base64,`, ""),
+    format
   );
-  await shareOrDownloadImage(`${filename}.${SHARE_EXTENSION}`, blob);
+  await shareOrDownloadImage(`${filename}.${extension}`, blob);
 };