はじめに
初めまして。
CryptoGamesというブロックチェーンゲーム企業でエンジニアをしている cardene（かるでね） です！
スマートコントラクトを書いたり、フロントエンド・バックエンド・インフラと幅広く触れています。
代表的なゲームはクリプトスペルズというブロックチェーンゲームです。
今回はBunzzの新機能『DeCipher』を使用して、UniswapV3の「NFTDescriptor」のコントラクトを見てみようと思います。
『DeCipher』はAIを使用してコントラクトのドキュメントを自動生成してくれるサービスです。
詳しい使い方に関しては以下の記事を参考にしてください！
今回使用する『DeCipher』のリンクは以下になります。
Etherscanのリンクは以下になります。
概要
NFTDescriptorは、NFT（非代替トークン）の説明を作成するコントラクトです。
これによって、NFTの特徴や情報をユーザーに分かりやすく伝えることができます。
具体的な手法として、Uniswap V3 Coreというライブラリやその他のライブラリを利用し、NFTの詳細情報をSVG（スケーラブルベクターグラフィックス）として表現します。
このコードは、Uniswap V3と呼ばれるプロトコルのデータや機能を利用します。
Uniswap V3 Coreライブラリには、Uniswap V3プールからデータを取得するためのさまざまなインターフェースが含まれています。
また、TickMathやBitMathなどの他のライブラリは、数学的計算や文字列操作、エンコードなどを効率的に行うためのものです。
これらの要素を組み合わせることで、NFTDescriptorコントラクトはNFTの詳細な情報をSVGとして描写します。
例えば、Uniswap V3プールの情報やトークンの残高など、NFTに関連する重要なデータを含めることができます。
このコードの目的は、NFT所有者にとってわかりやすくて情報豊かな詳細を提供することです。
NFTは独自の価値を持つため、その魅力や特徴を的確に伝えることが大切です。
また、購入者やコレクターにも有益な情報を提供します。
使い方
NFTDescriptorコントラクトは、Uniswap V3ポジションの特性を元に、非代替トークン（NFT）のSVG画像とメタデータを生成するスマートコントラクトです。
これはUniswap V3プロトコルと連携して使われ、NFTの外観と付加情報を提供します。
目的
Uniswap V3ポジションの特性を基にして、NFTのSVG画像とメタデータを作成することです。
これによって、NFT所有者やユーザーは特定のNFTの特性を見たり理解したりすることができます。
ステップ
- NFTDescriptorコントラクトをデプロイします。
- NFTのトークンIDを使用して、
tokenURI関数を呼び出します。
この関数は、指定したNFTのメタデータを取得します。
メタデータには、NFTの特性や情報が含まれています。 - 取得したメタデータを解析して、SVG画像や他の関連情報を取り出します。
SVG画像は、NFTの外観を視覚的に表現するためのものです。
その他の情報は、NFTに関する追加の詳細情報を提供します。
関数
constructor
NFTDescriptorコントラクトをデプロイする時に呼び出されます。
-
_factory- Uniswap V3ファクトリーコントラクトのアドレス。
-
_WETH9-
WETH9コントラクトのアドレス。
-
tokenURI
特定のNFTトークンIDのメタデータを取得する関数。
-
tokenId- NFTトークンのID。
generateSVG
Uniswap V3ポジションのためのSVG画像を生成する関数。
-
_factory- Uniswap V3ファクトリーコントラクトのアドレス。
-
_WETH9-
WETH9コントラクトのアドレス。
-
-
tokenId- NFTトークンのID。
イベント
SVGGenerated
Uniswap V3ポジションのためにSVG画像が生成されたときに発行されるイベント。
-
tokenId- NFTトークンのID。
-
svg- SVG画像のデータ。
MetadataGenerated
Uniswap V3ポジションのためにメタデータが生成されたときに発行されるイベント。
-
tokenId- NFTトークンのID。
-
metadata- NFTのためのメタデータ。
関連EIP/ERC
- EIP-721: Non-Fungible Token Standard
- EIP-1155: Multi-Token Standard
パラメーター
なし。
コントラクト
NFTDescriptor
以下を参考にしてください。
HexStrings
以下を参考にしてください。
NFTSVG
以下を参考にしてください。
コード
NFTDescriptor
NFTDescriptor
// SPDX-License-Identifier: UNLICENSED
pragma solidity >=0.7.0;
pragma abicoder v2;
import '@uniswap/v3-core/contracts/interfaces/IUniswapV3Pool.sol';
import '@uniswap/v3-core/contracts/libraries/TickMath.sol';
import '@uniswap/v3-core/contracts/libraries/BitMath.sol';
import '@uniswap/v3-core/contracts/libraries/FullMath.sol';
import '@openzeppelin/contracts/utils/Strings.sol';
import '@openzeppelin/contracts/math/SafeMath.sol';
import '@openzeppelin/contracts/math/SignedSafeMath.sol';
import 'base64-sol/base64.sol';
import './HexStrings.sol';
import './NFTSVG.sol';
library NFTDescriptor {
using TickMath for int24;
using Strings for uint256;
using SafeMath for uint256;
using SafeMath for uint160;
using SafeMath for uint8;
using SignedSafeMath for int256;
using HexStrings for uint256;
uint256 constant sqrt10X128 = 1076067327063303206878105757264492625226;
struct ConstructTokenURIParams {
uint256 tokenId;
address quoteTokenAddress;
address baseTokenAddress;
string quoteTokenSymbol;
string baseTokenSymbol;
uint8 quoteTokenDecimals;
uint8 baseTokenDecimals;
bool flipRatio;
int24 tickLower;
int24 tickUpper;
int24 tickCurrent;
int24 tickSpacing;
uint24 fee;
address poolAddress;
}
function constructTokenURI(ConstructTokenURIParams memory params) public pure returns (string memory) {
string memory name = generateName(params, feeToPercentString(params.fee));
string memory descriptionPartOne =
generateDescriptionPartOne(
escapeQuotes(params.quoteTokenSymbol),
escapeQuotes(params.baseTokenSymbol),
addressToString(params.poolAddress)
);
string memory descriptionPartTwo =
generateDescriptionPartTwo(
params.tokenId.toString(),
escapeQuotes(params.baseTokenSymbol),
addressToString(params.quoteTokenAddress),
addressToString(params.baseTokenAddress),
feeToPercentString(params.fee)
);
string memory image = Base64.encode(bytes(generateSVGImage(params)));
return
string(
abi.encodePacked(
'data:application/json;base64,',
Base64.encode(
bytes(
abi.encodePacked(
'{"name":"',
name,
'", "description":"',
descriptionPartOne,
descriptionPartTwo,
'", "image": "',
'data:image/svg+xml;base64,',
image,
'"}'
)
)
)
)
);
}
function escapeQuotes(string memory symbol) internal pure returns (string memory) {
bytes memory symbolBytes = bytes(symbol);
uint8 quotesCount = 0;
for (uint8 i = 0; i < symbolBytes.length; i++) {
if (symbolBytes[i] == '"') {
quotesCount++;
}
}
if (quotesCount > 0) {
bytes memory escapedBytes = new bytes(symbolBytes.length + (quotesCount));
uint256 index;
for (uint8 i = 0; i < symbolBytes.length; i++) {
if (symbolBytes[i] == '"') {
escapedBytes[index++] = '\\';
}
escapedBytes[index++] = symbolBytes[i];
}
return string(escapedBytes);
}
return symbol;
}
function generateDescriptionPartOne(
string memory quoteTokenSymbol,
string memory baseTokenSymbol,
string memory poolAddress
) private pure returns (string memory) {
return
string(
abi.encodePacked(
'This NFT represents a liquidity position in a Uniswap V3 ',
quoteTokenSymbol,
'-',
baseTokenSymbol,
' pool. ',
'The owner of this NFT can modify or redeem the position.\\n',
'\\nPool Address: ',
poolAddress,
'\\n',
quoteTokenSymbol
)
);
}
function generateDescriptionPartTwo(
string memory tokenId,
string memory baseTokenSymbol,
string memory quoteTokenAddress,
string memory baseTokenAddress,
string memory feeTier
) private pure returns (string memory) {
return
string(
abi.encodePacked(
' Address: ',
quoteTokenAddress,
'\\n',
baseTokenSymbol,
' Address: ',
baseTokenAddress,
'\\nFee Tier: ',
feeTier,
'\\nToken ID: ',
tokenId,
'\\n\\n',
unicode'⚠️ DISCLAIMER: Due diligence is imperative when assessing this NFT. Make sure token addresses match the expected tokens, as token symbols may be imitated.'
)
);
}
function generateName(ConstructTokenURIParams memory params, string memory feeTier)
private
pure
returns (string memory)
{
return
string(
abi.encodePacked(
'Uniswap - ',
feeTier,
' - ',
escapeQuotes(params.quoteTokenSymbol),
'/',
escapeQuotes(params.baseTokenSymbol),
' - ',
tickToDecimalString(
!params.flipRatio ? params.tickLower : params.tickUpper,
params.tickSpacing,
params.baseTokenDecimals,
params.quoteTokenDecimals,
params.flipRatio
),
'<>',
tickToDecimalString(
!params.flipRatio ? params.tickUpper : params.tickLower,
params.tickSpacing,
params.baseTokenDecimals,
params.quoteTokenDecimals,
params.flipRatio
)
)
);
}
struct DecimalStringParams {
// significant figures of decimal
uint256 sigfigs;
// length of decimal string
uint8 bufferLength;
// ending index for significant figures (funtion works backwards when copying sigfigs)
uint8 sigfigIndex;
// index of decimal place (0 if no decimal)
uint8 decimalIndex;
// start index for trailing/leading 0's for very small/large numbers
uint8 zerosStartIndex;
// end index for trailing/leading 0's for very small/large numbers
uint8 zerosEndIndex;
// true if decimal number is less than one
bool isLessThanOne;
// true if string should include "%"
bool isPercent;
}
function generateDecimalString(DecimalStringParams memory params) private pure returns (string memory) {
bytes memory buffer = new bytes(params.bufferLength);
if (params.isPercent) {
buffer[buffer.length - 1] = '%';
}
if (params.isLessThanOne) {
buffer[0] = '0';
buffer[1] = '.';
}
// add leading/trailing 0's
for (uint256 zerosCursor = params.zerosStartIndex; zerosCursor < params.zerosEndIndex.add(1); zerosCursor++) {
buffer[zerosCursor] = bytes1(uint8(48));
}
// add sigfigs
while (params.sigfigs > 0) {
if (params.decimalIndex > 0 && params.sigfigIndex == params.decimalIndex) {
buffer[params.sigfigIndex--] = '.';
}
buffer[params.sigfigIndex--] = bytes1(uint8(uint256(48).add(params.sigfigs % 10)));
params.sigfigs /= 10;
}
return string(buffer);
}
function tickToDecimalString(
int24 tick,
int24 tickSpacing,
uint8 baseTokenDecimals,
uint8 quoteTokenDecimals,
bool flipRatio
) internal pure returns (string memory) {
if (tick == (TickMath.MIN_TICK / tickSpacing) * tickSpacing) {
return !flipRatio ? 'MIN' : 'MAX';
} else if (tick == (TickMath.MAX_TICK / tickSpacing) * tickSpacing) {
return !flipRatio ? 'MAX' : 'MIN';
} else {
uint160 sqrtRatioX96 = TickMath.getSqrtRatioAtTick(tick);
if (flipRatio) {
sqrtRatioX96 = uint160(uint256(1 << 192).div(sqrtRatioX96));
}
return fixedPointToDecimalString(sqrtRatioX96, baseTokenDecimals, quoteTokenDecimals);
}
}
function sigfigsRounded(uint256 value, uint8 digits) private pure returns (uint256, bool) {
bool extraDigit;
if (digits > 5) {
value = value.div((10**(digits - 5)));
}
bool roundUp = value % 10 > 4;
value = value.div(10);
if (roundUp) {
value = value + 1;
}
// 99999 -> 100000 gives an extra sigfig
if (value == 100000) {
value /= 10;
extraDigit = true;
}
return (value, extraDigit);
}
function adjustForDecimalPrecision(
uint160 sqrtRatioX96,
uint8 baseTokenDecimals,
uint8 quoteTokenDecimals
) private pure returns (uint256 adjustedSqrtRatioX96) {
uint256 difference = abs(int256(baseTokenDecimals).sub(int256(quoteTokenDecimals)));
if (difference > 0 && difference <= 18) {
if (baseTokenDecimals > quoteTokenDecimals) {
adjustedSqrtRatioX96 = sqrtRatioX96.mul(10**(difference.div(2)));
if (difference % 2 == 1) {
adjustedSqrtRatioX96 = FullMath.mulDiv(adjustedSqrtRatioX96, sqrt10X128, 1 << 128);
}
} else {
adjustedSqrtRatioX96 = sqrtRatioX96.div(10**(difference.div(2)));
if (difference % 2 == 1) {
adjustedSqrtRatioX96 = FullMath.mulDiv(adjustedSqrtRatioX96, 1 << 128, sqrt10X128);
}
}
} else {
adjustedSqrtRatioX96 = uint256(sqrtRatioX96);
}
}
function abs(int256 x) private pure returns (uint256) {
return uint256(x >= 0 ? x : -x);
}
// @notice Returns string that includes first 5 significant figures of a decimal number
// @param sqrtRatioX96 a sqrt price
function fixedPointToDecimalString(
uint160 sqrtRatioX96,
uint8 baseTokenDecimals,
uint8 quoteTokenDecimals
) internal pure returns (string memory) {
uint256 adjustedSqrtRatioX96 = adjustForDecimalPrecision(sqrtRatioX96, baseTokenDecimals, quoteTokenDecimals);
uint256 value = FullMath.mulDiv(adjustedSqrtRatioX96, adjustedSqrtRatioX96, 1 << 64);
bool priceBelow1 = adjustedSqrtRatioX96 < 2**96;
if (priceBelow1) {
// 10 ** 43 is precision needed to retreive 5 sigfigs of smallest possible price + 1 for rounding
value = FullMath.mulDiv(value, 10**44, 1 << 128);
} else {
// leave precision for 4 decimal places + 1 place for rounding
value = FullMath.mulDiv(value, 10**5, 1 << 128);
}
// get digit count
uint256 temp = value;
uint8 digits;
while (temp != 0) {
digits++;
temp /= 10;
}
// don't count extra digit kept for rounding
digits = digits - 1;
// address rounding
(uint256 sigfigs, bool extraDigit) = sigfigsRounded(value, digits);
if (extraDigit) {
digits++;
}
DecimalStringParams memory params;
if (priceBelow1) {
// 7 bytes ( "0." and 5 sigfigs) + leading 0's bytes
params.bufferLength = uint8(uint8(7).add(uint8(43).sub(digits)));
params.zerosStartIndex = 2;
params.zerosEndIndex = uint8(uint256(43).sub(digits).add(1));
params.sigfigIndex = uint8(params.bufferLength.sub(1));
} else if (digits >= 9) {
// no decimal in price string
params.bufferLength = uint8(digits.sub(4));
params.zerosStartIndex = 5;
params.zerosEndIndex = uint8(params.bufferLength.sub(1));
params.sigfigIndex = 4;
} else {
// 5 sigfigs surround decimal
params.bufferLength = 6;
params.sigfigIndex = 5;
params.decimalIndex = uint8(digits.sub(5).add(1));
}
params.sigfigs = sigfigs;
params.isLessThanOne = priceBelow1;
params.isPercent = false;
return generateDecimalString(params);
}
// @notice Returns string as decimal percentage of fee amount.
// @param fee fee amount
function feeToPercentString(uint24 fee) internal pure returns (string memory) {
if (fee == 0) {
return '0%';
}
uint24 temp = fee;
uint256 digits;
uint8 numSigfigs;
while (temp != 0) {
if (numSigfigs > 0) {
// count all digits preceding least significant figure
numSigfigs++;
} else if (temp % 10 != 0) {
numSigfigs++;
}
digits++;
temp /= 10;
}
DecimalStringParams memory params;
uint256 nZeros;
if (digits >= 5) {
// if decimal > 1 (5th digit is the ones place)
uint256 decimalPlace = digits.sub(numSigfigs) >= 4 ? 0 : 1;
nZeros = digits.sub(5) < (numSigfigs.sub(1)) ? 0 : digits.sub(5).sub(numSigfigs.sub(1));
params.zerosStartIndex = numSigfigs;
params.zerosEndIndex = uint8(params.zerosStartIndex.add(nZeros).sub(1));
params.sigfigIndex = uint8(params.zerosStartIndex.sub(1).add(decimalPlace));
params.bufferLength = uint8(nZeros.add(numSigfigs.add(1)).add(decimalPlace));
} else {
// else if decimal < 1
nZeros = uint256(5).sub(digits);
params.zerosStartIndex = 2;
params.zerosEndIndex = uint8(nZeros.add(params.zerosStartIndex).sub(1));
params.bufferLength = uint8(nZeros.add(numSigfigs.add(2)));
params.sigfigIndex = uint8((params.bufferLength).sub(2));
params.isLessThanOne = true;
}
params.sigfigs = uint256(fee).div(10**(digits.sub(numSigfigs)));
params.isPercent = true;
params.decimalIndex = digits > 4 ? uint8(digits.sub(4)) : 0;
return generateDecimalString(params);
}
function addressToString(address addr) internal pure returns (string memory) {
return (uint256(addr)).toHexString(20);
}
function generateSVGImage(ConstructTokenURIParams memory params) internal pure returns (string memory svg) {
NFTSVG.SVGParams memory svgParams =
NFTSVG.SVGParams({
quoteToken: addressToString(params.quoteTokenAddress),
baseToken: addressToString(params.baseTokenAddress),
poolAddress: params.poolAddress,
quoteTokenSymbol: params.quoteTokenSymbol,
baseTokenSymbol: params.baseTokenSymbol,
feeTier: feeToPercentString(params.fee),
tickLower: params.tickLower,
tickUpper: params.tickUpper,
tickSpacing: params.tickSpacing,
overRange: overRange(params.tickLower, params.tickUpper, params.tickCurrent),
tokenId: params.tokenId,
color0: tokenToColorHex(uint256(params.quoteTokenAddress), 136),
color1: tokenToColorHex(uint256(params.baseTokenAddress), 136),
color2: tokenToColorHex(uint256(params.quoteTokenAddress), 0),
color3: tokenToColorHex(uint256(params.baseTokenAddress), 0),
x1: scale(getCircleCoord(uint256(params.quoteTokenAddress), 16, params.tokenId), 0, 255, 16, 274),
y1: scale(getCircleCoord(uint256(params.baseTokenAddress), 16, params.tokenId), 0, 255, 100, 484),
x2: scale(getCircleCoord(uint256(params.quoteTokenAddress), 32, params.tokenId), 0, 255, 16, 274),
y2: scale(getCircleCoord(uint256(params.baseTokenAddress), 32, params.tokenId), 0, 255, 100, 484),
x3: scale(getCircleCoord(uint256(params.quoteTokenAddress), 48, params.tokenId), 0, 255, 16, 274),
y3: scale(getCircleCoord(uint256(params.baseTokenAddress), 48, params.tokenId), 0, 255, 100, 484)
});
return NFTSVG.generateSVG(svgParams);
}
function overRange(
int24 tickLower,
int24 tickUpper,
int24 tickCurrent
) private pure returns (int8) {
if (tickCurrent < tickLower) {
return -1;
} else if (tickCurrent > tickUpper) {
return 1;
} else {
return 0;
}
}
function scale(
uint256 n,
uint256 inMn,
uint256 inMx,
uint256 outMn,
uint256 outMx
) private pure returns (string memory) {
return (n.sub(inMn).mul(outMx.sub(outMn)).div(inMx.sub(inMn)).add(outMn)).toString();
}
function tokenToColorHex(uint256 token, uint256 offset) internal pure returns (string memory str) {
return string((token >> offset).toHexStringNoPrefix(3));
}
function getCircleCoord(
uint256 tokenAddress,
uint256 offset,
uint256 tokenId
) internal pure returns (uint256) {
return (sliceTokenHex(tokenAddress, offset) * tokenId) % 255;
}
function sliceTokenHex(uint256 token, uint256 offset) internal pure returns (uint256) {
return uint256(uint8(token >> offset));
}
}
HexStrings
HexStrings
// SPDX-License-Identifier: MIT
pragma solidity =0.7.6;
library HexStrings {
bytes16 internal constant ALPHABET = '0123456789abcdef';
/// @notice Converts a `uint256` to its ASCII `string` hexadecimal representation with fixed length.
/// @dev Credit to Open Zeppelin under MIT license https://github.com/OpenZeppelin/openzeppelin-contracts/blob/243adff49ce1700e0ecb99fe522fb16cff1d1ddc/contracts/utils/Strings.sol#L55
function toHexString(uint256 value, uint256 length) internal pure returns (string memory) {
bytes memory buffer = new bytes(2 * length + 2);
buffer[0] = '0';
buffer[1] = 'x';
for (uint256 i = 2 * length + 1; i > 1; --i) {
buffer[i] = ALPHABET[value & 0xf];
value >>= 4;
}
require(value == 0, 'Strings: hex length insufficient');
return string(buffer);
}
function toHexStringNoPrefix(uint256 value, uint256 length) internal pure returns (string memory) {
bytes memory buffer = new bytes(2 * length);
for (uint256 i = buffer.length; i > 0; i--) {
buffer[i - 1] = ALPHABET[value & 0xf];
value >>= 4;
}
return string(buffer);
}
}
NFTSVG
NFTSVG
// SPDX-License-Identifier: GPL-2.0-or-later
pragma solidity >=0.7.6;
import '@openzeppelin/contracts/utils/Strings.sol';
import '@uniswap/v3-core/contracts/libraries/BitMath.sol';
import 'base64-sol/base64.sol';
/// @title NFTSVG
/// @notice Provides a function for generating an SVG associated with a Uniswap NFT
library NFTSVG {
using Strings for uint256;
string constant curve1 = 'M1 1C41 41 105 105 145 145';
string constant curve2 = 'M1 1C33 49 97 113 145 145';
string constant curve3 = 'M1 1C33 57 89 113 145 145';
string constant curve4 = 'M1 1C25 65 81 121 145 145';
string constant curve5 = 'M1 1C17 73 73 129 145 145';
string constant curve6 = 'M1 1C9 81 65 137 145 145';
string constant curve7 = 'M1 1C1 89 57.5 145 145 145';
string constant curve8 = 'M1 1C1 97 49 145 145 145';
struct SVGParams {
string quoteToken;
string baseToken;
address poolAddress;
string quoteTokenSymbol;
string baseTokenSymbol;
string feeTier;
int24 tickLower;
int24 tickUpper;
int24 tickSpacing;
int8 overRange;
uint256 tokenId;
string color0;
string color1;
string color2;
string color3;
string x1;
string y1;
string x2;
string y2;
string x3;
string y3;
}
function generateSVG(SVGParams memory params) internal pure returns (string memory svg) {
/*
address: "0xe8ab59d3bcde16a29912de83a90eb39628cfc163",
msg: "Forged in SVG for Uniswap in 2021 by 0xe8ab59d3bcde16a29912de83a90eb39628cfc163",
sig: "0x2df0e99d9cbfec33a705d83f75666d98b22dea7c1af412c584f7d626d83f02875993df740dc87563b9c73378f8462426da572d7989de88079a382ad96c57b68d1b",
version: "2"
*/
return
string(
abi.encodePacked(
generateSVGDefs(params),
generateSVGBorderText(
params.quoteToken,
params.baseToken,
params.quoteTokenSymbol,
params.baseTokenSymbol
),
generateSVGCardMantle(params.quoteTokenSymbol, params.baseTokenSymbol, params.feeTier),
generageSvgCurve(params.tickLower, params.tickUpper, params.tickSpacing, params.overRange),
generateSVGPositionDataAndLocationCurve(
params.tokenId.toString(),
params.tickLower,
params.tickUpper
),
generateSVGRareSparkle(params.tokenId, params.poolAddress),
'</svg>'
)
);
}
function generateSVGDefs(SVGParams memory params) private pure returns (string memory svg) {
svg = string(
abi.encodePacked(
'<svg width="290" height="500" viewBox="0 0 290 500" xmlns="http://www.w3.org/2000/svg"',
" xmlns:xlink='http://www.w3.org/1999/xlink'>",
'<defs>',
'<filter id="f1"><feImage result="p0" xlink:href="data:image/svg+xml;base64,',
Base64.encode(
bytes(
abi.encodePacked(
"<svg width='290' height='500' viewBox='0 0 290 500' xmlns='http://www.w3.org/2000/svg'><rect width='290px' height='500px' fill='#",
params.color0,
"'/></svg>"
)
)
),
'"/><feImage result="p1" xlink:href="data:image/svg+xml;base64,',
Base64.encode(
bytes(
abi.encodePacked(
"<svg width='290' height='500' viewBox='0 0 290 500' xmlns='http://www.w3.org/2000/svg'><circle cx='",
params.x1,
"' cy='",
params.y1,
"' r='120px' fill='#",
params.color1,
"'/></svg>"
)
)
),
'"/><feImage result="p2" xlink:href="data:image/svg+xml;base64,',
Base64.encode(
bytes(
abi.encodePacked(
"<svg width='290' height='500' viewBox='0 0 290 500' xmlns='http://www.w3.org/2000/svg'><circle cx='",
params.x2,
"' cy='",
params.y2,
"' r='120px' fill='#",
params.color2,
"'/></svg>"
)
)
),
'" />',
'<feImage result="p3" xlink:href="data:image/svg+xml;base64,',
Base64.encode(
bytes(
abi.encodePacked(
"<svg width='290' height='500' viewBox='0 0 290 500' xmlns='http://www.w3.org/2000/svg'><circle cx='",
params.x3,
"' cy='",
params.y3,
"' r='100px' fill='#",
params.color3,
"'/></svg>"
)
)
),
'" /><feBlend mode="overlay" in="p0" in2="p1" /><feBlend mode="exclusion" in2="p2" /><feBlend mode="overlay" in2="p3" result="blendOut" /><feGaussianBlur ',
'in="blendOut" stdDeviation="42" /></filter> <clipPath id="corners"><rect width="290" height="500" rx="42" ry="42" /></clipPath>',
'<path id="text-path-a" d="M40 12 H250 A28 28 0 0 1 278 40 V460 A28 28 0 0 1 250 488 H40 A28 28 0 0 1 12 460 V40 A28 28 0 0 1 40 12 z" />',
'<path id="minimap" d="M234 444C234 457.949 242.21 463 253 463" />',
'<filter id="top-region-blur"><feGaussianBlur in="SourceGraphic" stdDeviation="24" /></filter>',
'<linearGradient id="grad-up" x1="1" x2="0" y1="1" y2="0"><stop offset="0.0" stop-color="white" stop-opacity="1" />',
'<stop offset=".9" stop-color="white" stop-opacity="0" /></linearGradient>',
'<linearGradient id="grad-down" x1="0" x2="1" y1="0" y2="1"><stop offset="0.0" stop-color="white" stop-opacity="1" /><stop offset="0.9" stop-color="white" stop-opacity="0" /></linearGradient>',
'<mask id="fade-up" maskContentUnits="objectBoundingBox"><rect width="1" height="1" fill="url(#grad-up)" /></mask>',
'<mask id="fade-down" maskContentUnits="objectBoundingBox"><rect width="1" height="1" fill="url(#grad-down)" /></mask>',
'<mask id="none" maskContentUnits="objectBoundingBox"><rect width="1" height="1" fill="white" /></mask>',
'<linearGradient id="grad-symbol"><stop offset="0.7" stop-color="white" stop-opacity="1" /><stop offset=".95" stop-color="white" stop-opacity="0" /></linearGradient>',
'<mask id="fade-symbol" maskContentUnits="userSpaceOnUse"><rect width="290px" height="200px" fill="url(#grad-symbol)" /></mask></defs>',
'<g clip-path="url(#corners)">',
'<rect fill="',
params.color0,
'" x="0px" y="0px" width="290px" height="500px" />',
'<rect style="filter: url(#f1)" x="0px" y="0px" width="290px" height="500px" />',
' <g style="filter:url(#top-region-blur); transform:scale(1.5); transform-origin:center top;">',
'<rect fill="none" x="0px" y="0px" width="290px" height="500px" />',
'<ellipse cx="50%" cy="0px" rx="180px" ry="120px" fill="#000" opacity="0.85" /></g>',
'<rect x="0" y="0" width="290" height="500" rx="42" ry="42" fill="rgba(0,0,0,0)" stroke="rgba(255,255,255,0.2)" /></g>'
)
);
}
function generateSVGBorderText(
string memory quoteToken,
string memory baseToken,
string memory quoteTokenSymbol,
string memory baseTokenSymbol
) private pure returns (string memory svg) {
svg = string(
abi.encodePacked(
'<text text-rendering="optimizeSpeed">',
'<textPath startOffset="-100%" fill="white" font-family="\'Courier New\', monospace" font-size="10px" xlink:href="#text-path-a">',
baseToken,
unicode' • ',
baseTokenSymbol,
' <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" />',
'</textPath> <textPath startOffset="0%" fill="white" font-family="\'Courier New\', monospace" font-size="10px" xlink:href="#text-path-a">',
baseToken,
unicode' • ',
baseTokenSymbol,
' <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" /> </textPath>',
'<textPath startOffset="50%" fill="white" font-family="\'Courier New\', monospace" font-size="10px" xlink:href="#text-path-a">',
quoteToken,
unicode' • ',
quoteTokenSymbol,
' <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s"',
' repeatCount="indefinite" /></textPath><textPath startOffset="-50%" fill="white" font-family="\'Courier New\', monospace" font-size="10px" xlink:href="#text-path-a">',
quoteToken,
unicode' • ',
quoteTokenSymbol,
' <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" /></textPath></text>'
)
);
}
function generateSVGCardMantle(
string memory quoteTokenSymbol,
string memory baseTokenSymbol,
string memory feeTier
) private pure returns (string memory svg) {
svg = string(
abi.encodePacked(
'<g mask="url(#fade-symbol)"><rect fill="none" x="0px" y="0px" width="290px" height="200px" /> <text y="70px" x="32px" fill="white" font-family="\'Courier New\', monospace" font-weight="200" font-size="36px">',
quoteTokenSymbol,
'/',
baseTokenSymbol,
'</text><text y="115px" x="32px" fill="white" font-family="\'Courier New\', monospace" font-weight="200" font-size="36px">',
feeTier,
'</text></g>',
'<rect x="16" y="16" width="258" height="468" rx="26" ry="26" fill="rgba(0,0,0,0)" stroke="rgba(255,255,255,0.2)" />'
)
);
}
function generageSvgCurve(
int24 tickLower,
int24 tickUpper,
int24 tickSpacing,
int8 overRange
) private pure returns (string memory svg) {
string memory fade = overRange == 1 ? '#fade-up' : overRange == -1 ? '#fade-down' : '#none';
string memory curve = getCurve(tickLower, tickUpper, tickSpacing);
svg = string(
abi.encodePacked(
'<g mask="url(',
fade,
')"',
' style="transform:translate(72px,189px)">'
'<rect x="-16px" y="-16px" width="180px" height="180px" fill="none" />'
'<path d="',
curve,
'" stroke="rgba(0,0,0,0.3)" stroke-width="32px" fill="none" stroke-linecap="round" />',
'</g><g mask="url(',
fade,
')"',
' style="transform:translate(72px,189px)">',
'<rect x="-16px" y="-16px" width="180px" height="180px" fill="none" />',
'<path d="',
curve,
'" stroke="rgba(255,255,255,1)" fill="none" stroke-linecap="round" /></g>',
generateSVGCurveCircle(overRange)
)
);
}
function getCurve(
int24 tickLower,
int24 tickUpper,
int24 tickSpacing
) internal pure returns (string memory curve) {
int24 tickRange = (tickUpper - tickLower) / tickSpacing;
if (tickRange <= 4) {
curve = curve1;
} else if (tickRange <= 8) {
curve = curve2;
} else if (tickRange <= 16) {
curve = curve3;
} else if (tickRange <= 32) {
curve = curve4;
} else if (tickRange <= 64) {
curve = curve5;
} else if (tickRange <= 128) {
curve = curve6;
} else if (tickRange <= 256) {
curve = curve7;
} else {
curve = curve8;
}
}
function generateSVGCurveCircle(int8 overRange) internal pure returns (string memory svg) {
string memory curvex1 = '73';
string memory curvey1 = '190';
string memory curvex2 = '217';
string memory curvey2 = '334';
if (overRange == 1 || overRange == -1) {
svg = string(
abi.encodePacked(
'<circle cx="',
overRange == -1 ? curvex1 : curvex2,
'px" cy="',
overRange == -1 ? curvey1 : curvey2,
'px" r="4px" fill="white" /><circle cx="',
overRange == -1 ? curvex1 : curvex2,
'px" cy="',
overRange == -1 ? curvey1 : curvey2,
'px" r="24px" fill="none" stroke="white" />'
)
);
} else {
svg = string(
abi.encodePacked(
'<circle cx="',
curvex1,
'px" cy="',
curvey1,
'px" r="4px" fill="white" />',
'<circle cx="',
curvex2,
'px" cy="',
curvey2,
'px" r="4px" fill="white" />'
)
);
}
}
function generateSVGPositionDataAndLocationCurve(
string memory tokenId,
int24 tickLower,
int24 tickUpper
) private pure returns (string memory svg) {
string memory tickLowerStr = tickToString(tickLower);
string memory tickUpperStr = tickToString(tickUpper);
uint256 str1length = bytes(tokenId).length + 4;
uint256 str2length = bytes(tickLowerStr).length + 10;
uint256 str3length = bytes(tickUpperStr).length + 10;
(string memory xCoord, string memory yCoord) = rangeLocation(tickLower, tickUpper);
svg = string(
abi.encodePacked(
' <g style="transform:translate(29px, 384px)">',
'<rect width="',
uint256(7 * (str1length + 4)).toString(),
'px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />',
'<text x="12px" y="17px" font-family="\'Courier New\', monospace" font-size="12px" fill="white"><tspan fill="rgba(255,255,255,0.6)">ID: </tspan>',
tokenId,
'</text></g>',
' <g style="transform:translate(29px, 414px)">',
'<rect width="',
uint256(7 * (str2length + 4)).toString(),
'px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />',
'<text x="12px" y="17px" font-family="\'Courier New\', monospace" font-size="12px" fill="white"><tspan fill="rgba(255,255,255,0.6)">Min Tick: </tspan>',
tickLowerStr,
'</text></g>',
' <g style="transform:translate(29px, 444px)">',
'<rect width="',
uint256(7 * (str3length + 4)).toString(),
'px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />',
'<text x="12px" y="17px" font-family="\'Courier New\', monospace" font-size="12px" fill="white"><tspan fill="rgba(255,255,255,0.6)">Max Tick: </tspan>',
tickUpperStr,
'</text></g>'
'<g style="transform:translate(226px, 433px)">',
'<rect width="36px" height="36px" rx="8px" ry="8px" fill="none" stroke="rgba(255,255,255,0.2)" />',
'<path stroke-linecap="round" d="M8 9C8.00004 22.9494 16.2099 28 27 28" fill="none" stroke="white" />',
'<circle style="transform:translate3d(',
xCoord,
'px, ',
yCoord,
'px, 0px)" cx="0px" cy="0px" r="4px" fill="white"/></g>'
)
);
}
function tickToString(int24 tick) private pure returns (string memory) {
string memory sign = '';
if (tick < 0) {
tick = tick * -1;
sign = '-';
}
return string(abi.encodePacked(sign, uint256(tick).toString()));
}
function rangeLocation(int24 tickLower, int24 tickUpper) internal pure returns (string memory, string memory) {
int24 midPoint = (tickLower + tickUpper) / 2;
if (midPoint < -100_000) {
return ('8', '7');
} else if (midPoint < -50_000) {
return ('8', '10.5');
} else if (midPoint < -10_000) {
return ('8', '14.25');
} else if (midPoint < -100) {
return ('10', '18');
} else if (midPoint < 0) {
return ('11', '21');
} else if (midPoint < 100) {
return ('13', '23');
} else if (midPoint < 10_000) {
return ('15', '25');
} else if (midPoint < 50_000) {
return ('18', '26');
} else if (midPoint < 100_000) {
return ('21', '27');
} else {
return ('24', '27');
}
}
function generateSVGRareSparkle(uint256 tokenId, address poolAddress) private pure returns (string memory svg) {
if (isRare(tokenId, poolAddress)) {
svg = string(
abi.encodePacked(
'<g style="transform:translate(226px, 392px)"><rect width="36px" height="36px" rx="8px" ry="8px" fill="none" stroke="rgba(255,255,255,0.2)" />',
'<g><path style="transform:translate(6px,6px)" d="M12 0L12.6522 9.56587L18 1.6077L13.7819 10.2181L22.3923 6L14.4341 ',
'11.3478L24 12L14.4341 12.6522L22.3923 18L13.7819 13.7819L18 22.3923L12.6522 14.4341L12 24L11.3478 14.4341L6 22.39',
'23L10.2181 13.7819L1.6077 18L9.56587 12.6522L0 12L9.56587 11.3478L1.6077 6L10.2181 10.2181L6 1.6077L11.3478 9.56587L12 0Z" fill="white" />',
'<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="10s" repeatCount="indefinite"/></g></g>'
)
);
} else {
svg = '';
}
}
function isRare(uint256 tokenId, address poolAddress) internal pure returns (bool) {
bytes32 h = keccak256(abi.encodePacked(tokenId, poolAddress));
return uint256(h) < type(uint256).max / (1 + BitMath.mostSignificantBit(tokenId) * 2);
}
}
最後に
今回の記事では、Bunzzの新機能『DeCipher』を使用して、UniswapV3の「NFTDescriptor」のコントラクトを見てきました。
いかがだったでしょうか？
今後も特定のNFTやコントラクトをピックアップしてまとめて行きたいと思います。
普段はブログやQiitaでブロックチェーンやAIに関する記事を挙げているので、よければ見ていってください！
Discussion