refactor: change the streamed amount to total amount in NFT SVG

script/GenerateSVG.s.sol

@@ -19,12 +19,12 @@ contract GenerateSVG is BaseScript, SablierV2NFTDescriptor {
 
     /// @param progress The streamed amount as a numerical percentage with 4 implied decimals.
     /// @param status The status of the stream, as a string.
-    /// @param streamed The abbreviated streamed amount, as a string.
+    /// @param amount The abbreviated deposited amount, as a string.
     /// @param duration The total duration of the stream in days, as a number.
     function run(
         uint256 progress,
         string memory status,
-        string memory streamed,
+        string memory amount,
         uint256 duration
     )
         public
@@ -34,14 +34,14 @@ contract GenerateSVG is BaseScript, SablierV2NFTDescriptor {
         svg = NFTSVG.generateSVG(
             NFTSVG.SVGParams({
                 accentColor: generateAccentColor({ sablier: LOCKUP_LINEAR, streamId: uint256(keccak256(msg.data)) }),
+                amount: string.concat(SVGElements.SIGN_GE, " ", amount),
                 assetAddress: DAI.toHexString(),
                 assetSymbol: "DAI",
                 duration: calculateDurationInDays({ startTime: 0, endTime: duration * 1 days }),
                 sablierAddress: LOCKUP_LINEAR.toHexString(),
                 progress: stringifyPercentage(progress),
                 progressNumerical: progress,
                 status: status,
-                streamed: streamed.equal("0") ? "0" : string.concat(SVGElements.SIGN_GE, " ", streamed),
                 streamingModel: "Lockup Linear"
             })
         );

shell/generate-svg-panoply.sh

@@ -9,12 +9,12 @@
 # Strict mode: https://gist.github.com/vncsna/64825d5609c146e80de8b1fd623011ca
 set -euo pipefail
 
-./shell/generate-svg.sh 0 "Pending" "0" 5
-./shell/generate-svg.sh 0 "Pending" "0" 21
-./shell/generate-svg.sh 0 "Pending" "0" 565
+./shell/generate-svg.sh 0 "Pending" "100" 5
+./shell/generate-svg.sh 0 "Pending" "100" 21
+./shell/generate-svg.sh 0 "Pending" "100" 565
 
-./shell/generate-svg.sh 0 "Canceled" "0" 3
-./shell/generate-svg.sh 0 "Canceled" "0" 3
+./shell/generate-svg.sh 0 "Canceled" "100" 3
+./shell/generate-svg.sh 0 "Canceled" "100" 3
 ./shell/generate-svg.sh 144 "Canceled" "29.81K" 24
 ./shell/generate-svg.sh 7231 "Canceled" "421.11K" 24
 

shell/generate-svg.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # Notes:
-# - There are four input arguments: progress, status, streamed amount, and duration
+# - There are four input arguments: progress, status, deposit amount, and duration
 
 # Pre-requisites:
 # - foundry (https://getfoundry.sh)
@@ -12,7 +12,7 @@ set -euo pipefail
 # Load the arguments while using default values
 arg_progress=${1:-4235}
 arg_status=${2:-"Streaming"}
-arg_streamed=${3:-"1.23M"}
+arg_amount=${3:-"1.23M"}
 arg_duration=${4:-"91"}
 
 # Run the Forge script and extract the SVG from stdout
@@ -21,13 +21,13 @@ output=$(
   --sig "run(uint256,string,string,uint256)" \
   "$arg_progress" \
   "$arg_status" \
-  "$arg_streamed" \
+  "$arg_amount" \
   "$arg_duration"
 )
 svg=$(echo "$output" | awk -F "svg: string " '{print $2}' | awk 'NF > 0')
 
 # Generate the file name
-name="nft-${arg_progress}-${arg_status}-${arg_streamed}-${arg_duration}.svg"
+name="nft-${arg_progress}-${arg_status}-${arg_amount}-${arg_duration}.svg"
 sanitized="$(echo "$name" | sed "s/ //g" )" # remove whitespaces
 
 # Put the SVG in a file

src/SablierV2NFTDescriptor.sol

@@ -30,12 +30,12 @@ contract SablierV2NFTDescriptor is ISablierV2NFTDescriptor {
     struct TokenURIVars {
         address asset;
         string assetSymbol;
+        uint128 depositedAmount;
         string json;
         ISablierV2Lockup sablier;
         string sablierAddress;
         string status;
         string svg;
-        uint128 streamedAmount;
         uint256 streamedPercentage;
         string streamingModel;
     }
@@ -49,20 +49,21 @@ contract SablierV2NFTDescriptor is ISablierV2NFTDescriptor {
         vars.sablierAddress = address(sablier).toHexString();
         vars.asset = address(vars.sablier.getAsset(streamId));
         vars.assetSymbol = safeAssetSymbol(vars.asset);
+        vars.depositedAmount = vars.sablier.getDepositedAmount(streamId);
 
         // Load the stream's data.
         vars.status = stringifyStatus(vars.sablier.statusOf(streamId));
-        vars.streamedAmount = vars.sablier.streamedAmountOf(streamId);
         vars.streamedPercentage = calculateStreamedPercentage({
-            streamedAmount: vars.streamedAmount,
-            depositedAmount: vars.sablier.getDepositedAmount(streamId)
+            streamedAmount: vars.sablier.streamedAmountOf(streamId),
+            depositedAmount: vars.depositedAmount
         });
         vars.streamingModel = mapSymbol(sablier);
 
         // Generate the SVG.
         vars.svg = NFTSVG.generateSVG(
             NFTSVG.SVGParams({
                 accentColor: generateAccentColor(address(sablier), streamId),
+                amount: abbreviateAmount({ amount: vars.depositedAmount, decimals: safeAssetDecimals(vars.asset) }),
                 assetAddress: vars.asset.toHexString(),
                 assetSymbol: vars.assetSymbol,
                 duration: calculateDurationInDays({
@@ -73,7 +74,6 @@ contract SablierV2NFTDescriptor is ISablierV2NFTDescriptor {
                 progress: stringifyPercentage(vars.streamedPercentage),
                 progressNumerical: vars.streamedPercentage,
                 status: vars.status,
-                streamed: abbreviateAmount({ amount: vars.streamedAmount, decimals: safeAssetDecimals(vars.asset) }),
                 streamingModel: vars.streamingModel
             })
         );

src/libraries/NFTSVG.sol

@@ -13,18 +13,21 @@ library NFTSVG {
 
     struct SVGParams {
         string accentColor;
+        string amount;
         string assetAddress;
         string assetSymbol;
         string duration;
         string progress;
         uint256 progressNumerical;
         string sablierAddress;
         string status;
-        string streamed;
         string streamingModel;
     }
 
     struct SVGVars {
+        string amountCard;
+        uint256 amountWidth;
+        uint256 amountXPosition;
         string cards;
         uint256 cardsWidth;
         string durationCard;
@@ -36,9 +39,6 @@ library NFTSVG {
         string statusCard;
         uint256 statusWidth;
         uint256 statusXPosition;
-        string streamedCard;
-        uint256 streamedWidth;
-        uint256 streamedXPosition;
     }
 
     function generateSVG(SVGParams memory params) internal pure returns (string memory) {
@@ -58,9 +58,9 @@ library NFTSVG {
         (vars.statusWidth, vars.statusCard) =
             SVGElements.card({ cardType: SVGElements.CardType.STATUS, content: params.status });
 
-        // Generate the streamed card.
-        (vars.streamedWidth, vars.streamedCard) =
-            SVGElements.card({ cardType: SVGElements.CardType.STREAMED, content: params.streamed });
+        // Generate the deposit amount card.
+        (vars.amountWidth, vars.amountCard) =
+            SVGElements.card({ cardType: SVGElements.CardType.AMOUNT, content: params.amount });
 
         // Generate the duration card.
         (vars.durationWidth, vars.durationCard) =
@@ -69,28 +69,28 @@ library NFTSVG {
         unchecked {
             // Calculate the width of the row containing the cards and the margins between them.
             vars.cardsWidth =
-                vars.streamedWidth + vars.durationWidth + vars.progressWidth + vars.statusWidth + CARD_MARGIN * 3;
+                vars.amountWidth + vars.durationWidth + vars.progressWidth + vars.statusWidth + CARD_MARGIN * 3;
 
             // Calculate the positions on the X axis based on the following layout:
             //
-            // ___________________________ SVG Width (1000px) _____________________________
-            // |     |          |      |        |      |          |      |          |     |
-            // | <-> | Progress | 16px | Status | 16px | Streamed | 16px | Duration | <-> |
+            // ___________________________ SVG Width (1000px) ___________________________
+            // |     |          |      |        |      |        |      |          |     |
+            // | <-> | Progress | 16px | Status | 16px | Amount | 16px | Duration | <-> |
             vars.progressXPosition = (1000 - vars.cardsWidth) / 2;
             vars.statusXPosition = vars.progressXPosition + vars.progressWidth + CARD_MARGIN;
-            vars.streamedXPosition = vars.statusXPosition + vars.statusWidth + CARD_MARGIN;
-            vars.durationXPosition = vars.streamedXPosition + vars.streamedWidth + CARD_MARGIN;
+            vars.amountXPosition = vars.statusXPosition + vars.statusWidth + CARD_MARGIN;
+            vars.durationXPosition = vars.amountXPosition + vars.amountWidth + CARD_MARGIN;
         }
 
         // Concatenate all cards.
-        vars.cards = string.concat(vars.progressCard, vars.statusCard, vars.streamedCard, vars.durationCard);
+        vars.cards = string.concat(vars.progressCard, vars.statusCard, vars.amountCard, vars.durationCard);
 
         return string.concat(
             '<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">',
             SVGElements.BACKGROUND,
             generateDefs(params.accentColor, params.status, vars.cards),
             generateFloatingText(params.sablierAddress, params.streamingModel, params.assetAddress, params.assetSymbol),
-            generateHrefs(vars.progressXPosition, vars.statusXPosition, vars.streamedXPosition, vars.durationXPosition),
+            generateHrefs(vars.progressXPosition, vars.statusXPosition, vars.amountXPosition, vars.durationXPosition),
             "</svg>"
         );
     }
@@ -146,7 +146,7 @@ library NFTSVG {
     function generateHrefs(
         uint256 progressXPosition,
         uint256 statusXPosition,
-        uint256 streamedXPosition,
+        uint256 amountXPosition,
         uint256 durationXPosition
     )
         internal
@@ -164,8 +164,8 @@ library NFTSVG {
             '<use href="#Status" x="',
             statusXPosition.toString(),
             '" y="790"/>',
-            '<use href="#Streamed" x="',
-            streamedXPosition.toString(),
+            '<use href="#Amount" x="',
+            amountXPosition.toString(),
             '" y="790"/>',
             '<use href="#Duration" x="',
             durationXPosition.toString(),

src/libraries/SVGElements.sol

@@ -63,7 +63,7 @@ library SVGElements {
     enum CardType {
         PROGRESS,
         STATUS,
-        STREAMED,
+        AMOUNT,
         DURATION
     }
 
@@ -258,8 +258,8 @@ library SVGElements {
             return "Progress";
         } else if (cardType == CardType.STATUS) {
             return "Status";
-        } else if (cardType == CardType.STREAMED) {
-            return "Streamed";
+        } else if (cardType == CardType.AMOUNT) {
+            return "Amount";
         } else {
             return "Duration";
         }